JavaScript y HTML
Este artículo explica JavaScript y HTML.
YouTube Video
javascript-html-dom.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 2em;
14 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15 background-color: #f7f9fc;
16 color: #333;
17 line-height: 1.6;
18 }
19
20 .container {
21 max-width: 800px;
22 margin: 0 auto;
23 padding: 1em;
24 background-color: #ffffff;
25 border: 1px solid #ccc;
26 border-radius: 10px;
27 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
28 }
29
30 h1, h2 {
31 font-size: 1.5rem;
32 color: #007bff;
33 margin-top: 0.5em;
34 margin-bottom: 0.5em;
35 border-left: 5px solid #007bff;
36 padding-left: 0.6em;
37 background-color: #e9f2ff;
38 }
39
40 button {
41 display: block;
42 margin: 1em auto;
43 padding: 0.75em 1.5em;
44 font-size: 1rem;
45 background-color: #007bff;
46 color: white;
47 border: none;
48 border-radius: 6px;
49 cursor: pointer;
50 transition: background-color 0.3s ease;
51 }
52
53 button:hover {
54 background-color: #0056b3;
55 }
56
57 #output {
58 margin-top: 1em;
59 background-color: #1e1e1e;
60 color: #0f0;
61 padding: 1em;
62 border-radius: 8px;
63 min-height: 200px;
64 font-family: Consolas, monospace;
65 font-size: 0.95rem;
66 overflow-y: auto;
67 white-space: pre-wrap;
68 }
69
70 .highlight {
71 outline: 3px solid #ffc107; /* yellow border */
72 background-color: #fff8e1; /* soft yellow background */
73 transition: background-color 0.3s ease, outline 0.3s ease;
74 }
75
76 .active {
77 background-color: #28a745; /* green background */
78 color: #fff;
79 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
80 transition: background-color 0.3s ease, box-shadow 0.3s ease;
81 }
82 </style>
83</head>
84<body>
85 <div class="container">
86 <h1>JavaScript Console</h1>
87 <button id="executeBtn">Execute</button>
88 <div id="output"></div>
89 </div>
90
91 <div class="container">
92 <h2>HTML Sample</h2>
93 <div id="content">Hello, World!</div>
94 <button id="changeText">Change Text</button>
95 </div>
96
97 <script>
98 // Override console.log to display messages in the #output element
99 (function () {
100 const originalLog = console.log;
101 console.log = function (...args) {
102 originalLog.apply(console, args);
103 const output = document.getElementById('output');
104 output.textContent += args.map(String).join(' ') + '\n';
105 };
106 })();
107
108 document.getElementById('executeBtn').addEventListener('click', () => {
109 // Prevent multiple loads
110 if (document.getElementById('externalScript')) return;
111
112 const script = document.createElement('script');
113 script.src = 'javascript-html-dom.js';
114 script.id = 'externalScript';
115 //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116 //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117 document.body.appendChild(script);
118 });
119 </script>
120</body>
121</html>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(`Title: ${window.document.title}`);
3
4// Get and display the current URL
5console.log(`URL: ${window.location.href}`);
6
7// Go back to the previous page
8// Note: this will navigate back in history, so be careful when running it
9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport 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: Este evento se activa cuando la página se ha cargado completamente.window.onresize: Este evento se activa cuando la ventana cambia de tamaño.window.onscroll: Este evento se dispara cuando el usuario se desplaza por la página.
Rol como variable global
1var myVar = 10;
2console.log(window.myVar); // 10
- El objeto
windowcontiene variables y funciones globales. En otras palabras, las variables y funciones declaradas se convierten automáticamente en propiedades dewindow.
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.
Recuperación de Elementos del DOM
JavaScript tiene varios métodos para acceder a los elementos en el DOM.
document.getElementById(): Recupera un elemento por su atributoid.document.getElementsByClassName(): Recupera elementos por su nombre de clase. Devuelve unHTMLCollection.HTMLCollectiones una colección en vivo que refleja los cambios en el DOM en tiempo real.document.getElementsByTagName(): Recupera elementos por su nombre de etiqueta. Devuelve unHTMLCollection.document.querySelector(): Utiliza un selector CSS para recuperar el primer elemento que coincida.document.querySelectorAll(): Utiliza un selector CSS para recuperar todos los elementos que coincidan. Devuelve unNodeList.NodeListes una colección estática que mantiene el estado en el momento en que se recupera y no refleja los cambios posteriores en el DOM.
Ejemplo: getElementById y querySelector
1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>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"
3console.log(id);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ñade una clase.remove(): Elimina una clase.toggle(): Añade o elimina una clase dependiendo de si existe.contains(): Comprueba si existe una clase.
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: Accede al nodo padre.childNodes: Accede a los nodos hijos. Puedes acceder a todo tipo de nodos, no solo los nodos de elementos como las etiquetas HTML, sino también los nodos de texto y de comentarios.firstChild/lastChild: Accede al primer y último elemento hijo.nextSibling/previousSibling: Accede a los elementos hermanos siguiente y anterior.
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// Get the container element where the HTML will be inserted
2const content = document.getElementById('content');
3
4// Create the <ul> element with id="list"
5const list = document.createElement('ul');
6list.id = 'list';
7
8// Add initial list items
9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28 const newItem = document.createElement('li');
29 newItem.textContent = 'New Item';
30 list.appendChild(newItem);
31});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()yquerySelector(). - Usa
textContentoinnerHTMLpara cambiar texto y HTML, ysetAttribute()para manipular atributos. - Usa
createElement()para crear nuevos elementos yremove()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.