上一篇：web客户端编程基础 – HTML、CSS
主要参考：https://www.w3school.com.cn
思维导图：
1- 思维导图
1、什么是JavaScript
首先：JavaScript和Java 是完全不同的语言，不论是概念还是设计！！！
其次：JavaScript是属于HTML和web的编程语言，是对网页行为进行编程的。
2、JavaScript的使用
2.1 使用JavaScript代码的两种方式：
1、 在。
2、 把代码写在后缀为 .js 的文件中，在
2.2 Js显示方案：
1、 window.alert() 弹窗警告
2、 document.write() 写入HTML输出
3、 innerHTML 写入HTML元素
4、 console.log() 写入浏览器控制台
2.3 使用浏览器执行JavaScript代码
在电脑上打开浏览器，按F12（有些是Fn+F12），出现调试窗口，在Console 选择项中，可以直接编写、执行、调试JavaScript代码。以google浏览器为例：
2 – 使用示例
3、语法与变量
在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。 计算机程序是由计算机“执行”的一系列“指令”。
在编程语言中，这些编程指令被称为语句。
JavaScript 程序就是一系列的编程语句。
注释：在 HTML 中，JavaScript 程序由 web 浏览器执行。
1、JavaScript的变量和php变量类似，都是弱类型的。
2、使用 var 来声明变量，以分号；分隔语句。
3、使用 = 号为变量赋值
4、使用 +-*/ 等算数运算符来计算值，（因此js 中不能使用连字符- 来命名变量）
5、//之后 或 /*与*/ 之间的代码被视为注释
4、数据类型
JavaScript 是一种弱类型或者说动态语言。不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。可以使用同一个变量保存不同类型的数据：字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）
4.1 布尔类型
布尔表示一个逻辑实体，可以有两个值：true 和 false。
4.2 Null类型
Null 类型只有一个值： null。
4.3 Undefined 类型
一个没有被赋值的变量会有个默认值 undefined。可以通过将变量的值设置为 null 来清空变量。但是用undefined清空变量则会有意想不到的bug等着你。
4.4 数字
JavaScript 只有一种数字类型：基于 IEEE 754 标准的双精度 64 位二进制格式的值（-(253 -1) 到 253 -1）。它并没有为整数给出一种特定的类型。数字可以带小数点，也可以不带。
NaN属于 JavaScript 保留词，指示某个数不是合法数。尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）。
Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。
绝不要用前导零写数字（比如 07）。
一些 JavaScript 版本会把带有前导零的数解释为八进制。
默认地，Javascript 把数显示为十进制小数。
但是您能够使用 toString() 方法把数输出为十六进制、八进制或二进制。例如：varNum.toString(8)
其它数字方法：
toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。
toFixed() 返回字符串值，它包含了指定位数小数的数字。常用于处理金钱toFixed(2)
toPrecision() 返回字符串值，它包含了指定长度的数字。
valueOf() 以数值返回数值。
parseFloat()解析一段字符串并返回数值。允许空格。只返回首个数字。
parseInt()解析一段字符串并返回数值。允许空格。只返回首个数字。
4.5 字符串
JavaScript 字符串用于存储和操作文本，是引号中的零个或多个字符组成。可以用单引号或双引号生成。\ 转义字符的使用，是为避免字符串中的引号产生歧义从而被切、报错。
其它六个有效转义序列：\b 退格键；\f 换页；\n 新行；\r 回车；\t 水平制表符；\v 垂直制表符；
内建属性 length 可返回字符串的长度。
其它常用JavaScript字符串方法：
1、 indexOf() 方法返回字符串中指定文本首次出现的索引（位置），未找到返回-1
2、 lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引，未找到返回-1
3、 search() 方法搜索特定值的字符串，并返回匹配的位置
4、 slice(start, end) 提取字符串的某个部分并在新字符串中返回被提取的部分
5、 substring() 类似于 slice()。不同之处在于 substring() 无法接受负的索引。
6、substr(start, length)提取字符串的某个部分并在新字符串中返回被提取的部分
7、replace(old, new)方法用另一个值new替换在字符串中指定的值old
replace() 方法不会改变调用它的字符串。它返回的是新字符串。它只替换首个匹配，且对大小写敏感。如需执行大小写不敏感的替换，则使用正则表达式。
8、 toUpperCase() 把字符串转换为大写
9、 toLowerCase() 把字符串转换为小写
10、 concat() 连接两个或多个字符串
11、trim()方法删除字符串两端的空白符
12、 split(“分隔符”) 将字符串转换为数组
4.6 数组
JavaScript 数组用于在单一变量中存储多个值。由括号[和反括号]或者 new Array()定义声明。通过引用索引号（下标号）来引用某个数组元素，例如arr[0]。数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 "object"。虽说如此，Js数组还是以数组来描述，区分：数组是[]括号，对象是{}花括号。
常用的数组属性和方法：
1、 length 属性返回数组的长度（数组元素的数目）
2、 Array.foreach() 函数遍历数组，一般最安全的方法是使用for循环。
3、 push方法向数组添加新元素，返回新数组的长度
4、 Array.isArray() 函数判断变量是否是数组（ECMAScript 5，部分老浏览器不支持）
5、 toString() 把数组转换为数组值（逗号分隔）的字符串，join(“分隔符”)也可以达到相同效果
6、 pop() 方法从数组中删除最后一个元素
7、 shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引，返回“位移出”的字符串
8、 unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素，返回新数组的长度
注意：push、unshift、pop、shift 这四个方法一起记忆：数组头尾添加删除，添加返回长度，删除返回元素。
9、 splice(start, length,…) 方法可用于向数组添加新项，返回一个包含已删除项的数组，一般的用法是删除元素:splice(start,1)
10、concat() 方法通过合并（连接）现有数组来创建一个新数组, 不会更改现有数组。它总是返回一个新数组, 可以使用任意数量的数组参数。
11、slice(start, end) 方法用数组的某个片段切出新数组。它不会从源数组中删除任何元素
数组排序：
1、 sort() 方法以字母顺序对数组进行排序。如果要对数值进行排序，则需自定义比值函数。例如：arr.sort(function(a, b){return a - b})
2、 reverse() 方法反转数组中的元素。
3、 Math.max 查找数组中的最高值
4、 Math.min 查找数组中的最低值
4.7 对象
天天面向对象，却没个对象。
示例：
var person = {
// 属性:属性值,
firstName: "Bill",
lastName : "Lee",
id : 627,
// 方法名：函数定义(参数)
fullName : function(arg) {
return arg+this.firstName + " " + this.lastName;
}
};
对象访问: 值person.id 方法person.fullname(‘hello！’);
JavaScript this 关键词指的是它所属的对象
它拥有不同的值，具体取决于它的使用位置：
在方法中，this 指的是所有者对象。
单独的情况下，this 指的是全局对象。
在函数中，this 指的是全局对象。
在函数中，严格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。
像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。
5、运算符
运算符常用
1、算术运算符 +-*/ ；
2、比较和逻辑运算符：
与&& 或|| 非!
大于> 小于< 大于等于>= 小于等于<= 等于== 全等于=== 不等于!=；
3、赋值运算 ++,-- ,+=, -= 。
不常用，但是关键时刻很好用的“位运算符”：
5-运算符图
6、条件语句
使用 if 来规定要执行的代码块，如果指定条件为 true
使用 else 来规定要执行的代码块，如果相同的条件为 false
使用 else if 来规定要测试的新条件，如果第一个条件为 false
使用 switch 来规定多个被执行的备选代码块
例1：
if(表达式){
代码块
}else if(表达式){
代码块
}else{
代码块
}
例2：
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
7、循环语句
for - 多次遍历代码块
for/in - 遍历对象属性
while - 当指定条件为 true 时循环一段代码块
do/while - 当指定条件为 true 时循环一段代码块
for (语句1; 语句 2; 语句 3) {
要执行的代码块
}
语句 1 在循环（代码块）开始之前执行。
语句 2 定义运行循环（代码块）的条件。
语句 3 会在循环（代码块）每次被执行后执行。
break 语句“跳出”循环。
continue 语句“跳过”循环中的一个迭代。
continue 语句（不论有无标签引用）只能用于跳过一个迭代。
break 语句，如果没有标签引用，只能用于跳出一个循环或一个 switch。
如果有标签引用，则 break 语句可用于跳出任意代码块
8、函数
8.1 函数的表达和定义
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数
例如：
function functionName(parameters) {
要执行的代码
}
JavaScript 函数也可以使用表达式来定义。函数表达式可以在变量中存储；
例如：var x = function (a, b) {return a * b};这样的函数是一个匿名函数。
箭头函数允许使用简短的语法来编写函数表达式。您不需要 function 关键字、return 关键字和花括号。例如：
// ES5
var x = function(x, y) {
return x * y;
}
// ES6 — 早期版本可能不支持
const x = (x, y) => { return x * y };
9、HTML DOM操作
通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
9.1 什么是HTML DOM
HTML DOM 文档对象模型。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：
9_1-对象树
9.2 HTML事件
HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。
常见的HTML事件：
onchange HTML 元素已被改变
onclick 用户点击了 HTML 元素
onmouseover 用户把鼠标移动到 HTML 元素上
onmouseout 用户把鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载
9.3 HTML DOM Document 对象
HTML DOM 文档对象是您的网页中所有其他对象的拥有者。
常用的方法和属性：
1、获取HTML元素
document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(name) 通过标签名来查找元素
document.getElementsByClassName(name) 通过类名来查找元素
注意：如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法，但是querySelectorAll() 不适用于 Internet Explorer 8 及其更早版本。
2、改变HTML元素
element.innerHTML = new html content 改变元素的 inner HTML
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式
3、添加和删除元素
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流
4、添加事件处理
document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序
document.getElementById("myBtn").addEventListener("click", function(){code}) 事件监听器，addEventListener() 方法。
5、查找HTML对象
document.anchors 返回拥有 name 属性的所有 元素。
document.applets 返回所有
document.baseURI 返回文档的绝对基准 URI
document.body 返回
元素document.cookie 返回文档的 cookie
document.doctype 返回文档的 doctype
document.documentElement 返回 元素
document.documentMode 返回浏览器使用的模式
document.documentURI 返回文档的 URI
document.domain 返回文档服务器的域名
document.domConfig 废弃。返回 DOM 配置
document.embeds 返回所有
document.forms 返回所有