一、JavaScript简介

1.1、JavaScript的起源

• JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证
• 为了解决前端验证的问题，当时的浏览器巨头NetScape（网景）公司就开发出一种脚本语言，起初命名为LiveScript，后来由于SUN公司的介入更名为了JavaScript

1.2、JavaScript的组成

• 1、ECMAScript规定核心的语法
• 2、DOM（document object model）:文档对象模型
• 3、BOM（browser object model）：浏览器对象模型

1.3、JavaScript的特点

• 1、==解释型语言==

  • 所谓解释型值语言是指不需要被编译为机器码在执行，而是直接执行。由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势

• 2、==动态语言==

  • 所谓的动态语言可以理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了，动态语言相比静态语言性能上要差一些

• 3、==类似于 C 和 Java 的语法结构==

  • JavaScript的语法结构与C和Java很像，向for、if、while等语句和Java的基本上是一模一样的。不过JavaScript和与Java的关系也仅仅是看起来像而已
• 4、==基于原型的面向对象==

• 5、==严格区分大小写==

  • 也就是abc和Abc会被解析器认为是两个不同的东西

1.4、JavaScript的用途

• 1、嵌入文本到我们的HTML页面上
• 2、对浏览器事件作出响应
• 3、读写HTML
• 4、在数据提交到服务器之前先做数据验证
• 5、检测访客的浏览信息
• 6、控制cookie
• 7、基于nodeJs技术进行服务端的编程

1.5、JavaScript的使用

• 标签引用

  • <script>
        alert("Hello,World!");

• 文件引用

  • <script src="main.js"></script>

• ==注释==

  • 单行注释：// 注释内容
  • 多行注释：/ 注释内容 /

1.6、JavaScript的输出

• ==页面输出==

  • <script>
        document.write("Hello,World!");

• ==控制台输出==

  • <script>
        console.log("输出一条日志");//最常用
        console.info("输出一条信息");
        console.warn("输出一条警告");
        console.error("输出一条错误");

• 弹出窗口输出

  • <script>
        alert("Hello,World!");

  
  # 二、 JavaScript基础语法
  
  ## 2.1、标识符

• 所谓标识符，就是指给变量、函数、属性或函数的参数起名字。标识符可以是按照下列格式规则组合起来的一或多个字符

• ==规则==

  • 第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）
  • 其它字符可以是字母、下划线、美元符号或数字。
  • 按照惯例，ECMAScript 标识符采用==驼峰命名法==。
  • 标识符不能是关键字和保留字符。

  2.2、字面量和变量

• 字面量

  • 字面量实际上就是一些固定的值，比如：1、2 、3、true、false、null、NaN、“hello”，字面量都是不可以改变的，由于字面量不是很方便使用，所以在JavaScript中很少直接使用字面量，使用的而是变量。

• 变量

  • 变量的作用是给某一个值或对象标注名称。比如我们的程序中有一个值123，这个值我们是需要反复使用的，这个时候 我们最好将123这个值赋值给一个变量，然后通过变量去使用123这个值。
  • 变量的声明： 使用var关键字声明一个变量。

  2.3、数据类型

  2.3.1、类型分类

  JavaScript中一共有5种基本数据类型：

• 字符串型（String）
• 数值型（Number）
• 布尔型（Boolean）
• undefined型（Undefined）

• null型（Null）

  这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

  1、String

• String用于表示一个字符序列，即字符串。字符串需要使用 单引号 或 双引号 括起来。

• 转义字符

  • \n 换行 \t 制表 \b 空格 \r 回车 \\斜杠 \‘单引号 \’‘ 双引号

  2、Number

• Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。
• Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity

• 特殊的数字：

  • Infinity：正无穷
  • -Infinity：负无穷
  • NaN：非法数字（Not A Number）

• 其它的进制：

  • 二进制：0b 开头表示二进制，但是，并不是所有的浏览器都支持
  • 八进制：0 开头表示八进制
  • 十六进制：0x 开头表示十六进制

  注意：使用typeof检查一个Number类型的数据时（包括NaN 和 Infinity），会返回"number"。

  3、Boolean

• 布尔型也被称为逻辑值类型或者真假值类型。

• 布尔型只能够取真（true）和假（false）两种数值。除此以外， 其它的值都不被支持。

  4、Undefined

• Undefined 类型只有一个值，即特殊的 undefined。

• 在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。

  5、Null

• Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。

• undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true。

  注意：从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。

  2.4、强制类型转换

  强制类型转换指将一个数据类型强制转换为其它的数据类型。一般是指，将其它的数据类型转换为String、Number、Boolean。

  1、转换为String类型

  将其它数值转换为字符串有三种方式：toString()、String()、 拼串。

• 方式一：调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回，但是==注意：null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错==

  • var a = 123;
    a = a.toString();
    console.log(a);

• 方式二：调用String()函数，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，它会将 null 直接转换为 “null”，将 undefined 直接转换为 “undefined”。

  • var c = null;
    c = String(c);
    console.log(c);

• 方式三：为任意的数据类型 +" "

  • var a = 123;
    a = a + "";
    console.log(a);

2、转换为Number类型

有三个函数可以把非数值转换为数值：Number()、parseInt() 和parseFloat()。Number()可以用来转换任意类型的数据，而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数，而parseFloat()可以将字符串转换为浮点数。

• 方式一：==使用Number() 函数==

  • 字符串 --> 数字

    • 如果是纯数字的字符串，则直接将其转换为数字
    • 如果字符串中有非数字的内容，则转换为NaN
    • 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

  • 布尔 --> 数字

    • true 转成 1
    • false 转成 0

  • null --> 数字

    • null 转成 0

  • undefined --> 数字

    • undefined 转成 NaN

• 方式二：==parseInt() parseFloat() 把一个字符串转换为一个整数 / 浮点数==

  • var a = "123";
    a = parseInt(a);
    console.log(a);

• ==注意：如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后在操作==

  3、转换为Boolean类型

  将其它的数据类型转换为Boolean，只能使用Boolean()函数。

• 使用Boolean()函数

  • 数字 —> 布尔

    • 除了0和NaN，其余的都是true

  • 字符串 —> 布尔

    • 除了空串，其余的都是true
  • null和undefined都会转换为false
  • 对象也会转换为true

  2.5、运算符

• 算术运算符
• 关系运算符

• 赋值运算符

  逻辑运算符

  • && 与
    JS中的“与”属于短路的与，如果第一个值为false，则不会检查第二个值
    非布尔值时：如果两个都为true，则返回第二个值，如果两个值中有false，则返回靠前的false的值
  • || 或
    JS中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值
    非布尔值时：如果两个都为false ，则返回第二个值，如果两个值中有true，则返回靠前的true的值

  • ! 非：!可以用来对一个值进行非运算，所谓非运算就是对一个布尔值进行取反操作
    如果对一个值进行两次取反，它不会变化

    • 非布尔值时：先会将其转换为布尔值，然后再取反，
    • ==所以我们可以利用该特点，来将一个其它的数据类型转换为布尔值，可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样==

  比较运算符

• 使用 == 来做 相等运算
  如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较
• 使用 != 来做 不相等运算
  不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，==不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false==
• 使用 = = = 来做 全等运算
  用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false

• 使用 != = 来做 不全等运算
  用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

  2.6、对象基础

  1.概述

• Object类型，我们也称为一个对象，是JavaScript中的引用数据类型。它是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。对象也可以看做是属性的无序集合，每个属性都是一个名/值对。对象除了可以创建自有属性，还可以通过从一个名为原型的对象那里继承属性。除了字符串、数字、true、false、null和undefined之外，JavaScript中的值都是对象。

  2.创建对象

• 方式一

  • var person = new Object();
    person.name = "孙悟空";
    person.age = 18;

• 方式二

  • var person = {
        name: "孙悟空",
        age: 18
    };

  
  ### 3.访问属性

• 第一种方式：使用 . 来访问

• 第二种方式：使用 [] 来访问

  • 对象[‘属性名’]

    4.删除属性

    删除对象的属性可以使用delete关键字，格式如下：

  
  ### 5.遍历对象
  
  枚举遍历对象中的属性，可以使用  for … in  语句循环，对象中有几个属性，循环体就会执行几次。

• for (var 变量 in 对象) {
  
  }

• var person = {
      name: "zhangsan",
      age: 18
  }
  
  for (var personKey in person) {
      var personVal = person[personKey];
      console.log(personKey + ":" + personVal);
  }

  6.栈和堆梳理

• JavaScript在运行时数据是保存到栈内存和堆内存当中的。
• 简单来说栈内存用来保存变量和基本类型，堆内存是用来保存对象。
• 我们在声明一个变量时，实际上就是在栈内存中创建了一个空间用来保存变量。

• ==如果是基本类型则在栈内存中直接保存，如果是引用类型则会在堆内存中保存，变量中保存的实际上对象在堆内存中的地址==。

  2.7、函数

  注意：JavaScript中的函数也是一个对象，使用typeof检查一个函数对象时，会返回function。

  1.函数创建

• 使用 函数对象 (构造器)来创建一个函数（几乎不用）

• 使用 函数声明 来创建一个函数（比较常用）

  • function 函数名([形参1,形参2,...,形参N]) {
        语句...

• 使用 函数表达式 来创建一个函数（比较常用）

  • var 函数名  = function([形参1,形参2,...,形参N]) {
        语句....

2.函数参数

• JS中的所有的参数传递都是按值传递的，也就是说把函数外部的值赋值给函数内部的参数，在调用函数时，可以在()中指定实参（实际参数），实参将会赋值给函数中对应的形参
• 调用函数时，解析器不会检查实参的类型，所以要注意，是否有可能会接收到非法的参数，如果有可能，则需要对参数进行类型的检查，函数的实参可以是任意的数据类型
• 调用函数时，解析器也不会检查实参的数量，多余实参不会被赋值，==如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined==

3.嵌套函数

在函数中声明的函数就是嵌套函数，嵌套函数只能在当前函数中可以访问，在当前函数外无法访问。

4.对象中的函数

对象的属性值可以是任何的数据类型，也可以是个函数。

如果一个函数作为一个对象的属性保存，那么我们称这个函数是这个对象的方法，调用这个函数就说调用对象的方法（method）。

2.8、对象进阶

1.工厂创建对象

• <script type="text/javascript">
              //造人的工厂
              function createPerson(name,age,gender){
                  var person=new Object();
                  person.name=name;
                  person.age=age;
                  person.gender=gender;
                  person.sayName=function(){
                      console.log(this.name);
                  }
                  return person;
              }
              //创建对象
              var p1=createPerson("a",22,"man");
              var p2=createPerson("aa",22,"man");
              p1.sayName();
              p2.sayName();    
          </script>

  2.用构造函数创建对象

  // 使用构造函数来创建对象
  function Person(name, age) {
    // 设置对象的属性
    this.name = name;
    this.age = age;
    // 设置对象的方法
    this.sayName = function () {
        console.log(this.name);
    };
  }

var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);

#### 3.this对象

* 解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象
* ==以函数的形式调用时，this永远都是window==
* ==以方法的形式调用时，this就是调用方法的那个对象==
* ==当以构造函数的形式调用时，this就是新创建的那个对象==

我们可以使用 instanceof 运算符检查一个对象是否是一个类的实例，它返回true或false

对象 instanceof 构造函数

#### 4.原型(prototype)

* 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象，即显式原型，原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

// 使用构造函数来创建对象
function Person(name, age) {

// 设置对象的属性
this.name = name;
this.age = age;

}
// 在Person类的原型对象中添加方法
Person.prototype.sayName = function() {

console.log(this.name);

};
var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
person1.sayName();
person2.sayName();

* 如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过 _ proto_  (隐式原型）来访问该属性。当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。

* 以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。

#### 5.垃圾回收（GC）

* 当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。
* 在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作，我们需要做的只是要将不再使用的对象设置null即可。
  

## 2.9、作用域

作用域指一个变量的作用的范围，在JS中一共有两种作用域：

### 1.全局作用域

* 直接写在 script 标签内叫做全局的作用域。
* 全局作用域在页面打开时创建，关闭的时候销毁
* 在全局的作用域中有一个全局的对象，就是window对象，由浏览器创建。
* 注意：在全局的的作用域中：
    *    创建的变量作为window对象的属性保存，
    *    创建的函数作为window对象的方法保存
    *    在页面的任何位置都可以访问

### 2.函数作用域

* 在函数创建时创建函数作用域，函数执行完后，函数作用域销毁
* 每次调用函数都会重新创建函数作用域
* 在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量
* 在函数作用域内访问全局作用域的变量,采用window.变量名

### 3.声明提前

* ==变量的声明提前==：使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），但是如果声明变量时不使用var关键字，则变量不会被声明提前
* ==函数的声明提前==：使用函数声明形式创建的函数  function 函数名(){} 
* 它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数。使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用
* ==注意：在函数作用域中没有用var 声明的变量，会提升为全局变量。==

## 2.10.包装类

js的基本数据类型
   * string      number     boolean     null     undefined
             * js 提供三个包装类
    *  String():将其他类型转换为字符串
     *  Number()：将其他类型转换为数值
     *  Boolean()：将其他类型转换为布尔类型

# 三、 JavaScript常用对象

## 3.1、数组对象

### 1.概述

* 数组也是对象的一种，同类数据元素的有序集合。
* 数组的存储性能比普通对象要好，
* 但是在JavaScript中是支持数组可以是不同的元素，这跟JavaScript的弱类型有关，我们大多数时候都是相同类型元素的集合。
* 使用typeof检查一个数组对象时，会返回object。

### 2.创建数组

* 同类型有序数组创建

  * ```
    var arr = new Array();
    arr[0] = 1;
    arr[1] = 2;

• 使用字面量创建

  • var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    3.遍历数组

    for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);

  
  ### 4.数组属性

• constructor属性演示：返回创建数组对象的原型函数

  • var arr = [1,2,3,4];

• length属性：设置或返回数组元素的个数

5.数组方法

1、push():向数组的尾部添加一个或多个元素 将添加之后的数组长度作为返回值
            var a=arr.push("金角大王","银角大王","白骨精");
            //console.log(arr.length);        
2、pop():删除数组的最后元素,将删除的元素作为返回值
            var b=arr.pop();


3、unshift():该方法向数组开头添加一个或多个元素，并返回新的数组长度
        
4、shift():删除数组的第一个元素,本身返回被删除的元素
            arr.shift();
            console.log("-------------");
        
             
 5、forEach()     IE8 以上
             * 1、入参函数
             * 2、自己创建函数，不需要调用。（回调函数）
             * 3、浏览器会在回调函数传入三个参数
             *   - value : 当前遍历的元素
             *   - index : 当前遍历的索引
             *   - obj : 当前遍历的对象
            // arr.forEach(function(value,index,obj){    
            //     console.log(value);
            // })
            
 6、slice(start,end)
             * 取出指定元素
             * 该方法不会改变原数组，将取出指定元素放在一个新的数组。
             * 参数
             *    1、包含开始索引，不包含结束的索引
             *   第二参数不传，默认从开始截取后面所有的元素
             *  -1 代表倒数第一个
             *  -2 代表倒数第二个
                 负数从后往前
            var arr2=arr.slice(1,-2);
            arr2.forEach(function(value,index,obj){
                //console.log(value);
            })

7、splice(start,number)
                删除指定元素
             * -从指定的位置删除number个元素
             * -会改变原数组
             * -删除的元素作为返回值
             * -第三参数及其以后添加新的元素，从删除位置开始添加
             */
            var arr3=[1,2,3,4,5,6,7,9];
            arr3.splice(1,3,4,11,22,33);
            arr3.forEach(function(a){
                //console.log(a);
            })
            

 8、concat(arr1,arr2,arr3)
             * 连接多个数组
             * -不会改变原数组
            var arrC=arr.concat(arr3);
            arrC.forEach(function(a){
                //console.log(a);
            })

 9、join()    
    将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，            在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指            定连接符，则默认使用，作为连接符
            
10、reverse()
    该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组
    
 11、sort():
     对数组中的元素进行排序，也会影响原数组，默认会按照Unicode编码进行排序    
    我们可以自己来指定排序的规则，我们可以在sort()添加一个回调函数，来指定排序规则
    var arr = [1, 3, 2, 11, 5, 6];
arr.sort(function (a, b) {
    return a - b;
});
console.log(arr);

        

3.2、函数对象

1.call()和apply()

• call()和apply()这两个方法都是函数对象的方法，需要通过函数对象来调用，当对函数调用call()和apply()都会调用函数执行，在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this，call()方法可以将实参在对象之后依次传递，apply()方法需要将实参封装到一个数组中统一传递

2.this指向

• 以函数形式调用时，this永远都是window
• 以方法的形式调用时，this是调用方法的对象
• 以构造函数的形式调用时，this是新创建的那个对象
• 使用call和apply调用时，this是传入的那个指定对象

3.arguments参数

• 在调用函数时，浏览器每次都会传递进两个隐含的参数：

  • 函数的上下文对象： this
  • 封装实参的对象： arguments

• arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度，在调用函数时，我们所传递的实参都会在arguments中保存，比如：arguments.length 可以用来获取实参的长度，我们即使不定义形参，也可以通过arguments来使用实参，例如

  • arguments[0]：表示第一个实参
  • arguments[1]：表示第二个实参
• 它里边有一个属性叫做callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象。

• function fun(a, b) {
      // 通过下标获取第一个参数
      console.log(arguments[0]);
      // 通过下标获取第二个参数
      console.log(arguments[1]);
      // 获取实参的个数
      console.log(arguments.length);
      // 看看它的函数对象
      console.log(arguments.callee);
      console.log(arguments.callee == fun);
  }
  
  fun("Hello", "World");

  3.3、Date对象

  var date = new Date();
  console.log(date);

console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)

## 3.4、Math对象

/固定值/
console.log("PI = " + Math.PI);
console.log("E = " + Math.E);
console.log("===============");
/正数/
console.log(Math.abs(1)); //可以用来计算一个数的绝对值
console.log(Math.ceil(1.1)); //可以对一个数进行向上取整，小数位只有有值就自动进1
console.log(Math.floor(1.99)); //可以对一个数进行向下取整，小数部分会被舍掉
console.log(Math.round(1.4)); //可以对一个数进行四舍五入取整
console.log("===============");
/负数/
console.log(Math.abs(-1)); //可以用来计算一个数的绝对值
console.log(Math.ceil(-1.1)); //可以对一个数进行向上取整，小数部分会被舍掉
console.log(Math.floor(-1.99)); //可以对一个数进行向下取整，小数位只有有值就自动进1
console.log(Math.round(-1.4)); //可以对一个数进行四舍五入取整
console.log("===============");
/随机数/
//Math.random()：可以用来生成一个0-1之间的随机数
//生成一个0-x之间的随机数：Math.round(Math.random()*x)
//生成一个x-y之间的随机数：Math.round(Math.random()*(y-x)+x)
console.log(Math.round(Math.random() * 10)); //生成一个0-10之间的随机数
console.log(Math.round(Math.random() * (10 - 1) + 1)); //生成一个1-10之间的随机数
console.log("===============");
/数学运算/
console.log(Math.pow(12, 3)); //Math.pow(x,y)：返回x的y次幂
console.log(Math.sqrt(4)); //Math.sqrt(x) ：返回x的平方根

## 3.5、String对象

var str="abc xwjy auto";

        console.log("获取字符串的长度："+str.length);
        console.log("获取指定位置上的字符："+str.charAt(2));
        console.log("获取字符的编码方式："+str.charCodeAt());
        console.log("连接字符串: "+ str.concat("hehhe"));
        
        /**
         * indexOf():检查指定字符串是否含有指定字符。
         * - 若有返回第一次出现的索引
         * -若无返回-1
         * - 第二参数为 负数，从后往前
         * 
         *  6、slice(start,end) 和 subString(start,end)
         * -取出指定元素
         * -该方法不会改变原数组，将取出指定元素放在一个新的数组。
         * -参数
         *    1、包含开始索引，不包含结束的索引
         *  - 第二参数不传，默认从开始截取后面所有的元素
         *  --1 代表倒数第一个
         *   -2 代表倒数第二个
             负数从后往前
             
        
         *substr(start,number);
         * -参数1 开始位置
         * -参数2，截取的长度
         * 
         */
        /**
         * split():将字符串按照指定方式拆分数组
         * -需要传一个字符 例如 ,作为参数。
         * -不传，将整个字符作为数组一个元素
         * -" " 每个字符作为数组元素
         */
        var s="ac,bc,bn,cd,ff";
        var r=s.split("");
        r.forEach(function(value){
            console.log(value);
        })
        /**
         * toUpperCase():转大写
         * toLowerCase():转小写
         */

## 3.6、RegExp对象

### 1.概述

正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，获取将字符串中符合规则的内容提取出来。使用typeof检查正则对象，会返回object。

### 2.创建正则对象

* 1、使用对象创建

  * ```
    var 变量名 = new RegExp("正则表达式","匹配模式");

• 匹配模式

  • i：忽略大小写
  • g：全局匹配模式
  • ig：忽略大小写且全局匹配模式
  • 注意：可以为一个正则表达式设置多个匹配模式，且顺序无所谓

• 案例演示

  • //这个正则表达式可以来检查一个字符串中是否含有a
    var reg = new RegExp("ab", "i");
    var str = "Abc";
    var result = reg.test(str);

• 2、使用字面量创建

• var 变量名 = /正则表达式/匹配模式;

• 案例演示

• // 这个正则表达式可以来检查一个字符串中是否含有a
  var reg = /a|b|c/;
  var str = "Abc";
  var result = reg.test(str);
  console.log(result);

• // 这个正则表达式可以来检查一个字符串中是否含有字母
  var reg = /[A-z]/;
  var str = "Abc";
  var result = reg.test(str);
  console.log(result);

• // 这个正则表达式可以来检查一个字符串中是否含有abc或adc或aec
  var reg = /a[bde]c/;
  var str = "abc123";
  var result = reg.test(str);
  console.log(result);

• 判断除了某些字符序列

  • ¹：除了任意小写字母
  • ²：除了任意大写字母
  • ³：除了任意字母
  • ⁴：除了任意数字

• 案例演示

  • // 这个正则表达式可以来检查一个字符串中是否除了数字还有其它字母
    var reg = /[^0-9]/;
    var str = "0123456789";
    var result = reg.test(str);

• 正则表达式作为参数

  • var str = "1a2b3c4";
    var result = str.split(/[A-z]/);
    console.log(result);
    //["1","2","3","4"]

  • search()方法演示

    • 该方法可以搜索字符串中是否含有指定内容，如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1，它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串，serach()只会查找第一个，即使设置全局匹配也没用

  • var str = "hello abc hello aec afc";
    var result = str.search(/a[bef]c/);
    console.log(result);
    //6

  • match()方法演示

    • 该方法可以根据正则表达式，从一个字符串中将符合条件的内容提取出来，默认情况下我们的match()只会找到第一个符合要求的内容，找到以后就停止检索，我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容，可以为一个正则表达式设置多个匹配模式，且顺序无所谓，match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果

      • var str = "1a2a3a4a5e6f7A8B9C";
        var result = str.match(/[a-z]/ig);
        console.log(result);

  
  * replace()
  
    * 该方法可以将字符串中指定内容替换为新的内容，默认只会替换第一个，但是可以设置全局匹配替换全部
    * 第一个参数：被替换的内容，可以接受一个正则表达式作为参数
    * 第二个参数：新的内容
  
  ### 3.正则量词

• 通过量词可以设置一个内容出现的次数，量词只对它前边的一个内容起作用，如果有多个内容可以使用 () 括起来，常见量词如下：

  • {n} ：正好出现n次
  • {m,} ：出现m次及以上
  • {m,n} ：出现m到n次
  • + ：至少一个，相当于{1,}
  • * ：0个或多个，相当于{0,}
  • ? ：0个或1个，相当于{0,1}

  4.正则高阶

• 如果我们要检查或者说判断是否以某个字符或者字符序列开头或者结尾就会使用^和$

  • ^ ：表示开头，注意它在[^字符序列]表达的意思不一样
  • $ ：表示结尾

• 需求描述：检查一个字符串中是否以a开头

  • var str = "abcabca";
    var reg = /^a/;

• 需求描述：检查一个字符串中是否以a结尾

  • var str = "abcabca";
    var reg = /a$/;

• 转义字符

• 那如果我们想要检查一个字符串中是否含有.和\就会使用转义字符

  • \. ：表示.
  • \\ ：表示\

  • 注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用

    \则需要使用\\来代替

  • var reg1 = /\./;
    var reg2 = /\\/;
    var reg3 = new RegExp("\\.");
    var reg4 = new RegExp("\\\\");

  • 除了以上两种特殊的字符，其实还有很多如下所示：

    • \w ：任意字母、数字、_，相当于[A-z0-9_]
    • \W ：除了字母、数字、_，相当于⁵
    • \d ：任意的数字，相当于[0-9]
    • \D ：除了任意的数字，相当于[^0-9]
    • \s ：空格
    • \S ：除了空格
    • \b ：单词边界
    • \B ：除了单词边界
    • 需求描述：创建一个正则表达式，去除掉字符串中的前后的空格

    • var str = "  hello child  "
      var reg = /^\s*|\s*$/g;
      console.log(str);
      str = str.replace(reg, "");

  需求描述：创建一个正则表达式，检查一个字符串中是否含有单词child

  • var str = "hello child"
    var reg = /\bchild\b/;

5.正则案例

• 检查手机号

• var phoneStr = "15131494600";
  var phoneReg = /^1[3-9][0-9]{9}$/;
  console.log(phoneReg.test(phoneStr));

• 检查邮箱号

• var emailStr = "abc.def@163.com";
  var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
  console.log(emailReg.test(emailStr));

四、 DOM

4.1、DOM概述

• 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被结构化为 对象树 ：
• 换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

• //入口函数
              window.onload=function(){
                  /**
                   * DOM：文档对象模型
                   * 浏览器提供了文档节点，
                   * dom对象都是window的属性，可以直接使用
                   * 文档节点代表整个网页
                   * document
                   
              // 三要素 ：事件源  事件 事件处理程序
                  //事件源
                  var btn=window.document.getElementById("btn");
                  //事件
                  btn.onclick=function(){
                  //事件处理程序
                      btn.innerHTML="百度一下";
                  }
              }

  4.2.DOM文档节点

  1.节点概述

• 节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。
• 比如：html标签、属性、文本、注释、整个文档等都是一个节点。
• 虽然都是节点，但是实际上它们的具体类型是不同的。
• 比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
• 节点的类型不同，属性和方法也都不尽相同。
• 节点：Node——构成HTML文档最基本的单元。

• 常用节点分为四类：

  • 文档节点：整个HTML文档
  • 元素节点：HTML文档中的HTML标签
  • 属性节点：元素的属性
  • 文本节点：HTML标签中的文本内容

  2.文档节点

• 文档节点（Document）代表的是整个HTML文 档，网页中的所有节点都是它的子节点。

  document对象作为window对象的属性存在的，我们不用获取可以直接使用。

  通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

  3.元素节点

• HTML中的各种标签都是元素节点（Element），这也是我们最常用的一个节点。
• 浏览器会将页面中所有的标签都转换为一个元素节点， 我们可以通过document的方法来获取元素节点。

• 例如：document.getElementById()，根据id属性值获取一个元素节点对象。

  4.属性节点

• 属性节点（Attribute）表示的是标签中的一个一个的属 性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。可以通过元素节点来获取指定的属性节点。
• 例如：元素节点.getAttributeNode("属性名")，根据元素节点的属性名获取一个属性节点对象。

• 我们一般不使用属性节点。

  5.文本节点

• 文本节点（Text）表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点，它包括可以字面解释的纯文本内容。文本节点一般是作为元素节点的子节点存在的。获取文本节点时，一般先要获取元素节点，在通过元素节点获取文本节点。

• 例如：元素节点.firstChild;，获取元素节点的第一个子节点，一般为文本节点。

  4.3、DOM文档操作

  1.查找 HTML 元素

  方法	描述
  document.getElementById(id)	通过元素 id 来查找元素。
  document.getElementsByTagName(name)	通过标签名来查找元素。
  document.getElementsByClassName(name)	通过类名来查找元素。
  document.querySelector(CSS选择器)	通过CSS选择器选择一个元素。
  document.querySelectorAll(CSS选择器)	通过CSS选择器选择多个元素。

• 演示

• 创建一个按钮，通过id获取按钮节点对象

  • var btn = document.getElementById("btn");

• 创建一个按钮，通过标签名获取按钮节点对象数组

  • var btn = document.getElementsByTagName("button");

• 创建一个按钮，通过类名获取按钮节点对象数组

  • var btn = document.getElementsByClassName("btn");

• 创建一个按钮，通过CSS选择器选择该按钮

  • var btn = document.querySelector(".btn");

• 创建一个无序列表，通过CSS选择器选择该列表的所有li

  • var list = document.querySelectorAll(".list li");

  2.获取 HTML 的值

  元素节点.innerText 获取 HTML 元素的 文本内容
  元素节点.innerHTML 获取 HTML 元素的 html代码
  元素节点.属性 获取 HTML 元素的属性值。
  元素节点.getAttribute(attribute) 获取 HTML 元素的属性值。
  元素节点.style.样式 获取 HTML 元素的行内样式值。

  查找 HTML 父子

  元素节点.parentNode 返回元素的父节点。
  元素节点.parentElement 返回元素的父元素。
  元素节点.childNodes 返回元素的一个子节点的数组（包含空白文本Text节点）。
  元素节点.children 返回元素的一个子元素的集合（不包含空白文本Text节点）。
  元素节点.firstChild 返回元素的第一个子节点（包含空白文本Text节点）。
  元素节点.firstElementChild 返回元素的第一个子元素（不包含空白文本Text节点）。
  元素节点.lastChild 返回元素的最后一个子节点（包含空白文本Text节点）。
  元素节点.lastElementChild 返回元素的最后一个子元素（不包含空白文本Text节点）。
  元素节点.previousSibling 返回某个元素紧接之前节点（包含空白文本Text节点）。
  元素节点.previousElementSibling 返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。
  元素节点.nextSibling 返回某个元素紧接之后节点（包含空白文本Text节点）。
  元素节点.nextElementSibling 返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点）

  3.修改 HTML 元素

  document.createElement(element) 创建 HTML 元素节点。
  document.createAttribute(attribute) 创建 HTML 属性节点。
  document.createTextNode(text) 创建 HTML 文本节点。
  元素节点.removeChild(element) 删除 HTML 元素。
  元素节点.appendChild(element) 添加 HTML 元素。
  元素节点.replaceChild(element) 替换 HTML 元素。
  元素节点.insertBefore(element) 在指定的子节点前面插入新的子节点。

• 创建一个ul列表，然后在该列表中追加4个li标签

• var ul = document.createElement("ul");
  
      var li1 = document.createElement("li");
      var text1 = document.createTextNode("列表项1");
      li1.appendChild(text1);
      ul.appendChild(li1);

• 方式2

  <script>
      var ul = document.createElement("ul");
  
      var li1 = document.createElement("li");
      li1.innerHTML = "列表项1";
      ul.appendChild(li1);
  
      var li2 = document.createElement("li");
      li2.innerHTML = "列表项2";
      ul.appendChild(li2);
  
      var li3 = document.createElement("li");
      li3.innerHTML = "列表项3";
      ul.appendChild(li3);
  
      var li4 = document.createElement("li");
      li4.innerHTML = "列表项4";
      ul.appendChild(li4);
  
      document.getElementsByTagName("body")[0].appendChild(ul);
  </script>

• 方式3

  <script>
      var ul = document.createElement("ul");
  
      var li1 = "<li>列表项1</li>";
      var li2 = "<li>列表项2</li>";
      var li3 = "<li>列表项3</li>";
      var li4 = "<li>列表项4</li>";
      ul.innerHTML = li1 + li2 + li3 + li4;
  
      document.getElementsByTagName("body")[0].appendChild(ul);

  替换与删除

  • <script>
        var ul = document.getElementById("ul");
        var first document.getElementById("first");
        var last = document.getElementById("last");
        /*删除第一个*/
        ul.removeChild(first);
    
        /*替换最后一个*/
        var replaceLi document.createElement("li");
        replaceLi.innerHTML = "列表4的替换";
        ul.replaceChild(replaceLi, last);
    </script>

    4.dom对css操作

    //改变盒子的大小
                    /**
                     * js改变样式的语法
                     * 元素.style.样式名=样式值
                     * 例如:css的background-color，在js中并不合法
                     * js采用驼峰命名 将-去掉，后面的单词首字母大写
                     * 
                     * js改的样式改变的是内联样式，会立即生效。
                     * 若样式写了 !important，此时样式优先级最高，js改的无效
                     */
                    box.style.width="300px";
                    box.style.height="300px";
                    box.style.backgroundColor="pink";
                     // js 读取样式的值
                    console.log(box.style.width);
                    console.log(box.style.height);
                    //currentStyle ie内核浏览器起作用
                    console.log(box.currentStyle.width);

    5.其他样式的操作

    /**
                 * clientWidth 和clientHeight
                 * -盒子的可见宽和高
                 * -内容区+内边距
                 * -width+padding
                 */
                console.log("box1可见盒子的宽度"+box1.clientWidth);
                /**
                 * offsetWidth
                   offsetHeight
                 * 盒子的真实宽和高
                 * 内容区+内边距+边框
                 */
                console.log("box1盒子真实宽度"+box1.offsetWidth);
                
                /**
                 * offsetParent: 获取当前元素的父元素
                 * 离他最近开启定位的父元素，
                 * 都没有到 body
                 */
                console.log(box1.offsetParent);
                /**
                 * offsetLeft:当前元素相对于开启定位的父元素的水平距离
                 * offsetTop ：当前元素相对于开启定位的父元素的垂直距离
                 */
                console.log(box1.offsetLeft);
                console.log(box1.offsetTop);
                /**
                 * scrollHeight:
                 * scrollWidth:
                 * 获取滚动的真实内容
                 */
                console.log("scrollHeight="+box2.scrollHeight);
                console.log("scrollWidth="+box2.scrollWidth);
                
                /**
                 * scrollLeft: 获取水平滚动条的距离
                 * scrollTop：获取垂直滚动条的距离
                 */
                console.log("scrollLeft="+box2.scrollLeft);
                console.log("scrollTop="+box2.scrollTop);
                console.log("clientHeight="+box2.clientHeight);
                //判断垂直滚动条滚到低了
                box2.scrollHeight-box2.scrollTop==clientHeight;
                //判断水平方向滚动条滚到低了
                box2.scrollwidth-box2.scrollleft==clientleft;
            }  

    6.读取元素的样式属性

    var box=document.getElementById("box");
            /**
             * currentStyle读取样式
             * 语法:
             *   元素.currentStyle.样式名。
             *   IE内核支持，其他不支持
             */
            //var a=box.currentStyle.left;
            //alert(a);
            /**
             * 其他浏览器，读取样式属性
             * getComputedStyle(元素,null)
             * 返回是所有样式的对象
             */
            var a=getComputedStyle(box,null);
            console.log(a.left)
            /**
             * 获取指定样式值
             * 
             */
            function getStyle(obj,name){
                if(window.getComputedStyle){
                    return getComputedStyle(obj,null)[name];
                }else{
                    return obj.currentStyle[name];
                }    

  
  ## 4.4、文档流

• 文档流：表示网页的位置，任何的元素都在文档流中。
• 元素在文档流的特点

• 行内元素：span、 a、 img 、b

  • 1、不会独占一行，从左往右排列，直到一行不足以容纳内容，换到下一行 继续自左往右排列

  • 块内元素：div 、li、h、p

    • 独占一行，自上而下排列
    • 块元素在文档流的默认宽度是父元素的100%
    • 块元素在文档流的高度默认内容撑开

  4.5、键盘事件

  属性	描述
  onkeydown	当按下按键时运行脚本。
  onkeyup	当松开按键时运行脚本。
  onkeypress	当按下并松开按键时运行脚本。

  案例演示1：当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false

  <!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
  <script>
    /* 当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false */
    window.onkeydown = function (event) {
        /* 解决兼容性问题 */
        event = event || window.event;
  
        if (event.keyCode == 65) {
            console.log("true");
        } else {
            console.log("false");
        }
    };

  案例演示2：使div可以根据不同的方向键向不同的方向移动

  <div id="box" style="width: 100px;height: 100px;background: red;position: absolute;"></div>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->

## 4.8、事件委派

我们希望只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素，也就是事件的委派。事件的委派，是指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。事件委派是利用了事件冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

**案例演示：为ul列表中的所有a标签都绑定单击事件**

<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>

## 4.9、事件绑定

我们以前绑定事件代码只能一个事件绑定一个函数，那我们要是想一个事件对应多个函数，并且不存在兼容性的问题该如何解决呢？

/**

             * IE8以上
             * -addEventListener() 绑定响应函数
             * -1、参数传入事件类型作为参数，不需要带 on
             * -2、回调函数
             * -3、false
             * 可以给一个元素绑定多个事件，多个事件依次执行。
             */
            btn.addEventListener("click",function(){
                alert(1);
            },false);
            btn.addEventListener("click",function(){
                alert(2);
            },false);
            btn.addEventListener("click",function(){
                alert(3);
            },false);

**案例演示：为按钮1的单击事件绑定两个函数，然后点击按钮2取消按钮1的单机事件绑定函数f1**

按钮1
按钮2

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->

# 五、BOM

## 5.1、BOM概述

* 浏览器对象模型（Browser Object Model (BOM）使 JavaScript 有能力与浏览器"对话“
* 浏览器对象模型尚无正式标准。
* 由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。
* 浏览器对象模型可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作，常见的BOM对象如下：
  * Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
  * Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
  * Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
  * History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
  * Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
* 这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。

## 5.2、Window对象

### 1.弹出框

* **JavaScript 有三种类型的弹出框：警告框、确认框和提示框。**

* **1、警告框**

* 如果要确保信息传递给用户，通常会使用警告框。当警告框弹出时，用户将需要单击“确定”来继续。

* ```js
  window.alert("sometext");

• 2、确认框
• 当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。
• 如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false

• var r = confirm("请按按钮");
  if (r == true) {
      x = "您按了确认！";
  } else {
      x = "您按了取消！";
  }
  // 注意：window.confirm() 方法可以不带 window 前缀来编写。

• 3、提示框
• 当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
• 如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。

• var person = prompt("请输入您的姓名", "比尔盖茨");
  if (person != null) {
      console.log(person);
  }

2.定时事件

• setTimeout(function, milliseconds)

  在等待指定的毫秒数后执行函数。

• setInterval(function, milliseconds)

  等同于 setTimeout()，但持续重复执行该函数。

• setTimeout() 和 setInterval() 都属于 window 对象的方法。

  • setTimeout(function, milliseconds) 延时器

• //案例演示：单击按钮，等待 3 秒，然后控制台会输出 "Hello"
  <body>
  <button id="btn">按钮</button>
  
  <!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
  <script>
      var btn = document.getElementById("btn");
  
      btn.onclick = function () {
          // 创建延时器
          var timer = setTimeout(function () {
              console.log("Hello");
          }, 3000);
          
          // 清除延时器
          // clearTimeout(timer);        
      };
  </script>
  </body>

  setInterval(function, milliseconds) 定时器

• //案例演示：单击按钮，每隔一秒向控制台输出 "Hello"
  <body>
  <button id="btn">按钮</button>
  
  <!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
  <script>
      var btn = document.getElementById("btn");
  
      btn.onclick = function () {
          // 创建定时器
          var timer = setInterval(function () {
              console.log("Hello");
          }, 1000);
  
          // 清除定时器
          // clearInterval(timer);
      };
  </script>

如果您希望用户在进入页面前输入值，通常会使用提示框。

当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。

如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。

语法

window.prompt("sometext","defaultText");
1
window.prompt() 方法可以不带 window 前缀来编写。

实例

var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {

console.log(person);

}