Explora los métodos del Modelo de Objetos del Navegador (BOM) en JavaScript

Introducción

En este laboratorio, los participantes explorarán los métodos del Modelo de Objetos del Navegador (BOM, por sus siglas en inglés) en JavaScript al crear un proyecto de demostración completo. El laboratorio guía a los aprendices para configurar un entorno básico de HTML y JavaScript, y luego introduce sistemáticamente métodos clave de interacción BOM como alert(), prompt(), confirm() y técnicas de manipulación de ventanas.

Los participantes construirán progresivamente un proyecto práctico que muestre diferentes métodos de interacción con el navegador, comenzando con la creación de una estructura de proyecto, la implementación de cuadros de diálogo de notificación al usuario y la experimentación con funciones de control de ventanas. Siguiendo las instrucciones paso a paso, los estudiantes adquirirán experiencia práctica en el uso de métodos relacionados con el navegador de JavaScript para crear experiencias web interactivas y entender cómo comunicarse con los usuarios a través de varios tipos de cuadros de diálogo y técnicas de gestión de ventanas.

Configura un proyecto HTML para la demostración del BOM

En este paso, configurarás un proyecto HTML básico para demostrar los métodos del Modelo de Objetos del Navegador (BOM, por sus siglas en inglés) en JavaScript. Crearemos una estructura de proyecto simple que servirá como base para explorar las diversas interacciones BOM.

Primero, navega hasta el directorio del proyecto:

cd ~/proyecto

Crea un nuevo directorio para el proyecto de demostración del BOM:

mkdir bom-demo
cd bom-demo

Ahora, utiliza el WebIDE para crear un archivo index.html con una estructura HTML básica:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Demostración de métodos del BOM</title>
  </head>
  <body>
    <h1>Métodos del Modelo de Objetos del Navegador (BOM)</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Crea un archivo JavaScript correspondiente bom-methods.js en el mismo directorio:

// Este archivo contendrá nuestras demostraciones de métodos del BOM
console.log("Proyecto de métodos del BOM inicializado");

Verifica que los archivos se hayan creado correctamente:

ls

Salida de ejemplo:

index.html
bom-methods.js

Abre el archivo index.html en un navegador web para asegurarte de que todo está configurado correctamente. Deberías ver el título de la página y poder abrir la consola de desarrollador del navegador para ver el mensaje de registro inicial.

Esta estructura de proyecto proporciona un entorno limpio y simple para explorar y demostrar varios métodos del Modelo de Objetos del Navegador (BOM) en los pasos siguientes del laboratorio.

Implementa el método alert para notificaciones básicas al usuario

En este paso, aprenderás sobre el método window.alert(), que es un método fundamental del Modelo de Objetos del Navegador (BOM, por sus siglas en inglés) para mostrar mensajes de notificación simples al usuario. El método alert crea un cuadro de diálogo emergente que pausa la ejecución del script y requiere el reconocimiento del usuario.

Navega hasta el directorio del proyecto:

cd ~/proyecto/bom-demo

Abre el archivo bom-methods.js en el WebIDE y agrega el siguiente código JavaScript:

// Demostrar el método window.alert()
function showBasicAlert() {
  window.alert("Bienvenido a la demostración de métodos del BOM!");
}

// Crear un botón para desencadenar la alerta
function createAlertButton() {
  const button = document.createElement("button");
  button.textContent = "Mostrar alerta";
  button.onclick = showBasicAlert;
  document.body.appendChild(button);
}

// Llamar a la función para agregar el botón cuando se carga la página
createAlertButton();

Modifica el archivo index.html para asegurarte de que el JavaScript se enlaza correctamente:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Demostración de métodos del BOM</title>
  </head>
  <body>
    <h1>Métodos del Modelo de Objetos del Navegador (BOM)</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Cuando abres el archivo index.html en un navegador web, verás un botón "Mostrar alerta". Haciendo clic en este botón desencadenará un cuadro de diálogo de alerta emergente con el mensaje "Bienvenido a la demostración de métodos del BOM!".

Puntos clave sobre window.alert():

Es un método del objeto window
Crea un cuadro de diálogo bloqueante que pausa la ejecución del script
Requiere que el usuario haga clic en "OK" para continuar
Por lo general, se utiliza para notificaciones simples o depuración

Apariencia del ejemplo de cuadro de diálogo de alerta:

