当前位置：首页 > article >正文

实验7 JavaScript编程基础7.1密码验证

article 2024/11/26 3:26:58

实验7 JavaScript编程基础

- 效果演示

7.1prompt() alert()函数。
(1) 新建项目” myweb7”。
(2) 新建文件yanzheng.html，使用prompt() alert()函数及相关知识完成以下要求。
使用对话框接收密码，显示友好提示。
比较密码是否是”admin”。如果是，则在页面上输出“欢迎来到这里学习JavaScript！”，文字样式自行设计。如果不是，则弹出对话框，显示“密码错误，前方危险！”。
7.2自定义函数。
(1) 新建HTML文件huanying.html。
(2) 页面：一个文本框，一个按钮，一个div#result。
(3) 文本框用于输入姓名，点击按钮调用函数show()。
(4) 函数show()内使用变量name接收文本框内字符，向div内输出形如“xx，你好……！”的信息。应用了访问元素的知识，比如getElementById()获取元素；textObj.value获取文本框内容（input标记value属性值）；obj.innerHTML=””设置元素HTML内容。
(5) 适当设置div#result样式。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>密码验证</title>
<script type="text/javascript">
function checkPassword() {
    var password = prompt("请输入密码:");//声明变量
    if (password === "admin") {//如果密码符合
        document.write("<h1 style='color: green;'>欢迎来到这里学习JavaScript!</h1>");//document是文件的意思，document.write()，会清空整个页面内容，并重新加载页面。
    } else {
        alert("密码错误，前方危险！");//alert()：是 JavaScript 中用于弹出提示框的函数。它会显示一个带有指定消息的警告框，并提供一个“确定”按钮，用户点击后警告框会消失。
    }
        
}
</script>
</head>
<body onload="checkPassword()">//通过 onload 事件调用 checkPassword() 函数
</body>
</html>

var 是 JavaScript 中用来声明变量的一种关键字。它用于创建一个变量，并且在其生命周期内可以赋值给不同的内容。
虽然 var 在早期的 JavaScript 版本中非常常用，但随着 ES6 引入了 let 和 const，var 的使用逐渐被推荐避免，因为 let 和 const 能够提供更严格的作用域控制和更明确的变量类型。
在body中使用 onload 可以确保页面加载完成时触发 JavaScript 代码。
alert()：是 JavaScript 中用于弹出提示框的函数。它会显示一个带有指定消息的警告框，并提供一个“确定”按钮，用户点击后警告框会消失。