如果是走 java 路线，不管以后是否从事前端工作，js 都是一门必须学会的脚本语言

它相当于是前端静态页面的一个补充，它可以让一个普通的页面在后台执行一些程序，比如我们点击一个按钮，我们可能希望执行某些操作，比如下载文件、页面跳转、页面弹窗、进行登陆等，都可以使用 JavaScript 来帮助我们实现。

# 第一个 `js` 文件

先创建一个 static.js 文件：

	const arr = [0, 2, 1, 5, 9, 3, 4, 6, 7, 8]

	for (let i = 0; i < arr.length; i++) {
	for (let j = 0; j < arr.length - 1; j++) {
	if(arr[j] > arr[j+1]){
	const tmp = arr[j]
	arr[j] = arr[j+1]
	arr[j+1] = tmp
	}
	}
	}

	window.alert(arr)

然后将它放到 html 的头部，获取 html 页面时就会自动加载：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>js章节</title>
	<link rel="icon" href="../static/images/旅行.svg" type="image/x-icon" />
	<script src="../static/js/static.js"></script>
	</head>
	<body>
	<b>慕青の迷途：https://cecilia.cool</b>
	</body>
	</html>

然后浏览器进入页面，就能看到弹窗将排好序的数组打印出来了（浏览器会在加载时自动执行 js 文件中编写的内容）。

# 基本语法

定义变量可以使用 let ，也可以使用 var ，IDEA 推荐使用 let ，后者存在缺陷。

基本数据类型：

Number：数字类型（包括小数和整数）
String：字符串类型（可以使用单引号或是双引号）
Boolean：布尔类型（与 Java 一致）

一些特殊值：

undefined：未定义 - 变量声明但不赋值默认为 undefined
null：空值 - 等同于 Java 中的 null
NaN：非数字 - 值不是合法数字

通过 console.info(typeof a) 查看 a 的类型

关系运算符除了正常的，还有全等 === ，不全等 !== ，而且可以关系运算符进行字符串的比较

	console.info('10' == 10) // true
	console.info('10' === 10) // false

== 会在两边不是相同类型时，都转为 number 再比较，而全等就不会转换，数据类型不同直接报错。

逻辑运算中，0=false，非 0=true，空串 = false，非空串 = true。 console.info(7 || true) 打印的是 7，因为 7 是 true，然后就不会再去管那个 true 了。

其他的 for，while，switch 都和 java 差不多。

# 函数定义

直接看代码：

	function f(a="666") {
	console.info("得到的实参为："+a)
	return 666
	}

	f("aa");

	// 函数本身也是一种类型，他可以被变量接收，所有函数类型的变量，也可以直接被调用
	let k = f;
	k();

	// 匿名函数赋值给变量
	let g = function (str) {
	console.info("实参为："+str)
	}

JS 是动态类型，因此我们不必指明参数 a 的类型，同时也不必指明返回值的类型，一个函数可能返回不同类型的结果，因此直接编写 return 语句即可。同理，我们可以在调用函数时，不传参，那么默认会使用 undefined 。

但是上面的代码指定了 a 的默认值，不传参就会使用 "666"。

函数作为参数传递：

function f(test) {
    test();
}

f(function () {
    console.info("这是一个匿名函数")
});

// 使用Lambda表达式简化匿名函数
f(() => {
    console.info("可以，不跟你多bb")
});

f(param => {
    console.info("接受到回调参数："+param)
});

# 数组和对象

更像是 Python 的列表，每个元素不需要同样的类型：

let arr = [1, "lbwnb", false, undefined, NaN]

可以使用 push 和 pop 进行栈操作（弱类型真 tm 牛逼）

	let arr = [1, "lbwnb", false, undefined, NaN]
	arr.push("bbb")
	console.info(arr.pop())
	console.info(arr)

对象的使用也很随意：

	let obj = {}
	obj.name = "伞兵一号"
	obj.f = function (){
	console.info("我是对象内部的函数")
	}

	obj.f()
	console.info(obj)

this 关键字指定对象内的属性：

	let name = "我是外部变量"
	let obj = {
	val: "定义对象时指定成员"
	}
	obj.name = "我是内部变量"
	obj.f = function (){
	console.info("name属性为："+this.name)
	}
	// 如果使用 lambda 表达式，那么 this 并不会指向对象

# 事件

事件有很多种类型，其中常用的有：

onclick：点击事件
oninput：内容输入事件
onsubmit：内容提交事件

<input type="password" oninput="console.info('正在输入文本')">

这是直接写事件代码，也可以通过函数调用：

<b onclick="obj.f()">慕青の迷途：https://cecilia.cool</b>

# Document 对象

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），它将整个页面的所有元素全部映射为 JS 对象，这样我们就可以在 JS 中操纵页面中的元素。

比如想要读取页面中某个输入框中的内容，那么我们就需要从 DOM 中获取此输入框元素的对象：

document.getElementById("pwd").value

举个🌰:

html 代码：

	<body>
	<b id="123" onclick="obj.f()">慕青の迷途：https://cecilia.cool</b>
	</body>

js 代码：

	let obj = {}
	obj.name = "伞兵一号"
	obj.f = function (){
	console.info(document.getElementById("123"));
	}

也可以在事件响应的时候将对象传给函数：

	<body>
	<b id="123" onclick="f(this)">慕青の迷途：https://cecilia.cool</b>
	</body>

通过 document 对象，还可以动态更改 html 元素的值，当我们从后端接收数据，就可以通过 js 改变前端 html 的元素的值。

这里不方便写后端代码，就简单的例子，点击按键，按键就改变显示的东西：

<button id = "b" onclick="f()">test</button>

js 代码：

	function f() {
	document.getElementById("b").innerHTML = "new Name";
	}

# XHR 请求

如何与后端进行交互，经典问题就是提交表单，怎么将信息发送过去：

	// XMLHttpRequest 对象，来向服务器发送一个 HTTP 请求
	function http() {
	let xhr = new XMLHttpRequest();
	xhr.open('GET', 'https://www.baidu.com');
	xhr.send();
	}

然后将该函数绑定到按钮的点击事件上：

<input id="button" type="button" onclick="http()">

我们可以在网络中查看我们发起的 HTTP 请求并且查看请求的响应结果，比如上面的请求，会返回百度这个页面的全部 HTML 代码。

实际上，我们的浏览器在我们输入网址后，也会向对应网站的服务器发起一次 HTTP 的 GET 请求。

在浏览器得到页面响应后，会加载当前页面，如果当前页面还引用了其他资源文件，那么会继续向服务器发起请求，直到页面中所有的资源文件全部加载完成后，才会停止。

之后如何使用 js 拿到后端传过来的数据（一般是 json），然后用这些数据改变前端展示呢？就可以使用 Ajax 请求，只不过是后话。

# 参考 + 转载

https://www.yuque.com/qingkongxiaguang/javaweb/iiqwzl#c8971466

Web

# 第一个 js 文件