09 - Ventanas

Estructura inicial

En nuestra carpeta de proyecto crearemos la siguiente estructura:

/
├── js/
│   └── 09-ventanas.js
└── index.html

Y un código sencillo para nuestro HTML:

<!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.0">
    <script src="./js/09-ventanas.js"></script>
    <title>09 - Ventanas</title>
</head>
<body>
    <h1>Temario de JavaScript</h1>
</body>
</html>

Alert

Muestra una pequeña ventana con el valor que le digamos:

alert(texto_del_alert)

Prompt

Muestra una pequeña ventana para que el usuario introduzca un valor que se guardará en una variable:

let variable = prompt(texto_del_prompt, valor_por_defecto)

Nota: El valor por defecto es opcional y puede omitirse

Nota 2: El valor recogido por la variable es un string por defecto. Si queremos que el valor sea un número, podemos usar el método parseInt().

Ejemplos de ventanas

/* nombre no tendrá un valor por defecto a diferencia de edad que será 18 */
let nombre = prompt("¿Cómo te llamas?")
let edad = prompt("¿Cuántos años tienes?", 18)

alert("¡Hola, " + nombre + "! Tienes " + edad + " años.")

<nombre> y <edad> serían el valor que haya introducido el usuario.