itemtype='https://schema.org/WebPage' itemscope='itemscope' class="page-template-default page page-id-1652 page-child parent-pageid-1563 ast-desktop ast-separate-container ast-right-sidebar astra-4.6.14 ast-single-post ast-inherit-site-logo-transparent ast-hfb-header ast-normal-title-enabled">

005. alert, confirm y prompt

En este capítulo vamos a ver 3 métodos que son muy importantes para interactuar con el usuario, y que cuelgan del objeto padre que es window en los navegadores. Estos métodos no existen en Node.js ya que no existe el objeto window, pero sí que existen en el Javascript de los navegadores, y muy importante, aunque aún no hemos visto nada del DOM ni del BOM, que ya es más interacción con HTML, sí es importante explicar estos 3 métodos de la ventana.

Estos 3 métodos nos permiten interactuar con el usuario.

La diferencia entre un alert y un confirm es que mientras que alert (alerta) sólo tiene un botón de Aceptar, confirm (confirmación) tiene un botón de Aceptar y uno de Cancelar, y dependiendo de lo que el usuario pulse, validará a true o false.

El prompt (aviso) permite que el usuario interactúe y facilite un valor, es decir, le permite ingresar un valor.

Aunque son métodos que cuelgan de window, no es necesario especificar la palabra window para llamar a dichos métodos.

La alerta nos va a mostrar undefined, la confirmación nos puede mostrar true o false, y el aviso (prompt), si no ingresamos nada y le damos a aceptar nos dará una cadena vacía, si le damos al botón Cancelar retornará un valor null, por ello una alerta manda mensaje al usuario sólamente, la confirmación si le damos al botón de aceptar, guarda dicha confirmación en una variable y retorna el valor true, si damos clic en Cancelar no se guarda dicha confirmación en una variable y retorna un valor false, y el aviso, si escribimos algo y le damos a aceptar, devolverá una cadena de texto, si no escribimos nada y damos clic a aceptar, devolverá una cadena de texto vacía, y si damos a Cancelar, independientemente de que hayamos escrito algo o no, retornará un valor null.

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alert, Confirm, Prompt</title>
  </head>

  <body>
    <h1>Alert, Confirm, Prompt</h1>

    <script>
      // window.alert("Hola esto es una alerta");
      // window.confirm("Hola esto es una confirmación");
      /* window.prompt(
        "Hola esto es un prompt y permite al usuario ingresar un valor"
      ); */

      let alerta = alert("Esto es una alerta");
      let confirmacion = confirm("Esto es una confirmación");
      let aviso = prompt("Esto es un aviso");

      console.log(alerta);
      console.log(confirmacion);
      console.log(aviso);
    </script>
  </body>
</html>
Scroll al inicio