JavaScript基础
JavaScript的历史
- 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)
- Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript
- 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript.
- 为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范.
ECMAScript
尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
- 核心（ECMAScript）
- 文档对象模型（DOM） Document object model (整合js，css，html)
- 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
- Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.
简单地说，ECMAScript 描述了以下内容：
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 运算符
- 对象 (封装 继承 多态) 基于对象的语言.使用对象.
JavaScript的引入方式
1 2 3 4 5 6 | {#1 直接编写#} <script> alert('hello yuan') </script>{#2 导入文件#} <script src="hello.js"></script> |
变量
1 2 3 | x=5y=6z=x+y |
在代数中，我们使用字母（比如 x）来保存值（比如 5）。
通过上面的表达式 z=x+y，我们能够计算出 z 的值为 11。
在 JavaScript 中，这些字母被称为变量。
0 变量是弱类型的(很随便)；
1 声明变量时不用声明变量类型. 全都使用var关键字;
1 | var a; |
2 一行可以声明多个变量.并且可以是不同类型.
1 | var name="yuan", age=20, job="lecturer"; |
3 (了解) 声明变量时 可以不用var. 如果不用var 那么它是全局变量.
4 变量命名,首字符只能是字母,下划线,$美元符 三选一，且区分大小写，x与X是两个变量
5 变量还应遵守以下某条著名的命名规则：
1 2 3 4 5 6 7 8 9 | Camel 标记法首字母是小写的，接下来的字母都以大写字符开头。例如：var myTestValue = 0, mySecondValue = "hi";Pascal 标记法首字母是大写的，接下来的字母都以大写字符开头。例如：Var MyTestValue = 0, MySecondValue = "hi";匈牙利类型标记法在以 Pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示“Var iMyTestValue = 0, sMySecondValue = "hi"; |
注意：
基础规范
1 每行结束可以不加分号. 没有分号会以换行符作为每行的结束
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | a=1;b=2;a=1 b=2;------错误a=1b=2//推荐a=1;b=2;{ a=1; b=2; //推荐加tab a=1; b=2;} |
2 注释 支持多行注释和单行注释. /* */ //
3 使用{}来封装代码块
常量和标识符
常量 ：直接在程序中出现的数据值
标识符：
- 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
- 常用于表示函数、变量等的名称
- 例如：_abc,$abc,abc,abc123是标识符，而1abc不是
- JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识
数据类型
数字类型(Number)
1 2 3 4 5 6 | 简介最基本的数据类型不区分整型数值和浮点型数值所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式能表示的最大值是±1.7976931348623157 x 10308能表示的最小值是±5 x 10 -324 |
整数：
在JavaScript中10进制的整数由数字的序列组成
精确表达的范围是
-9007199254740992 (-253) 到 9007199254740992 (253)
超出范围的整数，精确度将受影响
浮点数：
使用小数点记录数据
例如：3.4，5.6
使用指数记录数据
例如：4.3e23 = 4.3 x 1023
16进制和8进制数的表达
16进制数据前面加上0x，八进制前面加0
16进制数是由0-9,A-F等16个字符组成
8进制数由0-7等8个数字组成
16进制和8进制与2进制的换算
1 2 | # 2进制: 1111 0011 1101 0100 <-----> 16进制:0xF3D4 <-----> 10进制:62420# 2进制: 1 111 001 111 010 100 <-----> 8进制:0171724 |
字符串(String)
1 2 3 4 5 6 7 | 简介是由Unicode字符、数字、标点符号组成的序列字符串常量首尾由单引号或双引号括起JavaScript中没有字符类型常用特殊字符在字符串中的表达字符串中部分特殊字符必须加上右划线\常用的转义字符 \n:换行 \':单引号 \":双引号 \\:右划线 |
String数据类型的使用
- 特殊字符的使用方法和效果
- Unicode的插入方法
1 2 3 4 | <script> var str="\u4f60\u597d\n欢迎来到\"JavaScript世界\""; alert(str);</script> |
布尔型(Boolean)
1 2 3 4 5 6 7 8 9 | 简介Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0布尔值也可以看作on/off、yes/no、1/0对应true/falseBoolean值主要用于JavaScript的控制语句，例如 if (x==1){ y=y+1; }else { y=y-1; } |
Null & Undefined
1 2 3 4 5 6 7 8 9 | Undefined 类型 Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。当函数无明确返回值时，返回的也是值 "undefined";Null 类型 另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。 尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。var person=new Person()var person=null |
数据类型转换
1 2 3 4 5 6 7 8 | JavaScript属于松散类型的程序语言变量在声明的时候并不需要指定数据类型变量只有在赋值的时候才会确定数据类型表达式中包含不同类型数据则在计算过程中会强制进行类别转换数字 + 字符串：数字转换为字符串数字 + 布尔值：true转换为1，false转换为0字符串 + 布尔值：布尔值转换为字符串true或false |
强制类型转换
1 2 3 4 5 | 函数parseInt： 强制转换成整数 例如parseInt("6.12")=6 ; parseInt(“12a")=12 ; parseInt(“a12")=NaN ;parseInt(“1a2")=1函数parseFloat： 强制转换成浮点数 parseFloat("6.12")=6.12函数eval：将字符串强制转换为表达式并返回结果 eval("1+1")=2 ; eval("1<2")=true |
类型查询函数(typeof)
ECMAScript 提供了 typeof 运算符来判断一个值是否在某种类型的范围内。可以用这种运算符判断一个值是否表示一种原始类型：如果它是原始类型，还 可以判断它表示哪种原始类型。
1 2 3 4 5 6 | 函数typeof ：查询数值当前类型
(string / number / boolean / object )例如typeof("test"+3) "string"例如typeof(null) "object "例如typeof(true+1) "number"例如typeof(true-false) "number" |
ECMAScript 算数运算符
1 2 3 4 | 加(＋)、 减(－)、 乘(*) 、除(/) 、余数(% ) 加、减、乘、除、余数和数学中的运算方法一样 例如：9/2=4.5，4*5=20，9%2=1-除了可以表示减号还可以表示负号 例如：x=-y+除了可以表示加法运算还可以用于字符串的连接 例如："abc"+"def"="abcdef" |
递增(＋＋) 、递减(－－)
1 2 3 4 5 6 7 8 9 | 假如x=2，那么x++表达式执行后的值为3，x--表达式执行后的值为1i++相当于i=i+1，i--相当于i=i-1递增和递减运算符可以放在变量前也可以放在变量后：--i var i=1;console.log(i++);console.log(++i);console.log(i--);console.log(--i); |
一元加减法：
ECMAScript 逻辑运算符
1 2 3 4 5 6 7 8 | 等于 ( == ) 、不等于( != ) 、 大于( > ) 、 小于( < )
大于等于(>=) 、小于等于(<=)与 (&&) 、或(||) 、非(!)1 && 1 = 1 1 || 1 = 11 && 0 = 0 1 || 0 = 10 && 0 = 0 0 || 0 = 0!0=1!1=0 |
逻辑 AND 运算符(&&)
逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。
如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：
- 如果某个运算数是 null，返回 null。
- 如果某个运算数是 NaN，返回 NaN。
- 如果某个运算数是 undefined，返回undefined。
逻辑 OR 运算符(||)
与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值
ECMAScript等性运算符
执行类型转换的规则如下：
- 如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。
- 如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。
- 如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。
- 如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。
在比较时，该运算符还遵守下列规则：
- 值 null 和 undefined 相等。
- 在检查相等性时，不能把 null 和 undefined 转换成其他值。
- 如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。
- 如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。
ECMAScript 关系运算符(重要)
1 2 | var bResult = "Blue" < "alpha";alert(bResult); //输出 true |
在上面的例子中，字符串 "Blue" 小于 "alpha"，因为字母 B 的字符代码是 66，字母 a 的字符代码是 97。
比较数字和字符串
另一种棘手的状况发生在比较两个字符串形式的数字时，比如：
1 2 | var bResult = "25" < "3";alert(bResult); //输出 "true" |
上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串，所以比较的是它们的字符代码（"2" 的字符代码是 50，"3" 的字符代码是 51）。不过，如 果把某个运算数该为数字，那么结果就有趣了：
1 2 | var bResult = "25" < 3;alert(bResult); //输出 "false" |
这里，字符串 "25" 将被转换成数字 25，然后与数字 3 进行比较，结果不出所料。
总结：
1 2 | 比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较. |
Boolean运算符(重要)
1 2 3 4 5 6 | var temp=new Object();// false;[];0; null; undefined;object(new Object();) if(temp){ console.log("yuan") }else { console.log("alex") } |
全等号和非全等号
等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同，只是它们在检查相等性前，不执行类型转换。
if 控制语句
1 2 3 4 5 6 7 8 9 10 11 12 | if-else基本格式if (表达式){ 语句１;......}else{ 语句２;.....} 功能说明 如果表达式的值为true则执行语句1, 否则执行语句2 |
if 可以单独使用
1 2 3 4 5 6 7 8 9 10 | if语句嵌套格式if (表达式1) { 语句1;}else if (表达式2){ 语句2;}else if (表达式3){ 语句3;} else{ 语句4;} |
switch 选择控制语句
1 2 3 4 5 6 7 8 9 10 | switch(x){ case 1:y="星期一"; break; case 2:y="星期二"; break; case 3:y="星期三"; break; case 4:y="星期四"; break; case 5:y="星期五"; break; case 6:y="星期六"; break; case 7:y="星期日"; break; default: y="未定义";} |
switch比else if结构更加简洁清晰，使程序可读性更强,效率更高。
switch为什么效率高？原因如下：
for 循环控制语句
1 2 3 4 5 6 7 | for循环基本格式for (初始化;条件;增量){ 语句1; ...}功能说明实现条件循环，当条件成立时，执行语句1，否则跳出循环体 |
1 2 3 4 5 6 7 8 9 10 | for (var i=1;i<=7;i++){ document.write("<H"+i+">hello</H "+i+"> "); document.write("<br>");}---------------------------------------------- var arr=[1,"hello",true]//var dic={"1":"111"} for (var i in arr){ console.log(i) console.log(arr[i]) } |
注意：
结论：for i in 不推荐使用.
while 循环控制语句
1 2 3 4 5 6 7 | while循环基本格式while (条件){语句1；...}功能说明运行功能和for类似，当条件成立循环执行语句花括号{}内的语句，否则跳出循环 |
1 2 3 4 5 6 7 | var i=1;while (i<=7) { document.write("<H"+i+">hello</H "+i+"> "); document.write("<br>"); i++;}//循环输出H1到H7的字体大小 |
异常处理
1 2 3 4 5 6 7 8 9 10 | try { //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行}catch (e) { // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向Error对象或者其他抛出的对象}finally { //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。} |
注：主动抛出异常 throw Error('xxxx')
对象的概念与分类
从传统意义上来说，ECMAScript 并不真正具有类。事实上，除了说明不存在类，在 ECMA-262 中根本没有出现“类”这个词。ECMAScript 定义了“对象定义”，逻辑上等价于其他程序设计语言中的类。
1 | var o = new Object(); |
- 由ECMAScript定义的本地对象.独立于宿主环境的 ECMAScript 实现提供的对象.(native object)
- ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现.这意味着开发者不必明确实例化内置对象，它已被实例化了。ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。（built-in object）
- 所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。所有 BOM 和 DOM 对象都是宿主对象。
object对象：ECMAScript 中的所有对象都由这个对象继承而来；Object 对象中的所有属性和方法都会出现在其他对象中
1 2 | ToString() : 返回对象的原始字符串表示。ValueOf() : 返回最适合该对象的原始值。对于许多对象，该方法返回的值都与 ToString() 的返回值相同。 |
11种内置对象
包括：
Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object
简介：
在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是通过对象实现的.
1 2 3 4 5 6 7 8 9 10 | <script language="javascript">var aa=Number.MAX_VALUE;//利用数字对象获取可表示最大数var bb=new String("hello JavaScript");//创建字符串对象var cc=new Date();//创建日期对象var dd=new Array("星期一","星期二","星期三","星期四");//数组对象</script> |
String对象
自动创建字符串对象：
1 2 3 | var str1="hello world";alert(str1.length);alert(str1.substr(1,5)); |
调用字符串的对象属性或方法时自动创建对象，用完就丢弃
手工创建字符串对象
1 2 3 | var str1= new String("hello word");alert(str1.length);alert(str1.substr(1,3)); |
采用new创建字符串对象str1，全局有效
String对象的属性
1 2 | 获取字符串长度length |
1 2 3 4 | var str1="String对象";var str2="";alert("str1长度 "+str1.length);alert("str2长度 "+str2.length); |
String对象的方法(1) —— 格式编排方法
格式编排方法返回值列表
String对象的方法(2)—— 大小写转换
String对象的方法(3) —— 获取指定字符
String对象的方法(4)—— 查询字符串
String对象的方法(5) ——子字符串处理
截取子字符串
替换子字符串
分割字符串
连接字符串
Array对象
创建数组对象
创建二维数组
Array对象的属性
获取数组元素的个数：length
Array对象的方法
连接数组-join方法
连接数组-concat方法
数组排序-reverse sort
数组切片-slice
删除子数组
数组的进出栈操作(1)
数组的进出栈操作(2)
总结js的数组特性：
1 2 3 4 5 6 7 8 9 | js中数组的特性 //java中数组的特性, 规定是什么类型的数组,就只能装什么类型.只有一种类型. //js中的数组特性1: js中的数组可以装任意类型,没有任何限制. //js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长. var arr5 = ['abc',123,1.14,true,null,undefined,new String('1213'),new Function('a','b','alert(a+b)')]; /* alert(arr5.length);//8 arr5[10] = "hahaha"; alert(arr5.length); //11 alert(arr5[9]);// undefined */ |
Date对象
Date对象的方法—获取日期和时间
练习实例：
Date对象的方法—设置日期和时间
Date对象的方法—日期和时间的转换
RegExp对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | //RegExp对象 // 在表单验证时使用该对象验证用户填入的字符串是否符合规则. //创建正则对象方式1 参数1 正则表达式 参数2 验证模式 g global / i 忽略大小写. //参数2一般填写g就可以，也有“gi”. // 用户名 首字母必须是英文, 除了第一位其他只能是英文数字和_ . 长度最短不能少于6位 最长不能超过12位 //----------------------------创建方式1 /* var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g"); // //验证字符串 var str = "bc123"; alert(reg1.test(str));// true //----------------------------创建方式2 /填写正则表达式/匹配模式; var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g; alert(reg2.test(str));// true */ //-------------------------------正则对象的方法------------------- //test方法 ==> 测试一个字符串是否复合 正则规则. 返回值是true 和false. //-------------------------String 中与正则结合的4个方法------------------. // macth search split replace var str = "hello world"; //alert(str.match(/o/g)); //查找字符串中 复合正则的 内容. //alert(str.search(/h/g));// 0 查找字符串中符合正则表达式的内容位置 //alert(str.split(/o/g)); // 按照正则表达式对字符串进行切割. 返回数组; alert(str.replace(/o/g, "s")); // hells wsrld 对字符串按照正则进行替换. |
Math对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | //Math对象 //该对象中的属性方法 和数学有关. //Math是内置对象 , 与Global的不同之处是, 在调用时 需要打出 "Math."前缀. //属性学习: //alert(Math.PI); //方法学习: //alert(Math.random()); // 获得随机数 0~1 不包括1. //alert(Math.round(1.5)); // 四舍五入 //练习：获取1-100的随机整数，包括1和100 //var num=Math.random(); //num=num*10; //num=Math.round(num); // alert(num) //============max min========================= /* alert(Math.max(1,2));// 2 alert(Math.min(1,2));// 1 */ //-------------pow-------------------------------- alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方. abs(x) 返回数的绝对值。exp(x) 返回 e 的指数。floor(x)对数进行下舍入。log(x) 返回数的自然对数（底为e）。max(x,y) 返回 x 和 y 中的最高值。min(x,y) 返回 x 和 y 中的最低值。pow(x,y) 返回 x 的 y 次幂。random() 返回 0 ~ 1 之间的随机数。round(x) 把数四舍五入为最接近的整数。sin(x) 返回数的正弦。sqrt(x) 返回数的平方根。tan(x) 返回角的正切。 |
Function 对象(重点)
函数的定义：
1 2 3 | function 函数名 (参数){
函数体; return 返回值;} |
功能说明：
- 可以使用变量、常量或表达式作为函数调用的参数
- 函数由关键字function定义
- 函数名的定义规则与标识符一致，大小写是敏感的
- 返回值必须使用return
Function 类可以表示开发者定义的任何函数。
用 Function 类直接创建函数的语法如下：
1 2 3 4 5 6 | function 函数名 (参数){
函数体; return 返回值;}//another way:var 函数名 = new Function("参数1","参数n","function_body"); |
虽然由于字符串的关系，第二种形式写起来有些困难，但有助于理解函数只不过是一种引用类型，它们的行为与用 Function 类明确创建的函数行为是相同的。
实例：
注意：js的函数加载执行与python不同，它是整体加载完才会执行，所以执行函数放在函数声明上面或下面都可以：
1 2 3 4 5 6 7 8 9 10 11 | <script> //f(); --->OK function f(){ console.log("hello") } f() //----->OK</script> |
Function 对象的 length 属性
如前所述，函数属于引用类型，所以它们也有属性和方法。
比如，ECMAScript 定义的属性 length 声明了函数期望的参数个数。
1 | alert(func1.length) |
Function 对象的方法
Function 对象也有与所有对象共享的 valueOf() 方法和 toString() 方法。这两个方法返回的都是函数的源代码，在调试时尤其有用。
1 | alert(void(fun1(1,2))) |
运算符void()作用：拦截方法的返回值
函数的调用
函数的内置对象arguments
匿名函数
函数的作用域链和闭包
作用域
js的作用域和py相似，if while等控制语句并没有自己作用域；而函数是有自己的作用域的；
1 2 3 4 5 6 7 8 9 10 11 12 | if(1==1){ var s=12; } console.log(s);//12 // ---------------------- function f(){ var temp=666; } f(); console.log(temp);//Uncaught ReferenceError: temp is not defined |
嵌套函数的作用域：
例1:
例2:
闭包：
思考题1：
作用域链(Scope Chain)：
在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。
1 2 3 4 5 6 7 8 9 10 11 | var x=1;function foo() { var y = 2; function bar() { var z = 3; }}#bar的作用域链： barScopeChain=[bar.AO, foo.AO, global.VO];#foo的作用域链： fooScopeChain=[foo.Ao, global.VO]; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 什么是AO,VO? 在函数创建时，每个函数都会创建一个活动对象Active Object(AO)，全局对象为Global Object(VO)，创建函数的过程也就是为这个对象添加属性的过程，作用域链就是由这些绑定了属性的活动对象构成的。 例如：找x变量；bar函数在搜寻变量x的过程中，先从自身AO对象上找，如果bar.AO存在这个属性，那么会直接使用这个属性的值，如果不存在，则会转到父级函数的AO对象，也就是foo.AO 如果找到x属性则使用，找不到继续 在global.VO对象查找，找到x的属性，返回属性值。如果在global.VO中没有找到，则会抛出异常ReferenceError执行上下文。 函数在执行时会创建一个称为“执行上下文（execution context）”的内部对象，执行上下文定义了函数 执行时的环境。每个执行上下文都有自己的作用域链，用于标识符解析，当执行上下文被创建时，而它的作用 域链初始化为当前运行函数的[[Scope]]所包含的对象。函数执行 在函数执行过程中，每遇到一个变量，都会检索从哪里获取和存储数据，该过程从作用域链头部，也就是从活 动对象开始搜索，查找同名的标识符，如果找到了就使用这个标识符对应的变量，如果没有则继续搜索作用域 链中的下一个对象，如果搜索完所有对象都未找到，则认为该标识符未定义，函数执行过程中，每个标识符都 要经历这样的搜索过程。 |
创建作用域链的过程
函数的scope等于自身的AO对象加上父级的scope，也可以理解为一个函数的作用域等于自身活动对象加上父级作用域.
函数执行前后的作用域链：
注意：作用域链的非自己部分在函数对象被建立（函数声明、函数表达式）的时候建立，而不需要等到执行
思考题2:
BOM之window对象
BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
使 JavaScript 有能力与浏览器“对话”。
1 2 3 4 5 | window对象 所有浏览器都支持 window 对象。 概念上讲.一个html文档对应一个window对象. 功能上讲: 控制浏览器窗口的. 使用上讲: window对象不需要创建对象,直接使用即可. |
window对象方法
1 2 3 4 5 6 7 8 9 10 11 | alert() 显示带有一段消息和一个确认按钮的警告框。confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。prompt() 显示可提示用户输入的对话框。open() 打开一个新的浏览器窗口或查找一个已命名的窗口。close() 关闭浏览器窗口。setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。clearInterval() 取消由 setInterval() 设置的 timeout。setTimeout() 在指定的毫秒数后调用函数或计算表达式。clearTimeout() 取消由 setTimeout() 方法设置的 timeout。scrollTo() 把内容滚动到指定的坐标。 |
交互方法：
练习：
setInterval clearInterval
setTimeout clearTimeout
BOM之History对象
History 对象属性
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
1 | length 返回浏览器历史列表中的 URL 数量。 |
History 对象方法
1 2 3 | back() 加载 history 列表中的前一个 URL。forward() 加载 history 列表中的下一个 URL。go() 加载 history 列表中的某个具体页面。 |
BOM之Location对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
Location 对象方法
1 2 3 | location.assign(URL)location.reload()location.replace(newURL)//注意与assign的区别 |
什么是DOM
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
- 什么是 XML DOM？ －－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
- 什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
DOM节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
节点(自身)属性:
- attributes - 节点（元素）的属性节点
- nodeType – 节点类型
- nodeValue – 节点值
- nodeName – 节点名称
- innerHTML - 节点（元素）的文本值
导航属性:
- parentNode - 节点（元素）的父节点 (推荐)
- firstChild – 节点下第一个子元素
- lastChild – 节点下最后一个子元素
- childNodes - 节点（元素）的子节点
注意：
1 2 3 4 5 6 7 8 9 10 | <div id="div1"> <div id="div2"></div> <p>hello yuan</p></div><script> var div=document.getElementById("div2"); console.log(div.nextSibling.nodeName); //思考:为什么不是P?</script> |
推荐导航属性：
1 2 3 4 5 6 | parentElement // 父节点标签元素children // 所有子标签firstElementChild // 第一个子标签元素lastElementChild // 最后一个子标签元素nextElementtSibling // 下一个兄弟标签元素previousElementSibling // 上一个兄弟标签元素 |
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：
访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：
页面查找：
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
- 通过使用 getElementsByName() 方法
局部查找：
HTML DOM Event（事件）
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | onclick 当用户点击某个对象时调用的事件句柄。ondblclick 当用户双击某个对象时调用的事件句柄。onfocus 元素获得焦点。 //练习：输入框onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.onkeypress 某个键盘按键被按下并松开。onkeyup 某个键盘按键被松开。onload 一张页面或一幅图像完成加载。onmousedown 鼠标按钮被按下。onmousemove 鼠标被移动。onmouseout 鼠标从某元素移开。onmouseover 鼠标移到某元素之上。onmouseleave 鼠标从元素离开onselect 文本被选中。onsubmit 确认按钮被点击。 |
两种为元素附加事件属性的方式
注意：
1 2 3 4 5 6 7 8 9 10 11 12 | <div id="abc" onclick="func1(this)">事件绑定方式1</div><div id="id123">事件绑定方式2</div><script> function func1(self){ console.log(self.id) } //jquery下是$(self), 这种方式this参数必须填写; var ele=document.getElementById("id123").onclick=function(){ console.log(this.id); //jquery下是$(this), 这种方式不需要this参数; }</script> |
onload：
onload 属性开发中 只给 body元素加.
这个属性的触发 标志着 页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
onsubmit:
是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.
比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；
思考：onclick＝function(event){};这个方法是谁调用的？
事件传播：
增删改查之node的CURD
增：
1 2 | createElement(name)创建元素appendChild();将元素添加 |
删:
1 2 3 | 获得要删除的元素获得它的父元素使用removeChild()方法删除 |
改:
第一种方式:
使用上面增和删结合完成修改
第二中方式:
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容
查: 使用之前介绍的方法.
修改HTML DOM
- 改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML ，innerText。
- 改变 CSS 样式
1 2 | <p id="p2">Hello world!</p>document.getElementById("p2").style.color="blue";<br> .style.fontSize=48px |
- 改变 HTML 属性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
- 创建新的 HTML 元素
createElement(name)
- 删除已有的 HTML 元素
elementNode.removeChild(node)
- 关于class的操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
