JavaScript_1

最新推荐文章于 2023-04-01 14:32:48 发布

BenBuYi

最新推荐文章于 2023-04-01 14:32:48 发布

阅读量405

点赞数

本文链接：https://blog.csdn.net/weixin_48295367/article/details/108804675

版权

1.什么是JavaScript

JavaScript是世界上最流行的脚本语言

从构型到开发用了十天时间，与Java的关系就像雷锋和雷峰塔。

合格的后端人员，必须精通JavaScript

ECMCScript是JavaScript的一个标准，最新版本到了6，但大部分浏览器仅支持es5，所以开发环境中需要使用webPack打包成es5标准。

2.快速入门

2.1 引入JavaScript

在html代码中直接书写（内部标签）
单独建立JavaScript文件，在html中引入（外部引入）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
<!-- 1.   script标签 ，写java代码，可放在head或body中-->
    <script>
       alert("hello"); //弹窗-->
    </script>
        
<!-- 2.   注意：script成对出现-->
    <script src="qj.js"></script>
    
<!-- 1.    其实不用显示定义type，也默认是javaScript-->
    <script type="text/javascript">

    </script>
</head>
<body>

</body>
</html>

2.2 基本语法入门

//1.定义变量  所有变量类型都为var
var num = 14;
//2.条件控制
if (num < 2) {
    alert("yes");
}else if (num > 10 && num < 50) {
    alert("no");
} else {
    alert("haha")
}
//3.JavaScript严格检查大小写

ES6后引入了新得声明类关键字let 和 const

const

声明时就必须赋值，之后不可改变。保障内存地址不得改动。
常量内存地址保存的是值，复合类型的数据内存地址中保存的是指针
声明的作用域只在当前的块级中

let

声明的作用域只在当前的块级中

控制台打印变量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aWM62OZt-1601040718595)(\pictures\image-20200720110209414.png)]

2.3 数据类型

数值、文本、图像、音频、视频

变量

var //默认全局变量

number

javaScript 不区分整数和小数，统称为number

123 //整数
12.3 //浮点数
1.23e3 //科学计数法
-12 //负数
NaN //not a number
Infinity //无限大

字符串

“abc”

‘abc’

布尔值

true false

逻辑运算

&& || !

比较运算

= 赋值
== 等于（只要值一样，结果就为true）
=== 绝对等于（类型一样，值一样，结果为true）常用

JS缺陷：

NaN与所有数值都不相等，包括自己
只能通过 isNaN（NaN）方法判断是否为Nan
尽量避免使用浮点数进行运算，存在精度问题

if (Math.abs(1 / 3 - (1 - 2 / 3)) < 0.000000000001)
可使用这种方法判断两数是否相等

null和undefine

null 空
undefine 未定义

数组

var arr = [1,2,3.3,true,false,"adv"];  //推荐使用
var cars = new Array("Saab", "Volvo", "BMW");
不严谨的地方

数组下标越界时，会打印undefine

对象

对象是大括号，数组是中括号

//Person person = new Person(1,2,3,4);
var person = {
        name:"buyi", 
        age:9,
        tags:['js','java','web','...']
}

取对象的值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xz2Fxpz0-1601040718597)(G:\Java_learn\笔记文件\前端笔记\pictures\image-20200720120509370.png)]

2.4 严格检查模式

'use strict'
//预防JavaScript的随意性导致一些问题
//需要编译器支持ES6标准

3.数据类型

3.1 字符串

正常字符串使用单双引号包裹
特殊字符使用转义字符

\'
\"
\n
\t
\u2e2d Unicode编码
\x41   Ascll编码

多行字符串编写

var msg = `你好世界，
hello，World！
`; //tab键上方

模板字符串 ES6

let name = 'BuYi'
var msg = `你好世界，
hello，World！${name}
`;
console.log(msg);

字符串长度

console.log(student.length);

字符串的不可变性

console.log(student[1]);
但是不能给索引值赋值

大小写转换

//这里是方法，不是属性
student.toLowerCase();
student.toUpperCase();

获取字符下标

name.indexOf('b');
name.lastIndexOf('i');

截取字符串

