Guías Técnicas

Introducción a JavaScript: La Base del Desarrollo Web

Guia completa de JavaScript

¿Qué es JavaScript?

  JavaScript

JavaScript es un lenguaje de programación utilizado principalmente para el desarrollo web. Permite agregar interactividad, manipular el contenido de las páginas, manejar eventos y actualizar la interfaz del usuario sin recargar la página. Se ejecuta en los navegadores web y, hoy en día, también se usa en servidores gracias a tecnologías como Node.js.

¿Por qué aprender JavaScript?

JavaScript es uno de los lenguajes más populares y versátiles en el mundo del desarrollo. Es esencial para el desarrollo web moderno, ya que permite crear aplicaciones dinámicas e interactivas. Además, su ecosistema (frameworks, librerías, herramientas) es muy extenso, lo que lo convierte en una habilidad clave para cualquier desarrollador. Aprender JavaScript te abre la puerta a muchas oportunidades en el mundo de la tecnología.

¿Qué es el objeto window?

El objeto window representa la ventana del navegador y es el objeto global en JavaScript. Proporciona acceso a funciones y propiedades relacionadas con la ventana del navegador, como la manipulación de la ubicación, el tamaño, y las características de la ventana.

javascript 
console.log(window.innerWidth); // Imprime el ancho de la ventana del navegador
window.alert("Hola, mundo!"); // Muestra una alerta

¿Qué es el DOM en JavaScript?

El DOM (Document Object Model) es una representación estructurada del documento HTML en la memoria. Permite a los lenguajes de programación interactuar y manipular el contenido, la estructura y el estilo de la página web de manera dinámica.

javascript 
const elemento = document.getElementById("miElemento");
elemento.textContent = "Texto actualizado"; // Cambia el texto de un elemento

¿Qué es el Document Object Model (DOM)?

El Document Object Model (DOM) es una interfaz de programación que permite a los scripts acceder y actualizar el contenido, la estructura y el estilo de un documento HTML o XML. El DOM representa el documento como una jerarquía de nodos, donde cada nodo corresponde a una parte del documento (elementos, atributos, texto, etc.).

javascript 
const nuevoElemento = document.createElement("p"); // Crea un nuevo elemento <p>
nuevoElemento.textContent = "Este es un nuevo párrafo.";
document.body.appendChild(nuevoElemento); // Agrega el nuevo elemento al cuerpo del documento

¿Qué es el objeto document en JavaScript?

El objeto document es una propiedad del objeto window y representa el contenido del documento HTML cargado en la ventana. Proporciona métodos y propiedades para acceder y manipular los elementos del DOM.

javascript 
const titulos = document.getElementsByTagName("h1");
console.log(titulos[0].textContent); // Imprime el texto del primer <h1>

addEventListener

addEventListener es un método en JavaScript que se utiliza para registrar un evento en un elemento del DOM. Permite que una función específica se ejecute cuando ocurre un evento particular en el elemento seleccionado, como un clic, una pulsación de tecla o un movimiento del mouse.

El método addEventListener es fundamental para interactuar con el DOM de manera dinámica, permitiendo a los desarrolladores crear aplicaciones web más interactivas y responsivas.

Ejemplo Básico de addEventListener

Cambiar el Texto de un Párrafo al Clic

Este ejemplo muestra cómo cambiar el texto de un párrafo cuando se hace clic en un botón:

html 
<!DOCTYPE html>
  <html lang="es">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Ejemplo de addEventListener</title>
  </head>
  <body>
      <p id="miParrafo">Texto original</p>
      <button id="miBoton">Haz clic aquí</button>

      <script>
          const boton = document.getElementById('miBoton');
          const parrafo = document.getElementById('miParrafo');

          boton.addEventListener('click', function() {
              parrafo.textContent = '¡Texto cambiado!';
          });
      </script>
  </body>
  </html>

  1. HTML Estructura: Un párrafo y un botón están definidos en el cuerpo del documento.

    • Se obtienen las referencias del botón y del párrafo mediante getElementById.
    • Se utiliza addEventListener para escuchar el evento de clic en el botón.
    • Cuando se hace clic, se cambia el contenido del párrafo a “¡Texto cambiado!”.

Casos de Uso Comunes

  1. Detectar Clics en un Botón
javascript 
const boton = document.getElementById('miBoton');
boton.addEventListener('click', function() {
  alert('¡Botón clickeado!');
});
  1. Cambiar el Color de Fondo al Pasar el Mouse
javascript 
const caja = document.getElementById('miCaja');
caja.addEventListener('mouseover', function() {
  caja.style.backgroundColor = 'lightblue';
});
caja.addEventListener('mouseout', function() {
  caja.style.backgroundColor = 'white';
});
  1. Registrar Eventos de Teclado
javascript 
document.addEventListener('keydown', function(event) {
  console.log(`Tecla presionada: ${event.key}`);
});
  1. Enviar un Formulario
javascript 
const formulario = document.getElementById('miFormulario');
formulario.addEventListener('submit', function(event) {
  event.preventDefault(); // Prevenir el envío del formulario
  alert('Formulario enviado');
});
  1. Scroll en la Ventana
javascript 
window.addEventListener('scroll', function() {
  console.log('Se ha hecho scroll en la página');
});

addEventListener con Arrow Function y querySelector

Este ejemplo muestra cómo cambiar el color de fondo de la página cuando se hace clic en un botón, utilizando querySelector para seleccionar el botón y una arrow function para manejar el evento.

html 
<!DOCTYPE html>
  <html lang="es">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Ejemplo de addEventListener con Arrow Function</title>
  </head>
  <body>
      <button id="cambiarColorBtn">Cambia el color de fondo</button>
      <script>
          const boton = document.querySelector('#cambiarColorBtn');
          boton.addEventListener('click', () => {
              document.body.style.backgroundColor = 'lightgreen';
          });
      </script>
  </body>
  </html>
  Nota

HTML Estructura: Un botón está definido en el cuerpo del documento con el id cambiarColorBtn. JavaScript:

  • Se utiliza querySelector para obtener una referencia al botón.
  • Se utiliza addEventListener para escuchar el evento de clic en el botón.
  • Al hacer clic, se cambia el color de fondo del documento a lightgreen usando una arrow function.