Tema anterior: Curso de JavaScript | Operador condicional en JavaScript
Ahora sabemos cómo podemos interactuar con el usuario a través del aviso, alerta y confirmación. Construyamos una aplicación simple escrita puramente usando Javascript simple donde le preguntamos al usuario sobre su nombre y edad, y luego hagamos uso de los operadores y las declaraciones condicionales que hemos aprendido hasta ahora para verificar si se le debe permitir ingresar. el ‘La La Land!’.
Herramientas utilizadas:
- código de estudio visual
- Mozilla Firefox
Nota: cualquier navegador funcionará, aunque se recomiendan Google Chrome o Mozilla Firefox.
Estructura del proyecto:
prompt-example // name of the folder --index.html --app.js
El archivo index.html contendrá el contenido HTML simple que representaremos y el archivo app.js es el archivo javascript en el que escribiremos el código javascript.
archivo index.html:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- character encoding --> <!-- setting the default width to devices width --> <meta name="viewport" content="width=device-width"> <title>Prompt Example</title> <!-- external package --> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"> </script> </head> <body> <!-- simple h1 heading --> <h1 style="text-align:center";>Prompt example!</h1> <!-- linking the javascript file --> <script src="app.js"></script> </body> </html>
Explicación: No sucede mucho en el archivo HTML anterior que pueda llamar su atención, excepto el paquete externo que es un enlace a la biblioteca ‘SweetAlert’ js que proporciona hermosos cuadros de alerta en comparación con los nativos. Al escribir este enlace en la etiqueta del script, nos aseguramos de que cuando escribamos el código javascript ‘SweetAlert’ funcione como se supone que debe hacerlo.
archivo app.js:
Javascript
// getting the names and age from user with the
// help of prompt
let name = prompt('What is your name?');
let age = prompt('What is your age?');
let entryAge = 18;
let seniorAge = 60;
// printing the age to the console
alert(`Your name is ${name} and you are ${age} years old.`);
// using conditional if-else
if( (age > entryAge) && (age <= seniorAge)){
// console.log('Welcome to La La Land!');
swal({
title: "Great!",
text: "Welcome to La La Land!",
icon: "success",
});
}else if(age > seniorAge){
// console.log('Your ride is free..Have a good Day!');
swal({
title: "Awesome!",
text: "Welcome Sir/Mam to La La Land!",
icon: "info",
});
}else{
//console.log('Sorry.. buddy.')
swal({
title: "Oops!",
text: "Sorry Buddy!",
icon: "warning",
});
}
Explicación: Sabemos cómo funciona la condición if-else, y en esta pequeña aplicación nuestra que te pregunta tu página y te dice si puedes o no entrar en ‘La La Land’, if-else parece ser la mejor opción. Simplemente le preguntamos al usuario su nombre y edad y luego tenemos nuestro propio criterio de que las personas menores de cierta edad no podrán ingresar y también las personas mayores de cierta edad deben recibir un saludo diferente. Así que escribimos if-else y usamos operadores lógicos y de comparación para que coincidieran con nuestros criterios. Una cosa interesante es un código dentro de los bloques si o si no, hacemos uso de ‘swal’ que es como ‘document.write’ en javascript simple, ya que muestra lo que hay dentro en la pantalla como una ‘Alerta’.
Ejecutando el Código:
Si está utilizando el código de Visual Studio, simplemente puede utilizar la extensión ‘live-server’ que actualiza el código en tiempo real. Intente ingresar diferentes detalles (edades):
Ejemplo:
Name: Mukul Age: 22
Producción:
Ejemplo:
Name: Ram Age: 18
Producción:
Ejemplo:
Name: Sneha Age: 61
Producción:
El ejemplo anterior le da una idea de cómo podemos hacer uso de aviso/alerta/confirmación. Aunque este ejemplo es simple, aún se puede modificar de muchas maneras. Quiero que intentes implementar tu propio ejemplo.
Siguiente tema: Curso de JavaScript | Cuestionario de práctica-2
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .