002. BOM: Métodos

En este capítulo vamos a ver algunos métodos importantes del BOM.

alert(), confirm() y prompt()

En su momento vimos algunos de ellos, como son alert(), confirm() y prompt().

Ya vimos que window.alert() nos va a mandar una alerta, la cual se compone de un mensaje de texto y un botón de aceptar, un window.confirm() es una confirmación, que nos manda un mensaje y un botón de aceptar y cancelar, lo que significa que podemos almacenar dicha confirmación y la cancelación en una variable, y dicha variable validará a true si le damos a aceptar, y a false si le damos a cancelar. Y finalmente está el prompt() o aviso, que es un mensaje de texto con su botón de aceptar y cancelar, por ende puede validar a true o false, y que adicionalmente agrega un input en el cual el usuario puede escribir cualquier cosa, y si guardamos la variable en un prompt, se va a almacenar el valor que el usuario esté digitando.

Nota: todo lo que cuelga de window, no es necesario poner la palabra window delante.

Ventanas emergentes

Para ello tenemos los métodos open(), close() y print(). Veamos un ejm para ver su funcionamiento.

Ejm

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Métodos del BOM</title>
  </head>

<body>
  <h1>Métodos del BOM</h1>
  <button id="abrir-ventana">Abrir ventana</button>
  <br><br>
  <button id="cerrar-ventana">Cerrar ventana</button>
  <br><br>
  <button id="imprimir-ventana">Imprimir ventana</button>
  <br><br>

  <script>
   const $btnAbrir = document.getElementById("abrir-ventana"),
   $btnCerrar = document.getElementById("cerrar-ventana"),
   $btnImprimir = document.getElementById("imprimir-ventana");

   let ventana = undefined;

   // Seleccionar un listener a cada botón
   $btnAbrir.addEventListener("click", e => {
    ventana = window.open("https://sutilweb.eu");
    // No es necesario poner la palabra window
   })

   $btnCerrar.addEventListener("click", e => {
    ventana.close();
   })

   $btnImprimir.addEventListener("click", e => {
    window.print();
   })
  </script>
</body>
</html>
Scroll al inicio