比较散的js笔记 | 青训营

119 阅读3分钟

操作表单(验证)

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属性,但是如果复选框不选中,是不会提交到服务器端的,只有选中了的复选框,才会提交到服务器端**
  1. 把原来pwd密码框的name属性去掉
  2. 在表单下加入一个隐藏域 input type=’hidden‘ id='md5pwd',并且必须加上name属性
  3. var md5pwd=document.getElementById('md5pwd')
  4. 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,来保证隐私安全