JavaScript介绍
JavaScript 是属于 HTML 和 Web 的编程语言。HTML 定义网页的内容，CSS 规定网页的布局，JavaScript 对网页行为进行编程。
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
JavaScript的作用
- 能够改变 HTML 内容
- 能够改变 HTML 属性
- 能够改变 HTML 样式 (CSS)
- 能够隐藏 HTML 元素
- 能够显示 HTML 元素
JavaScript的使用
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
例：
<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>
脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，可以在 HTML 文档中放置任意数量的脚本。
例：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>
<body>
<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>
把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
脚本可放置与外部文件中：
外部脚本很实用，如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称：
例：
<script src="myScript.js"></script>
可通过完整的 URL 或相对于当前网页的路径引用外部脚本：
本例使用完整的 URL 来链接至脚本：
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>
JavaScript 显示方案
JavaScript 能够以不同方式“显示”数据：
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
使用 innerHTML
如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：
实例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
使用 document.write()
出于测试目的，使用 document.write() 比较方便：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
使用 window.alert()
使用警告框来显示数据：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
使用 console.log()
在浏览器中，可使用 console.log() 方法来显示数据。
通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”
实例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript 语法
JavaScript 的语法跟C语言，java，python等都有相似处，这里我只简单的介绍一下相关语法的使用。
JavaScript 变量
JavaScript 是弱类型的语言，定义变量时跟python有些相似，不用声明变量类型。
JavaScript 使用 var 关键词来声明变量。
在本例中，x 被定义为变量。然后，x 被赋的值是 7：
var x;
x = 7;
在JavaScript中，声明变量时若没有对变量进行初始化，它的值将是 undefined。
在 JavaScript 中，没有值的变量，其值是 undefined。
var carName;
变量 carName 在这条语句执行后的值是 undefined。
任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。
person = undefined; // 值是 undefined，类型是 undefined
空值与 undefined 不是一回事。
空的字符串变量既有值也有类型。
数据类型
JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：
var length = 7; // 数字
var lastName = "Gates"; // 字符串
var cars = ["Porsche", "Volvo", "BMW"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象
JavaScript 拥有动态类型。这意味着相同变量可用作不同类型：
var x; // 现在 x 是 undefined
var x = 7; // 现在 x 是数值
var x = "Bill"; // 现在 x 是字符串值
如果对一个数和一个字符串相加，结果是字符串级联：
var x = 10;
var y = "20";
var z = x + y; // z 将是 1020（一个字符串）
JavaScript 比较运算符
在JavaScript中 == 和 === 两个比较运算符是不一样的。
函数
函数的定义
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
function name(参数 1, 参数 2, 参数 3) {
要执行的代码
}
实例
function myFunction(p1, p2) {
return p1 * p2; // 该函数返回 p1 和 p2 的乘积
}
JavaScript中函数的定义不需要指明返回值类型。
函数中的代码将在其他代码调用该函数时执行：
- 当事件发生时（当用户点击按钮时）
- 当 JavaScript 代码调用时
- 自动的（自调用）
JavaScript 函数也可以使用表达式来定义。
函数表达式可以在变量中存储：
var x = function (a, b) {return a * b};
在变量中保存函数表达式之后，此变量可用作函数：
var x = function (a, b) {return a * b};
var z = x(4, 3);
自调用函数
函数表达式可以作为“自调用”。
自调用表达式是自动被调用（开始）的，在不进行调用的情况下。
函数表达式会自动执行，假如表达式后面跟着 ()。
需要在函数周围添加括号，以指示它是一个函数表达式：
(function () {
var x = "Hello!!"; //我会调用我自己
})();
上面的例子可以在不调用的情况下自动调用函数。
函数是对象
JavaScript 中的 typeof 运算符会为函数返回 “function”。
但是最好是把 JavaScript 函数描述为对象。
JavaScript 函数都有属性和方法。
arguments.length 会返回函数被调用时收到的参数数目：
function myFunction(a, b) {
return arguments.length;
}
toString() 方法以字符串返回函数：
function myFunction(a, b) {
return a * b;
}
var txt = myFunction.toString();
JavaScript 对象
JavaScript 对象中的名称:值对被称为属性。
对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中。
实例：
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
访问对象属性
能够以两种方式访问属性：
objectName.propertyName 或 objectName[“propertyName”]
实例：
person.lastName;
person["lastName"];
访问对象方法
通过如下语法访问对象方法：objectName.methodName()
实例：name = person.fullName();
JavaScript 事件
HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。
HTML 事件可以是浏览器或用户做的某些事情。
下面是 HTML 事件的一些例子：
- HTML 网页完成加载
- HTML 输入字段被修改
- HTML 按钮被点击
通常，当事件发生时，用户会希望做某件事。
JavaScript 允许在事件被侦测到时执行代码。
通过 JavaScript 代码，HTML 允许向 HTML 元素添加事件处理程序。
下面是一些常见的 HTML 事件：
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素已被改变 |
| onclick | 用户点击了 HTML 元素 |
| onmouseover | 用户把鼠标移动到 HTML 元素上 |
| onmouseout | 用户把鼠标移开 HTML 元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：
- 每当页面加载时应该做的事情
- 当页面被关闭时应该做的事情
- 当用户点击按钮时应该被执行的动作
- 当用户输入数据时应该被验证的内容
- 等等
在下面的例子中，onclick 属性（以及代码）被添加到 <button> 元素：
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>
字符串
JavaScript 字符串是引号中的零个或多个字符。
var x = "Bill Gates"
字符串方法和属性
原始值，比如“Bill Gates”，无法拥有属性和方法（因为它们不是对象）。
但是通过 JavaScript，方法和属性也可用于原始值，因为在执行方法和属性时 JavaScript 将原始值视为对象。
字符串长度
length 属性返回字符串的长度：
实例：
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
查找字符串中的字符串
indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：
实例：
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
检索字符串中的字符串
search() 方法搜索特定值的字符串，并返回匹配的位置：
var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");
indexOf() 与 search()区别在于：
- search() 方法无法设置第二个开始位置参数。
- indexOf() 方法无法设置更强大的搜索值（正则表达式）。
数组
在 JavaScript中，数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”。
所有数组也有属性和方法。
var x = cars.length; // length 属性返回元素的数量
var y = cars.sort(); // sort() 方法对数组进行排序
添加数组元素
向数组添加新元素的最佳方法是使用 push() 方法：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // 向 fruits 添加一个新元素 (Lemon)
也可以使用 length 属性向数组添加新元素，即通过下标直接访问添加：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // 向 fruits 添加一个新元素 (Lemon)
如何识别数组
常见的问题是：我如何知晓某个变量是否是数组？
问题在于 JavaScript 运算符 typeof 返回 “object”。
为了解决这个问题，ECMAScript 5 定义了新方法 Array.isArray()：
Array.isArray(fruits); // 返回 true
删除元素和添加新元素
pop() 方法从数组中删除最后一个元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // 从 fruits 删除最后一个元素（"Mango"）
pop() 方法返回“被弹出”的值：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop(); // x 的值是 "Mango"
push() 方法（在数组结尾处）向数组添加一个新的元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); // 向 fruits 添加一个新元素
push() 方法返回新数组的长度。
既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0]; // 把 fruits 中的首个元素改为 undefined
数组排序
sort() 方法以字母顺序对数组进行排序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // 对 fruits 中的元素进行排序
reverse() 方法可以反转数组中的元素。
默认地，sort() 函数按照字符串顺序对值进行排序。
该函数很适合字符串（“Apple” 会排在 “Banana” 之前）。
不过，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。
正因如此，sort() 方法在对数值排序时会产生不正确的结果。
我们通过一个比值函数来修正此问题：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
使用相同的技巧对数组进行降序排序：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
this
JavaScript this 关键词指的是它所属的对象。
它拥有不同的值，具体取决于它的使用位置：
- 在方法中，this 指的是所有者对象。
- 单独的情况下，this 指的是全局对象。
- 在函数中，this 指的是全局对象。
- 在函数中，严格模式下，this 是 undefined。
- 在事件中，this 指的是接收事件的元素。
JavaScript 对象
有不同的方法来创建对象：
- 定义和创建单个对象，使用对象文字。
- 定义和创建单个对象，通过关键词 new。
- 定义对象构造器，然后创建构造类型的对象。
在 ECMAScript 5 中，也可以通过函数 Object.create() 来创建对象。
创建对象最简单的方法：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
使用 JavaScript 关键词 new创建对象：
下面的例子也创建了带有四个属性的新的 JavaScript 对象：
var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue";
通过对象构造器创建：
例如：
首先定义构造器
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
通过 new 关键词调用构造器函数可以创建对象：
var myFather = new Person("Bill", "Gates", 62, "blue");
JavaScript 提供用于原始对象的构造器：
var x1 = new Object(); // 一个新的 Object 对象
var x2 = new String(); // 一个新的 String 对象
var x3 = new Number(); // 一个新的 Number 对象
var x4 = new Boolean(); // 一个新的 Boolean 对象
var x5 = new Array(); // 一个新的 Array 对象
var x6 = new RegExp(); // 一个新的 RegExp 对象
var x7 = new Function(); // 一个新的 Function 对象
var x8 = new Date(); // 一个新的 Date 对象
JavaScript 属性
访问对象属性的语法是：
objectName.property // person.age
或者：
objectName["property"] // person["age"]
或者：
objectName[expression] // x = "age"; person[x]
添加新属性：
假设 person 对象已存在，那么可以直接为其添加新属性：
person.nationality = "English";
删除属性
delete 关键词从对象中删除属性：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
delete person.age; // 或 delete person["age"];