JavaScript基础知识总结（基础篇）

JavaScript基础知识点总结（基础篇）

一、JavcScript基础语法应用

1.1三条输出语句

<script>
            // 在浏览器中弹出警告框
            alert("你能行么？");

            // 在浏览器页面中输出一个内容
            document.write("我在浏览器页面中显示");

            // 向控制台输出一个内容
            console.log("我在控制台显示");
</script>

1.2JS中的数据类型

在JS中一共有六种数据类型:
String 字符串
Number 数值
Booleam 布尔值
Null 空值
Undefined 未定义
Object 对象

1.3JS中的强制类型转换

1.31string强制类型转换分为两种方法:

1.调用toString方法
2.调用String函数

<script>
            // string强制类型转换分为两种方法
            // 1.调用toString方法
            // 2.调用String函数
            var a = 159;
            a = a.toString();
            document.write(a);
            document.write(typeof a);

            a = "iloveyou";
            a = String(a);
            document.write(a);
            document.write(typeof a);
</script>

1.32将其他String类型转为Number

1.使用Number()函数
2.使用parseInt()函数–转换为整数
parseFloat() —转换为浮点数

<script>
        var a = "123";
        a = Number(a);
        console.log(typeof a);
        console.log(a);

        var b = "456px";
        b = parseInt(b);
        console.log(typeof b);
        console.log(b);

        var c = "125.56";
        c = parseFloat(c);
        console.log(typeof c);
        console.log(c);
</script>

1.33将其他的数据类型转换为Boolean，使用Boolean()函数

数字–>Boolean
除了0和NaN,其余都是true
字符串–>Boolean
除了空串，其余都是true
null和undefined都会转化成false
对象都会转换成true

<script>

            var a = 154;
            a = Boolean(a);
            console.log(typeof a);
            console.log(a);

            var b = "ily";
            b = Boolean(b);
            console.log(typeof b);
            console.log(b);
</script>

1.4非布尔值的逻辑

&& || 非布尔值的运算情况：
先将其转换为布尔值，然后再运算，并且返回原值
&&运算
如果第一个值为true，则必然返回第二个值
如果第一个值为false，则直接返回第一个值
||运算
如果第一个值为true，则直接返回第一个值
如果第一个值为false，则返回第二个值

<script>
            var result = 1 && 2;
            console.log(result);

            var result = 0 && 2;
            console.log(result);

            var result = 1 || 2;
            console.log(result);

            var result = 0 || 2;
            console.log(result);
</script>

二、JS中的面向对象

2.1对象的创建和使用

<script>
            // 对象的练习
            // 创建对象
            var obj = new Object();

            //给对象添加属性值
            //语法:对象.属性名=属性值
            obj.name = "李白";
            obj.sex = "男";
            obj.age = "20";

            //读取属性
            // 语法：对象.属性名
            console.log(obj.name);
            console.log(obj.age);
            console.log(obj.sex);

            //修改属性
            //语法：对象.属性名 = 新值
            obj.name = "程咬金";
            console.log(obj.name);

            //删除属性
            //语法 : delete 对象.属性名
            delete obj.name;
            console.log(obj.name);
 </script>

对象的字面量：
使用对象字面量来创建一个对象
var obj={}; //与 var obj = new Object();一样
使用对象字面量可以在创建对象的同时直接指定对象中的属性
语法:{属性名:属性值,属性名:属性值…}

<script>
        var obj2={
            name:"李白",
            age:18,
            sex:"男"
        };
        console.log(obj2);
</script>

2.2属性名和属性值

在对象中如果使用特殊的属性名，需要用这种方式：
语法：对象[“属性名”]=属性值
当将对象的属性名赋给一个新的变量时，在读取对象中的这个值时，
需要这样写：对象[新变量];
js对象的属性值可以是任意类型

in运算符，通过该运算符可以检查一个对象中是否含有指定的属性
返回true则有，返回false则无
语法:“属性名” in 对象

<script>
        var obj = new Object();
        obj["name"] = "熊大";

        var n = "name";
        console.log(obj[n]);
        console.log("name" in Object);

</script>

2.3函数

创建函数用到两种方式：
1.使用声明函数来创建一个函数
语法:function 函数名(){
代码块
}

2.使用函数表达式创建一个函数
语法: var 函数名 = function(){
代码块
};

<script>
           function write(){
               console.log("这是我的第一个函数");
           } 
           write();

           var read = function(){
               console.log("这是我的第二个函数");
           };
           read();
</script>

2.31函数的参数

定义一个函数,可以在函数的()中指定一个或者多个形参，声明形参就相当于在函数内部声明了对应的变量,但不赋值。
在调用函数时,可以在()中指定实参
调用函数解析器不会检查实参的类型,如果接收到非法的参数,需要对参数进行检查

