T ─ Dialogando con usuario

Detalles teóricos

• Existen 3 métodos para interactuar con el usuario cuyo objeto padre es window, y por tanto no es necesario especificarlo:
  • alert()
  • prompt()
  • confirm()

método alert()

Ya hemos visto que alert() (o escrito de otra forma window.alert()) muestra un mensaje en una ventana (podemos omitir el objeto window pues el navegador entiende que al no ponerlo se trata de él):

alert("¡Bienvenido a este rincón de Internet!");

método prompt()

Otro método interesante es prompt() que crea un cuadro de diálogo al igual que la función alert(). Sin embargo, en lugar de mostrar un mensaje, prompt() puede también recuperar una respuesta. Además, para usar la función prompt() se tienen que proporcionar dos cadenas separadas por una coma entre los paréntesis. La primera aparece como la pregunta del cuadro de diálogo. La segunda está en el campo en el que el visitante escribe.

Cada vez que necesitamos ingresar un dato con esta función, aparece una ventana donde escribimos el valor. Hay otras formas más sofisticadas para la entrada de datos en una página HTML, pero para un aprendizaje secuencial de los conceptos básicos de JavaScript esta forma nos resultará más práctica.

Para ver su funcionamiento os pongo este ejemplo:

prompt("¿Como te llamas?");

Y guardamos el dato en una variable:

let nombre = prompt("¿Como te llamas?");

método confirm()

Y por último una forma de interactuar con el usuario es a través de una ventana que pregunte algo. Esto se implementa utilizando el método window.confirm() que hace una pregunta al usuario y ofrece dos botones que se traducen en valores booleanos. Aceptar (true) y cancelar y cerrar la ventana (false).

confirm("¿Esta seguro que desea abandonar esta web?");

Como todavía no hemos visto condicionales, simplemente dejo el ejemplo, que más adelante entenderás perfectamente:

let respuesta = confirm("presiona un botón!");
if (respuesta === true) {
  console.log("Has aceptado!");
  } else {
  console.log("Has cancelado");
}

Algunos eventos

El evento onmouseover se produce cuando el puntero del ratón se mueve por encima de un elemento o a uno de sus hijos. Sugerencia: Este evento se utiliza a menudo junto con el evento onmouseout, que ocurre cuando un usuario mueve el puntero del ratón fuera de un elemento.

Tenemos tres posibles luguares donde colocar estos eventos:

Como atributo de un elemento HTML. Ejemplo:

<elemento onmouseover = "codigo javascript">

Como método de un objeto que referenciamos desde un archivo .js

objeto.onmouseover = function(){codigo javascript};

Como evento disparador del método addEventListener()

objecto.addEventListener("mouseover", miFuncion);