Entorno del navegador de JavaScript, Especificaciones
JavaScript es una herramienta muy importante utilizada para hacer que los sitios web sean interactivos. Esta guía te ayudará a comprender cómo funciona JavaScript en un navegador web, cubriendo temas importantes como el Modelo de Objetos del Documento (DOM), el Modelo de Objetos del Navegador (BOM) y cómo podemos manipularlos a través de JavaScript. También te mostraremos algunos ejemplos de código sencillos para ayudarte a comenzar.
¿Qué es el Modelo de Objetos del Documento (DOM)?
El Modelo de Objetos del Documento (DOM) es como un mapa del contenido de un sitio web. JavaScript te permite cambiar el contenido, la estructura y el diseño del sitio web mediante el DOM.
Ejemplo: Agregar y cambiar elementos
Aquí te mostramos cómo agregar una nueva parte a una página web y cambiar su contenido. Como puedes ver en el ejemplo a continuación, no hay un párrafo de texto en el cuerpo. Pero el código de JavaScript agrega una nueva etiqueta p al objeto document.
<!DOCTYPE html>
<html>
<head>
<title>Simple DOM Example</title>
</head>
<body>
<script>
// Make a new part of the page
const paragraph = document.createElement("p");
paragraph.textContent = "Hello, JavaScript!";
// Add the new part to the page
document.body.appendChild(paragraph);
</script>
</body>
</html>Result
¿Qué es el Modelo de Objetos del Navegador (BOM)?
El Modelo de Objetos del Navegador (BOM) proporciona a JavaScript la capacidad de interactuar con el navegador. Incluye varios objetos que permiten a los scripts realizar funciones relacionadas con el propio navegador, no solo con el contenido de la página web. El BOM también incluye objetos estándar como history para gestionar la navegación del navegador y screen para acceder a las dimensiones de la pantalla. Para aclarar los límites desde el principio: el DOM se centra en la estructura y el contenido de la página web, mientras que el BOM se centra en la ventana del navegador en sí.
Componentes del BOM
window
El objeto window representa la ventana del navegador. Contiene funciones para controlar el navegador, incluida la manipulación del tamaño y la posición de la ventana del navegador. Así es como puedes abrir una nueva ventana del navegador usando el objeto window:
<!DOCTYPE html>
<html>
<head>
<title>Open New Window Example</title>
</head>
<body>
<button onclick="openNewWindow()">Click to Open a New Window</button>
<script>
function openNewWindow() {
// Open a new window and specify its properties
var myWindow = window.open("", "MsgWindow", "width=400,height=200");
myWindow.document.body.innerHTML = "<p>Welcome to a new pop-up window! This is created using JavaScript.</p>";
}
</script>
</body>
</html>Result
Nota: Los navegadores modernos suelen bloquear
window.open()si no es activado directamente por un gesto del usuario, como un clic.
navigator
El objeto navigator contiene información sobre el navegador, como el nombre, la versión y las capacidades del navegador, como el soporte de cookies. Así es como puedes usar el objeto navigator para verificar si las cookies están habilitadas:
Location
El objeto location proporciona información sobre la URL actual y se puede usar para redirigir el navegador a una dirección diferente. Este ejemplo mostrará varios componentes de la URL (como el protocolo, el nombre de host y la ruta) en la página web.
Más formas de usar el DOM
JavaScript también te permite gestionar el contenido del sitio web de manera dinámica mediante eventos y atributos de datos.
Ejemplo: Manejo de clics y uso de datos
Así es como configurar eventos de clic y usar atributos de datos:
<!DOCTYPE html>
<html>
<head>
<title>Click Event Example</title>
<style>
#first {
background-color: red;
max-width: 100px;
}
</style>
</head>
<body>
<div id="first">Click me!</div>
<script>
document.getElementById('first').addEventListener('click', function () {
alert(`Item clicked.`);
});
</script>
</body>
</html>Result
Este código configura un evento de clic para el elemento div y muestra un mensaje cuando se hace clic en él.
Conclusión
Comprender cómo interactúa JavaScript con el navegador te permite construir sitios web responsivos y orientados al usuario. Al dominar el DOM y el BOM junto con las mejores prácticas modernas, puedes crear aplicaciones web confiables y atractivas.
Práctica
¿Cuál es el papel del DOM en el entorno del navegador de JavaScript?