Capítulo 5: Interactividad con JavaScript

Sección 5.1: Introducción a JavaScript

JavaScript es un lenguaje de programación esencial en el desarrollo web. Permite agregar interactividad a las páginas HTML y controlar el comportamiento de los elementos HTML. Aquí están los conceptos fundamentales:

• JavaScript es un lenguaje de alto nivel: Esto significa que es fácil de leer y escribir, lo que lo hace accesible para los desarrolladores de todos los niveles de experiencia.
• Integración con HTML: Puedes incluir JavaScript directamente en tu documento HTML usando etiquetas <script>.

Por ejemplo:

<script>
    // Tu código JavaScript aquí
</script>

• Manipulación del DOM: Puedes usar JavaScript para acceder y modificar los elementos del Document Object Model (DOM), lo que te permite cambiar el contenido y la apariencia de una página web en tiempo real.

Sección 5.2: Variables y Tipos de Datos

En JavaScript, puedes declarar variables para almacenar datos. Los tipos de datos comunes en JavaScript incluyen números, cadenas de texto y booleanos. Aquí hay ejemplos:

var numero = 42; // Variable numérica
var nombre = "Juan"; // Variable de texto (cadena)
var activo = true; // Variable booleana

Sección 5.3: Funciones en JavaScript

Las funciones son bloques de código reutilizables que realizan tareas específicas. Aquí hay un ejemplo simple de una función en JavaScript:

function saludar(nombre) {
    alert("Hola, " + nombre);
}
saludar("Juan"); // Llama a la función y muestra una alerta

Sección 5.4: Eventos y Manipulación del DOM

JavaScript se utiliza comúnmente para responder a eventos, como clics de ratón o envíos de formularios. Puedes seleccionar elementos HTML y agregar funciones que se ejecutarán cuando ocurran estos eventos.

Ejemplo:

// Selecciona un botón con id "boton-click" y agrega un manejador de clic
document.getElementById("boton-click").addEventListener("click", function() {
    alert("Has hecho clic en el botón");
});

Sección 5.5: Ejemplos y Ejercicios Resueltos

Ejemplo de Uso de Variables:

var precio = 29.99;
var descuento = 5.00;
var precioFinal = precio - descuento;
console.log("Precio final: $" + precioFinal);

Ejercicio 1: Saludo Personalizado

Crea una función en JavaScript que solicite al usuario su nombre y luego muestre un mensaje de saludo personalizado.

function saludar() {
    var nombre = prompt("Por favor, introduce tu nombre");
    alert("Hola, " + nombre + "!");
}

saludar();

Ejercicio 2: Calculadora Simple

Crea una página web con dos campos de entrada de números y botones para sumar, restar, multiplicar y dividir. Utiliza JavaScript para realizar las operaciones y mostrar el resultado en la página.

<input type="number" id="num1">
<input type="number" id="num2">
<button onclick="sumar()">Sumar</button>
<button onclick="restar()">Restar</button>
<button onclick="multiplicar()">Multiplicar</button>
<button onclick="dividir()">Dividir</button>
<p id="resultado"></p>

<script>
    function sumar() {
        var num1 = parseFloat(document.getElementById("num1").value);
        var num2 = parseFloat(document.getElementById("num2").value);
        var resultado = num1 + num2;
        document.getElementById("resultado").innerText = "Resultado: " + resultado;
    }

    function restar() {
        // Haz lo mismo para restar, multiplicar y dividir
    }
</script>

Estos ejemplos y ejercicios te ayudarán a comprender los conceptos básicos de JavaScript y cómo interactúa con el HTML para crear páginas web interactivas. Con la práctica, podrás desarrollar aplicaciones web más sofisticadas y dinámicas.

Sección 5.6: Validación de Formularios con JavaScript

La validación de formularios es esencial para garantizar que los datos ingresados por los usuarios sean correctos y coherentes. JavaScript es una herramienta poderosa para realizar esta validación. Aquí están algunos conceptos clave:

• Eventos de Formulario: Puedes utilizar eventos como «submit» para interceptar el envío del formulario y validar los datos antes de enviarlos al servidor.

document.getElementById("miFormulario").addEventListener("submit", function(event) {
    // Realiza la validación aquí
    if (!validarFormulario()) {
        event.preventDefault(); // Evita que el formulario se envíe
    }
});

Validación de Datos: Puedes verificar que los campos cumplan con ciertas condiciones, como longitud adecuada, formato de correo electrónico o números válidos.

function validarFormulario() {
    var nombre = document.getElementById("nombre").value;
    if (nombre.length < 3) {
        alert("El nombre es demasiado corto");
        return false;
    }
    // Agrega más validaciones aquí
    return true; // Si todas las validaciones son exitosas
}

Sección 5.7: Mejora de la Experiencia del Usuario en una Tienda en Línea

La experiencia del usuario es un aspecto crítico en una tienda en línea. JavaScript se utiliza para crear características que mejoran la experiencia del usuario. Algunos ejemplos son:

• Carrito de Compras en Tiempo Real: Permite a los usuarios agregar productos al carrito y ver su contenido sin necesidad de recargar la página.
• Filtros y Búsquedas Avanzadas: Los usuarios pueden refinar su búsqueda de productos utilizando filtros interactivos sin salir de la página de resultados.
• Valoración y Comentarios de Productos: Los usuarios pueden calificar productos y dejar comentarios directamente en la página de productos.

Sección 5.8: Ejemplos y Ejercicios Resueltos

Ejemplo de Validación de Formulario:

function validarFormulario() {
    var email = document.getElementById("email").value;
    var contraseña = document.getElementById("contraseña").value;

    if (email === "" || contraseña === "") {
        alert("Por favor, completa todos los campos.");
        return false;
    }

    if (!validarCorreoElectrónico(email)) {
        alert("El correo electrónico no es válido.");
        return false;
    }

    return true;
}

function validarCorreoElectrónico(correo) {
    var expresión = /\S+@\S+\.\S+/;
    return expresión.test(correo);
}

Ejercicio 1: Mejora de la Experiencia de Compra

Mejora la experiencia del usuario en una tienda en línea al permitir que los usuarios añadan productos al carrito y vean el resumen del carrito sin salir de la página de productos. Utiliza JavaScript para lograr esto.

<!-- Botón para agregar al carrito -->
<button onclick="agregarAlCarrito('Producto 1', 19.99)">Agregar al Carrito</button>
<button onclick="agregarAlCarrito('Producto 2', 29.99)">Agregar al Carrito</button>

<!-- Div para mostrar el resumen del carrito -->
<div id="resumen-carrito">
    <h2>Carrito de Compras</h2>
    <ul id="lista-carrito"></ul>
    <p id="total-carrito">Total: $0.00</p>
</div>

<script>
    var carrito = [];

    function agregarAlCarrito(producto, precio) {
        carrito.push({ producto, precio });
        mostrarResumenCarrito();
    }

    function mostrarResumenCarrito() {
        var listaCarrito = document.getElementById("lista-carrito");
        var totalCarrito = document.getElementById("total-carrito");
        listaCarrito.innerHTML = "";
        var total = 0;

        carrito.forEach(function(item) {
            var listItem = document.createElement("li");
            listItem.textContent = item.producto + " - $" + item.precio.toFixed(2);
            listaCarrito.appendChild(listItem);
            total += item.precio;
        });

        totalCarrito.textContent = "Total: $" + total.toFixed(2);
    }
</script>

Este ejemplo mejora la experiencia de compra permitiendo a los usuarios agregar productos al carrito y ver el resumen del carrito en tiempo real. Los ejercicios y ejemplos presentados ayudarán a los lectores a comprender cómo utilizar JavaScript para validar formularios y mejorar la experiencia del usuario en una tienda en línea.