P - Tarea JS - 02

tarea Tarea 02 - Interacción básica: window.alert(), window.prompt() y window.confirm()

Ejercicio 1: Crea un programa que permita cargar el nombre de un usuario y su correo electrónico por teclado, utilizando dos cuadros de diálogo. Mostrar posteriormente las respuestas en la página HTML, dentro de una caja div.

Ejercicio 2: Añadir al programa anterior la siguiente funcionalidad: que aparezca un cuadro de diálogo que pregunte al usuario si desea ver el resultado en color verde, si la respuesta es no el resultado se verá en negro.

Ejercicio 3: Añadir al programa anterior la siguiente funcionalidad: colocar un párrafo 'lorem' y cuando el usuario pase el ratón por encima, el fondo del párrafo cambie a rojo y la letra sea blanca.

Guarda la tarea en una carpeta llamada [02-interaccion_basica] que deberá estar dentro de otra carpeta general llamada [tareas_JS] donde irás guardando todas las tareas propuestas del curso.

Detalles teóricos

Ya hemos visto que 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!");

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:

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

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:


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

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);

Ejemplo resuelto

Este ejemplo muestra un cuadro de diálogo que te pide tu color favorito. Si lo escribes bien en inglés, hexadecimal (#), rgb, rgba, hsl o hsla, entonces el fondo de la ventana cambiará a tu color preferido.


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Curso de JS">
    <meta name="author" content="(cc) 3con14" />
    <title>Interacción básica</title>

    <style>
      body { font-size: 2em; }
    </style>

    <script>
      var color;
      color = prompt('¿Cuál es tu color preferido?','');
    </script>

</head>
<body>
  <script>
    document.write('Has elegido el color \"' + color + '\"');
    document.write('<br> Si lo has escrito bien, el fondo ha cambiado a tu color favorito.');
    document.body.style.backgroundColor = color;
  </script>
</body>
</html>

ver Demo

Imprimir