操作表单(验证)
form节点也是一棵小dom文档树
表单的目的:提交信息给服务器
得到输入框的输入值:
eg:input_text.value
得到后可对其赋值,对输入框的内容进行动态修改:
input_text.value='123'
单选框、复选框
值也是该节点的value属性的值,直接.value得到的是它固定的value的值
要获取被选中的单选框的值,用radio节点的.checked属性,若该单选框被选中,则会返回true,否则false,依此判断单选框是否被选中
也可对checked属性赋值,动态修改单选框是否被选中
提交表单时对密码进行加密
在html里导入md5加密的库后,可直接用md5()方法对密码进行加密
var pwd=document.getElementById('password');
pwd.value=md5(pwd.value);
这样在网络抓包时看到的post请求里的请求头里的password的值就是加密后的串,保护了隐私
加密说明:当直接用上面这个方法加密时,直接将加密的结果赋给了pwd.value,这样的话在提交瞬间,密码框里的文本会变为加密后的文本,会变长:1、用户体验不好;2、人员一眼看穿该处用了md5加密,所以加密时用以下步骤更好:
首先要明确:
1.只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
2.虽然复选框设置了 name属性,但是如果复选框不选中,是不会提交到服务器端的,只有选中了的复选框,才会提交到服务器端**
- 把原来pwd密码框的name属性去掉
- 在表单下加入一个隐藏域 input type=’hidden‘ id='md5pwd',并且必须加上name属性
- var md5pwd=document.getElementById('md5pwd')
- md5pwd.value=pwd.md5(pwd.value)
这样就不是直接给密码框赋了md5加密后的串,而是赋给一个隐藏域,并且提交的时候提交的请求的密码是那个隐藏域
按钮级别绑定事件
给按钮onclick="aaa( )"
在js里写aaa函数
表单级别绑定事件
onsubmit="aaa( )",在表单提交时会触发此事件
绑定onsubmit的目的是为了返回一个值,判定提交事件是否通过,但是直接把aaa( )函数的返回值赋给onsubmit没有什么意义,无论如何提交都会通过,并且提交给action属性的值的位置。
但是onsubmit="return aaa( )"的话,若aaa( )函数的返回值是false则提交失败,return的是true则提交给服务器成功
事件
包括鼠标事件、键盘事件和其他事件
操作BOM对象(重点)
bom:browser object model浏览器对象模型
浏览器内核:
- IE
- Chrome
- Safari
- FireFox
- .......
第三方浏览器:
第三方浏览器可以换内核
- qq浏览器
- 360浏览器
- ......
window对象
window对象代表浏览器窗口,也储存全局作用域变量
navigator对象
封装了浏览器的信息
大多数时候并不会用到navigator对象,因为会被人人为修改,所以不建议用它的属性来判断和编写代码。(判断也不行,因为若它里面的属性已被人为修改后,用它来判断是不符合事实的)
screen对象
代表屏幕对象,它的一下属性经常被用到,经常被用于获取屏幕尺寸
location对象(重要)
代表当前页面的url信息
document对象
代表当前文档信息,HTML DOM文档树。
history对象
代表浏览器的历史记录
单点登录:
比如打开了淘宝,登陆了淘宝,然后打开天猫,发现天猫也登录上了,说明天猫拿到了我们的cookie
也是用js获取cookie。
清除cookie后,刷新,这时两个的登录都失效了,需重新登陆
所以cookie不要随意暴露,可以在服务器端设置cookie:httpOnly,来保证隐私安全