[Cuadro de diálogo de alerta]
Bienvenido a la demostración de métodos del BOM!
                [OK]

Crea un cuadro de diálogo de prompt para la interacción de entrada de usuario

En este paso, explorarás el método window.prompt(), que permite la entrada interactiva del usuario a través de un cuadro de diálogo. Este método del BOM te permite recopilar la entrada de texto simple de los usuarios directamente en el navegador.

Navega hasta el directorio del proyecto:

cd ~/proyecto/bom-demo

Abre el archivo bom-methods.js en el WebIDE y agrega el siguiente código JavaScript:

// Demostrar el método window.prompt()
function showPromptDialog() {
  // Pedirle al usuario su nombre con un valor predeterminado
  let userName = window.prompt("¿Cuál es tu nombre?", "Invitado");

  // Verificar si el usuario ingresó un nombre
  if (userName !== null && userName !== "") {
    const outputDiv = document.getElementById("output");
    outputDiv.textContent = `Hola, ${userName}! Bienvenido a los métodos del BOM.`;
  } else {
    const outputDiv = document.getElementById("output");
    outputDiv.textContent = "No se ingresó ningún nombre.";
  }
}

// Crear un botón para desencadenar el prompt
function createPromptButton() {
  const button = document.createElement("button");
  button.textContent = "Ingresar nombre";
  button.onclick = showPromptDialog;
  document.body.appendChild(button);
}

// Llamar a la función para agregar el botón cuando se carga la página
createPromptButton();

Actualiza el archivo index.html para incluir un div de salida:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Demostración de métodos del BOM</title>
  </head>
  <body>
    <h1>Métodos del Modelo de Objetos del Navegador (BOM)</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Puntos clave sobre window.prompt():

Devuelve el texto ingresado por el usuario
Permite un valor predeterminado opcional
Devuelve null si el usuario cancela el prompt
Bloquea la ejecución del script hasta que el usuario responda

Interacción de ejemplo de cuadro de diálogo de prompt:

[Cuadro de diálogo de prompt]
¿Cuál es tu nombre? [Invitado]
        [OK]   [Cancelar]

Cuando abres el archivo index.html en un navegador web:

Haz clic en el botón "Ingresar nombre"
Se mostrará un prompt preguntando por tu nombre
Ingresa un nombre o haz clic en OK con el valor predeterminado
El div de salida mostrará un saludo personalizado

Agrega un cuadro de diálogo de confirmación para la toma de decisiones del usuario

En este paso, explorarás el método window.confirm(), que proporciona una forma simple de obtener la confirmación del usuario a través de un cuadro de diálogo con las opciones "OK" y "Cancelar". Este método del BOM es útil para crear escenarios de toma de decisiones interactivas en aplicaciones web.

Navega hasta el directorio del proyecto:

cd ~/proyecto/bom-demo

Abre el archivo bom-methods.js en el WebIDE y agrega el siguiente código JavaScript:

// Demostrar el método window.confirm()
function showConfirmDialog() {
  const outputDiv = document.getElementById("output");

  // Mostrar un cuadro de diálogo de confirmación
  const userDecision = window.confirm("¿Deseas continuar?");

  // Verificar la respuesta del usuario
  if (userDecision) {
    outputDiv.textContent =
      "El usuario hizo clic en OK. Continuando con la acción.";
    outputDiv.style.color = "verde";
  } else {
    outputDiv.textContent =
      "El usuario hizo clic en Cancelar. La acción se abortó.";
    outputDiv.style.color = "rojo";
  }
}

// Crear un botón para desencadenar el cuadro de diálogo de confirmación
function createConfirmButton() {
  const button = document.createElement("button");
  button.textContent = "Mostrar cuadro de diálogo de confirmación";
  button.onclick = showConfirmDialog;
  document.body.appendChild(button);
}

// Llamar a la función para agregar el botón cuando se carga la página
createConfirmButton();

Actualiza el archivo index.html para asegurarte de que el div de salida esté presente:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Demostración de métodos del BOM</title>
  </head>
  <body>
    <h1>Métodos del Modelo de Objetos del Navegador (BOM)</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Puntos clave sobre window.confirm():

Devuelve true si el usuario hace clic en "OK"
Devuelve false si el usuario hace clic en "Cancelar"
Bloquea la ejecución del script hasta que el usuario haga una elección
Útil para decisiones simples de sí/no

Interacción de ejemplo de cuadro de diálogo de confirmación:

[Cuadro de diálogo de confirmación]
¿Deseas continuar?
        [OK]   [Cancelar]

Cuando abres el archivo index.html en un navegador web:

Haz clic en el botón "Mostrar cuadro de diálogo de confirmación"
Se mostrará un cuadro de diálogo de confirmación
Elije "OK" o "Cancelar"
El div de salida mostrará el resultado de tu elección

Experimenta con los métodos window.open y window.close

En este paso, explorarás los métodos window.open() y window.close(), que te permiten crear y administrar programáticamente nuevas ventanas o pestañas del navegador.

Navega hasta el directorio del proyecto:

cd ~/proyecto/bom-demo

Primero, crea un nuevo archivo HTML llamado popup.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ventana emergente</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Esta es una ventana emergente</h1>
    <p>Abierta utilizando el método window.open()</p>
    <button onclick="window.close()">Cerrar ventana</button>
  </body>
</html>

Ahora, actualiza el archivo bom-methods.js con métodos de manipulación de ventanas:

// Función para abrir una nueva ventana
function openNewWindow() {
  const outputDiv = document.getElementById("output");

  // Abre una nueva ventana con dimensiones específicas
  const newWindow = window.open(
    "popup.html",
    "VentanaEmergente",
    "width=400,height=300,resizable=yes"
  );

  // Verifica si la ventana se abrió correctamente
  if (newWindow) {
    outputDiv.textContent = "Nueva ventana abierta correctamente!";
  } else {
    outputDiv.textContent =
      "Ventana emergente bloqueada. Permita las ventanas emergentes, por favor.";
  }
}

// Función para cerrar la última ventana abierta
function closeLastWindow() {
  const outputDiv = document.getElementById("output");

  try {
    // Intenta cerrar la última ventana abierta
    const lastWindow = window.open("", "_blank");
    if (lastWindow) {
      lastWindow.close();
      outputDiv.textContent = "Última ventana abierta cerrada.";
    } else {
      outputDiv.textContent = "No hay ventana para cerrar.";
    }
  } catch (error) {
    outputDiv.textContent = "Error al cerrar la ventana.";
  }
}

// Crea botones para las operaciones de ventana
function createWindowButtons() {
  const openButton = document.createElement("button");
  openButton.textContent = "Abrir nueva ventana";
  openButton.onclick = openNewWindow;

  const closeButton = document.createElement("button");
  closeButton.textContent = "Cerrar última ventana";
  closeButton.onclick = closeLastWindow;

  document.body.appendChild(openButton);
  document.body.appendChild(closeButton);
}

// Llama a la función para agregar los botones cuando se carga la página
createWindowButtons();

Actualiza el archivo index.html para garantizar la compatibilidad:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Demostración de métodos del BOM</title>
  </head>
  <body>
    <h1>Métodos del Modelo de Objetos del Navegador (BOM)</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

Puntos clave sobre window.open() y window.close():

window.open() crea una nueva ventana o pestaña del navegador
Puedes especificar la URL, el nombre de la ventana y las características
window.close() cierra la ventana actual o la especificada
Los bloqueadores de ventanas emergentes pueden evitar que se abra una ventana

Cuando abres el archivo index.html en un navegador web:

Haz clic en "Abrir nueva ventana" para crear una nueva ventana emergente
Haz clic en "Cerrar última ventana" para cerrar la ventana recientemente abierta
El div de salida mostrará el estado de las operaciones de ventana

Resumen

En este laboratorio, los participantes exploraron los métodos del Modelo de Objetos del Navegador (BOM, por sus siglas en inglés) a través de un proyecto práctico de JavaScript. El laboratorio comenzó configurando un entorno estructurado de HTML y JavaScript, creando una base para demostrar diversas técnicas de interacción con el navegador. Los participantes aprendieron cómo crear archivos de proyecto, configurar la estructura básica de HTML y preparar un archivo de JavaScript para las demostraciones de métodos.

Los pasos iniciales se centraron en comprender los métodos fundamentales del BOM, comenzando con el método window.alert() para notificaciones al usuario. Al implementar progresivamente diferentes métodos de interacción con el navegador, como prompts, confirmaciones y manipulación de ventanas, los aprendices adquirieron experiencia práctica en el uso de las API de nivel de navegador de JavaScript para crear experiencias web interactivas y controlar el comportamiento de las ventanas del navegador.