调用函数时,解析器也不会检查参数的数量,多余的实参不会被赋值, 若实参小于形参数,则没有对应的形参将会是undefined。
函数的实参可以实任意的数据类型。

<script>
        function sum(a,b){
            console.log(a+b);
        }

        // 在调用函数时,可以在()中指定实参
        sum(1,3);
</script>

在函数中，实参可以是任何值，既包括对象，又包括函数

 <script>
       function sayHello(o){
         console.log("我是"+o.name+",今年"+o.age+",住在"+o.address);
        }

        var obj={
            name:"李白",
            age:18,
            address:"古代"
        }

        sayHello(obj);

        function A(a){
            console.log("a ="+a );
            a(obj);
        }

        A(sayHello);

        // sayHello()
        // 调用函数，相当于使用函数的返回值

        // sayHello
        // 函数对象，相当于直接使用函数对象  
</script>

2.32立即执行函数

立即执行函数：
函数定义完，立即被调用，这种函数叫做立即执行函数，这种函数往往执行一次
也可以对该类函数进行传参

  <script>
        (function(){
            alert("我是一个匿名函数");
        })();

        (function(a,b){
            alert("a="+a);
            alert("b="+b);
        })(159,306);
    </script>

2.33JS中的方法

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

<script>
        // 创建一个的对象
        var obj = new Object;

        // 向对象中添加属性
        obj.name="李白";
        obj.age=18;

        // 对象中的属性值可以实任何的数据类型，也可以是函数
        obj.sayName = function(){
            console.log(obj.name);
        };

        console.log(obj.sayName);
        obj.sayName();
    </script>

2.34作用域

作用域：作用域指的是一个变量的作用范围
在js中一共有两种作用域：
1.全局作用域：
直接编写在script标签中的js代码，都会在全局作用域，全局作用域在页面打开时创建，在页面关闭时销毁。在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它有浏览器创建，我们可以直接使用。

在全局作用域中：
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存
全局作用域中的变量都是全局变量，在页面的任意部分可以访问

2.函数作用域：
调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁，每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的，在函数作用域中可以访问到全局作用域的变量，但在全局作用域中无法访问到函数作用域中的变量。

在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用。
如果没有，则向上一级作用域中寻找，直到找到全局作用域
如果全局作用域中依然没有找到，则会报错ReferenceError
在函数中要访问全局变量可以使用window对象

  <script>
        function fun(){
            console.log(a);
            var a=35;
            // 在函数作用域中，使用var关键字声明的变量
            // 会在函数中所有的代码执行之前被声明，但并未被赋值
        }

        function fun1(){
            c=15;
            console.log(c);
            // 在函数中，不使用var声明的变量都会成为全局变量
        }

        function fun2(e){
            alert(e);
            // 定义形参就相当于在函数作用域中声明了变量
        }
</script>

2.35变量的声明提前

变量的声明提前
使用var关键字声明变量，会在所有的代吗执行之前被声明（但是不会赋值）
如果声明变量时不使用var，则变量不会被声明提前

函数声明提前：
使用函数声明形式创建函数function 函数(){}
他会在所有代码执行之前就被创建,我们可以在函数声明前来调用函数
使用函数表达式创建的函数，不会被声明提前，所以不能提前调用

<script>
        fun();

        function fun(){
            console.log("我是fun函数");
        }

        var fun2 = function(){
            console.log("我是fun2函数");
        };

        fun2();
    </script>

2.36this关键字

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

<script>
        function fun(){
            console.log(this.name);
        }

        fun();

        //创建一个对象
        var obj = {
            name:"李白",
            sayName:fun
        };

        var name="我是全局作用域的name";
        obj.sayName();
    </script>

2.37使用工厂创建对象的方法

<script>
        //使用工厂创建对象
        function createPerson(name,age,sex){
            var obj = new Object();
            obj.name=name;
            obj.age=age;
            obj.sex=sex;
            obj.sayName = function(){
                                alert(this.name);
            };
            return obj;
        }

        var obj2=createPerson("李白",18,"男");
        var obj3=createPerson("诸葛",36,"女");
        var obj4=createPerson("文松",34,"不男不女");

        console.log(obj2);
        console.log(obj3);
        console.log(obj4);

        obj2.sayName();
        obj3.sayName();
    </script>

2.38构造函数

构造函数和普通函数的区别就是调用的方式不同
普通函数直接调用，构造函数需要使用new关键字来调用
构造函数习惯上首字母大写
构造函数的执行流程：
1.立刻创建一个新的对象
2.将新创建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
使用同一个构造函数创建的对象，称为同一类对象，也将一个构造函数称为一个类
通过一个构造函数创建的对象，称为该类的实例

this的情况：
1.当以函数的形式调用时，this是window
2.当以方法的形式调用时，谁调用方法this就是谁
3.当以构造函数的形式调用时，this就是新创建的那个对象

 <script>
        function Person(name,age,sex){
            this.name=name;
            this.age=age;
            this.sex=sex;
            this.sayName=function(){
                alert(this.name);
            };
        }

        var per1=new Person("李白",38,"男");
        var per2=new Person("杜甫",38,"男");
        var per3=new Person("西施",36,"女");

        console.log(per1);
        console.log(per2);
        console.log(per3);

        per1.sayName();

        // 使用instanceof可以检查一个对象是否是一个类的实例
        // 语法：对象 instanceof 构造函数
        // 如果是，返回true，反之返回false
        alert(per1 instanceof Person);
    </script>

 <script>
        // 将构造函数的内部方法提到全局作用域当中
        function Person(name,age,sex){
            this.name=name;
            this.age=age;
            this.sex=sex;
         // this.sayName=fun;
        }

        /* function fun(){
            alert("hello ,我是"+this.name);
        } */

        // 向原型函数添加方法
        Person.prototype.sayName=function(){
            alert("hello ,我是"+this.name);
        };

        var per1=new Person("李白",19,"男");
        var per2=new Person("杜甫",20,"男");

        console.log(per1);
        console.log(per2);

        per1.sayName();
        per2.sayName();

        console.log(per1.sayName == per2.sayName);
 </script>

2.3原型

原型prototype：
我们所创建的每一个函数，解析器都会向函数中添加一个prototype属性， 这个属性对应一个对象，这个对象就是我们所谓的原型对象。

如果函数作为普通函数调用prototype没有任何作用
函数以构造函数的形式调用时，它所常见的对象中都会有一个隐含的属性
指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，
我们可以将对象中共有的内容，统一设置到原型对象中。
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用
没有则会去原型对象中寻找，找到直接使用。
以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中
这样就不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法

<script>
        function MyClass(){

        }

        // 向MyClass原型中添加属性a
        MyClass.prototype.a=123;

        // 向MyClass的原型中添加一个方法
        MyClass.prototype.sayHello = function(){
            alert("Hello");
        };

        // 创建对象
        var mc1=new MyClass();
        var mc2=new MyClass();

        console.log(MyClass.prototype);
        console.log(mc2.__proto__ == MyClass.prototype);

        // 向mc1中添加a属性
        mc1.a = "我是mc1中的a";
        console.log(mc1.a);
        console.log(mc2.a);
        mc1.sayHello();
    </script>

原型对象

原型对象也是对象,所以他也有原型,
当我们使用一个对象的属性和方法时,会在自身中寻找,
自身中如果有,则直接使用,
如果没有,则去原型对象中寻找,如果原型对象中有,则使用
如果没有,则回去原型对象的原型中去寻找,直接找到Object对象的原型,
Objetc对象的原型没有原型,在Object中依然没有找到,则返回undefined

  <script>

        function MyClass(){

        }

        // 向MyClass的原型中添加一个name属性
        MyClass.prototype.name="我是原型中的名字";

        var mc = new MyClass();
        mc.name;

        // 为mc的name赋值
        // mc.name="我是mc的name";
        console.log(mc.name);

        // 使用in检查对象中是否含有某个属性值时，对象中没有，原型中有，也会返回true
        console.log("name" in mc);

        // 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
        // 使用该方法只有当对象自身中含有该属性时，才会返回true
        console.log(mc.hasOwnProperty("name"));
    </script>

三、数组

3.1数组的创建和使用

<script>
        // 创建数组
        var arr=new Array();

        // 对数组赋值
        arr[0]=1;
        arr[1]=2;

        // 查看数组
        console.log(arr);
        console.log(arr.length);
    </script>

<script>
        // 使用字面量数组
        var arr = [0,1,2,3,4];
        console.log(arr);

        var arr2 = new Array(1,5,9);
        console.log(arr2);

        arr3 = [5,6,7];
        console.log(arr3);

        arr4 = new Array(3);
        console.log(arr4.length);

        // 数组中可以放任意的数据类型
    </script>		

3.2数组中的方法

1.push();在数组末尾添加一个或者多个元素，返回数组新长度
2.pop();删除数组最后一个元素，返回被删除的元素
3.unshift();向数组开头添加一个或多个元素，返回数组新长度
4.shift();删除数组第一个元素，返回被删除的元素

5.slice();可以用来从数组中提取指定元素
该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
参数：
1.截取开始的位置索引，包含开始索引
2.截取结束的位置索引，不包含结束索引
第二个参数省略不写，此时会截取从开始索引往后的所有元素
索引可以传递一个负值，如果传递一个负值，则从后往前计算
-1 倒数第一个
-2 倒数第二个

6.splice() 可以用于删除数组中的指定元素
使用splice()会影响到原数组，会将指定元素从原数组中删除，并将删除的元素返回
参数：
第一个：表示开始位置的索引
第二个：表示删除的数量
第三个及以后：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

7.concat();可以连接两个或多个数组，并将新的数组返回，不会对原数组产生影响

8.join();将数组转换为一个字符串，不对原数组产生影响，将转换后的字符串作为结果返回,在join()中可以传入一个字符串作为参数，这个参数将会成为数组中的元素连接符

9.reverse();该方法用来反转数组，直接改变原数组

10.sort();可以用来对数组中的元素进行排序，影响原数组，按照Unicode编码排序
指定排序规则时，
可以在sort()添加一个回调函数，来指定排序规则
回调函数中需要两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数
浏览器会根据回调函数的返回值来决定元素的排序
升序排列：返回a-b
降序排列：返回b-a

3.3forEach

forEach()方法需要一个函数作为参数
像这种函数，由我们创建不由我们调用的，称为回调函数
数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素，以实参的形式传递进来，我们可以定义形参，来读取这些内容

浏览器会回调函数中传递三个参数：
第一个参数：当前正在遍历的元素
第二个参数：当前遍历元素的索引
第三个参数：正在遍历的数组

<script>
        var arr = [1,2,3];
        arr.forEach(function(value,index,obj){
            console.log(value);
        });
    </script>

四、Date、Math

4.1Date

    getDate()	以数值返回天（1-31）
    getDay()	以数值获取周名（0-6）
    getFullYear()	获取四位的年（yyyy）
    getHours()	获取小时（0-23）
    getMilliseconds()	获取毫秒（0-999）
    getMinutes()	获取分（0-59）
    getMonth()	获取月（0-11）
    getSeconds()	获取秒（0-59）
    getTime()	获取时间（从 1970 年 1 月 1 日至今）

<script>
        /* 在js中，使用Date对象来表示一个时间*/
        // 创建一个Date对象
        var date = new Date();
        console.log(date);  //date表示的是当前代码的执行时间

        // 创建一个指定的对象时间
        // 需要在构造函数中传递一个表示时间的字符串作为参数
        // 顺序依次为:月/日/年 时:分:秒
        var date1 = new Date("12/05/2030 14:10:36");
        console.log(date1);

        // getDate()获取当前日期对象是几日
        var d = date.getDate();
        console.log(d);  
    </script>

4.2Math中的方法

Math.sqrt() 对一个数进行开方运算
Math.pow(x,y); 对一个数进行x的y次幂运算
Math.abs(); 对一个数进行绝对值运算
Math.ceil(); 可以对一个属进行向上取整，小数位只要有值就自动进1
Math.floor(); 可以对一个数进行向下取整，小数部分会被舍掉
Math.round(); 可以对一个数进行四舍五入取整
Math.random(); 可以用来生成一个0-1之间的随机数
Math.round(Math.random()*x); 生成一个0-x之间随机数
Math.round(Math.random()*(y-x)+x); 生成一个x-y之间的随机数
max(); 可以获取多个数中的最大值
min(); 可以获取多个数中的最小值

4.3String中的方法

1.charAt(); 可以返回字符串的指定字符，根据索引获取指定字符
2.charCodeAt(); 获取指定位置字符的字符编码（Unicode编码）
3.formCharCode(); 可以根据字符编码去获取字符
4.concat(); 可以用来连接两个或多个字符串
4.indexof(); 该方法可以检索一个字符串中是否含有指定内容
如果字符串中含有指定内容，则会返回其第一次出现的索引
如果没有指定内容，则返回-1
可以指定一个第二个参数，指定开始查找的位置
5.lastIndexOf(); 该方法雨indexof()一样，不同的是indexof是从前往后找，
lastIndexOf是从后往前找，也可以指定开始查找的位置
6.slice(a,b); 可以从字符串中截取指定的内容
a 开始位置的索引（包括开始位置）
b 结束位置的索引（不包括结束位置），如果省去第二个参数，则会截取到后边所有的
也可以传递一个负数作为参数，负数的话将会从后边计算
7.subString(a,b); 用来截取一个字符串，与slice()类似
a 开始位置的索引（包括开始位置）
b 结束位置的索引（不包括结束位置），如果省去第二个参数
该方法不接受负值作为对象，如果传递了一个负值，默认使用0
8.split(); 可以将一个字符串拆分成一个数组，
需要一个字符串作为参数，将会根据该字符串去拆分数组
如果传递一个空串，则会将每个字符都拆分成为数组中的一个元素
9.toUpperCase();将一个字符串转换为大写并返回
10. toLowerCase();将一个字符串转换为小写返回
以上方法都不会对原字符串进行修改，而是返回一个新的

