学习JavaScript一篇就够了-阿里云开发者社区

JavaScript

1，JavaScript简介

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言、浏览器端的脚本语言、也可以在服务器端开发

它是作为开发Web页面的脚本语言而出名

JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成

主要功能

嵌入动态文本于HTML页面。

对浏览器事件做出响应。

读写HTML元素

在数据被提交到服务器之前验证数据

检测访客的浏览器信息。控制cookies，包括创建和修改等

基于Node.js技术进行服务器端编程

语言组成

ECMAScript，描述了该语言的语法和基本对象

文档对象模型（DOM），描述处理网页内容的方法和接口

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

语言特点

脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释

基于对象（弱对象）。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象

JavaScript是一种采用事件驱动的脚本语言

跨平台性

2，JavaScript引入方式

JavaScript引入方式有两种：

内部脚本：将 JS代码定义在HTML页面中
外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

2.1 内部脚本

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间，而标签理论上可以放在页面的任何位置，但是一般把脚本置于

元素的底部，可改善显示速度。

==因为JavaScript是一种解释性的语言，浏览器在加载页面的时候会从上往下进行加载并解析（浏览器在加载页面时，会在内存中绘制DOM树）。我们应该让用户看到页面内容，然后再展示动态的效果。==

2.2 外部脚本

第一步：定义外部 js 文件。如定义名为 demo.js的文件

第二步：在页面中引入外部的js文件

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

一般情况下、加载在页面头部
也可以将它加载到body最后一行或者body的后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/demo.js"></script>        第一个位置
</head>
<body>

<script src="../js/demo.js"></script>            第二个位置
</body>
<script src="../js/demo.js"></script>            第三个位置
</html>

==注意：==

外部脚本不能包含 <script> 标签
在js文件中直接写 js 代码即可，不要在 js文件中写 script 标签

<script> 标签不能自闭合
在页面中引入外部js文件时，不能写成 <script src="../js/demo.js" />。

3，JavaScript基础语法

3.1 简单书写

变量名、函数名以及其他一切东西都是区分大小写的
注释
- 单行注释： // 注释内容
- 多行注释： / 注释内容 /
大括号代表代码块

3.2 输出语句

==JavaScript有不同的方式进行输出，不同语句输出的位置和效果不同==

window.alter("")写入警告框

document.write("")写入HTML输出

console.log("")写入控制台

prompt("")输入提示框

confirm("")确认提示框

innerHTML：获取文字标签对象，更改

使用 window.alert("") 写入警告框

使用 document.write("") 写入 HTML 输出

使用 console.log("") 写入浏览器控制台

查看控制台输出信息，在浏览器界面按 F12 ，在点击 Console即可看见控制台信息

使用 prompt("") 写入输入提示框

使用 confirm("") 写入确认提示框

使用 innerHTML 写入确认提示框

<body>
    <p id = "myp"></p>
</body>
<script>
    document.getElementById("myp").innerHTML = "hello world";
</script>

innerHTML`与innerText`的区别

innerHTML可以将字符串形式的标签代码进行解析。
innerText只解析字符串，不管字符串里的代码。

let mydiv = document.getElementById("divid");
mydiv.innerHTML = '<input type="text" placeholder="请输入信息">';

let mydiv = document.getElementById("divid");
mydiv.innerText = '<input type="text" placeholder="请输入信息">';

3.3 变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。

格式 var 变量名 = 数据值;

而在JavaScript 是一门弱类型语言，变量==可以存放不同类型的值==；

命名规则

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）

数字不能开头

建议使用驼峰命名

var的作用域是全局的，并且变量可以重复定义，重复定义的值会将原来的值替换掉

针对如上的问题，==ECMAScript 6 新增了 let 关键字来定义变量。==它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。

==ECMAScript 6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。==

var age = 20;
let age = 20;
const PI = 3.14;

var array = [10, 20, 30, 40, 50];
var student = ["张三", "李四", "王五"];
// 数组也可以用下标来访问



// 当前环境下js的最大值
var maxv = Number.MAX_VALUE;
console.log(String(maxv));  //1.7976931348623157e+308

// 当前环境下js的最小值
var minv = Number.MIN_VALUE;
console.log(String(minv));  //5e-324

使用var声明的变量属于window对象，一般情况可以省略window

使用let声明的变量不属于window对象。
let ename = "zhangsan";
console.log(window.ename);  // undefined

变量提升

var关键字声明的变量，无论实际声明的位置在何处，都会被视为声明在函数的顶部（如果声明不在任意函数内，则视为在全局作用域的顶部）
JavaScript引擎的工作方式是，先预解析代码，获取所有被声明的变量和函数声明，然后再一行一行地运行，这就使所有变量声明的语句，都会被提升到代码的头部，这就是变量提升

console.log(a);     //undefined
var a = 1;
console.log(a);    // 1

上面代码首先在控制台显示未声明的变量,本来是错误的做法但是没有报错.因为JS的变量提升.真正运行的是以下代码

var a ;
console.log(a);
a = 1;
console.log(a);

函数提升

声明式函数中，函数同名，函数全部提升，后者覆盖前者

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

var y = add(a);

function add(x){
    return x = x + 2;
}

var z = add(a);

console.log(y);        // 3
console.log(z);        // 3

这个例子就是两个函数同时提升，后者覆盖了前者，所以不管什么时候调的函数，函数内容都是后面的

如果有变量和函数同名，则会忽略掉变量，只提升函数

console.log(foo);    //   foo(){ }
function foo(){  }
var foo = 2;
console.log(foo);   //  2

此例子将foo函数提升上去，导致第一个输出的是函数。

常量

定义时必须赋初值
赋初值后不能在进行更改
常量对象不能改变，但可以更改对象中的属性
常量数组不能改变，但可以更改数组中的元素。

const MAX = 1;

const student = { name: 'zhangsan', age: 18, sex: '男' }
student.name = 'lisi';  
console.log(student.name);        // lisi

const arr = [1, 2, 3];
//arr = [4, 5, 6];       //Assignment to constant variable.
arr[0] = 4;
arr[1] = 5;
arr[2] = 6;
console.log(arr);        //[4, 5, 6];

3.4 数据类型

JavaScript中提供了两类数据类型：原始类型和引用类型。==使用 typeof 运算符可以获取数据类型==

原始数据类型

number：数字类型（整数、小数、NaN (Not a Number) ）s

string：字符、字符串，（单双引号皆可）

boolean：布尔（true、false）

null：对象为空，但使用typeof获取到的数据类型是object

这最初是JavaScript的一个错误，然后被ECMAScript沿用了。现在null被认为是对象的占位符，从而解释了这一矛盾。

undefined：当声明的变量未初始化时，该变量的默认值是undefined

3.5 运算符

JavaScript的运算符与众多语言相同，不同的是==和===

一元运算符：++，--

算术运算符：+，-，*，/，%

赋值运算符：=，+=，-=…

关系运算符：>，<，>=，<=，!=，\==，===…

逻辑运算符：&&，||，!

三元运算符：条件表达式 ? true_value : false_value

\==和===区别

==：
1. 判断类型是否一样，如果不一样，则进行类型转换
2. 再去比较其值
===：js 中的全等于
1. 判断类型是否一样，如果不一样，直接返回false
2. 再去比较其值

var age1 = 20;
var age2 = "20";

alert(age1 == age2);// true            不识别类型
alert(age1 === age2);// false        识别类型

类型转换

其他类型转为number
- string转number: 按照字符串的字面量转为数组，如果字面值不是数组，则转为NaN
  - 方法1：使用+正号运算符：
```
var str = +"20";
alert(str + 1) //21
```
  - 方法2：使用parseInt()函数（方法）==推荐使用==：
