logo 3con14 js cod
logo 3con14 js cod
  • Javascript
  • Conceptos
  • Ejemplos
  • Tips & Tricks
  • ► TAREAS
 
 
icon html5
icon css3
mlogo 3con14 js cod

  • Inicio
  • ► TAREAS
  • T ─ Dialogando con usuario

T ─ Dialogando con usuario

Detalles teóricos

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

 

Ejercicio 1: Crea un programa que muestre dos cuadros de diálogo: uno que pida nuestro nombre y otro nuestro correo electrónico. Mostrar posteriormente las respuestas en la página HTML, dentro de una caja div.

 

Ejercicio 2: Crea un programa que muestre un cuadro de diálogo que pida nuestro color favorito. Si se escribe bien en inglés, en hexadecimal (#), en rgb, en rgba, en hsl o hsla, entonces el fondo de la página cambiará de color.

 

Videotutorial

Videotutorial

Tareas JS: Dialogando con el usuario from 3con14 on Vimeo.

 

  • Anterior
  • Siguiente

Tareas

  • T ─ Probando JavaScript
  • T ─ Dialogando con usuario
  • T ─ Operadores aritméticos
  • T ─ Estructuras secuenciales
  • T ─ Condicionales simples
  • T ─ Condicionales dobles
  • T ─ Condicionales anidados
  • T ─ Condicionales multiples
  • T ─ Estructuras repetitivas
  • T ─ Concepto de acumulador
  • T ─ Concepto de función

Recursos

  • Visual Studio Code
  • Sublime Text
  • Prepros
  • CodePen .
  • Dillinger / MDP
Mas...

Mas...

codepen

uniwebsidad

overapi

can i use

w3schools

mdn

eloquent

Archivo .PDF del Libro

js arkaitz

Licencias ...

3con14─LAB 1998 - 2021
www.3con14.biz
(cc) Jesús Plaza M.
─ Otros Reconocimientos ─

Visitas ...

Hoy ... 7

Ayer ... 64

Week 7

Mes ... 2367

TOTAL ... 97203

(cc) 3con14. Esta obra está bajo Licencia
Creative Commons Atribución-No Comercial-Compartir Igual 4.0

  • Javascript
  • Conceptos
  • Ejemplos
  • Tips & Tricks
  • ► TAREAS