JavaScript 课程 | JavaScript 提示示例

上一主题： JavaScript 课程 | JavaScript 中的条件运算符
现在我们知道了如何通过提示、警报和确认与用户进行交互。让我们构建一个纯粹使用纯 Javascript 编写的简单应用程序，在其中询问用户他/她的姓名和年龄，然后使用我们到目前为止所学的运算符和条件语句来检查他/她是否应该被允许进入“爱乐之城！”。
使用的工具

• 视觉工作室代码
• 火狐浏览器

注意：任何浏览器都可以，但建议使用 Google Chrome 或 Mozilla firefox。
项目结构

prompt-example  // name of the folder
   --index.html
   --app.js

index.html 文件将包含我们将呈现的简单 HTML 内容，而 app.js 文件是我们将在其中编写 javascript 代码的 javascript 文件。
index.html 文件

html

   
   
  
    
  
  Prompt Example
    
    
    


   
   Prompt example!
   
   

说明：虽然在上面的 HTML 文件中没有什么可以引起你的注意，除了外部包，它是一个链接到 'SweetAlert' js 库的链接，与原生的相比，它提供了漂亮的警报框。通过在脚本标签中写入此链接，我们确保当我们编写“SweetAlert”javascript 代码时，它可以按照预期的方式工作。
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",
     });
}

说明：我们知道 if-else 条件是如何工作的，在我们的这个小型应用程序中，它会询问您的页面并告诉您是否允许进入“爱乐之城”，if-else 似乎是最好的选择.我们只需询问用户他/她的姓名和年龄，然后我们就有自己的标准，即不允许低于特定年龄的人进入，并且应以不同的方式迎接高于特定年龄的人。所以我们编写了 if-else 并使用比较和逻辑运算符来匹配我们的标准。一个有趣的事情是 if 或 else 块中的代码，我们使用 'swal'，它类似于简单 javascript 中的 'document.write'，因为它将其中的任何内容作为“警报”呈现到屏幕上。
运行代码
如果您使用的是 Visual Studio 代码，那么您可以简单地使用实时更新代码的“实时服务器”扩展。尝试输入不同的详细信息（年龄）：
例子：

Name: Mukul
  Age: 22

输出：

例子：

Name: Ram
  Age: 18

输出：

例子：

Name: Sneha
  Age: 61

输出：

上面的示例让您了解我们如何使用提示/警报/确认。尽管此示例很简单，但仍可以通过多种方式对其进行修改。我希望您尝试实现自己的示例。
下一主题： JavaScript 课程 |练习测验-2