```
var str = "20";
alert(parseInt(str) + 1);
```
- boolean转number: true转为 1， false转为 0；
```
var flag = +false;
alert(flag); // 0

var flag = true;
alert(flag); // 1
```
其他类型转为boolean
- number转为boolean“：0 和 NaN 转为 false，其他的数字转为 1；
- string转为boolean：空字符串转为 false，其他字符串转为 true ;
- null转为boolean： false ;
- undefined转为boolean：false ;

其他类型转换为string
- number转为string：字面值转换
- boolean转为string：字面值转换
- null转为string： "null"
- undefined转为string : "undefined"

3.6 流程控制语句

if

switch

for

while

do while

3.6.1 if 语句

var count = 3;
if (count == 3) {
    alert(count);
}

3.6.2 switch 语句

var num = 3;
switch (num) {
    case 1:
        alert("星期一");
        break;
    case 2:
        alert("星期二");
        break;
    case 3:
        alert("星期三");
        break;
    case 4:
        alert("星期四");
        break;
    case 5:
        alert("星期五");
        break;
    case 6:
        alert("星期六");
        break;
    case 7:
        alert("星期日");
        break;
    default:
        alert("输入的星期有误");
        break;
}

3.6.3 for 语句

var array = [1, 2, 3, 4, 5];
for(let i = 0; i < array.length; i ++ ){    //建议for循环小括号中定义的变量使用let
    alert(array[i]);
}

3.6.4 while 语句

var sum = 0;
var i = 1;
while (i <= 100) {
    sum += i;
    i++;
}
alert(sum);

3.6.15do while 语句

var sum = 0;
var i = 1;
do {
    sum += i;
    i++;
}
while (i <= 100);
alert(sum);

3.7 函数

函数定义

function 函数名(参数1,参数2..){
    要执行的代码
    return 
}

var 函数名 = function (参数列表){
    要执行的代码
    return
}

==注意：==

形式参数不需要类型。因为JavaScript是弱类型语言
```
function add(a, b){
    return a + b;
}
```
上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。
返回值也不需要定义类型，可以在函数内部直接使用return返回即可

函数调用

函数名称(实际参数列表);
let result = add(10,20);

==注意：==

JS中，函数调用可以传递任意个数参数

例如 let result = add(1,2,3);
它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。

箭头函数

==ES2015版本新增的==

let test1 = () => {                    // 无形式参数
    console.log("箭头函数的调用");
}

let test2 = (s) => {                // 对象形式参数
    console.log("name = " + s.name);
    console.log("age = " + s.age);
    console.log("sex = " + s.sex);
}

let test3 = s => {                    // 括号可省略
    console.log("name = " + s.name);
    console.log("age = " + s.age);
    console.log("sex = " + s.sex);
}

test1();

let stu1 = {name:"zhangsan", age:18, sex:"nan"};
test2(stu1);

let stu2 = {name:"zhangsan", age:18, sex:"nan"};
test3(stu2);

3.8 严格模式

打开严格模式"use strict";

在严格模式中，不允许使用未声明的变量
```
"use strict";
    a = 2;
    console.log(a);
```
不允许使用未声明的对象
不允许使用预留的关键字：如:public,static,private,interface......;

严格模式

4，常用对象

JavaScript是基于面向对象编程语言

JavaScript的对象一共分为三类：

基本对象

BOM对象
DOM对象

4.1 Array对象

定义

方式一

var 变量名 = new Array(元素列表); 
var arr = new Array(1,2,3); //1,2,3 是存储在数组中的元素

方式二

var 变量名 = [元素列表];
var arr = [1,2,3]; //1,2,3 是存储在数组中的数据（元素）

元素访问

直接通过下标来访问

arr[索引] = 值;

特点

JS中的数组的长度是可以变化的

// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]);  //undefined

// [1, 2, 3, ......, 10]
// 其中 4 - 9 中的元素没有赋值，默认就是undefined.

属性

array.length 可以动态获取数组的长度
可以用来遍历数组

var arr = [1,2,3];
for (let i = 0; i < arr.length; i++) {
    alert(arr[i]);
}

方法

push函数

// push:添加方法
var arr5 = [1,2,3];
arr5.push(10);
alert(arr5);  //数组的元素是 {1,2,3,10}

splice函数

参数1：索引。表示从哪个位置开始删除

参数2：个数。表示删除几个元素

// splice:删除元素
var arr5 = [1,2,3];
arr5.splice(0,1); //从 0 索引位置开始删除，删除一个元素 
alert(arr5); // {2,3}

4.2 String对象

String属性和方法文档

定义

方式一：

var 变量名 = new String(s); 
var str = new String("hello");

方式二：
```
var 变量名 = s;
var str = "hello";
```

属性

// length:动态获取字符串的长度
var str = "hello";
str.length; // 5

函数

charAt()函数：返回指定位置的字符

var str = "hello";
alert(str.charAt(2)); // e

indexOf()函数：检索字符串

// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
var str = "hello";
alert(str.indexOf('o', 1)); //4

// 参数一: 寻找哪个字符串
// 参数二: 从哪个下标索引开始找
// 找到返回下标，没找到返回-1

trim()函数：去掉字符串两端的空格，中间的空格不能去掉

var str4 = '  abc   ';
alert(1 + str4.trim() + 1);            // 1abc1

var str4 = '  abc   ';
alert(1 + str4.trimLeft() + 1);        // 1abc   1

var str4 = '  abc   ';
alert(1 + str4.trimRight() + 1);    // 1  abc1

toUpperCase()：把字符串转换为大写。

var str = "hello";
alert(str.toUpperCase());    // HELLO

toLowerCase()：把字符串转换为小写。

var str = "HELLO";
alert(str.toLowerCase());    // hello

replace()：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
```
var str = "hello world";
alert(str.replace("world", "javascript"));    // hello javascript
```

concat()：用于连接两个或多个字符串。

var str = "hello";
alert(str.concat("world"));        // helloworld

substr()：可在字符串中抽取从 start 下标开始的指定数目的字符。

var str = "hello";
alert(str.substr(2, 3));        // llo
    // substr(start, length)

4.3 自定义对象

1. 普通定义

var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...,
    函数名称:function (形参列表){},
    ...
};

let stu = {
    name: "zhangsan", 
    age: 18, 
    sex: "nan",
    add: function(a, b){
        return a + b;
    }
};

console.log(stu.add(1, 2));        // 3

2. 用类的构造器自定义对象

class Student{                    // 类
    constructor(name, age, sex)        // 构造器
    {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    
    // 同时类里可以创建属性和方法
}

let stu1 = new Student("zhangsan", 18, "男");
console.log('name = ' + stu1.name);
console.log('age = ' + stu1.age);
console.log('sex = ' + stu1.sex);

3. 使用Object.create()构造对象

class Student{                    // 类
    constructor(sname, age, sex)        // 构造器
    {
        this.sname = sname;
        this.age = age;
        this.sex = sex;
    }
    
    // 同时类里可以创建属性和方法
}

let stu = Object.create(Student);
stu.sname = 'zhangsan';
stu.age = 18;
stu.sex = 'nan';

console.log(stu);    //{sname: 'zhangsan', age: 18, sex: 'nan'}

==name为关键字，不能直接用于变量名称==

4. 用object() 定义对象

let stu = new Object();
stu.sname = 'zhangsan';
stu.age = 18;
stu.sex = 'nan';

console.log(stu);    // {sname: 'zhangsan', age: 18, sex: 'nan'}

调用属性和调用函数

// 对象名.属性名
person.name;    // zhangsan

// 对象名.函数名()
person.eat();    // 干饭~

属性的使用方式

点属性

let stu = {ename: 'zhangsan', age: 18, sex: 'nan', height: 190};
console.log(stu.ename);        //zhangsan
console.log(stu.age);        //18
console.log(stu.sex);        //nan
console.log(stu.height);    //190

对象属性作为小标使用

let stu = {ename: 'zhangsan', age: 18, sex: 'nan', height: 190};
console.log(stu["ename"]);        //zhangsan
console.log(stu["age"]);        //18
console.log(stu["sex"]);        //nan
console.log(stu["height"]);        //190

使用循环迭代出对象的属性名

let stu = {ename: 'zhangsan', age: 18, sex: 'nan', height: 190};
for(const key in stu){
    console.log(key);    // ename age sex height
}

使用循环迭代属性对应的值

let stu = {ename: 'zhangsan', age: 18, sex: 'nan', height: 190};
for(const key in stu){
    console.log(stu[key]);    // zhangsan 18 nan 190
}

4.4 Date对象

定义

var d = new Date();

常用方法

方法	描述
`getFullYear()`	返回年份
`getMonth()`	返回月份（从 0-11，注意加一）
`getDate()`	返回月中的第几天（从 1 到 31）
`getDay()`	返回星期几（0-6）
`getHours()`	返回小时（从 0-23）
`getMinutes()`	返回分钟（从 0-59）
`getSeconds()`	返回秒数（从 0-59）
`getMilliseconds()`	返回毫秒（0-999）

JavaScript Date方法

4.5 对象知识的扩展

删除对象的指定属性

let stu = {name:"zhangsan", age:18, sex:"nan"};
console.log(stu);        //{name: 'zhangsan', age: 18, sex: 'nan'}
console.log(stu.sex);    //nan

delete stu.sex;
console.log(stu);        //{name: 'zhangsan', age: 18}
console.log(stu.sex);    //undefined

this关键字的含义

在方法中、this指的是该对象
单独使用、this指的是全局对象(Windows--浏览器窗口)
在函数中、this指的是全局对象(Windows--浏览器窗口)
在事件中、this指的是接收事件的元素
在函数中、如果是严格模式下、this是undefined

4.6 字符串模板

语法：用反引号 ` 括起来，里面什么字符都保留。

let str = `""''"'<>'"`;
console.log(str);            // ""''"'<>'"
console.log(typeof str);    // string


let str = `"123"
    "456"
    "789"`;
console.log(str);
console.log(typeof str);

// "123"
//     "456"
//     "789"

作用：可以使用字符串插值模板语法，动态获取值，还可以进行运算

语法： ${变量或者表达式}；

<body>
    <h1 id = "h1"></h1>
    <button id = "btn">功德加一</button>
</body>
<script>
    var cnt = 0;
    document.getElementById("btn").onclick = function()
    {
        let str = `当前功德为：${cnt++}`;
        document.getElementById("h1").innerHTML = str;
    }
</script>

4.7 Event对象

概念：Event 对象代表事件的状态，当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。）的对象，这个对象就是event（事件对象）。

对象的获取

对象.事件 = function(event){
    console.log(event);
    // 可以操作使用event对象
}

document.querySelector("#d1").onkeyup = function(event){
console.log(event);
}

事件流

冒泡：假如用户单击了一个元素,该元素拥有一个click事件,那么同样的事件也将会被它的祖先触发,这个事件从该元素开始一直冒泡到DOM树的最上层,这一过程称为事件冒泡
捕获：事件捕获和事件冒泡是相反的,也就是说,当用户触发了一个事件的时候,这个事件是从DOM树的最上层开始触发一直到捕获到事件源.

属性和方法

Event 对象的属性和方法

preventDefault()：如果可以取消事件，则将其取消，不执行属于该事件的默认操作。

<body>
    <a href="https://www.baidu.com/">百度</a>
</body>
<script>
    let a = document.querySelector("a");
    a.addEventListener("click", function(event){
        event.preventDefault();        // 禁止跳转
    })
</script>

stopPropagation()：防止事件在事件流中进一步传播。

<body>
    <div onclick = "div2()">
        div2
        <div onclick="div1(event)"> div1 </div>
    </div>
</body>
<script>
    function div1(event){
        alert("你点击了div1")
        event.stopPropagation();
    }
    function div2(){
        alert("你点击了div2")
    }
</script>

处理前，点击div1会出现两句话（因为冒泡）；操作后，事件在事件流中阻断。

5，BOM

BOM：Browser Object Model ==浏览器对象模型==。也就是 JavaScript 将浏览器的各个组成部分封装为对象。

BOM 中包含了如下对象：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系

5.1 Window对象

对象的获取：该对象不需要创建直接使用 window，其中 window. 可以省略。

对象属性：window 对象提供了==用于获取其他 BOM 组成对象==的属性

也就是说，我们想使用 Location 对象的话，就可以使用 window 对象获取；写成 window.location，而 window. 可以省略，简化写成 location 来获取 Location 对象。

对象函数

alert(): 显示带有一段消息和一个确认按钮的警告框
```
alert("警告框");
window.alert("警告框");
```

confirm()：显示带有一段消息以及确认和取消按钮的对话框

// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
var flag = confirm("确认删除？");

alert(flag);

setInterval(function,毫秒值)：在一定的时间间隔后执行一个function，循环执行

setTimeout(function (){
    alert("hehe");
},3000);
// 当我们打开浏览器，3秒后才会弹框输出 `hehe`，并且只会弹出一次。

setTimeout(function,毫秒值)：在一定的时间间隔后执行一个function，只执行一次

setInterval(function (){
    alert("hehe");
},2000);
// 当我们打开浏览器，每隔2秒都会弹框输出 `hehe`。

5.2 History对象

对象获取：使用 window.history获取，其中window. 可以省略，所以直接使用history就行

对象方法

back()：加载列表中的前一个URL；
forward()：加载列表中的下一个URL；

当我们点击向左的箭头，就跳转到前一个访问的页面，这就是 back() 函数的作用；当我们点击向右的箭头，就跳转到下一个访问的页面，这就是 forward() 函数的作用。

5.3 Location对象

对象获取：使用 window.location获取，其中window. 可以省略

对象属性：href，通过获取这个属性，可以==获取网页的URL==以及==更改网页的URL==让它实现跳转。

alert("要跳转了");
location.href = "https://www.baidu.com";

结合setTimeout可以实现定时跳转的效果

document.write("3秒跳转到首页..."); 
setTimeout(function () {
    location.href = "https://www.baidu.com"
}, 3000);

6，DOM

6.1 概述

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM，在XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

作用：

JavaScript 通过 DOM，就能够对 HTML进行操作了

改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

DOM相关概念：

DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分：

核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
XML DOM：针对 XML 文档的标准模型
HTML DOM：针对 HTML 文档的标准模型
该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象
- 例如：<img> 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
- 例如：<input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。

6.2 获取`Element`对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数

getElementById()：根据id属性值获取，返回单个Element对象
getElementsByTagName()：根据标签名称获取，返回Element对象数组
getElementsByName()：根据name属性值获取，返回Element对象数组
getElementsByClassName()：根据class属性值获取，返回Element对象数组

6.3 HTML Element对象使用

HTML 中的 Element 元素对象有很多，以后是根据具体的需求查阅文档使用。 JavaScript 和 HTML DOM 参考手册 (w3school.com.cn)

img对象
- src属性：修改 img 对象的 src 属性来改变图片
div对象
- 当你查文档时发现某个对象没有特殊的属性和方法时，你还可以调用Element对象的属性和方法，因为它们都继承自`HTML DOM Element 对象
- style属性 :设置元素css样式
- innerHTML属性：设置元素内容

7，事件监听

什么是事件？

HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击、 鼠标移动到元素之上、 按下键盘按键 等都是事件。

==事件监听==是JavaScript 可以在事件被侦测到时==执行一段逻辑代码。==

7.1 事件绑定

JavaScript 提供了两种事件绑定方式：

方式一：通过 HTML标签中的事件属性进行绑定
如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性，在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='on（）' 表示该点击事件绑定了一个名为 on() 的函数
```
<input type="button" onclick='on()’>
```
下面是点击事件绑定的 on() 函数
```
function on(){
    alert("我被点了");
}
```
方式二：通过 DOM 元素属性绑定
如下面代码是按钮标签，在该标签上我们并没有使用 事件属性，绑定事件的操作需要在 js 代码中实现
```
<input type="button" id="btn">
```
下面 js 代码是获取了 id='btn' 的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行
```
document.getElementById("btn").onclick = function (){
    alert("我被点了");
}
```

7.2 常见事件

HTML DOM 事件 (w3school.com.cn)

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
ondblclick	鼠标双击事件
onchange	元素的值发生改变时,

对于单选框和复选框，在被选择的状态改变时，发生 onchange 事件。

代码书写

document.获取对象.事件 = function() {
    // 效果内容
}

7.3 事件监听器（触发器）

同一元素（对象）添加的事件具有唯一性，如果同时添加多个事件，将被覆盖

<body>
    <button>点击</button>
</body>
<script>
    let button = document.querySelector("button");
    button.onclick = function(){
        alert("1");
    };
    button.onclick = function(){
        alert("2");
    };
    button.onclick = function(){
        alert("3");
    };
</script>

<!-- 点击只会弹出3窗口，前两个被3覆盖 -->

调用addEventListener()方法，可以理解成事件监听器：可以给一个元素添加多个事件

语法：button.addEventListener("事件名称（不写on）", 驱动的函数)

<body>
    <button>点击</button>
</body>
<script>
    let button = document.querySelector("button");
    button.addEventListener("click", function(){
        alert("1");
    })
    button.addEventListener("click", function(){
        alert("2");
    })
    button.addEventListener("click", function(){
        alert("3");
    })
</script>

<!-- 三个都会进行 -->

8，正则表达式

正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。

正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。

8.1 正则对象的创建和使用

创建对象

正则对象有两种创建方式：

直接量方式：注意不要加引号
```
var reg = /正则表达式/;
```

创建 RegExp 对象

var reg = new RegExp("正则表达式");

对象使用

test(str) ：判断指定字符串是否符合规则，返回 true或 false

// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;

var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);

8.2 语法规则

正则表达式常用的规则如下：

^：表示开始
$：表示结束
[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.：代表任意单个字符，除了换行和行结束符
\w：代表单词字符：字母、数字、下划线(\_)，相当于 [A-Za-z0-9]
\d：代表数字字符：相当于 [0-9]

量词：

+：至少一个
*：零个或多个
？：零个或一个
{x}：x个
{m,}：至少m个
{m,n}：至少m个，最多n个

9，JSON

JSON 是一种纯字符串形式的数据，它本身不提供任何方法（函数），非常适合在网络中进行传输。JavaScript、PHP、Java、Python、C++ 等编程语言中都内置了处理 JSON 数据的方法。

JSON 是基于 JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集，是一种开放的、轻量级的数据交换格式，采用独立于编程语言的文本格式来存储和表示数据，易于程序员阅读与编写，同时也易于计算机解析和生成，通常用于在 Web 客户端（浏览器）与 Web 服务器端之间传递数据。

语法规则

数据：key:value

数据之间使用英文的逗号分隔

花括号{ } 标识一个对象

方括号[ ] 标识一个数组

属性(Key)使用双引号

JSON常用的两个方法

（JSON)字符串的形式转换为JavaScript对象（parse()）

// 此时JSON数据以字符串的形式从后端传递到前端
let myJson = '{"ename":"zhangsan", "age":18, "sex":"nan"}';

let jsobject = JSON.parse(myJson);

console.log(jsobject);        //{ename: 'zhangsan', age: 18, sex: 'nan'}

将JavaScript对象转换为JSON格式（stringify()）

// 此时js定义好对象，想变成JSON格式发往后端
let stu = {ename: "zhangsan", age:18, sex:"nan"};
let jsobject = JSON.stringify(stu);
console.log(jsobject);        //{"ename":"zhangsan","age":18,"sex":"nan"}

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

学习JavaScript一篇就够了