name.substring(1);   // 从下标1到最后
name.substring(1,3); //   [)

3.2 数组

Array可以包换任意的数据类型

var arr = [1,2,3.3,true,false,"adv"];  //推荐使用
var cars = new Array("Saab", "Volvo", "BMW");

长度

arr.length
//给arr.length赋值可以改变数组大小，如果赋值小于当前数组长度，元素会丢失

indexOf

arr= [1,2,3,4,5,6,'1'];
arr.indexOf('1') //6
arr.indexOf(1)   //0

slice() 截取Array的一部分，返回一个新数组 [ )

arr.slice(1,3) ;

push压入 , pop弹出

arr.push('a','3'); //压入到尾部
arr.push(); //弹出尾部一个元素

unshift()压入， shift()弹出头部

arr.unshift('a','3'); //压入到头部
arr.shift(); //弹出头部一个元素

排序sort（）

arr.sort();

元素反转

arr.reverse();

concat() 连接

arr.concat([1,2,3]); //返回一个新的数组，不会改变arr

打印拼接数组join

arr.join('-'); //使用特定字符串连接
//"1-2-3-4-5-6-1-1-2"

多维数组

3.3 对象

若干个键值对（键是字符串，值是任意对象）

var 对象名 = {
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}
var person = {
    name:"benbuyi",
    age: 19,
    email:"kougoxuan@qq.com"
}

JavaScript中的对象，都是以键值对的形式描述，属性之间逗号隔开，最后一个不加逗号（浏览器会不兼容）

使用一个不存在的对象属性不会报错，undefine
动态的删减属性

delete person.age
true
person.age
undefined

动态添加属性

person.age = 12

判断属性值是否在对象中

'score' in person //false
'toString' in person //true 继承
person.hasOwnProperty('toString') //判断一个属性是否为对象自身拥有

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rl68okV2-1601040718598)(\pictures\image-20200720223110207.png)]

3.4 流程控制

if-else判断

while循环

do-while循环

for循环

for (let i = 0; i < 100; i++) {
    console.log(i);
}

var num = [1,3,4,5,6,76];
num.forEach(
    function (value) {
    console.log(num);
}
) //ES5.1

for (let n in num) {
    console.log(num[n]);
}//n为索引值 0-5

for (let n of num) {
    console.log(n);
}//n为num的值  ES6

3.5 Map和Set ES6

Map：键值对

//Map集合 类似python字典
var map = new Map([['tom',123],['ala',90],['janny',122]]);
var name = map.get('tom'); //取值
map.delete('ton');   //删除
map.set('admin',234);//添加

Set：无序不重复集合

var set = new Set([1,1,1,2,2,3,4,2]);//可以去重
set.add('1');   //添加
set.delete('1');//删除
set.has(1);    //是否包含

3.6 iterator ES6

专门用来迭代Map、Set、数组

var map = new Map([['tom',123],['ala',90],['janny',122]]);
for (let x of map) {
    console.log(x);
}

var set = new Set([1,1,1,2,2,3,4,2]);//可以去重
for (let number of set) {
    console.log(number);
}

for-in 漏洞

var arr = [1,3,4];
arr.name

4.函数

4.1 定义函数

定义方式一

public 返回值类型 函数名（）{
	return 返回值;
}

function abs(x){
    if(x<0){
        return -x;
    }else{
        return x;
    }
}
一旦执行到return，代表函数结束，返回结果。
如果没有执行到return，函数也会返回结果 undefined

定义方式二

var abs = funciton(x){
    if(x<0){
        return -x;
    }else{
        return x;
    }
}

调用函数

abs(-10)  //10
abs(10)   //10

参数问题：JavaScript可以传入任意参数，也可以不传递参数。

如何规避不传参数问题

function abs(x){
    if (typeof x != 'number') {
        throw 'Not a Number';
    }
//手动抛出异常
    if(x<0){
        return -x;
    }else{
        return x;
    }
}

arguments

可以通过arguments获得传入参数的数组

function abs(x){
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }

    if(x<0){
        return -x;
    }else{
        return x;
    }
}

问题：想要使用arguments首个参数之外的参数

rest ES6

获取除了已经定义的参数之外的所有参数 …

function aaa(x, y, ...rest) {
    console.log('x=>' + x);
    console.log('y=>' + y);
    console.log(rest)

}

4.2 变量作用域

var的变量作用域

在函数体中声明，在函数体外不可以使用（想使用可以使用闭包）
两个函数是同相同变量名，不冲突

function qj() {
    var x =1;
    x=x+1;
}
function ja() {
    var x = 1;
}

内部函数可以访问外部函数成员，反之不行

function qj() {
    var x =1;
    function ja() {
    var y = x + 1; //没问题
    var x = 'A';   //没问题
}
    var z = y + 1; //报错
}

当内部函数变量和外部函数变量名相同时，以内部为准

javaScript中函数查找变脸从自身变量开始，由内向外查找。

规范：将所有使用的变量都填写在头部，先定义，用的时候在赋值

全局变量

var x = 1;
function f() {
    console.log(x);
}
f();
console.log(x);

全局对象Windows

var x = 'www';
alert(x);
window.alert(x);//alert本身也是window对象的一个变量对象
alert(window.x); //默认所有全局变量，都自动绑定在window对象下

var old_alert = window.alert;
old_alert(x); //与alert等价

//甚至可以重新定义全局变量alert
window.alert = function () {

}//之后调用alert会失效

JavaScript 实际上只有一个全局作用域，任意变量（函数也会视为变量），假设没有在函数作用域范围找到，就会向外查找，如果在全局作用域都没找到，就会报错。

规范

由于所有的全局变量都会绑定到window上。如果引入不同的js文件，使用相同全局变量会冲突。需要想办法规避

唯一全局变量

//唯一全局变量，其实就是定义了一个对象，往里面放属性键值对
var Benbuyi = {};
//定义个人全局变量
Benbuyi.name = 'alal';
Benbuyi.add = function (a,b) {
    return a + b;
}

将自己的代码放在自己定义的唯一空间名字中，降低全局冲突。

jQuery也是这么做的，也可以用$代替jQuery

局部作用域 let ES6

function f() {
    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i);//i is not defined
}

常量 ES6

约定：大写字符命名

声明时就必须赋值，之后不可改变。保障内存地址不得改动。
常量内存地址保存的是值，复合类型的数据内存地址中保存的是指针
声明的作用域只在当前的块级中

4.3 方法

方法就是放在对象中的函数，对象只有两个东西：属性和方法

调用方法一定要用括号
调用属性不用括号

var Buyi = {
    name:'alan',
    birth:1999,
    //对象中的函数就是方法
    age: function () {
       var now =  new Date().getFullYear();//当前日期
       return now - this.birth;
    }
}

this默认指向调用它的对象

function getAge() {
    var now =  new Date().getFullYear();
    return now - this.birth;
}
var Buyi = {
    name:'alan',
    birth:1999,
    //对象中的函数就是方法
    age: getAge()
}

apply

在js中可以控制this的指向

第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。

function getAge() {
    var now =  new Date().getFullYear();
    return now - this.birth;
}
var Buyi = {
    name:'alan',
    birth:1999,
    //对象中的函数就是方法
    age: getAge()
};

两种调用方法

getAge.apply(Buyi,[]); //this,指向了BUYI这个对象
Buyi.age();
getAge(); //会报错

5.内部对象

标准对象

typeof {}
"object"
typeof []
"object"
typeof Date
"function"
typeof Math.abs
"function"
typeof '123'
"string"
typeof 123
"number"

5.1 Date

var now = new Date();
now.getFullYear(); //年
now.getMonth(); //月 0-11
now.getDate(); //日
now.getDay();  //星期
now.getHours();
now.getMinutes();
now.getSeconds();
now.getTime(); //时间戳 1970年一月一日 00：00：00 至今的毫秒数


console.log(new Date(1)) //参数：时间戳
VM970:1 Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
console.log(now)
VM881:1 Tue Jul 21 2020 17:46:43 GMT+0800 (中国标准时间)
console.log(now.getTime())
VM833:1 1595324803905

时区转换

yestody.toGMTString() //"Thu, 01 Jan 1970 00:00:00 GMT"
yestody.toDateString() //"Thu Jan 01 1970"
yestody //Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
yestody.toLocaleString()//"1970/1/1 上午8:00:00"
yestody.toLocaleTimeString()//"上午8:00:00"
yestody.toLocaleDateString()//"1970/1/1"

5.2 JSON

json是什么

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript中一切皆对象，任何js支持的类型都可以用JSON表示；

格式：

对象用{}
数组用[]
所有的键值对都用 key:value

var user = {
    name:'BuYi',
    age:10
}
//对象 转 JSON字符串
let s = JSON.stringify(user);
//JSON字符串 转 对象
let parse = JSON.parse('{"name":"BuYi","age":10}');

JSON和对象区别：

{"name":"BuYi","age":10} //JSON
{name:'BuYi',age:10}     //对象

6.面向对象编程

6.1 什么时面向对象

类：模板

对象：具体的实例

面向对象的基本形式 java Python C#

但是在Javascript中有些不同

原型：

var user = {
    name:'BuYi',
    age:10,
    run:function () {
        console.log(this.name + 'run....');
    }
}
var xiaoming = {
    name: 'xiaoming'
}
xiaoming._proto_=user; //原型，和继承相似

var user = {
    name:'BuYi',
    age:10,
    run:function () {
        console.log(this.name + ' run....');
    }
}
var bird={
    fly:function () {
        console.log(this.name + ' fly...');
    }
}
var xiaoming = {
    name: 'xiaoming'
}
xiaoming.__proto__=bird;

class ES6

class继承

//新标准定义类
class Sutdent {
    //构造器
    constructor(name) {
        this.name = name;
    }

    //新增方法
    hello() {
        alert('hello');
    }
}
//老标准 定义类
var People = function () {
    this.name = name;
}
//想要新增方法
People.prototype.hello = function () {
    alert('hehe');
}

调用

var xiaoming = new Sutdent('xiaoming');

继承

class Sutdent {
    //构造器
    constructor(name) {
        this.name = name;
    }

    //方法
    hello() {
        alert('hello');
    }

}
class LittleStudent extends Sutdent{
    constructor(name,grade) {
        super().name = name;
        this.grade = grade;
    }
    myGrade(){
        alert('小学生');
    }
}
var xiaoming = new Sutdent('xiaoming');

原型链

7.操作BOM对象（重点）

JavaScript 和浏览器关系？

JavaScript的诞生就是为了：让浏览器能够运行脚本

BOM：浏览器对象模型

window

window 代表浏览器窗口

window.innerHeight;//窗口高
window.innerWidth; //窗口宽
window.outerHeight;//显示器高
window.outerWidth; // 显示器宽

Navigtor

封装了浏览器的相关信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36"

大多数时候，不会使用这个对象，因为会被认为修改

不建议使用这些属性来判断和编写代码

screen

screen.width;
screen
Screen {availWidth: 1920, availHeight: 1040, width: 1920, height: 1080, colorDepth: 24, …}
availHeight: 1040
availLeft: 0
availTop: 0
availWidth: 1920
colorDepth: 24
height: 1080
orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
pixelDepth: 24
width: 1920
__proto__: Screen

location(重要)

代表当前页面的URL信息

host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()  //刷新网页
//设置新的地址
location.assign('https://www.bilibili.com')

document

代表当前的页面，HTML DOM文档树

document.title
"哔哩哔哩 (゜-゜)つロ 干杯~-bilibili"
document.title='BenBuYi'
"BenBuYi"

获取具体的文档树节点

document.getElementById('bilibili')//获取相应ID对应的Html代码

获取cookie

document.cookie
"_uuid=5EA5A216-F9AA-A924-F50C-2705AD472A8343597infoc; buvid3=387021E3-2934-4FF2-A8D1-45C96DB122E670389infoc; CURRENT_FNVAL=16; rpdid=|(uYmYRmuYuJ0J'ulmlulRl~k; sid=6juia7ei; bsource=search_baidu; PVID=1"

劫持cookie原理

获取cookie到服务器，解析后获取账号密码

服务器端可是设置：cookle：httpOnly

history

代表浏览器的历史记录

