2021-08-05-JavaScript

JavaScript

• JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。

更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。它的主要目的是，验证发往服务器端的数据、增加 Web 互动、加强用户体验度等

• 组成

  • ECMAScript–>(基础语法)
  • DOM–>(文档对象模型)
  • BOM–>(浏览器对象模型)

• JS分类：

​ 行内JS–>写在标签内部中的js代码

<button type="button" onclick="alert('醒醒吧你!!!!')">按钮</button>

​ 内部JS–>定义在script标签内部的代码

<script type="text/javascript" charset="utf-8">
	alert('this is inner js code')
</script>

​ 外部JS–>写在js文件中，在html中通过script引入

hello.js:

alert("外部js")

html文件中:

<!-- 在需要使用js的html页面中引入 -->
<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>

js可以定义在html文档中的任意位置，

​ 推荐在head中：便于后期维护

​ body后：便于整个代码的运行，让元素都加载完成

对js进行调试

• alert()：弹出框
• document.write()：重写原窗口
  • 括号中可以识别html语法结构
  • 当原页面中的内容加载完毕之后触发document.write,会覆盖原页面
• console：打印在控制台
  • console.log
  • console.info
  • console.warn
  • console.error

代码示例：

    <script>
    	//alert()
        alert("弹出框");
        //document.write()
        document.write("document");
        document.write("<h1>标题</h1>");
        //console控制台打印
        console.log("日志输出")
        console.info("信息输出");
        console.error("错误输出");
        console.warn("警告输出");
    </script>

基础语法

​ JavaScript程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。
​ 语句（statement）是为了完成某种任务而进行的操作，语句以分号结尾，一个分号即表示一个语句结束。多个语句可以写在一行内（不建议这么写代码），但是一行写多条语句时，语句必须以分号结尾。

1、标识符和关键字

标识符就是一个名字，用来给变量和函数进行命名，有特定规则和规范：

由Unicode字母、_、$、数字组成、中文组成
（1）不能以数字开头
（2）不能是关键字和保留字
（3）严格区分大小写

规范：

（1）见名知意
（2）驼峰命名或下划线规则

2、变量

​ JavaScript是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。

​ // 先声明再赋值
​ var a ;
​ a = 10;
​ // 声明同时赋值
​ var b = 20;

（1）若只声明而没有赋值，则该变量的值为undefined。

（2）变量要有定义才能使用，若变量未声明就使用，JavaScript会报错，告诉你变量未定义。

（3）可以在同一条var命令中声明多个变量。

（4）若使用var重新声明一个已经存在的变量，是无效的。

（5）若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值

（6）JavaScript是一种动态类型、弱类型语言，也就是说，变量的类型没有限 制，可以赋予各种类型的值。

3、变量提升

​ JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。

    <script>
        /*
        *   var i = undefined;
        *   var username = undefined;
        * */
        console.log(username);
        //console.log(w);

        //声明的同时赋值
        var i = 1;

        i = "";

        //先声明后赋值
        var username;
        username = "zhangsan";

        //同时定义多个变量
        var x=1,y=2,z=false;
        console.log(x,y,z);

        var b;
        console.log(b);

        w = 1;
        console.log("w = " + w);

    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XlzwpPug-1628165586628)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628163472833.png)]

4、数据类型（不同的教材可以有不同的分类情况）

​ 五种简单的数据类型：Undefined、Null、布尔、数值和字符串。

​ 一种复杂数据类型：Object。

​ undefined类型的值是undefined。undefined 是一个表示"无"的原始值，表示值不存在。js中定义的变量，没有赋值的情况下，默认值都是undefined。

​ null类型是只有一个值的数据类型，即特殊的值null。它表示空值，即该处的值现在为空，它表示一个空对象引用。

​ 使用Null类型值时注意以下几点：
​ 1）使用typeof操作符测试null返回object字符串。
​ 2）undefined派生自null，所以等值比较返回值是true。未初始化的变量 和赋值为null的变量相等。

布尔类型有两个值：true、false。

​ 使用 ’ ’ 或 " "引起来，如：‘hello’，“good”。
​ 使用加号 ‘+’ 进行字符串的拼接，如：console.log(‘hello’ + ’ everybody’)；

对象是一组数据和功能的集合。
说明：
{}：表示使用对象字面量方式定义的对象。空的大括号表示定义包含 默认属性和方法的对象。

//{}对象由键值对组合而成
{   
	key:value,   
	key:value,    
	//键值对
	//……
	key:value
}
//key : 如果符合命名规范可以直接定义,不符合命名规范.需要前后加引号
//value : 可以为任意类型

使用typeof可以测试出数据类型

 <!--
        typeof : 运算符 帮助判断数据的类型
            返回一个字符串形式的小写的数据类型
            Number  ->   number
            String  ->   string
            Null  -> object
            Undefined -> undefined
            Boolean -> boolean
            Function    -> function
            Object -> object
         语法:
            typeof(数据)
            typeof 数据
    -->
    <script>
        console.log( typeof(123) );
        console.log( typeof("123") );
        console.log( typeof(typeof("123")));
        console.log( typeof(null));
        console.log( typeof(undefined));
        console.log( typeof(false));
        console.log( typeof(function(){}));
        console.log( typeof({}));

        console.log( typeof 123);
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uCNbVnSX-1628165586637)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628164170122.png)]

自动类型转换：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lPCHYKht-1628165586638)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628163811944.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mdLmOCns-1628165586641)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628163830191.png)]

分类:
            显示类型转换|强制
                任意类型(String,Number,Boolean,Null,Undefined)都可以转为以下三种类型 :
                    String(数据)
                    Boolean(数据)
                        String :
                            空串->false
                            其他包含字符的字符串->true
                        Number
                            0,NaN -> false
                            其他 -> true
                        Null
                            false
                        Undefined
                            false

                    Number(数据)
                        String
                            空串,与空格字符串 -> 0
                            纯数字字符串 -> 数字
                            非纯数字字符串 -> NaN

                        Bollean
                            true -> 1
                            false-> 0
                        Null -> 0
                        Undefined -> NaN

            隐式类型转换|自动
                执行某些行为操作时候,目的不是为了转型,但是在执行的时候回默认自动转型->隐式类型转换
                + - * / ...


      String(数据) 把参数数据转为字符串类型
        在数据的前后+一对引号
    -->
    <script>
        //String()
        console.log(String(123));
        console.log(String(null));
        console.log(String(undefined));
        console.log(String(false));
        console.log(String(NaN));

        //Boolean
        console.log(Boolean(''));
        console.log(Boolean(' '));
        console.log(Boolean('abc'));
        console.log(Boolean('123'));
        console.log(Boolean('abc123'));

        console.log(Boolean(0));  //false
        console.log(Boolean(123));  //true
        console.log(Boolean(-1.4)); //true
        console.log(Boolean(NaN)); //false

        console.log(Boolean(null)); //false
        console.log(Boolean(undefined)); //false

        console.log("-----------------------------");
        //Number
        console.log(Number('')); //0
        console.log(Number(' ')); //0
        console.log(Number('123')); //123
        console.log(Number('abc')); //NaN
        console.log(Number('abc123')); //NaN

        console.log(Number(true)); //1
        console.log(Number(false)); //0

        console.log(Number(null)); //0
        console.log(Number(undefined)); //NaN

        //隐式类型转换
        console.log('a'-1);  //NaN
        console.log(false-1);  //-1
        console.log(true+false);  //1
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgMvis1v-1628165586644)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628164304872.png)]

比较运算符：

• == ------------>等于------------> x==8 为 false
• === ------------>全等（值和类型）------------> x=5 为 true；x=“5” 为 false
• && ------------>and------------> (x < 10 && y > 1) 为 true
• ||------------> or ------------>(x5 || y5) 为 false

