El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

JavaScript para UIs Interactivas

Siguiente ►
►

En este módulo, exploraremos cómo JavaScript puede transformar una interfaz de usuario estática en una experiencia interactiva y dinámica. JavaScript es un lenguaje de programación esencial para el desarrollo web, y su capacidad para manipular el DOM (Document Object Model) lo convierte en una herramienta poderosa para crear interfaces de usuario interactivas.

Conceptos Clave de JavaScript en UI

  1. Manipulación del DOM:

    • El DOM es una representación estructurada de un documento HTML.
    • JavaScript permite seleccionar, modificar y crear elementos en el DOM.
    • Métodos comunes incluyen document.getElementById(), document.querySelector(), y document.createElement().

  2. Eventos y Manejadores de Eventos:

    • Los eventos son acciones que ocurren en el navegador, como clics, desplazamientos o cambios de entrada.
    • Los manejadores de eventos son funciones que se ejecutan en respuesta a un evento.
    • Ejemplo de eventos: click, mouseover, keydown.

  3. Manipulación de Estilos:

    • JavaScript puede cambiar los estilos CSS de los elementos para alterar su apariencia.
    • Métodos como element.style.property permiten modificar propiedades CSS directamente.

  4. Validación de Formularios:

    • JavaScript se utiliza para validar datos de entrada antes de enviarlos al servidor.
    • Esto mejora la experiencia del usuario al proporcionar retroalimentación inmediata.

  5. AJAX (Asynchronous JavaScript and XML):

    • Permite la actualización de partes de una página web sin recargarla completamente.
    • Utiliza el objeto XMLHttpRequest o la API fetch para realizar solicitudes HTTP asíncronas.

Ejemplo Práctico: Creando una Lista Interactiva

Vamos a crear una lista interactiva donde los usuarios pueden agregar y eliminar elementos.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista Interactiva</title>
    <style>
        #itemList {
            list-style-type: none;
        }
        .item {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <h1>Lista de Tareas</h1>
    <input type="text" id="newItem" placeholder="Agregar nueva tarea">
    <button id="addItem">Agregar</button>
    <ul id="itemList"></ul>

    <script src="script.js"></script>
</body>
</html>

JavaScript

document.getElementById('addItem').addEventListener('click', function() {
    const newItemText = document.getElementById('newItem').value;
    if (newItemText.trim() !== '') {
        const li = document.createElement('li');
        li.textContent = newItemText;
        li.className = 'item';
        
        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Eliminar';
        deleteButton.addEventListener('click', function() {
            li.remove();
        });

        li.appendChild(deleteButton);
        document.getElementById('itemList').appendChild(li);
        document.getElementById('newItem').value = '';
    }
});

Explicación del Código

  • HTML: Creamos una estructura básica con un campo de entrada, un botón y una lista desordenada.
  • JavaScript:
    • Evento de Clic: Se añade un manejador de eventos al botón "Agregar" que crea un nuevo elemento de lista (li) con el texto del campo de entrada.
    • Validación: Se verifica que el campo de entrada no esté vacío antes de agregar el elemento.
    • Eliminar Elemento: Cada elemento de la lista tiene un botón "Eliminar" que, al ser clicado, remueve el elemento de la lista.

Ejercicios Prácticos

  1. Ejercicio 1: Añadir un Contador de Elementos

    • Modifica el ejemplo anterior para incluir un contador que muestre el número total de elementos en la lista.

  2. Ejercicio 2: Editar Elementos de la Lista

    • Permite que los elementos de la lista sean editables al hacer doble clic sobre ellos.

Soluciones

Ejercicio 1:

let itemCount = 0;
const itemCountDisplay = document.createElement('p');
document.body.insertBefore(itemCountDisplay, document.getElementById('itemList'));

function updateItemCount() {
    itemCountDisplay.textContent = `Total de tareas: ${itemCount}`;
}

document.getElementById('addItem').addEventListener('click', function() {
    const newItemText = document.getElementById('newItem').value;
    if (newItemText.trim() !== '') {
        const li = document.createElement('li');
        li.textContent = newItemText;
        li.className = 'item';
        
        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Eliminar';
        deleteButton.addEventListener('click', function() {
            li.remove();
            itemCount--;
            updateItemCount();
        });

        li.appendChild(deleteButton);
        document.getElementById('itemList').appendChild(li);
        document.getElementById('newItem').value = '';
        itemCount++;
        updateItemCount();
    }
});

updateItemCount();

Ejercicio 2:

document.getElementById('addItem').addEventListener('click', function() {
    const newItemText = document.getElementById('newItem').value;
    if (newItemText.trim() !== '') {
        const li = document.createElement('li');
        li.textContent = newItemText;
        li.className = 'item';
        
        li.addEventListener('dblclick', function() {
            const newText = prompt('Edita la tarea:', li.textContent);
            if (newText !== null) {
                li.firstChild.textContent = newText;
            }
        });

        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Eliminar';
        deleteButton.addEventListener('click', function() {
            li.remove();
        });

        li.appendChild(deleteButton);
        document.getElementById('itemList').appendChild(li);
        document.getElementById('newItem').value = '';
    }
});

Conclusión

En esta sección, hemos aprendido cómo JavaScript puede ser utilizado para crear interfaces de usuario interactivas mediante la manipulación del DOM, el manejo de eventos y la validación de formularios. Estos conceptos son fundamentales para cualquier desarrollador frontend que desee crear experiencias de usuario dinámicas y atractivas. En el próximo módulo, exploraremos cómo los frameworks y librerías pueden simplificar y potenciar el desarrollo de interfaces de usuario.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados