Apuntes html

HTML nunca falla, solo se ve raro.

Apéndice IV: Introducción a JavaScript

JavaScript es un lenguaje de programación que añade interactividad a las páginas web, como botones que responden al clic, formularios dinámicos, o animaciones. Mientras HTML estructura el contenido y CSS lo estiliza, JavaScript lo hace "dinámico". Este apéndice te presenta JavaScript, su propósito.

¿Qué es JavaScript?

JavaScript:

  • Se ejecuta tanto en el navegador (Chrome, Firefox) como en servidores (Node.js).
  • Permite acciones como mostrar alertas, cambiar texto, o validar formularios.
  • Se añade con la etiqueta <script> en HTML.

Ejemplo de uso:

  • Un botón que muestra un mensaje.
  • Un formulario que valida antes de enviar.

Como accede javascript al documento ?

JavaScript no solo ejecuta lógica, sino que permite modificar y controlar el contenido de una página web mediante el DOM (Document Object Model).
El DOM representa la estructura de una página web en forma de árbol, donde cada elemento HTML es un nodo. Con JavaScript, se pueden seleccionar, modificar y crear elementos dinámicamente.
Ejemplo de cómo cambiar el contenido de una página con JavaScript y el DOM:


    // Seleccionar un elemento por su ID
    document.getElementById("mensaje").textContent = "¡Texto cambiado con JavaScript!";

En este ejemplo, se selecciona un elemento con el ID "mensaje" y se cambia su contenido de texto a "¡Texto cambiado con JavaScript!".

Gracias al DOM, JavaScript puede manipular la página, reaccionar a eventos de usuario y crear experiencias interactivas sin recargar la página.

El DOM: la estructura de la página web

El DOM (Document Object Model) es una representación estructurada de una página web, donde cada elemento HTML es un nodo en un árbol de elementos. Esto significa que cualquier parte de la página puede ser accedida y modificada con JavaScript.
Cada etiqueta (html, head, body, h1, p, button, etc.) es un nodo en el DOM y JavaScript puede modificar cualquiera de ellos.

Nota: Para agregar JavaScript a un documento HTML, se utiliza la etiqueta <script>. Esta etiqueta puede colocarse en la sección <head> pero se aconseja situarla justo antes de la etiqueta de cierre <body>, para asegurar que el DOM esté completamente cargado antes de ejecutar el script.

Podemos seleccionar elementos del DOM usando JavaScript y cambiarlos dinámicamente.

Ejemplo: Cambiar texto de un elemento HTML


document.getElementById("titulo").textContent = "¡Título cambiado!";

En este ejemplo, se selecciona un elemento con el ID "titulo" y se cambia su contenido de texto a "¡Título cambiado!".

document.querySelector(".descripcion").style.color = "blue";

En este caso, se selecciona el primer elemento con la clase "descripcion" y se cambia su color de texto a azul.


document.querySelectorAll("p").forEach(p => p.style.fontSize = "20px");

Este ejemplo selecciona todos los elementos <p> y cambia su tamaño de fuente a 20 píxeles.

let nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Este es un párrafo añadido con JavaScript.";
document.body.appendChild(nuevoParrafo);

En este caso, se crea un nuevo elemento <p>, se le asigna un texto y se añade al final del cuerpo del documento.

Ejemplo simple

Crea un botón que muestra un mensaje con JavaScript:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
</head>
<body>
  <h1>¡Prueba JavaScript!</h1>
  <button onclick="mostrarMensaje()">Clic aquí</button>
  <p id="mensaje"></p>
  <script>
    function mostrarMensaje() {
      document.getElementById("mensaje").innerText = "¡ignit dice hola!";
    }
  </script>
</body>
</html>

¿Por qué usar JavaScript?

  • Interactividad: Responde a clics, entradas de usuario, o eventos.
  • Dinamismo: Cambia el contenido sin recargar la página.
  • Validación: Comprueba formularios antes de enviarlos.

Nota: JavaScript es poderoso pero complejo. Este apéndice es solo una introducción. En esta misma página tienes un manual para conocer un poco más.

TOP