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 sistemas eléctricos, plomería, automatización del hogar y 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. Podemos declarar variables usando 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. Podemos definir funciones usando 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 nos 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