五、正则表达式

5.1正则表达式的创建和使用

正则表达式：它是用来定义一些字符串规则：
计算机可以根据正则表达式，来检查一个字符串是否符合规则，
若符合，将字符串中符合规则的内容提取出来。
创建正则表达式：
语法：var 变量 = new RegExp(“正则表达式”,“匹配模式”);
在构造函数中可以传递一个匹配模式作为第二个参数可以是:
i 忽略大小写
g 全局匹配模式
正则表达式的方法：
test(); 使用该方法可以用来检查一个字符串是否符合正则表达式规则，
符合返回true，不符合返回false

 <script>
            var reg = new RegExp("a","i"); //这个正则表达式用来检测一个字符串中是否含有a
            var str = "abc";

            var result = reg.test(str);
            console.log(result);
    </script>

        使用字面量来创建正则表达式
            语法：var 变量 = /正则表达式/匹配模式;

        创建一个正则表达式，检查一个字符串中是否有a或者b
            使用|表示 或者 的意思    

        使用 [] 里的内容也是或的关系
            [ab] == a|b
            [a-z] 任意的小写字母
            [A-Z] 任意的大写字母
            [A-z] 任意字母    
            [0-9] 任意数字

            [^ ]表示除了

<script>
            var reg = /a/i;
            var result = reg.test("abcd");
            console.log(result);

        /* 检查一个字符串中是否含有abc 或者 adc 或者aec */
        var reg1 = /a[bde]c/;
        var result2 = reg1.test("abc");
        console.log(result2);

        var reg3 = /[^ab]/;
        var result3 = reg3.test("ab");
        console.log(result3);
    </script>

5.2字符串和正则表达式的相关方法

        1.split(); 可以见一个字符串拆分成一个数组
            方法中可以传递一个正则表达式为参数，这样方法会根据正则表达式去拆分字符串
            这个方法即使不指定全局匹配，也会全部拆分

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

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

        4.replace() 可以将字符串中指定内容替换为新的内容
            参数：
                第一个参数：指被替换的内容，可以接受一个正则表达式作为参数
                第二个参数：新内容
                默认只会替换第一个

5.3正则表达式的语法

        量词
            通过量词可以设置一个内容出现的次数，量词只对它前边的一个内容起作用
            {n} 正常出现n次
            {m,n} 出现m-n次
            {m,} 出现m次以上
            + 至少一个，相当于{1,}
            * 0个或多个，相当于{0,}
            ? 0个或1个 相当于{0,1}

            ^表示开头
            $表示结尾

 <script>
        var reg = /a{3}/;
        var result = reg.test("aaa");
        console.log(result);

        var reg2 = /a{1,3}b/;
        var result2 = reg2.test("a");
        console.log(result2);

        var reg3 = /a{4,}/;
        var result3 = reg3.test("aaaa");
        console.log(result3);

        var reg4 = /^a/;
        var result4 = reg4.test("abbb");
        console.log(result4);

        var reg5 = /b$/;
        var result5 = reg5.test("b");
        console.log(result5);

        // 创建一个正则表达式，用来检测一个字符串是否为合法手机号
        /* 
            手机号的规则：
                        1.以1开头
                        2.第二位为3-9的任意数字
                        3.三位以后的数字为0-9任意9个

            ^1  [3-9] [0-9]{9}$ 
         
        */
        var phonenum = /^1[3-9][0-9]{9}$/;
        console.log(phonenum.test("15961591591"))
    </script>

        .在正则表达式中表示任意字符，\表示转义字符
        在正则表达式中，用\. 来表示 .
                      用\\ 来表示 \

        注意：在使用构造函数时，由于它的参数是一个字符串，而\是一个转义字符，
            如果使用\则需要使用\\来代替

            元字符：
                    \w 表示任意字母、数字、_  [A-z0-9_]
                    \W 表示除了字母、数字、_  [^A-z0-9_]
                    \d 表示任意的数字    [0-9]
                    \D 表示除了数字      [^0-9]
                    \s 表示空格
                    \S 表示除了空格
                    \b 表示单词边界
                    \B 表示除了单词边界

<script>
        // 创建一个正则表达式，检查一个字符串中是否含有单词child
        var reg = /\bchild\b/;
        var result = reg.test("hello child");
        console.log(result);

        // 创建一个正则表达式，用来删除一个字符串的前后空格
        var str = "       hello     ";
        str = str.replace(/^\s*|\s*$/g,"");
        console.log(str);
    </script>

六、DOM（Document Objeect Model）文档对象模型

6.1DOM

浏览器为我们提供了文档节点对象，这个对象时window属性
可以在页面中直接使用,文档节点代表的是整个网页