<--
逻辑运算符    
	java中要求逻辑运算符左右两边的表达式必须结果为boolean类型    
	js中,两边的表达式可以为任意类型        
		&& : 当两边出现非boolean类型,第一个操作数转为boolean如果为false,最终的结果就是第一个操作数,如果为true,最终的结果为第二个操作数        	  || : 当两边出现非boolean类型,第一个操作数转为boolean如果为false,最终的结果为第二个操作数,如果为true,就为第一个操作数
-->
<script>
        console.log(1=='1');  //true
        console.log(1==='1'); //false

        console.log(1!='1'); //false
        console.log(1!=='1'); //true

        console.log(true && false);
        console.log(true || false);

        console.log(Boolean(1));
        console.log(1 && 'a');  //'a'
        console.log(1 || 'a');  //1
</script>
            

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fScEquQA-1628165586646)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628164557795.png)]

<!--    
数组[]： 存储多个数据        
		长度可变，可以存储任意类型的数据    
创建方式：        
1.new Array()            创建空数组      
2.new Array(值1,值2,值3...);            创建数组并赋值        
3.[值1,值2,值3...] -> 推荐     
索引：        
	从0开始，每次+1    
操作数组中的数据        
	数组名[索引]
-->

数组的遍历：

    <!--
        数组的遍历:
            普通for
            for in
            foreach
        数组的常用方法:
    -->
    <script>
        var arr = ["red","green","yellow","pink","black"];

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

        //for .. in
        for(var i in arr){
            console.log(arr[i]);
        }

        //foreach
        arr.forEach(function (value,index) {
            console.log(value+"--->"+index)
        });

        //数字常用方法
        console.log(arr);
        //slice 截取（切片）数组，原数组不发生变化
        console.log(arr.slice(2));  /*默认从参数索引位置开始截取到最后*/
        console.log(arr.slice(1,3));  /*默认从参数1索引位置开始截取到参数2索引位置结果,结束索引不包含*/
        console.log(arr);
        //splice 剪接数组，原数组变化，可以实现前后删除效果
        //console.log(arr.splice(2));  /*实现了剪切|删除的效果,从索引位置开始剪切到最后,修改原数组*/
        //console.log(arr.splice(1,2));  /*实现了删除的效果,从参数1索引位置开始删除参数2个*/
        console.log(arr.splice(1,2,"哈哈","呵呵","吼吼"));  /*实现替换效果,把参数1索引位置开始,删除参数2个数据,替换为参数3开始后面的数据*/
        console.log(arr);
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uvsgfPmu-1628165586648)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628164670538.png)]

js中的函数 : 封装功能

1.函数声明

​ function 函数名(参数列表){

​ 函数体;

​ }

​ 调用: 执行函中的代码

​ 1.函数名(实参);

​ 2.转为函数表达式然后通过最后添加(实参)的方式调用

​ 在函数声明的前面添加+|-|~|!或者前后添加一对()

2.函数表达式

​ var 变量名 = function (参数列表){

​ 函数体;

​ };

​ 函数表达式中的函数名作用只有一个,在递归使用的时候有用,否则默认一般省略

​ 调用:

​ 1.变量名(实参);

​ 2.函数表达式后面直接添加(实参),在当前直接调用

注意:

• 参数个数可以不同,函数没有传递实参,默认undefined

• 函数都存在返回值,没有显示定义return关键字返回结果,默认返回值为undefined

    <script>
        /*函数声明*/
        function fun1(name){
            console.log("我的名字是"+name);
            return name+"haha";
        }
        //输出函数的返回值
        console.log(fun1("马龙","张继科"));

        //函数表达式
        var f1 = function fun2(i){
            console.log("我是函数表达式1-->"+i);
            if(i==5){
                return;
            }
            fun2(++i);
        };
        //函数表达式调用1
        f1(1);

        //函数表达式调用2
        var f2 = function(x){
            console.log("函数表达式2");
        }(1);

        /*函数声明的其他调用方式*/
        ~function fun2(){
            console.log("函数声明2");
        }();
        +function fun3(){
            console.log("函数声明3");
        }();
        -function fun4(){
            console.log("函数声明4");
        }();
        !function fun5(){
            console.log("函数声明5");
        }();

        (function fun6(){
            console.log("函数声明6");
        })();
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BVkqvzyS-1628165586650)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628164885301.png)]