history.back();
history.forward();

8.操作DOM对象（重点）

DOM：文档对象模型

核心：浏览器网页就是一个DOM属性结构

更新：更新DOM节点
遍历：遍历DOM节点，得到DOM节点
删除：删除一个DOM节点
添加：添加一个DOM节点

获得节点

要操作DOM节点，就要先获得这个DOM节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>


<script>
    var h1 = document.getElementsByTagNameNS('h1') //标签选择器
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    
    var fathers = document.getElementById('father');
    var childers = father.childern[index];//获取父节点下的所有子节点
    
    //fathers.firstChild;
    //fathers.lastChild;
</script>

原生代码，以后尽量使用jQuery

更新节点

操作HTML文本

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var id = document.getElementById('father');
</script>

id.innerText = '2e' 修改文本值

id.innerHTML = '<stong>12323g</strong>' 解析HTML文本标签

操作CSS(属性使用字符串，- 转为驼峰命名法)

id.style.fontSize = '200px'

id.style.color = 'red'

id.style.padding = '2em'

删除节点

删除节点的步骤，先获取父节点，在通过父节点的方法删除

id.removeChild(p1);

//如果不知道父节点是谁，可以用这种方法
var self = document.getElementById('p1');//先找自己
var id = self.parentElement;//再找父类
id.removeChild(p1);

//删除是一个动态的过程：
id.removeChild(id.children[0]); //删除h1后，p1就成了第0个

插入节点

获得了某个DOM节点后，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但如果不为空，增加元素会覆盖。

解决方法：

<p id="js">javaScript</p>
<div id ='list'>
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>

<script>
    var
        js = document.getElementById('js'),
        list = document.getElementById('list');
	list.appendChild(js); //追加

    //通过js创建新结点
    let newP = document.createElement('p');//创建p变迁
    newP.id = 'newP';
	newP.setAttribute('id','newP');//与上式等价，通用写法

    newP.innerText = '新的p';
	list.appendChild(newP);

	//setAttribute是通用写法 为标签添加属性
	var myScript = document.createElement('Script');
    myScript.setAttribute('type','text/javascript');

	//自己创建Style标签
    var myStyle = document.createElement('style');
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color: antiquewhite;}';
    document.getElementsByTagName('head')[0].appendChild(myStyle)；
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IdwpnRWe-1601040751200)(G:\Java_learn\笔记文件\前端笔记\pictures\image-20200722204910781.png)]

insert

<p id="js">javaScript</p>
<div id ='list'>
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>

<script>
    let ee = document.getElementById('ee');
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    //此节点要包含目标节点 . insertBefore（新结点，目标节点） 将新结点插入到目标节点的前面
    list.insertBefore(js,ee);
</script>

9.操作表单（验证）

表单是什么 form

文本框 input type = text
下拉框 slect
单选框 radio
多选框 cheakbox
隐藏域 hidden
密码框 password

表单的目的：提交信息

获得要提交的信息

<span>用户名：</span><input type="text" id="username">

<script>
    let input_text = document.getElementById('username');
    //得到输入的数值 input_text.value
    
    //修改的得到的值
    input_text.value = '123';
</script>

input_text.value

document.getElementsByTagName(‘input’)[2].checked

<p>
    <span>用户名：</span><input type="text" id="username">
</p>
<p>
    <span>性别：</span><input type="radio" name="sex" value="boy"> 男
    <input type="radio" name="sex" value="girl"> 女
</p>

<script>

    let input_text = document.getElementById('username');
    //得到输入的数值 input_text.value

    //修改的得到的值
    input_text.value = '123';

    //对于单选框、多选框等固定值，只能取到当前的值
    //document.getElementsByTagName('input')[1].value

    //document.getElementsByTagName('input')[2].checked
    //使用checked返回单选框是否被选中,false true 
</script>

提交表单（高级验证）

按钮绑定事件

<form action="#" method="post">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password" name="password">
    </p>
    <!--绑定事件-->
    <button type="submit" onclick="aaa()">提交</button>
</form>

<script>
        function aaa() {
            let user = document.getElementById('username');
            let pwd = document.getElementById('password');
            pwd.value = MD5(pwd.value);
            console.log(user.value);
            console.log(pwd.value);
        }
