JavaScript es un potente lenguaje de secuencias de comandos que se ejecuta en el navegador, permitiéndonos manipular el contenido y el comportamiento de la página web. Si lo comparamos con una casa, JavaScript funciona como la funcionalidad de la casa, abarcando elementos como los sistemas eléctricos, la fontanería, la automatización del hogar y la calefacción central; en esencia, todo lo que proporciona funcionalidad.

A continuación, se muestra cómo podemos agregar JavaScript al documento HTML:

JavaScript en línea

Podemos incluir JavaScript directamente dentro del documento HTML utilizando la etiqueta <script>. Este método es útil para agregar scripts rápidos y puntuales.

Ejemplo:

Por favor, haz clic en el botón Click Me a continuación.

JavaScript externo

Para scripts más extensos o cuando se desea reutilizar código en varias páginas, es común utilizar archivos JavaScript externos. Cree un archivo JavaScript separado (por ejemplo, index.js) y enlácelo al documento HTML utilizando la etiqueta <script>.

Ejemplo:

Asegúrese de revisar los tres archivos en el ejemplo proporcionado.

Fundamentos de JavaScript

JavaScript permite agregar interactividad y comportamiento dinámico a las páginas web. A continuación, se presentan algunos conceptos básicos:

Variables

Las variables se utilizan para almacenar valores de datos. Se pueden declarar variables utilizando las palabras clave let o const.

let age = 30;
const name = "Peter";

Funciones

Las funciones son bloques de código reutilizables que realizan una tarea específica. Se pueden definir funciones utilizando la palabra clave function.

function greet() {
  alert('Hello, World!');
}

Manipulación del DOM

El Modelo de Objetos del Documento (DOM) representa la estructura de una página web. JavaScript permite manipular el DOM para cambiar el contenido y el comportamiento de la página web de forma dinámica.

document.getElementById('myElement').innerHTML = 'New Content';

Sentencias condicionales

Las sentencias condicionales permiten ejecutar diferentes bloques de código según condiciones especificadas.

if (age >= 21) {
  alert('You are an adult.');
} else {
  alert('You are a minor.');
}

Tutorial en video