Actividad 23: Objeto window DOM

Descripción de la actividad

A partir del archivo index.html, desarrolla el guión  JavaScript necesario para que muestre información sobre la ventana del navegador y permita al usuario interactuar con ella.
Este ejercicio es una introducción práctica al objeto window y cómo puedes utilizar algunas de sus propiedades y métodos más comunes para interactuar con la ventana del navegador.

Características del objeto window

• Objeto Global: Es el objeto de nivel superior en la jerarquía del DOM. Esto implica que puedes acceder a sus propiedades y métodos directamente sin prefijar window., aunque es una buena práctica hacerlo para mayor claridad, especialmente si hay nombres de variables o funciones que podrían colisionar.
• Representa la Ventana del Navegador: No solo el contenido (el documento), sino la ventana completa con sus barras de herramientas, pestañas, etc.
• Contiene el Objeto document: La propiedad window.document hace referencia al objeto document, que a su vez representa el contenido HTML de la página web.
• Funciones y Propiedades para Controlar la Ventana: Ofrece métodos para interactuar con la ventana del navegador, como:
• alert(), prompt(), confirm(): Para mostrar cuadros de diálogo.
• setTimeout(), setInterval(): Para ejecutar código después de un cierto tiempo o repetidamente.
• open(), close(): Para abrir y cerrar nuevas ventanas o pestañas.
• resizeTo(), moveTo(): Para cambiar el tamaño y la posición de la ventana.
• scrollX, scrollY: Para obtener la posición de desplazamiento actual.
• innerWidth, innerHeight: Para obtener las dimensiones del área de visualización de la ventana (viewport).
• location: Objeto que representa la URL actual y permite navegar a otras URLs.
• history: Objeto que permite interactuar con el historial de navegación del usuario.

Eventos: El objeto window también puede escuchar y disparar eventos, como load (cuando la página ha terminado de cargarse), resize (cuando la ventana cambia de tamaño), scroll (cuando la ventana se desplaza), etc.

Instrucciones para realizar la actividad
1. Coloca todas tus declaraciones dentro de una función (en este caso, de flecha) que se ejecute únicamente cuando se carguen todos los objetos del DOM
document.addEventListener(‘DOMContentLoaded’, () => { …} );
2. Para mostrar toda la info en los span de Información de la ventana:

a) Declara todas las variables
const currentUrlSpan = document.getElementById(‘current-url’);

b) Crea la función updateWindowInfo() y dentro asigna a cada contenido de cada variable una propiedad de la ventana. Por ejemplo, la url actual:
currentUrlSpan.textContent = window.location.href;
Anchura: innerWidth
Altura: innerHeight
Posición del scroll horizontal:scrollX
Posición del scroll vertical: scrollY

c) Añade los eventos resize y scroll al objeto window para que invoque (cargue) la función updateWindowInfo.
Información de la Ventana: Verás la URL actual, el ancho y alto del área de visualización (viewport), y tu posición de desplazamiento. Esta información se actualizará automáticamente si cambias el tamaño de la ventana o te desplazas.
3. Botones: Usa el siguient código para que los botones realicen cambios en la venta. ¿ Que hace cada parte del código?

const showAlertBtn = document.getElementById(‘show-alert’);
const getNameBtn = document.getElementById(‘get-name’);
const confirmActionBtn = document.getElementById(‘confirm-action’);
const openGoogleBtn = document.getElementById(‘open-google’);
const scrollDownBtn = document.getElementById(‘scroll-down’);
const reloadPageBtn = document.getElementById(‘reload-page’);

showAlertBtn.addEventListener(‘click’, () => {
window.alert(‘¡Hola! Has hecho clic en el botón de alerta.’);
});

getNameBtn.addEventListener(‘click’, () => {
const userName = window.prompt(‘Por favor, ingresa tu nombre:’);
if (userName) {
window.alert(`¡Hola, ${userName}! Encantado de conocerte.`);
} else {
window.alert(‘No has ingresado ningún nombre.’);
}
});

confirmActionBtn.addEventListener(‘click’, () => {
const userConfirmed = window.confirm(‘¿Estás seguro de que quieres continuar?’);
if (userConfirmed) {
window.alert(‘¡Has confirmado la acción!’);
} else {
window.alert(‘Has cancelado la acción.’);
}
});

openGoogleBtn.addEventListener(‘click’, () => {
// Abrir Google en una nueva pestaña/ventana
window.open(‘https://www.google.com', ‘_blank’);
});

scrollDownBtn.addEventListener(‘click’, () => {
// Desplazarse 100px hacia abajo desde la posición actual
window.scrollBy(0, 100);
updateWindowInfo(); // Actualizar la información de desplazamiento
});

reloadPageBtn.addEventListener(‘click’, () => {
// Recargar la página actual
window.location.reload();
});