Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Las funciones alert, prompt y confirm
Estas funciones muestran un popup que permitirá al usuario interactuar con la aplicación introduciendo datos, pero sin necesidad de que programemos un formulario HTML.
Estas funciones son malas opción para recoger valores introducidos por el usuario, pero son opciones cómodas para usar con fines didácticos.
Estas funciones dependen del objeto window, y por tanto pueden llamarse de la siguiente forma:
<script>
window.alert("Hola, que tal?");
const nombre = window.prompt("Introduce un nombre por favor");
const respuesta = window.confirm("Los datos introducidos ¿Son correctos?");
</script>Sin embargo, para los métodos que dependen del objeto window es posible hacer una simplificación y evitar ponerlo. De esta forma, el código anterior quedaría así:
<script>
alert("Hola, que tal?");
const nombre = prompt("Introduce un nombre por favor");
const respuesta = confirm("Los datos introducidos ¿Son correctos?");
</script>alert
Esta función nos muestra un popup con un mensaje.
<script>
const respuesta = alert("Hola, que tal?");
</script>
prompt
Esta función nos muestra un popup con un mensaje que habitualmente indica que es lo que debemos escribir en un cuadro de texto adyacente. El valor introducido será devuelto por la función como una cadena de texto.
De esta manera, podremos recoger valores introducidos por el usuario sin necesidad de maquetar un formulario HTML.
<script>
const nombre = prompt("Introduce un nombre por favor");
console.log(typeof nombre); // string
</script>
confirm
Esta función nos muestra un popup con un mensaje que habitualmente indica que es lo que debemos responder pulsando entre dos botones. Uno devuelve el valor booleano true y el otro el valor booleano false.
<script>
const respuesta = confirm("Los datos introducidos ¿Son correctos?");
console.log(typeof respuesta); // boolean
</script>
Convertir número como texto en número
Los valores que recogemos de un prompt son siempre texto, aunque escribamos un número. Para poder operarlos en una suma, debemos convertilos a número, ya que el signo de sumar sirve para sumar números y para concatenar texto, y si el valor recogido es un texto, en lugar de sumarlo lo vamos a concatenar. Para convertir el valor recogido de un prompt en número, podemos hacer varias cosas:
const n = prompt("Introduce un número");
const n1 = parseInt(n); // Esta conversión a número nos lo deja como entero, eliminando los decimales.
const n2 = Number(n);
const n3 = +n;Ejercicios
1. La calculadora
El usuario debe introducir dos números y un operador y visualizar por consola el resultado de la operación. Las operaciones serán +, -, *, /.
Pasos para resolver el ejercicio:
1. Recogida de datos: numero1, numero2, operador. Los datos que recogemos de un prompt siempre serán texto, así que si queremos utilizar números, utilizaremos:
const n = Number(prompt('Introduce un número'));2. Hacer un alert de los datos introducidos: numero1, numero2, operador.
3. Calculo de resultado: Utilizaremos la instrucción if-else para evaluar la operación a realizar.
4. Realizar la operación.
5. Mostrar el resultado: en un alert.
2. Calcular número secreto
Pasos para resolver el ejercicio:
- Almacenar en una constante un número aleatorio, que será el número secreto. Dicho número estará entre 1 y 5.
- Hacer un alert del número aleatorio.
- Recogida del valor introducido por el usuario.
Ver teoría de números aleatorios
3. Calcular número secreto con 3 oportunidades
Pasos para resolver este ejercicio:
- Almacenar en una constante un número aleatorio, que será el número secreto.
- Hacer un alert del número aleatorio.
- Los siguientes pasos los daríamos en cada una de las iteraciones de un bucle while. Estos pasos se repetirán hasta que transcurran 3 intentos o el usuario acierte el número secreto.:
- Recogida de un número mediante un prompt.
- Calculo de resultado: Utilizaremos la instrucción if-else para evaluar si el número introducido coincide con el número secreto
- Mostrar el resultado en un alert.
- Hacemos un alert de fin del juego
4. Ejercicio Letra DNI
Vamos a desarrollar una aplicación que recibirá el número identificador de tu DNI y te devolverá la correspondiente letra.
Pasos a seguir:
- Solicitamos al usuario que intruzca su DNI sin letra y lo almacenamos en una constante.
- Hacer un alert de los datos introducidos (el dni en este caso).
- Creamos una función para obtener la letra del dni. El parámetro de entrada de esta función será el número recogido del usuario.
- La función hará las siguientes validaciones. Si la validación es incorrecta, la función devolverá el valor null.
- Que el número recogido como parámetro tenga 8 dígitos exactamente.
- Que el número recogido como parámetro sea un número (y por tanto no tenga letras).
- Si la validación ha sido correcta, la función utilizará el siguiente algoritmo para calcular la letra del DNI:
- Dividimos el valor introducido entre 23. Almacenamos el resto de la división.
- Utilizamos la función charAt para obtener la letra del DNI. Según el resultado, de 0 a 22, le corresponderá una letra de las siguientes: (T, R, W, A, G, M, Y, F, P, D, X, B, N, J, Z, S, Q, V, H, L, C, K, E).
- La función hará las siguientes validaciones. Si la validación es incorrecta, la función devolverá el valor null.
- Llamamos a la función.
- Mostrar el resultado: en un log
5. Coste viaje
Vamos a hacer una aplicación que se encargará de calcular el coste de un viaje. Para ello, solicitaremos al usuario el número de noches que pasará fuera y el destino del viaje:
Para calcular el coste final del viaje, desarrollaremos las siguientes tres funciones: costeHotel(), costeAvion(), costeAlquiler()
Llamaremos a estas funciones utilizando el siguiente código:
const numNoches = prompt('numero de noches');
const destino = prompt('destino');
const resultado1 = Number(costeHotel(numNoches));
const resultado2 = Number(costeAvion(destino, numNoches));
const resultado3 = Number(costeAlquilerCoche(numNoches));
console.log("Coste hotel: " + resultado1);
console.log("Coste viaje: ", resultado2);
console.log("Coste alquiler coche: ", resultado3);
console.log("Total:", resultado1 + resultado2 + resultado3); A continuación te explico los cálculos que hará cada una de estas tres funciones:
costeHotel()
Crea una función llamada costeHotel() que recibe como parámetro el número de noches. La función debe devolver cuanto es necesario pagar teniendo en cuenta que cada noche cuesta 140 euros.
costeAvion()
La función costeAvion() tiene como parámetro de entrada el nombre de una ciudad y el número de noches. El coste corresponderá al indicado en la siguiente tabla, pero para una estancia de más de tres noches la agencia de viaje nos hará un descuento del 10%.
Los costes por ciudad son los siguientes:
«Oviedo»: 15
«Tokyo»: 700
«Madrid»: 90
«Barcelona»: 90
costeAlquilerCoche()
La función costeAlquilerCoche() tiene como parámetro de entrada el número de noches y devolverá un coste en función de dicho parámetro, teniendo los siguientes aspectos en cuenta:
- Cada día de alquiler cuesta 40 €.
- Si alquilas un coche por 3 días o más, obtienes un descuento de 20€ sobre el total.
- Si alquilas un coche por 7 días o más, obtienes un descuento de 50€ sobre el total (no acumulable con los 20€ de haber alquilado por más de 3 días).
6. Desarrollar un código que gestione la siguiente historia.
1. Nuestro heroe entra en una mazmorra con dos puertas. La puerta 1 y la puerta 2. Una puerta lleva a una muerte segura y la otra a otra mazmorra.
Generaremos un número aleatorio que determinará cual es la puerta correcta.
2. Tanto si el heroe entra en la mazmorra buena como en la mazmorra mala, le informaremos con un mensaje de alerta del tipo de mazmorra en que ha entrado. Si el heroe entra en una mazmorra buena, se repetirá el proceso de solicitarle que escoja la puerta correcta de manera indefinida. Si entra en la mazmorra mala, terminaremos el juego rompiendo el bucle while.
Toda la lógica de esta situación estará dentro de un bucle while. La escena se repetirá indefinidamente hasta que el heroe entre en la puerta incorrecta.
7. Ejercicio formulario.
Los siguientes pasos de resolución del ejercicio estarán dentro de un bucle while que se repetirá hasta que el usuario inserte y valide correctamente su nombre.
1. Se solicita al usuario la introducción de su nombre.
2. Si el nombre introducido no tiene números, le preguntamos al usuario si ese es su nombre real. Si el usuario responde que no, volvemos a comenzar el proceso con una nueva iteración del bucle.
Para evaluar que el nombre introducido por el usuario no contenga ningún número debes buscar una función en internet que devuelva true o false en función de si la cadena recibida como parámetro tiene o no un número.
3. Si el usuario responde que ese es su nombre real, rompemos el bucle.
4. Si el nombre introducido en el paso 1 tenía un número, volvemos a comenzar el proceso con una nueva iteración del bucle.
