¿Qué es JavaScript?

JavaScript es un lenguaje de programación interpretado que se ejecuta en el navegador del usuario.

Permite la manipulación del contenido, interactividad y dinamismo en páginas web.

Es un lenguaje basado en eventos, asincrónico y de tipado dinámico.

Ejemplo

console.log("¡Hola, Mundo!");

alert("¡Hola, Mundo!");

Historia de JavaScript

JavaScript fue creado en 1995 por Brendan Eich mientras trabajaba en Netscape.

Fue diseñado en solo 10 días y su propósito inicial era hacer las páginas web interactivas.

Desde entonces, ha evolucionado hasta convertirse en uno de los lenguajes más importantes del desarrollo web.

HTML y CSS

JavaScript trabaja en conjunto con HTML y CSS para crear experiencias dinámicas en la web

• HTML: Proporciona la estructura del contenido.

• CSS: Define el estilo y la apariencia.

• JavaScript: Manipula el contenido y la interactividad.

Variables en JavaScript

Tenemos 3 formas de definir variables

• var: Desuso, ya que tiene ámbito global o de función.

• let: Tiene ámbito de bloque y permite reasignación.

• const: Tiene ámbito de bloque y su valor no puede cambiar.

Ejemplo

let nombre = "Ana";
const edad = 30;
console.log(`Hola, ${nombre}. Tienes ${edad} años.`);

Funciones en JavaScript

Las funciones en JavaScript permiten encapsular y reutilizar el código.

Funciones Declarativas

Son funciones definidas con la palabra clave function y pueden ser llamadas antes de su declaración.

console.log(saludar("Juan"));

function saludar(nombre) {
    return `Hola, ${nombre}!`;
}

Funciones Expresivas

Son funciones almacenadas en una variable. No pueden ser llamadas antes de su definición.

const despedir = function(nombre) {
    return `Adiós, ${nombre}!`;
};
console.log(despedir("Juan"));

const usuario = {
    nombre: "Ana",
    saludar: function() {
        console.log(`Hola, soy ${this.nombre}`);
    }
};

usuario.saludar();

Arrow Functions

Introducidas en ES6, permiten escribir funciones más concisas y sin necesidad de return explícito en funciones de una línea.

const sumar = (a, b) => a + b;
console.log(sumar(2, 3));

Funciones Callback

Funciones pasadas como argumento a otra función.

console.log("Inicio");

setTimeout(() => {
    console.log("Esto aparece después de 2 segundos");
}, 2000);

console.log("Fin");
                        

¿Qué es el DOM?

El DOM (Document Object Model) es una representación estructurada de la página web.

Permite acceder y modificar los elementos HTML desde JavaScript.

Ejemplo

console.log(document.title);

Selección de Nodos del DOM

Para acceder a elementos del DOM, podemos usar alguna de estas funciones:

• document.getElementById("id"): Selecciona un elemento por su ID.

• document.querySelector("selector"): Selecciona el primer elemento que coincide con el selector.

• document.querySelectorAll("selector"): Selecciona todos los elementos que coinciden con el selector.

Ejemplos

let elemento = document.querySelector("h1");
console.log(elemento.textContent);

let elementos = document.querySelectorAll(".text");
elementos.forEach(el => console.log(el.textContent));

Manipulando el DOM

Crear elementos

Podemos crear y modificar elementos HTML dinámicamente.

let nuevoParrafo = document.createElement("p");

nuevoParrafo.textContent = "Párrafo agregado con JavaScript.";

document.body.appendChild(nuevoParrafo);

Modificar elementos

JavaScript permite modificar los estilos de un elemento.

let titulo = document.querySelector("h1");
titulo.style.color = "blue";

Event Listeners

Los event listeners permiten ejecutar código cuando ocurre un evento en la página web.

Click en un botón

El siguiente código muestra una alerta al hacer clic en un botón.

document.getElementById("btn").addEventListener("click", function() {
    alert("¡Botón clickeado!");
});

Tipos de eventos comunes

• click: Cuando se hace clic en un elemento.

• mouseover: Cuando el mouse pasa sobre un elemento.

• keydown: Cuando se presiona una tecla.

• submit: Cuando se envía un formulario.

Ejemplo

Al hacer clic en el botón, se muestra un mensaje personalizado con el nombre ingresado.

document.getElementById("miBoton").addEventListener("click", function() {
    let nombre = document.getElementById("nombre").value;
    if (nombre.trim() !== "") {
        alert("¡Hola, " + nombre + "!");
    } else {
        alert("Por favor, ingresa tu nombre.");
    }
});