行为层（JavaScript）

---

学习视频来自于：秦疆（遇见狂神说）Bilibili地址
他的自学网站：kuangstudy
js文档可以参考廖雪峰，写的比较详细

生活原本沉闷，但跑起来就有风

---

一、JavaScript介绍

1.1 概述

JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

1.2 历史

ECMAScript： javascript的一个标准。
Native原生JS开发
原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称是ES，特点是所有浏览器都支持，ES标准已发布如下版本：
ES3
ES4（内部，未正式发布）
ES5（全浏览器支持）
ES6（常用，当前主流版本：webpack打包成为ES5支持）
ES7
ES8
ES9
区别： 逐步增加新特性。

1.3 大前端开发

1.3.1 TypeScript 微软的标准

TypeScript 是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
该语言的特点就是除了具备ES的特征之外还纳入了许多不在标准范围内的新特性，所以会导致很多浏览器不能直接支持。TypeScript语法，需要编译后（编译成js文件）才能被浏览器正确执行。

1.3.2 JavaScript库

jQuery：
优点是简化了DOM操作，缺点是DOM操作太频繁，影响前台性能。在前端眼里使用它仅仅是为了兼容IE6、7、8。

1.3.3 JavaScript框架

Angular：
Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发，对后台程序员友好，对前端程序员不友好，缺点是版本迭代不合理（1代->2代，除了名字相同，基本就是两个东西）。
React：
Facebook出品，一款高性能能的JS前端框架，特点是提出了新概念【虚拟DOM】用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率，缺点是使用复杂，因为需要额外学习一门【JSX】语言。
Vue：
一款渐进式Javascript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化）和React（虚拟DOM）的优点。
Axios：
前端通信框架，因为Vue的边界很明确，即使为了处理DOM，所以并不具备通信能能力，因此就需要额外使用一个通信框架与服务器交互，当然也可以直接使用jQuery提供的AJAX通信功能。

1.3.4 UI框架

**Ant-Design：**阿里巴巴出品，基于React的UI框架。
**ElementUI、iview、ice：**饿了么出品，基于Vue的UI框架。
Bootstrap： Twitter推出的一个用于前端开发的工具包。
AmazeUI： 一款HTML5跨屏前端框架。

1.3.5 Javascript构建工具

Babel： js编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript。
WebPack： 模块打包工具，主要作用是打包、压缩、合并以及按序加载。

1.3.6 后端技术

前端人员为了方便开发也需要掌握一定的后端技术，但Java后台人员知道后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，出现了NodeJS这样的技术。
NodeJS的作者已经生成放弃NodeJS（说是架构做的不好在加上笨重的node_modules），开始开发全新架构的Deno。
既然是后台技术，那肯定也需要框架和项目管理工具，NodeJS框架及项目管理工具如下：
Express： NodeJS框架
Koa： Express简化版
NPM： 项目综合管理工具，类似于Maven
YARN： NPM的代提方案，类似于Maven和Gradle的关系

二、快速入门

2.1 内部标签

script位置
可以放在head标签内或body

<!-- 弹窗输出hello word -->
<script>
	alert('hello word');
</script>

2.2 外部引入

**问题：**外部引用一定要写全，不要写这样（

<!-- 弹窗输出hello word -->
<script src="js/demo05.js"></script>
<!-- 当前类型，不用显示定义也可以 -->
<script type="text/javascript">

2.3 浏览器调试

在浏览器按F12进入开发中模式，选择控制台可以写JavaScript观察输出，并且有调试功能。
浏览器控制台打印：console.log();

调试器：可以打断点，一行一行执行，观看代码运行情况。

2.4严格模式

js自己检查代码是否书写正确

// 必须写在第一行
'use strict'
// 定义变量可以用var 或 let 最好使用let
let a = 9;
// let a = 9;（局部变量） a = 9（全局变量）
console.log(a);

三、数据类型

3.1 基本类型

数值、文本、图形、音频、视频
变量命名

1. JavaScript严格区分大小写。
2. 变量名不能以 #或数字开头
   number： js不分小数和整数
   NaN： 不是一个数字
   Infinity： 无限大
   布尔值： true、false
   逻辑运算符：

&&:两个为真，结果为真
||:一个为真，结果为真
!:真既是假，假既是真

比较运算符：

=:赋值
==:等于（类型不一样，值一样就相等）
===:绝对等于
重点：js比较是否相等，不要使用==比较
NaN===NaN（NaN与所有的数值都不相等，包括自己）

浮点运算符问题

console.log((1/3)===(1-2/3)) 结果：false

尽量避免使用浮点进行运算，存在精度问题

Math.abs(1/3-(1-2/3))<0.000000001

null和undefined
nulll：空
undefined：未定义

3.2 字符串类型

3.2.1 定义

正常字符串使用单引号或者双引号包裹，例如：‘a’、“a”。

let a1 = 'a';
let a2 = "a";

3.2.2 转移字符

\'
\n
\t
\u4ead \u###	Unicode字符
\x41			Ascll字符

3.2.3 模板字符串

使用 ` 包裹

var msg = 'efg';
// 拼接其它字符串
let massage = `abcd${msg}`

3.2.4 字符串长的可变性

字符串不可以改变。

var msg = 'efg';
msg[0] = 'a'; 
console.log(msg);结果：'efg'，字符串不可以改变

3.2.5 常用方法

// 获取字符串长度
massage.length;
// 像数组一样获取字符串指定下标的值
massage[2];
// 整体大写
massage.toLocaleUpperCase();
// 整体小写
massage.toLocaleLowerCase();
// 获取指定元素的位置
massage.indexOf('a');
// 截取（包含）第二和（不包含）第五个之间的元素
massage.substring(2,5);

3.3 数组类型

3.3.1 数组使用

Java数组必须是相同数据类型，js数组可以不是相同数据类型。

var arr = [1,2,3,4,5,true,'hello'];
// 对象定义数组
new Array(1,2,3,4,5,'hello');
// 取值
arr[0];

如果数组下标越界就会提示：undefined

3.3.2 常用方法

// 定义
let arr = [1,2,3,4,5];
// 获取数组长度 假如给arr.length就能改变数组的长度
arr.length;
// 获取3的表索引 字符串1和数字1是不一样的，数组能够区分
arr.indexOf(3);
// 截取数组（包含）第一个和（不包含）第四个之间的数组
arr.slice(1,4);
// 尾部添加元素
arr.push(6);
// 尾部删除元素
arr.pop();
// 头部添加元素
arr.unshift('a');
// 头部删除元素
arr.shift();
// 数组排序
arr.sort();
// 元素反转
arr.reverse();
// 拼接数组:产生新数组，原来的数组没有改变
arr.concat(['a','b','c']);
// 字符串连接符，将数组内容以指定字符链接成字符串："6-5-4-3-2-1"
arr.join('-');
// 数组内元素全部变成指定元素，数组长度不变
arr.fill(1);

3.3.3 多维数组

// 定义
let arr = [[1,2,3],[4,5,6],[7,8,9]];
// 取值
arr[1][1];

3.4 对象类型

3.4.1 格式

1. 对象使用大括号，每个属性之间使用逗号隔开，存储若干个键值对。
2. Javascript中的所有键都是字符串，值是任意对象。

let person = {
	属性名: 属性值,
	属性名: 属性值,
	属性名: 属性值
};

3.4.2 赋值

初始化赋值

let person = {
	name: 'tt',
	age: 12
};

更改

person.name = '天天';
// 假如使用一个不存在的对象属性，不会报错，只会undefined

3.4.3 动态的删减属性

delete person.name;

3.4.4 动态的添加属性

person.name = '天天';

3.4.5 判断属性值是否在对象中

**in：**包括继承的属性和函数。

// 检查age属性是否在person中
'age' in person;
//

3.4.6 判断属性值是否是对象自身拥有

**hasOwnProperty：**只看对象自身属性和函数。

// 检查age属性是否在person中
person.hasOwnProperty('age');
//

3.5 流程控制

3.5.1 if判断

let age = 3;
if (age > 3) { // 第一个判断
	console.log('haha');
} else if (age === 3) { // 第二个判断
	console.log('wawawawa');
} else {
	console.log('sleep'); // 否则，执行这个
}

3.5.2 循环

while

let age = 3;
while (age < 10) { // 循环
	age++;
	console.log(age);
}

do-while

do{
age++;
console.log(age);
}while (age < 10) 

for

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

forEach
使用匿名函数

'use strict'
// 数组
let arr = [9, 7, 6, 5, 8, 3, 4, 2];
// 匿名函数
arr.forEach(function (e) {
	console.log(e);
});

forEach
不使用匿名函数

// 数组
let arr = [9, 7, 6, 5, 8, 3, 4, 2];
// 函数
function f(e) {
	console.log(e);
}
// 需要一个函数，和数组
arr.forEach(f,arr);

for循环获取索引

'use strict'
// 数组
let arr = [9, 7, 6, 5, 8, 3, 4, 2];
for (let num in arr) {
	console.log(arr[num]);
}

3.6 Map和Set集合

3.6.1 Map（ES6新特性）

key：有序，不可重复
value：可以重复

// 集合
let map = new Map([
	['tom', 100],
	['jack', 90],
	['lili', 80]
]);
// get获得value
let score = map.get('tom');
// set添加key-value
map.set('lucy', 83);
console.log(map);
set.delete('tom');// 删除元素

3.6.2 Set（ES6新特性）

无序不可重复的集合

// 使用set可以去除重复元素
let set = new Set([1, 2, 3, 3, 5, 6]);
set.add(4);// 添加元素
set.delete(3);// 删除元素
set.has(3);//是否包含某个元素

3.7 Iterable迭代

3.7.1 of

遍历数组

let arr = [1, 2, 3, 3, 5, 6];
// 打印具体的值
for (let num of arr) {
	console.log(num);
}

遍历Map

let map = new Map([
	['tom', 100],
	['jack', 90],
	['lili', 80]
]);
// 打印具体的值
for (let num of map) {
	console.log(num[0]+':'+num[1]);
}

遍历set

let set = new Set([1, 2, 3, 3, 5, 6]);
// 打印具体的值
for (let num of set) {
	console.log(num);
}

of和in区别

let map = [4,1,2,4];
// 在数组中新增值
map.name = 'lity';
// 打印具体的值
for (let num in map) {
// 全部打印下标（0、1、2、3、name）很奇怪
	console.log(num);
}
for (let num of map) {
// 不打印新增元素（0、1、2、3）
	console.log(num);
}

四、函数及面向对象

4.1 函数定义及变量作用域

4.1.1 函数定义格式

绝对值函数

// 定义方式一
function abs(x) {
	if (x >= 0) {
		return x;
	} else {
		return -x;
	}
}

一旦执行到return代表函数结束，返回结果。
如果没有执行return，函数执行也会返回结果，结果就是undefined。

// 定义方式二
var abs = function(x) {
	if (x >= 0) {
		return x;
	} else {
		return -x;
	}
}

方式一和方式二相同。
方式二是一个匿名函数，可以把结果赋值给abs，通过abs就可以调用函数。

4.1.2 调用函数

abs(10);
abs(-10);

4.1.3 函数参数异常

// 假如传入的不是数字就抛出异常
function abs(x) {
	if (typeof x !== 'number') {
		throw '不是一个数字'; // 手动抛出异常
	}
	if (x >= 0) {
		return x;
	} else {
		return -x;
	}
}

4.1.4 arguments

代表传递进来的所有的参数，是一个数组。

function abs(x) {
	for (let i = 0; i < arguments.length; i++) {
		console.log(arguments[i]); // 打印数组
	}
	if (x >= 0) {
		return x;
	} else {
		return -x;
	}
}

4.1.5 rest（ES6新特性）

获取除了已经定义的参数之外的所有参数。
rest参数只能卸载最后面，必须用…标识。

//使用arguments
function abs(a, b) {
	console.log('a=>' + a);
	console.log('b=>' + b);
	if (arguments.length > 2) {
		for (let i = 2; i < arguments.length; i++) {
			console.log(arguments[i]);
		}
	}
}

//使用rest
function abs(a, b, ...rest) {
	console.log('a=>' + a);
	console.log('b=>' + b);
	console.log(rest);// 将多余的参数放入数组中
}

4.1.6 变量作用域

在javascript中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~（一定要想实现，可以使用闭包）。

function add() {
	var x = 1;
	x = x + 1;
}
x = x + 2; // 报错： x is not defined

两个函数使用了相同的变量名，只要不在函数内部，就不冲突。

function a() {
	var x = 1;
	x = x + 1;
}
function b() {
	var x = 1;
	x = x + 1;
}

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

function a() {
	var x = 1;
	function b() {
		var y = x + 1;
	}
	var z = y + 1; // 报错：y is not defined
}

内部函数变量和外部函数变量重名。
函数查找变量从自身函数开始。

function outer() {
	var x = 1;
	function inner() {
		var x = 1;
		console.log('inner' + x);
	}
	console.log('outer' + x);
	inner();
}

javascript执行引擎，自动提升变量的作用域，但不会提升变量的赋值

// 演示
function a() {
	var x = 'x' + y;// 结果：xundefined
	console.log(x);
	var y = 'y';
}
// 推荐写法:所有变量定义都放在函数的头部，不要乱放，便于维护。
function a() {
	var y = 'y',
		x = 'x';
	console.log(x);
}

全局变量

// 全局变量
var x = 1;
function a() {
	console.log(x);
}
function b() {
	console.log(x);
}

全局对象window

// 默认所有的全局变量，都会自动绑定在window对象下。
// 全局变量
var x = 1;
function a() {
	console.log(window.x);
}

全局对象window中alert

// 全局变量
var x = '1';
var old_alert = window.alert;
old_alert(x);
window.alert = function() {
}
window.alert('hhh'); // 失效
window.alert = old_alert; //回复
window.alert('ggg');
// JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报异常 RefrenceErro

规范
由于所有的全局变量都绑定在window上，如果不同的js文件，使用了相同的全局变量，就会出现变量名称冲突，为了解决可以将全局变量放在自己定义的类中，恰恰jQuery也是这么做的。

// 唯一全局变量
var application = {};
// 定义全局变量
application.name = 'tiantian';
application.add = function(a, b) {
	return a + b;
}

4.1.7 局部作用域let（ES6新特性）

var在for循环中使用会在循环外也可以使用

function a() {
	for (var i = 0; i < 10; i++) {
		console.log(i)
	}
	console.log('在for循环外：' + i);
}
// 使用let定义不会出现这张情况

4.1.8 常量const（ES6新特性）

在没有const之前，js约定名称大写，就是常量，不能更改，但这是不合理的，ES6推出const

// 被const修饰的不可以更改
const PI = 3.14;

4.2 方法

4.2.1 定义

方法就是把函数放在对象里面，对象只有两个东西（属性和方法）

// 方式一
var penson = {
	// 属性
	name: 'tiantian',
	birth: 1995,
	// 方法
	age: function() {
		var now = new Date().getFullYear();
		return now - this.birth;
	}
}

// 方式二
function getAge (){
	var now = new Date().getFullYear();
	return now - this.birth;
}
var penson = {
	name: 'tiantian',
	birth: 1995,
	age: getAge
}

this
代表当前调用对象

4.2.2 apply

函数：getAge中this.birth有可能会是空参，使用apply可以指定this具体是那个对象

getAge.apply(penson,[]);// this指向penson，参数为空

4.3 闭包（难点）

4.4 箭头函数（新特性）

4.5 创建对象

类：模板
对象：具体实例
在JavaScript中需要换一个思维方式。
原型：被继承的对象。

// 对象 person
var person = {
	name: 'tiantian',
	age: 12,
	// 跑步方法
	run: function() {
		console.log('run');
	}
}
// 对象student
var studnet = {
	name: 'xiaoming',
	// 没有跑步方法，但是希望拥有
}
// 对象继承原型对象，就可以使用run方法
studnet.__proto__ = person;
studnet.run();

4.6 class继承（ES6新特性）

class关键子，是在ES6引入，现在部分浏览器还是ES5。

//定义一个Person类
class Person {
	// 构造器
	constructor(name) {
		this.name = name;
	}
	// 方法
	run() {
		console.log('runing');
	}
}
// 创建对象
var xiaoming = new Person('小明');

继承

// Student 继承 Person
class Student extends Person {
	// 构造器
	constructor(name) {
		super(name);
		this.name = name;
	}
	// 方法
	sleep() {
		console.log('sleeping');
	}
}
// 创建对象
var tiantian = new Student('天天');

继承本质：

4.7 原型链继承（难点）

js叫做原型链，java叫继承。
__proto__.__proto__.__proto__——>null (Object)到null之后还在循环像环形一样。

五、常用对象

5.1 Date

// 基本使用
now.getFullYear(); // 年
now.getMonth(); // 月 0~11 没有12月
now.getDate(); // 日
now.getDay(); // 星期几
now.getHours(); // 时
now.getMinutes(); // 分
now.getSeconds(); // 秒
// 使用js获取时间一般使用时间戳，因为其它是可以更改的
now.getTime(); // 时间戳（1970年1月1日按时区到现在的毫秒值）
// 转化时间格式
now.toLocaleString();
//返回值："2022/6/2 21:33:10" 

5.2 JSON

5.2.1 概述

1. JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
2. 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
3. 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

5.2.2 格式

任何js支持的类型都可以用JSON来表示。
对象：{}
数组：[]
键值对：key：value

5.2.3 对象转JSON

// 对象
var user = {
	name: "tiantian",
	age: 3,
	sex: '男'
}
// 对象转化JSON
var jsonUser = JSON.stringify(user);
console.log(jsonUser); // 结果：{"name":"tiantian","age":3,"sex":"男"}

5.2.4 JSON字符串转对象

var object = JSON.parse('{"name":"tiantian","age":3,"sex":"男"}');
console.log(object);

5.2.5 JSON和JS对象区别

// JSON
{"name":"tiantian","age":3,"sex":"男"}
// js对象
var user = {
	name: "tiantian",
	age: 3,
	sex: '男'
}

六、操作Bom元素

BOM：浏览器对象模型。

6.1 window（浏览器窗口）

window代表全局对象
所有js可以直接调用的对象都在window内，包括自己定义但没有分配到对象内的全局属性。

window.alert(1);
window.innerHeight;
window.innerWidth;
window.outerHeight;
window.outerWidth;

6.2 navigator（浏览器）

封装了浏览器的信息，但是用户可以修改信息，所以不一定准确。（不建议使用）

navigator.appVersion;
"5.0 (Windows)"
navigator.userAgent;
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0"
navigator.platform;
"Win32" 

6.3 screen（屏幕）

获取当前系统屏幕

screen.width;
2048
screen.height;
1152 

6.4 location（重要）

当前页面url信息

hash: ""
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/index.php?tn=monline_3_dg"
origin: "https://www.baidu.com"
pathname: "/index.php"
port: ""
protocol: "https:"
reload: function reload() //刷新网页
location.assign('https://kuangstudy.com');// 设置新的地址

6.5 History（前进、后退）

网页的历史，相当于浏览器（历史记录）前进、后退。（不建议使用，页面跳转尽量用后端）

history.back(); // 后退
history.forward(); // 前进

七、操作Dom元素

DOM：文档对象模型。

7.1 Document（文档）

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

document.title;
// "百度一下，你就知道" 
document.title ='天宇C:';
// "天宇C:" 
document.cookie;
// 获取网页cookie

7.2 获取Dom节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

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

		<script type="text/javascript">
			'use strict'
			// 对应css选择器
			// 标签选择器
			var h1 = document.getElementsByTagName('h1');
			// ID选择器
			var p1 = document.getElementById('p1');
			// 类选择器
			var p2 = document.getElementsByClassName('p2');
			// ID选择器
			var father = document.getElementById('father');
			// 获取父节点下所有子节点属性
			var childrens = father.children;
			// 获取第一个节点
			p1.firstChild;
			// 获取最后一个节点
			p1.lastChild;
		</script>
	</body>
</html>

7.3 更新Dom节点

// ID选择器
var p1 = document.getElementById('p1');
// 向p1更新值
p1.innerText = '你好';
// 向p1更新html
p1.innerHTML = '<samp>sss</samp>';
// 设置字体颜色
p1.style.color = 'yellow';
// 设置字体大小
p1.style.fontSize = '50px';
// 设置内边距
p1.style.padding = '2em';

7.4 删除Dom节点

步骤：
先获取父节点，在通过父节点删除自己

// 删除子节点
father.removeChild(p1);

获取当前节点父类：

var p1father = p1.parentElement;
p1father.removeChild(p1);

删除是一个动态的过程，当删除第一个之后，第二个就顶替第一个位置。

7.5 插入Dom节点

7.5.1 方式一：innerHTML

获取某个Dom节点，假设这个dom节点是空的，通过innerHTML就可以增加一个元素，但是这个Dom节点已经存在元素了，就不可以这么干，会产生覆盖。

p1.innerHTML = '<samp>sss</samp>';

7.5.2 方式二：追加

示例

<body>
	<p id="js">js</p>
	<div id="list">
		<p id="se">javaSE</p>
		<p id="ee">javaEE</p>
		<p id="me">javaME</p>
	</div>
	<script type="text/javascript">
		'use strict'
		var list = document.getElementById('list');
		var js = document.getElementById('js');
	</script>
</body>

追加

list.appendChild(js);

7.5.3 方式三：创建新节点

创建一个p标签，追加到节点中

// 添加一个p标签
var p1 = document.createElement('p');
// 更改p标签id
p1.id = 'p1';
// 更改p标签值
p1.innerText='hello';
// 将p标签追加到id=list的标签内
list.appendChild(p1);

添加CSS样式

// 创建一个style标签
var mycss = document.createElement('style');
mycss.setAttribute('type', 'text/css');
// 创建css样式
mycss.innerHTML = 'body{background-color: green;}';
// 将css标签追加到head节点内
document.getElementsByTagName('head')[0].appendChild(mycss);

追加到指定位置

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 将js节点插入list节点中的ee位置前
list.insertBefore(js,ee);

八、操作表单（验证）

8.1 获取表单的信息

• 文本框：text
• 下拉框：select
• 单选框：radio
• 多选框：checkbox
• 隐藏域：hidden
• 表单的目的：提交信息

<body>
	<form action="post">
		<p>
			<span>用户名：</span><input type="text" id="username">
			<!-- 多选框 -->
		<p>
			<span>性别：</span><input type="radio" name="sex" value="man" id="boy">男
			<input type="radio" name="sex" value="women">女
		</p>
		</p>
	</form>
	<script type="text/javascript">
		'use strict'
		var input_test = document.getElementById('username');
		// 获取value值
		console.log(input_test.value);
		// 修改值
		input_test.value = '123';
		// 获取单选框状态
		var boy_radio = document.getElementById('boy');
		boy_radio.checked;// 选中是true，反之false。
	</script>
</body>

8.2 提交表单（验证）

8.2.1 按钮绑定

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
	<form id="form1"  action="#" method="POST">
		<p>
			<span>用户名：</span><input type="text" id="username" name="username"><br>
			<span>密码：</span><input type="password" id="input_password">
			<input type="hidden" id="md5_password" name="password">
		</p>
		<!-- 按钮绑定事件 当被点击触发事件-->
		<button type="submit" onclick="f()">提交</button>
	</form>
	<script type="text/javascript">
		'use strict'
		function validate() {
	        if(confirm("是否提交")){
	            return true;
	        }else{
	            return false;
	        }
        }
		function f() {
			var uname = document.getElementById('username');
			var input_pwd = document.getElementById('input_password');
			var pwd = document.getElementById('md5_password');
			// md5算法加密
			pwd.value = md5(input_pwd.value);
			console.log(uname.value + '+' + pwd.value);
			if(validate()){
            	document.getElementById("form1").submit();
        	}
		}
	</script>
</body>

8.2.2 表单绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
	</head>
	<body>
		<!-- 表单绑定提交事件 -->
		<!-- onsubmit=绑定一个提交检测的函数， -->
		<!-- 将这个结果返回给表单，使用onsubmit接收 -->
		<form action="#" method="POST" onsubmit="return f()">
			<p>
				<span>用户名：</span><input type="text" id="username" name="username"><br>
				<span>密码：</span><input type="password" id="input_password">
				<!-- 使用隐藏域提交，这样密码框不会在提交一瞬间变长 -->
				<input type="hidden" id="md5_password" name="password">
			</p>
			<!-- 绑定事件 当被点击触发事件-->
			<button type="submit" >提交</button>
		</form>

		<script type="text/javascript">
			'use strict'

			function f() {
				var uname = document.getElementById('username');
				var input_pwd = document.getElementById('input_password');
				var pwd = document.getElementById('md5_password');
				// md5算法
				pwd.value = md5(input_pwd.value);
				// 提交到控制台
				console.log(uname.value + '+' + pwd.value);
				// 允许表单提交true，阻止表单提交false
				return true;
			}
		</script>
	</body>
</html>