Introducción a JavaScript: La Lógica de la Web

¡Felicidades por llegar hasta aquí! Has construido esqueletos (HTML), los has vestido y organizado (CSS, Flexbox, Grid), y los has hecho adaptables (Diseño Responsivo). Ahora, es el momento de darles **vida e interactividad** con **JavaScript (JS)**.

JavaScript es el tercer pilar del desarrollo web moderno. Es el lenguaje de programación que hace que tu página web sea **dinámica**. Piensa en JavaScript como el cerebro de tu sitio web: es lo que le permite *hacer* cosas y responder a las acciones del usuario.

—

1. ¿Qué es JavaScript y para qué sirve?

JavaScript es un lenguaje de programación de alto nivel que se ejecuta principalmente en el navegador del usuario (lo que se conoce como «lado del cliente»). Sus usos son amplísimos:

  • Manipulación del DOM: Cambiar el contenido HTML y los estilos CSS de una página en tiempo real.
  • Manejo de Eventos: Reaccionar a las acciones del usuario (clics, movimientos del ratón, envío de formularios, pulsaciones de teclado).
  • Validación de Formularios: Comprobar que los datos ingresados por el usuario son correctos antes de enviarlos a un servidor.
  • Peticiones de Red (AJAX/Fetch): Cargar datos de servidores sin recargar la página (ej. un feed de noticias, resultados de búsqueda).
  • Animaciones y Efectos: Crear interacciones y animaciones complejas que van más allá de lo que CSS puede hacer.
  • Aplicaciones Web Completas: Con frameworks modernos (React, Angular, Vue), JS se usa para construir aplicaciones web de una sola página (SPAs) muy complejas.
—

2. Cómo Incluir JavaScript en tu HTML

Hay dos formas principales de incluir JavaScript en tu documento HTML:

a. JavaScript Interno (`<script>` en el HTML)

Puedes escribir código JavaScript directamente dentro de tu archivo HTML, utilizando la etiqueta <script>.

<body>
    <h1>Mi Página Interactiva</h1>

    <!-- Es una buena práctica poner los scripts al final del body -->
    <script>
        // Aquí va tu código JavaScript
        console.log("¡Hola desde JavaScript interno!");
    </script>
</body>

Ubicación: Es una buena práctica colocar las etiquetas <script> justo antes de la etiqueta de cierre </body>. Esto asegura que todo el HTML se ha cargado antes de que JavaScript intente manipularlo.

b. JavaScript Externo (Archivos `.js` separados)

La forma más común y organizada es escribir tu JavaScript en archivos separados (con extensión `.js`) y luego vincularlos a tu HTML. Es similar a cómo vinculas tus archivos CSS.

<body>
    <h1>Mi Página Interactiva</h1>

    <!-- Enlazar un archivo JavaScript externo -->
    <script src="main.js"></script>
</body>

Ventajas: Mejor organización, código reutilizable en múltiples páginas, y el navegador puede cachear el archivo JS, lo que acelera la carga en visitas futuras.

—

3. Conceptos Básicos de JavaScript

a. Variables

Las variables son «contenedores» para guardar información. Puedes usar let o const.

  • let: Para valores que pueden cambiar.
  • const: Para valores que no cambiarán (constantes).
let nombre = "Juan";
let edad = 30;
const PI = 3.14159;

edad = 31; // Esto es válido con 'let'
// PI = 3.14; // Esto causaría un error con 'const'

b. Tipos de Datos Comunes

  • **String (Cadena de texto):** Texto, entre comillas. ("Hola", 'Mundo')
  • **Number (Número):** Números enteros o decimales. (10, 3.14)
  • **Boolean (Booleano):** Verdadero o falso. (true, false)
  • **Array (Arreglo/Lista):** Una colección ordenada de elementos. ([1, 2, 3], ["manzana", "pera"])
  • **Object (Objeto):** Una colección de pares clave-valor. ({ nombre: "Ana", edad: 25 })
  • **Null:** Ausencia intencional de cualquier valor.
  • **Undefined:** Una variable declarada pero sin valor asignado.

c. Operadores

Para realizar operaciones con los datos:

  • **Aritméticos:** +, -, *, /, % (módulo).
  • **Comparación:** == (igualdad de valor), === (igualdad estricta: valor y tipo), !=, !==, <, >, <=, >=.
  • **Lógicos:** && (AND), || (OR), ! (NOT).
let resultado = 10 + 5; // 15
let esMayor = 10 > 5; // true
let puedeEntrar = (edad >= 18 && nombre !== "");

d. Funciones

Las funciones son bloques de código reutilizables que realizan una tarea específica. Puedes definirlas y luego «llamarlas» cuando las necesites.

function saludar(nombre) {
    return "¡Hola, " + nombre + "!";
}

let mensaje = saludar("Carlos"); // mensaje ahora es "¡Hola, Carlos!"
console.log(mensaje);

e. El DOM (Document Object Model) y Eventos

JavaScript interactúa con tu página web a través del **DOM**, que es una representación en forma de árbol de tu HTML. JavaScript puede «seleccionar» elementos HTML y modificar sus propiedades, contenido o estilos.

Los **Eventos** son acciones que ocurren en el navegador (un clic, una tecla presionada, una página cargada). JavaScript te permite «escuchar» estos eventos y ejecutar código cuando suceden.

// 1. Seleccionar un elemento HTML por su ID
const miBoton = document.getElementById("miBoton");

// 2. Añadir un "escuchador de eventos" (event listener) al botón
miBoton.addEventListener("click", function() {
    // 3. Este código se ejecuta cuando se hace clic en el botón
    alert("¡Has hecho clic en el botón!");
});
—

¡Manos a la Obra con JavaScript!

Aquí tienes unos ejemplos interactivos para que veas JavaScript en acción.

Ejemplo 1: Cambiar Texto al Hacer Clic

Haz clic en el botón de abajo para cambiar este texto.

Ejemplo 2: Contador de Clicks

Número de clics: 0

Ejemplo 3: Ocultar/Mostrar Elemento (Toggle)

¡Soy una caja que puedes ocultar!

Los resultados de las acciones de JavaScript se mostrarán aquí (o en la consola del navegador).

—

¡Felicidades! Has dado tus primeros pasos en el mundo de JavaScript. Esta es solo la punta del iceberg, pero ya tienes las bases para entender cómo la interactividad llega a tus páginas web.

¿Qué te gustaría explorar a continuación?

  • **El Modelo de Caja (Box Model) a fondo y otras propiedades de posicionamiento clásico** (`position`, `z-index`, `float`, `clear`): Aunque Flexbox y Grid son modernos, entender estos conceptos «clásicos» te dará un conocimiento completo del layout y la depuración, y te ayudará a entender por qué Flexbox y Grid eran tan necesarios.
  • **Formularios en HTML:** Crear y estilizar formularios para recolectar información del usuario.
  • **Conceptos más avanzados de JavaScript:** Estructuras de control (if/else, bucles), arreglos, objetos, manipulación avanzada del DOM.
  • **Control de versiones con Git/GitHub:** Esencial para colaborar y gestionar tus proyectos de código.

¡Tú marcas el ritmo y el camino!