<body>
    <button id="btn">这是个按钮</button>
    <script>
        
        // 获取到button对象
        var btn = document.getElementById("btn");

        // 修改按钮的文字
        btn.innerHTML = "i'm button";
    </script>
</body>

DOM的常用方法：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

6.2事件

事件就是用户和浏览器之间的交互行为,比如点击按钮,鼠标移动\关闭窗口…
可以在事件对应的属性中设置一些js代码,事件被触发时,代码会被执行

<body>
    <!-- 不推荐使用该种方式 -->
    <!-- <button id="btn" οnclick="alert('点我');">我是一个按钮</button> -->
    <button id="btn" onclick="alert('点我');">我是一个按钮</button>

    <script>
        // 获取按钮对象
        var btn = document.getElementById("btn");
        /* 可以为按钮的对应事件绑定处理函数的形式来响应事件 */
        // 绑定一个单击事件
        btn.onclick = function(){
            alert("你点我");
        };
    </script>
</body>

6.3文档的加载

浏览器在加载一个页面时,是按照自上而下的顺序加载的,如果将script标签
写到页面的上边,在代码执行时,页面还没有加载,页面的DOM对象也没有加载,
会导致无法获取到DOM对象.

onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行,
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            // 获取按钮对象
            var btn = document.getElementById("btn");

            // 为按钮绑定一个单击响应函数
            btn.onclick = function(){
                alert("你好");
            }; 
        };
    </script>
</head>
<body>
    <button id="btn">我是按钮</button>
</body>
</html>

6.4内联样式的修改和读取

通过js修改元素样式
语法: 元素.style.样式 = “样式值”;

如果css样式名中有 - ,例如background-color,
像这种样式在js中去掉- 使用驼峰命名法 backgroundColor

通过style属性设置的样式都是内联样式,内联样式具有较高的优先级,js修改后会立即显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            height: 100px;
            width: 100px;
            background-color: greenyellow;
        }
    </style>

    <script>
        window.onload = function(){
            // 点击按钮,修改box1的大小和颜色
            // 获取按钮对象
            var button01 = document.getElementById("button01");
            button01.onclick = function(){
            
                box1.style.height = "300px";
                box1.style.width = "300px";
                box1.style.backgroundColor = "black";
            };

            // 点击按钮2后,显示元素样式值
            var button2 = document.getElementById("button02");
            button2.onclick = function(){
                // 语法: 元素.style.样式
                // 通过style属性设置和读取的样式都是内联样式,无法读取样式表中的样式
                alert(box1.style.backgroundColor);
            };
        };
    </script>
</head>
<body>
    <div id="box1"></div>
    <button id="button01">超级变变变</button>
    <button id="button02">读取样式值</button>
</body>
</html>

6.5其他与样式相关的属性

1.clientWidth、clientHeight
这两个属性可以获取元素的可见宽度和高度
这些属性都是不带px的，返回都是一个数字，可以直接计算
会获取元素的宽度和高度，包括内容区和内边距；这些属性只能读，不能修改

2.offsetWidth、offsetHeight
获取元素的整个宽度和高度，包括内容区、内边距、边框

3.offsetParent 可以用来获取当前元素的定位父元素
获取离当前元素最近的开启了定位的祖先元素
如果所有祖先都没有开启定位，则返回body

4.offsetLeft 当前元素相对于其定位父元素的水平偏移量
offsetTop 当前元素相对于其定位父元素的垂直偏移量

5.scrollWidth 可以获取元素整个滚动区域的宽度
scrollHeight 可以获取元素整个滚动区域的高度
scrollLeft 可以获取水平滚动条滚动的距离
scrollTop 可以获取垂直滚动条滚动的距离

6.当scrollHeight - scrollTop == clientHeight 说明垂直滚动条滚到底了
当scrollWidth - scrollLeft == clientWidth 说明水平滚动条滚到底了

6.6事件的冒泡（Bubble）

事件的冒泡就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。
不希望发生事件的冒泡可以通过事件对象来取消冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }

        #s1{
            background-color: hotpink;
        }
    </style>

    <script>
        window.onload = function(){

            // 为span绑定单击响应函数
            var s1 = document.getElementById("s1");
            s1.onclick = function(event){
                alert("我是span的响应函数");

                // 取消事件的冒泡
                // 可以将事件对象的cancelBubble设置为true，即可取消冒泡
                event = event || window.event;
                event.cancelBubble = true;
            };

            // 为div绑定单击响应函数
            var box1 = document.getElementById("box1");
            box1.onclick = function(event){
                alert("我是div的响应函数");
                event = event || window.event;
                event.cancelBubble = true;
            };

            // 为body绑定单击响应函数
            document.onclick = function(){
                alert("我是body的响应函数");
            };
        }
    </script>
</head>
<body>
    <div id="box1">
        我是div
        <span id="s1">我是span</span>
    </div>