</script>

MD5加密代码

'use strict';
function MD5(instring){
    var hexcase = 0;   /* hex output format. 0 - lowercase; 1 - uppercase        */
    var b64pad  = "";  /* base-64 pad character. "=" for strict RFC compliance   */

    /*
     * These are the functions you'll usually want to call
     * They take string arguments and return either hex or base-64 encoded strings
     */
    function hex_md5(s)    { return rstr2hex(rstr_md5(str2rstr_utf8(s))); }
    function b64_md5(s)    { return rstr2b64(rstr_md5(str2rstr_utf8(s))); }
    function any_md5(s, e) { return rstr2any(rstr_md5(str2rstr_utf8(s)), e); }
    function hex_hmac_md5(k, d)
    { return rstr2hex(rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d))); }
    function b64_hmac_md5(k, d)
    { return rstr2b64(rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d))); }
    function any_hmac_md5(k, d, e)
    { return rstr2any(rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d)), e); }

    /*
     * Perform a simple self-test to see if the VM is working
     */
    function md5_vm_test()
    {
        return hex_md5("abc").toLowerCase() == "900150983cd24fb0d6963f7d28e17f72";
    }

    /*
     * Calculate the MD5 of a raw string
     */
    function rstr_md5(s)
    {
        return binl2rstr(binl_md5(rstr2binl(s), s.length * 8));
    }

    /*
     * Calculate the HMAC-MD5, of a key and some data (raw strings)
     */
    function rstr_hmac_md5(key, data)
    {
        var bkey = rstr2binl(key);
        if(bkey.length > 16) bkey = binl_md5(bkey, key.length * 8);

        var ipad = Array(16), opad = Array(16);
        for(var i = 0; i < 16; i++)
        {
            ipad[i] = bkey[i] ^ 0x36363636;
            opad[i] = bkey[i] ^ 0x5C5C5C5C;
        }

        var hash = binl_md5(ipad.concat(rstr2binl(data)), 512 + data.length * 8);
        return binl2rstr(binl_md5(opad.concat(hash), 512 + 128));
    }

    /*
     * Convert a raw string to a hex string
     */
    function rstr2hex(input)
    {
        try { hexcase } catch(e) { hexcase=0; }
        var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
        var output = "";
        var x;
        for(var i = 0; i < input.length; i++)
        {
            x = input.charCodeAt(i);
            output += hex_tab.charAt((x >>> 4) & 0x0F)
                +  hex_tab.charAt( x        & 0x0F);
        }
        return output;
    }

    /*
     * Convert a raw string to a base-64 string
     */
    function rstr2b64(input)
    {
        try { b64pad } catch(e) { b64pad=''; }
        var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
        var output = "";
        var len = input.length;
        for(var i = 0; i < len; i += 3)
        {
            var triplet = (input.charCodeAt(i) << 16)
                | (i + 1 < len ? input.charCodeAt(i+1) << 8 : 0)
                | (i + 2 < len ? input.charCodeAt(i+2)      : 0);
            for(var j = 0; j < 4; j++)
            {
                if(i * 8 + j * 6 > input.length * 8) output += b64pad;
                else output += tab.charAt((triplet >>> 6*(3-j)) & 0x3F);
            }
        }
        return output;
    }

    /*
     * Convert a raw string to an arbitrary string encoding
     */
    function rstr2any(input, encoding)
    {
        var divisor = encoding.length;
        var i, j, q, x, quotient;

        /* Convert to an array of 16-bit big-endian values, forming the dividend */
        var dividend = Array(Math.ceil(input.length / 2));
        for(i = 0; i < dividend.length; i++)
        {
            dividend[i] = (input.charCodeAt(i * 2) << 8) | input.charCodeAt(i * 2 + 1);
        }

        /*
         * Repeatedly perform a long division. The binary array forms the dividend,
         * the length of the encoding is the divisor. Once computed, the quotient
         * forms the dividend for the next step. All remainders are stored for later
         * use.
         */
        var full_length = Math.ceil(input.length * 8 /
            (Math.log(encoding.length) / Math.log(2)));
        var remainders = Array(full_length);
        for(j = 0; j < full_length; j++)
        {
            quotient = Array();
            x = 0;
            for(i = 0; i < dividend.length; i++)
            {
                x = (x << 16) + dividend[i];
                q = Math.floor(x / divisor);
                x -= q * divisor;
                if(quotient.length > 0 || q > 0)
                    quotient[quotient.length] = q;
            }
            remainders[j] = x;
            dividend = quotient;
        }

        /* Convert the remainders to the output string */
        var output = "";
        for(i = remainders.length - 1; i >= 0; i--)
            output += encoding.charAt(remainders[i]);

        return output;
    }

    /*
     * Encode a string as utf-8.
     * For efficiency, this assumes the input is valid utf-16.
     */
    function str2rstr_utf8(input)
    {
        var output = "";
        var i = -1;
        var x, y;

        while(++i < input.length)
        {
            /* Decode utf-16 surrogate pairs */
            x = input.charCodeAt(i);
            y = i + 1 < input.length ? input.charCodeAt(i + 1) : 0;
            if(0xD800 <= x && x <= 0xDBFF && 0xDC00 <= y && y <= 0xDFFF)
            {
                x = 0x10000 + ((x & 0x03FF) << 10) + (y & 0x03FF);
                i++;
            }

            /* Encode output as utf-8 */
            if(x <= 0x7F)
                output += String.fromCharCode(x);
            else if(x <= 0x7FF)
                output += String.fromCharCode(0xC0 | ((x >>> 6 ) & 0x1F),
                    0x80 | ( x         & 0x3F));
            else if(x <= 0xFFFF)
                output += String.fromCharCode(0xE0 | ((x >>> 12) & 0x0F),
                    0x80 | ((x >>> 6 ) & 0x3F),
                    0x80 | ( x         & 0x3F));
            else if(x <= 0x1FFFFF)
                output += String.fromCharCode(0xF0 | ((x >>> 18) & 0x07),
                    0x80 | ((x >>> 12) & 0x3F),
                    0x80 | ((x >>> 6 ) & 0x3F),
                    0x80 | ( x         & 0x3F));
        }
        return output;
    }

    /*
     * Encode a string as utf-16
     */
    function str2rstr_utf16le(input)
    {
        var output = "";
        for(var i = 0; i < input.length; i++)
            output += String.fromCharCode( input.charCodeAt(i)        & 0xFF,
                (input.charCodeAt(i) >>> 8) & 0xFF);
        return output;
    }

    function str2rstr_utf16be(input)
    {
        var output = "";
        for(var i = 0; i < input.length; i++)
            output += String.fromCharCode((input.charCodeAt(i) >>> 8) & 0xFF,
                input.charCodeAt(i)        & 0xFF);
        return output;
    }

    /*
     * Convert a raw string to an array of little-endian words
     * Characters >255 have their high-byte silently ignored.
     */
    function rstr2binl(input)
    {
        var output = Array(input.length >> 2);
        for(var i = 0; i < output.length; i++)
            output[i] = 0;
        for(var i = 0; i < input.length * 8; i += 8)
            output[i>>5] |= (input.charCodeAt(i / 8) & 0xFF) << (i%32);
        return output;
    }

    /*
     * Convert an array of little-endian words to a string
     */
    function binl2rstr(input)
    {
        var output = "";
        for(var i = 0; i < input.length * 32; i += 8)
            output += String.fromCharCode((input[i>>5] >>> (i % 32)) & 0xFF);
        return output;
    }

    /*
     * Calculate the MD5 of an array of little-endian words, and a bit length.
     */
    function binl_md5(x, len)
    {
        /* append padding */
        x[len >> 5] |= 0x80 << ((len) % 32);
        x[(((len + 64) >>> 9) << 4) + 14] = len;

        var a =  1732584193;
        var b = -271733879;
        var c = -1732584194;
        var d =  271733878;

        for(var i = 0; i < x.length; i += 16)
        {
            var olda = a;
            var oldb = b;
            var oldc = c;
            var oldd = d;

            a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
            d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
            c = md5_ff(c, d, a, b, x[i+ 2], 17,  606105819);
            b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
            a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
            d = md5_ff(d, a, b, c, x[i+ 5], 12,  1200080426);
            c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
            b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
            a = md5_ff(a, b, c, d, x[i+ 8], 7 ,  1770035416);
            d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
            c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
            b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
            a = md5_ff(a, b, c, d, x[i+12], 7 ,  1804603682);
            d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
            c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
            b = md5_ff(b, c, d, a, x[i+15], 22,  1236535329);

            a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
            d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
            c = md5_gg(c, d, a, b, x[i+11], 14,  643717713);
            b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
            a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
            d = md5_gg(d, a, b, c, x[i+10], 9 ,  38016083);
            c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
            b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
            a = md5_gg(a, b, c, d, x[i+ 9], 5 ,  568446438);
            d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
            c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
            b = md5_gg(b, c, d, a, x[i+ 8], 20,  1163531501);
            a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
            d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
            c = md5_gg(c, d, a, b, x[i+ 7], 14,  1735328473);
            b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);

            a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
            d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
            c = md5_hh(c, d, a, b, x[i+11], 16,  1839030562);
            b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
            a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
            d = md5_hh(d, a, b, c, x[i+ 4], 11,  1272893353);
            c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
            b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
            a = md5_hh(a, b, c, d, x[i+13], 4 ,  681279174);
            d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
            c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
            b = md5_hh(b, c, d, a, x[i+ 6], 23,  76029189);
            a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
            d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
            c = md5_hh(c, d, a, b, x[i+15], 16,  530742520);
            b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);

            a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
            d = md5_ii(d, a, b, c, x[i+ 7], 10,  1126891415);
            c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
            b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
            a = md5_ii(a, b, c, d, x[i+12], 6 ,  1700485571);
            d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
            c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
            b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
            a = md5_ii(a, b, c, d, x[i+ 8], 6 ,  1873313359);
            d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
            c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
            b = md5_ii(b, c, d, a, x[i+13], 21,  1309151649);
            a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
            d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
            c = md5_ii(c, d, a, b, x[i+ 2], 15,  718787259);
            b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);

            a = safe_add(a, olda);
            b = safe_add(b, oldb);
            c = safe_add(c, oldc);
            d = safe_add(d, oldd);
        }
        return Array(a, b, c, d);
    }

    /*
     * These functions implement the four basic operations the algorithm uses.
     */
    function md5_cmn(q, a, b, x, s, t)
    {
        return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
    }
    function md5_ff(a, b, c, d, x, s, t)
    {
        return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
    }
    function md5_gg(a, b, c, d, x, s, t)
    {
        return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
    }
    function md5_hh(a, b, c, d, x, s, t)
    {
        return md5_cmn(b ^ c ^ d, a, b, x, s, t);
    }
    function md5_ii(a, b, c, d, x, s, t)
    {
        return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
    }

    /*
     * Add integers, wrapping at 2^32. This uses 16-bit operations internally
     * to work around bugs in some JS interpreters.
     */
    function safe_add(x, y)
    {
        var lsw = (x & 0xFFFF) + (y & 0xFFFF);
        var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
        return (msw << 16) | (lsw & 0xFFFF);
    }

    /*
     * Bitwise rotate a 32-bit number to the left.
     */
    function bit_rol(num, cnt)
    {
        return (num << cnt) | (num >>> (32 - cnt));
    }

    return hex_md5(instring);
}

表单绑定标签

<!--
表单绑定提交事件
onsubmit = 绑定一个提交测试的函数，获取一个true或false
将这个结果返回给表单，使用onsubmit接收
-->
<form action="https://www.baidu.com" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="input_password" >
    </p>
    <input type="hidden" id="md5-pwd" name="password">
    <!--绑定事件-->
    <button type="submit" >提交</button>
</form>

<script>
        function aaa() {
            let user = document.getElementById('username');
            let pwd = document.getElementById('input_password');
            let Md5_pwd = document.getElementById('md5-pwd');
            Md5_pwd.value = MD5(pwd.value);

            //可以再次判断表单内容，true就是通过，false阻止提交
            return true;
        }
</script>