JS登录系统

JS登录系统

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Adobe Dreamweaver 2021

作者：李凯顺

1.创建在页面上的一些表单元素先在文件夹中创建好html文件，在Dw或任意前端编译器中打开并加上必备的初始标签代码，在浏览器中添加上必备的表单input标签元素，以及必需的按钮，别忘了样式，如图：

 

2、在script中确保要读取到输入的账号跟密码
--在script标签或者js文件中写上页面加载事件，在加载事件中获取到两个input标签。
--每次input标签中的值更改返回一次更改的值并赋值于变量。
--在点击登录按钮时输出承载内容的变量。
注意事项：
1、需要确保获得的值一定是输入进去的值！
2、要知道针对元素绑定的对象
使用事件：
1、onchange：当值改变时触发该事件；
2、onclick：当鼠标点击绑定的元素时触发该事件；
3、onload：页面加载事件
难点：
1、元素的获取
2、对元素绑定事件
3、获取元素的值
4、明白全局变量，创建全局变量
过程：使用id获取到相对应的元素并为两个input标签绑定onchange事件，对button标签绑定onclick事件。onchange事件中将input标签调用value方法并赋值给创建好的全局变量。在点击button标签时在浏览器控制台conso.log输出两个赋值好的全局变量。
浏览器控制台页面、代码部分如下：

 

1. 对账号密码进行一个简单的规定
   --创建对象
   --保存键值
   注意事项：
   1、对象的储存位置
   2、对象里值的调用
   难点：
   1、明知对象的是什么
   过程：创建对象，在对象中创建number和password两个键，值是数组，数组中包含至少一个账号密码
   代码部分如下：

 

4、点击登录时进行值的判定
--if语句的判定
--弹出“登录成功”警示框
注意事项：
1、理解if判定语句的基本语法
2、调用出对象里的值，对它进行判定
难点：
1、对于逻辑运算需要有基本的认识
2、如何调出对象里给予的值
过程：对两个承载值的全局变量进行判断，若是空则返回登录失败警示框，若是与备好的值不相符也返回登录失败警示框，具备内容返回登录成功警示框。
更改后的代码部分如下：

 

登录成功后的浏览器页面：

 

登录失败后的浏览器页面：