</body>
</html>

6.7事件的委派

指事件统一绑定给元素的共同祖先，这样当后代元素上的事件触发时，会一直冒泡到祖先元素。从而通过祖先元素的响应函数来处理事件。
事件的委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      
         window.onload = function(){
          
            // 获取ul对象
            var ul = document.getElementById("ul");

           
            // 为btn添加一个单击响应函数
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                //创建一个li
                var li = document.createElement("li");
                li.innerHTML = "<a href='javascript:;' class='link'>新建超链接</a>" 

                // 将li添加到ul中
                ul.appendChild(li);
            };

            // 只绑定一次事件而运用到多个元素上，即使元素是后添加的
            ul.onclick = function(event){
                event = event || window.event;

                // target表示触发事件的对象

                if(event.target.className == "link"){
                alert("我是ul响应函数");
                }
            };
        };
    </script>
</head>
<body>

    <button id="btn">添加超链接</button>
    <ul id="ul" style="background-color: chartreuse;">
        <li><a href="javascript:;" class="link">超链接</a></li>
        <li><a href="javascript:;" class="link">超链接</a></li>
        <li><a href="javascript:;" class="link">超链接</a></li>
    </ul>
</body>
</html>

6.8滚轮事件

onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，火狐不支持该属性。火狐需要使用DOMMouseScroll来绑定滚动事件，该事件需要通过addEventListener()函数来绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }
    </style>

    <script>
        window.onload = function(){
            // 当鼠标滚轮向下滚动时，box1变长，当滚轮向上滚动时，box1变短
            var box1 = document.getElementById("box1");
          
            box1.onmousewheel = function(event){
                event = event || window.event;
                // event.wheelDelta可以获取鼠标滚轮滚动的方向，向上为正，向下为负
                // 在火狐中使用event.detail来获取滚动的方向，向上为负，向下为正
                if(event.wheelDelta > 0 || event.detail <0){
                    // 向上滚，box1变短
                    box1.style.height = box1.clientHeight-10+"px";
                }else{
                    // 向下滚,box1变长
                    box1.style.height = box1.clientHeight+10+"px";
                }

                /*  
                    使用addEventListener()方法绑定响应函数，取消默认行为时需要使用event来取消
                        默认行为event.preventDefault();
                */


                // 当滚动条滚动时，如果浏览器有滚动条，滚动条会随之滚动，
                // 这是浏览器默认行为，加入return false取消即可。
                return false;
            };
        };
    </script>
</head>
<body style="height: 2000px;">
    <div id="box1"></div>
</body>
</html>

6.9键盘事件

onkeydown 按键被按下，一直按着按键，事件会一直触发
onkeyup 按键被松开
键盘事件一般都会绑定给一些可以获取焦点的对象或者是document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
           
            document.onkeydown = function(event){
                console.log("按下");
                event = event || window.event;
                /* 
                    可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下
                    altKey、ctrlKey、shiftKey 这三个用来判断alt ctrl shift是否被按下，是返回true，不是返回false
                */

                // 判读y和ctrl是否被同时按下
                if(event.keyCode === 89 && event.ctrlKey){
                    console.log("y和ctrl被同时按下");
                }

            };
            
            document.onkeyup = function(){
                console.log("弹起");
            };

            var input = document.getElementsByTagName("input")[0];
            input.onkeydown = function(event){
                event = event || window.event;
                // 让文本不能输入数字
                // 在文本框输入内容，属于onkeydown的默认行为，取消默认行为，输入的内容不会出现在文本框中
                // 数字编码48-57  小键盘上的数字编码为96-105
                if(event.keyCode>=96 && event.keyCode<=105){
                    return false;
                }
            };
        };
    </script>
</head>
<body>
    <input type="text">
</body>
</html>

七、BOM

        BOM--浏览器对象模型，BOM可以使我们通过js来操作浏览器
        BOM对象：
            1.window 代表的是整个浏览器窗口，同时window也是网页中的全局对象
            2.Navigator 代表的是当前浏览器的信息，通过该对象可以来识别不同的浏览器
            3.Locaton 代表当前浏览器的地址栏信息，通过Locatin可以获取地址栏信息，或者操作浏览器跳转页面
            4.History 操作浏览器向前或向后翻页，该操作只在当次访问时有效
            5.Screen 代表用户的屏幕信息，通过该对象可以获取到用户显示器的相关信息

7.1Navigator

                1.appName 属性返回浏览器的应用程序名称：
                2.userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串包含有
                    用来描述浏览器信息的内容，不同的浏览器有不同的userAgent
                3.appCodeName 属性返回浏览器的应用程序代码名称：

