3.9 Javascript: Interactividad mediante eventos

1. Conoce ¿Qué es Javascript?

Desde mostrar una alerta, cambiar el color de un botón hasta detonar efectos visuales, javascript es el motor que reacciona a lo que hace el usuario.

1. Es uno de los tres pilares del desarrollo web: HTML estructura, CSS estilo y JavaScript interactividad.
2. A diferencia de HTML y CSS, JavaScript sí es un lenguaje de programación: permite usar lógica, hacer cálculos y tomar decisiones según la interacción del usuario.
3. Funciona en todos los navegadores modernos y no requiere instalación adicional.
4. Aunque también se puede usar en servidores, en este curso nos enfocamos en su uso dentro del navegador.

2. ¿Dónde se escribe javascript?

JavaScript se puede escribir de tres formas principales:

1. Código en línea

Se escribe dentro de un atributo HTML, como onclick.

<button onclick="alert('¡Hola mundo!')">Haz clic</button>

2. Código dentro del mismo archivo HTML

Integrado, dentro de una etiqueta <script> en el mismo archivo HTML.

<button onclick="saludar()">Haz clic</button>
<script>
  function saludar() {
    alert("¡Hola mundo!");
  }
</script>

3. Código en un archivo externo

Externo, en un archivo separado con extensión .js que se enlaza al HTML.

<!-- HTML -->
<script src="app.js"></script>
// app.js
alert("¡Hola mundo desde un archivo externo!");

3. Sintaxis básica de JavaScript

Se basa en instrucciones bien organizadas:

1. Las variables se declaran con let, const o var.
2. Las funciones agrupan bloques de código reutilizable.
3. Se usan paréntesis (), llaves {} y a veces punto y coma ;.

Tipos de datos básicos:

1. String → texto: "Hola"
2. Number → números: 42, 3.14
3. Boolean → valores lógicos: true o false

Declaración de variables:

1. let → opción común y flexible
2. const → para valores fijos
3. var → forma antigua, en desuso

let nombre = "Juan";  // Texto (String)
let edad = 25;        // Número (Number
console.log(nombre);  // Imprime el valor en la consola

4. Detecta y comprende los eventos del usuario

Un evento es cualquier cosa que ocurre en la página: un clic, una tecla presionada, un campo completado, etc. Cuando ocurre un evento, podemos ejecutar una función como respuesta.

Esta es la base de la interactividad en la web, estos son algunos comunes:

1. click: al presionar un botón
2. input: al escribir en un campo
3. submit: al enviar un formulario

La forma más común de trabajar con ellos es usando addEventListener(), que permite asociar una acción a un evento específico.

document.addEventListener('click', () => {
  alert('¡Haz hecho clic!');
});


const boton = document.querySelector('button');
boton.addEventListener('click', function() {
  alert('Hola Ana');
});

5. Conecta HTML y JS con selectores

Es necesaria la selección para poder aplicar eventos o modificar su contenido o estilo.

1. Usa document.querySelector() con selectores como en CSS (.clase, #id, etiqueta)
2. También existen métodos como getElementById, getElementsByClassName o querySelectorAll()
3. Es buena práctica guardar la referencia en una variable para reutilizarla
4. Puedes seleccionar cualquier elemento visible o invisible en el documento HTML

<button class="saludo">Saludar</button>
<script>
  const boton = document.querySelector('.saludo');
</script>

6. Responde al clic con funciones

Puedes ejecutar cualquier función cuando un botón es presionado: mostrar un mensaje, agregar contenido, cambiar un color, ocultar un elemento o activar una animación.

1. El evento click se dispara cada vez que el usuario presiona un botón del mouse
2. Puedes usar funciones anónimas o nombradas como manejadores
3. Es posible usar condicionales dentro del manejador para variar el comportamiento

const boton = document.querySelector('button#agregar-tarea');
boton.addEventListener('click', () => {
  //Lógica para agregar tarea
  console.log('Tarea agregada');
});

7. Cambia contenido del DOM con eventos

Esto permite respuestas visuales inmediatas que enriquecen la experiencia del usuario.

1. .textContent cambia el texto sin interpretar HTML
2. .innerHTML permite insertar o reemplazar HTML completo
3. .setAttribute actualiza propiedades como src, href, alt, etc.
4. También puedes eliminar elementos con .remove() o duplicarlos con .cloneNode()

document.querySelector('h1').textContent = '¡Tarea añadida!';

8. Aplica estilos dinámicamente con eventos

Puedes modificar estilos directamente desde JavaScript para reflejar una acción del usuario y brindar retroalimentación visual inmediata.

1. Usa .style para aplicar estilos directamente (sobrescribe el CSS)
2. Con .classList.add() puedes aplicar clases CSS ya definidas
3. Con .classList.toggle() puedes alternar clases según un estado
4. Puedes usar esto para animaciones, validaciones, estados activos, etc.

const boton = document.querySelector('button');
boton.addEventListener('click', () => {
  boton.style.backgroundColor = 'green';
});

9. Recursos Adicionales

Ya aprendiste cómo JavaScript puede detectar eventos y reaccionar a ellos para construir experiencias dinámicas e interactivas. Pero como en todo proceso de aprendizaje en programación, la clave está en la práctica constante.

Recursos para seguir desarrollando tus habilidades.

1. https://developer.mozilla.org/es/docs/Web/JavaScript – Documentación oficial de JavaScript (MDN).
2. https://javascript.info – Guía moderna y detallada sobre el lenguaje.
3. https://jsfiddle.net – Entorno online para probar fragmentos de código.
4. https://codepen.io – Plataforma para crear, compartir y explorar proyectos interactivos.
5. https://github.com/getify/You-Dont-Know-JS – Colección de libros gratuitos sobre los fundamentos avanzados de JS.

¡Nos vemos en la próxima clase!