Articles
Introducción a JavaScript
JavaScript y HTML

JavaScript y HTML

Este artículo explica JavaScript y HTML.

YouTube Video

El objeto window en JavaScript

El objeto window en JavaScript es el objeto global en un entorno de navegador, proporcionando funciones e información relacionadas con la página web y la ventana del navegador. Dado que window es el ámbito global del navegador, todo el código JavaScript que se ejecuta en el navegador pasa a formar parte del objeto window. El objeto window desempeña un papel importante en la ejecución de JavaScript en el entorno del navegador, proporcionando numerosas APIs y propiedades.

Características clave del objeto window

Propiedades 

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);
  • window.document: Accede al documento HTML actual.
  • window.location: Gestiona la URL actual y la navegación del navegador.
  • window.history: Accede a la información del historial del navegador y permite la navegación hacia adelante y hacia atrás.
  • window.navigator: Proporciona información sobre el navegador y el dispositivo.
  • window.innerWidth / window.innerHeight: Obtiene el ancho y alto del área de visualización.

Métodos 

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);
  • window.alert(): Muestra un cuadro de diálogo de alerta.
  • window.confirm(): Muestra un cuadro de diálogo solicitando la confirmación del usuario y devuelve un resultado de Aceptar o Cancelar.
  • window.prompt(): Muestra un cuadro de diálogo solicitando la entrada del usuario y recupera el valor ingresado.
  • window.open(): Abre una nueva ventana o pestaña.
  • window.setTimeout() / window.setInterval(): Configura un temporizador para ejecutar una función después de un tiempo determinado o a intervalos regulares.

Manejo de eventos 

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};
  • window.onload: Un evento que se ejecuta cuando la página ha cargado completamente.
  • window.onresize: Un evento que se ejecuta cuando cambia el tamaño de la ventana.
  • window.onscroll: Un evento que se activa cuando el usuario desplaza la página.

Rol como variable global 

1var myVar = 10;
2console.log(window.myVar); // 10
  • El objeto window contiene variables y funciones globales. En otras palabras, las variables y funciones declaradas se convierten automáticamente en propiedades de window.

Manipulación del DOM en JavaScript

La manipulación del DOM (Modelo de Objeto del Documento) en JavaScript se utiliza para interactuar dinámicamente con los elementos de la página web. El DOM representa la estructura de un documento HTML como un árbol, que puede ser alterado utilizando JavaScript para modificar la estructura y controlar la visualización de la página.

Conceptos básicos del DOM

El DOM trata el HTML de una página web como objetos, permitiendo el acceso y la modificación de elementos y atributos. Utilice el objeto document para acceder al documento HTML.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

Recuperación de Elementos del DOM

JavaScript tiene varios métodos para acceder a los elementos en el DOM.

  • document.getElementById(): Obtener un elemento por el atributo id
  • document.getElementsByClassName(): Obtener elementos por nombre de clase (HTMLCollection)
  • document.getElementsByTagName(): Obtener elementos por nombre de etiqueta (HTMLCollection)
  • document.querySelector(): Obtener el primer elemento que coincide usando un selector CSS
  • document.querySelectorAll(): Obtener todos los elementos que coinciden usando un selector CSS (NodeList)

Ejemplo: getElementById y querySelector 

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

Manipulación del DOM

Se pueden realizar diversas operaciones en los elementos obtenidos.

Cambio de Texto

Para cambiar el texto de un elemento, usa textContent o innerHTML.

  • textContent: Obtén o cambia el contenido de texto de un elemento. Las etiquetas HTML no son interpretadas.
  • innerHTML: Obtén o cambia el contenido HTML de un elemento. Las cadenas que contienen etiquetas HTML también son procesadas.
1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Cambio de Atributos

Usa setAttribute() y getAttribute() para cambiar los atributos de un elemento.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

Cambio de CSS

Usa la propiedad style para cambiar los estilos CSS.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

Manipulación de Clases

Usa classList para añadir o eliminar clases de un elemento.

  • add(): Añadir una clase
  • remove(): Quitar una clase
  • toggle(): Añadir o quitar una clase según su presencia
  • contains(): Verificar si una clase existe
1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

Creación y eliminación de elementos DOM

Crear nuevos elementos

Usa document.createElement() para crear un nuevo elemento y agregarlo al DOM.

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

Eliminar elementos

Usa el método remove() para eliminar un elemento.

1newDiv.remove();  // Remove the created element

Añadir eventos

Como parte de la manipulación del DOM, puedes agregar manejadores de eventos que respondan a interacciones del usuario. Usa addEventListener() para manejar eventos como clics e interacciones con el teclado.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

En este ejemplo, al hacer clic en un botón se cambia el texto del elemento #content.

Navegar por el árbol del DOM

Puedes navegar en el DOM para acceder a elementos padres y hermanos.

  • parentNode: Acceder al nodo padre
  • childNodes: Accede a los nodos hijos (de todo tipo)
  • firstChild / lastChild: Primer/último elemento hijo
  • nextSibling / previousSibling: Siguiente elemento hermano/anterior elemento hermano
1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Ejemplo: Añadir un nuevo elemento a una lista

Aquí hay un ejemplo de cómo añadir un nuevo elemento a una lista.

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

En este código, al hacer clic en el botón "Añadir elemento" se añade un nuevo elemento <li> a la lista.

Resumen

  • La manipulación del DOM con JavaScript te permite obtener, cambiar, crear y eliminar elementos dentro de un documento HTML.
  • Puedes obtener elementos usando métodos como getElementById() y querySelector().
  • Usa textContent o innerHTML para cambiar texto y HTML, y setAttribute() para manipular atributos.
  • Usa createElement() para crear nuevos elementos y remove() para eliminarlos.
  • Puedes crear páginas web interactivas que respondan a las acciones del usuario mediante el manejo de eventos.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Funciones generadoras en JavaScript