7.2History

                1.length属性，可以获取当前访问的链接数量
                2.back(); 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
                3.forward(); 可以跳转到下一个页面，作用和浏览器的前进按钮一样
                4.go(); 可以用来跳转到指定的页面，需要一个整数为参数，n表示前进跳转n个页面，-n表示后退跳转n个页面

7.3Location

                1.直接打印location，可以获取到地址栏的信息（当前页面的完整路径）
                2.直接将location属性修改为一个完整的路径，或相对路径，页面会自动给跳转到该路径，并且生成相应的记录
                3.assign(); 用来跳转到其他的页面，作用和直接修改location一样
                4.reload(); 用于重新加载当前页面，作用和刷新按钮一样，在方法中传递一个true，会强制清空缓存刷新页面
                5.replace(); 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，不会生成记录，无法使用回退按钮

7.4定时调用（定时器）

setInterval();
定时调用,可以将一个函数每隔一段时间调用一次
参数：
1.回调函数，该函数会每隔一段时间被调用一次
2.每次调用间隔的时间，单位是毫秒

返回值：返回一个Number类型的数据，这个数据用来作为定时器的唯一标识
clearInterval();可以用来关闭一个定时器，需要一个定时器的标识作为参数

7.5延时调用

延时调用setTimeout();
延时调用一个函数时不会立马执行，而是隔一段时间执行，并且只执行一次
使用clearTimeout(); 关闭一个延时调用

八、类的操作

修改box的class属性
通过修改元素的class属性来间接的修改样式，这样修改一次可以同时修改多个样式。浏览器只需要重新渲染页面一次，性能比较好，这种方式可以使表现和行为进一步分离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .b1{
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .b2{
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }
    </style>

    <script>
        window.onload = function(){
            var btn01 = document.getElementById("btn01");
            var box1 = document.getElementById("box1");

            btn01.onclick = function(){
                // addClass(box1,"b2");
                // removeClass(box1,"b1");
                toggleClass(box1,"b2");
            };
        };

        // 定义一个函数，用来向一个元素中添加指定的class属性值
        // 参数:
        //      obj 要添加class属性的元素
        //      cn  要添加的class值
        function addClass(obj,cn){
            // 检查obj中是否含有cn
            if(!hasClass(obj,cn)){
                obj.className += " "+cn;
            }
        }

        // 判断一个元素中是否含有指定的class属性值,如果有class,则返回true,没有返回false
        function hasClass(obj,cn){
            // 创建一个正则表达式
            var reg = new RegExp("\\b"+cn+"\\b");
            return reg.test(obj.className);
        }

        // 删除一个元素中的指定class属性
        function removeClass(obj,cn){
            // 创建一个正则表达式
            var reg = new RegExp("\\b"+cn+"\\b");

            // 删除class
            obj.className = obj.className.replace(reg,"");
        }

        // 定义一个切换类toggleClass,元素中具有该类则删除,没有该类则添加
        function toggleClass(obj,cn){
            // 判断obj中是否含有cn
            if(hasClass(obj,cn)){
                removeClass(obj,cn);  //有就删除
            }else{
                addClass(obj,cn);   //没有就添加
            }
        }
    </script>
</head>
<body>
    <button id="btn01">点击按钮修改box的样式</button>
    <br><br>
    <div id="box1" class="b1"></div>
</body>
</html>

九、JSON（JavaScript Object Notation）JS对象表示法

        JSON（JavaScript Object Notation）JS对象表示法
            JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，
            并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互。

            JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须要加双引号，其他的和JS语法一致

            JSON分类：
                1.对象
                2.数组

            JSON中允许的值：
                1.字符串
                2.数值
                3.布尔值
                4.null
                5.对象
                6.数组



        将JSON字符串转化为JS中的对象，在JS中，有一个工具类叫做JSON
            这个对象可以将JSON转换为JS对象，也可以将一个JS对象转换为JSON
     

		 json--> js对象
	 	JSON.parse();可以将JSON字符串转为JS对象，需要一个JSON字符串作为参数，会将该字符串转为JS对象并返回。


        JS对象-->JSON
        JSON。stringify(); 可以将一个JS对象转换位JSON字符串，需要一个js对象作为参数，会返回一个JSON字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <script>
      

        
        var arr = '[1,2,3,"hello",true]';
        var obj2 = '{"arr":[1,2,3]}';
        var arr2 = '[{"name":"李白","age":18,"gender":"男"},{"name":"杜甫","age":18,"gender":"男"}]'

        

        
        var json = '{"name":"李白","age":18,"gender":"男"}';
        var o = JSON.parse(json);
        console.log(o.gender);

        var o2 = JSON.parse(arr);
        console.log(o2[1]);


       
        var obj3 = {name:"网三",age:16,sex:"男"};
        var str = JSON.stringify(obj3);
        console.log(str);
        

    </script>
</body>
</html>