<!--
	js是值传递 | 引用传递（地址值传递）
    js中的作用域 ： 函数为单位
    js中的函数可以任意嵌套
    函数存在作用域的提升: 函数声明的方式会发生作用域的提升
    变量的作用域提升: 把当前的变量的声明提升到当前作用域的最上面
    当在函数中省略var关键字定义的变量,成为全局变量,但是事前要求这个函数至少被调用过一次
-->
<script>
        /*
            function func(){
                console.log("普通的函数声明");
            }
         */
        //调用函数的作用域提升
        func();

        // 给形参o赋予了新的数组
        var obj2 = [1, 2, 3];
        function paramter2(o){
            o = [2, 3, 4];
            o[1] = 3;
        }
        paramter2 (obj2);
        console.log(obj2); //[1, 2, 3];


        //快
        {
            var i = 1;
        }
        console.log(i);
        //作用域
        function fn1(){
            var j = 11;
        }
        //console.log(j);

        //嵌套
        function f1(){
            function f2(){
                function f3(){}
            }
        }

        //返回值为函数时
        function f4(){
            console.log("我是f4");
            return function(){
                console.log("返回值函数");
            }
        }
        console.log(f4); //打印函数结构
        console.log(f4()); //打印输出函数f4的返回值
        f4()(); //调用f4函数,得到返回值函数再调用

        function func(){
            console.log("普通的函数声明");
        }


        //变量作用域提升
        function func2(){
            //var haha = undefined;
            console.log(haha);
            var haha = "zhangsan";  //局部变量
            m = 1; //全局变量
        }
        //func2();

        console.log(m);
    </script>

   

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9YKSIxim-1628165586651)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628164997611.png)]

<!--
	this绑定对象
    this的决策树:
    	1.this所在的函数,是否是通过new关键字调用的,如果是this,绑定new的对象
        2.this所在的函数是否是通过对象.函数名()调用的,如果是函数中的this绑定.前面调用的对象
        3.没有显示的通过某一个对象调用,默认this指代全局window对象,默认通过window调用,window.可以省略
        
        注意:
        定义在全局位置的变量和函数,默认为window对象的属性和功能,调用的时候window.可以省略
-->
<script>
        function fn(){
            console.log(123);
        }
        fn();
        window.fn();

        /*全局变量*/
        var str = "希望疫情立即结束!!!";
        console.log(str);
        console.log(window.str);

        //自定义的模板
        function Person(name,age){
            this.name = name;
            this.age = age;
        }

        var person = new Person("zhangsan",18);
        console.log(person);

        var a = 1;

        var obj = {
            a : 10,
            fn : function(b){
                console.log(this.a+"---->"+b);
            }
        };

        obj.fn(100); //10-->100
        var f = obj.fn;
        f(); //1-->undefined

        var obj2 = {
            a : 12
        };

        /*修改this的引用指向*/
        obj.fn.call(obj2,100);  //调用的方法多个实参作为call方法的第二个参数开始
        obj.fn.apply(obj2,[1000]); //调用的方法多个实参作为apply方法的第二个参数,以数组为单位
    </script>  
            

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yhl3dmGB-1628165586652)(C:\Users\tk\AppData\Roaming\Typora\typora-user-images\1628165075991.png)]

Arguments 只在函数内部定义，保存了函数的实参

Array 数组对象

Date 日期对象，用来创建和获取日期

Math 数学对象

String 字符串对象，提供对字符串的一系列操作

<script>
        function func(x,y,z){
            console.log(x,y,z);
            console.log(arguments);
            for(var i  in arguments){
                console.log(arguments[i]);
            }
        }

        func(1,2,3);

        //字符串对象
        var str = "abcb";
        console.log(str.length);
        console.log(str.indexOf('b'));

        /*随机数*/
        console.log(Math.random() );

        /*日期*/
        var date = new Date();
        date.setFullYear(2028);
        console.log(date.getFullYear());
        console.log(date.getMonth());
        console.log(date.getDay());
    </script>