前端Day22笔记

一、js介绍
    1、前端组成
        1）html            结构
        2）css            样式
        3）javaScript    行为（编程语言）
        
    2、javaScript发展历程
        1）1995年网景公司为了验证表单功能，花了10天开发了一款能在浏览器环境中运行的语言：livescript（javaScript前身）；
        2）sun公司是研发java、navigator浏览器（火狐内核）的公司，当时和网景有合作，网景为了livescript语言具有更广的流传性，改名为javaScript；
        3）微软公司（开发了IE浏览器）仿照javaScript语言研发了jScript语言（之前的程序员不喜欢jScript就是因为要考虑兼容性，现在不需要了因为IE已经放弃了jScript），而后收购了网景；
        4）网景在被收购前，把javaScript捐给了ECMA，ECMA制定了ECMAscript（js标准，说明书），简称ES，ES是js的说明，js是ES的代码实现，可以理解为 ES == js，而vue、react、uniapp等框架就是基于js开发的
    
    3、从三个角度来学习js
        1）ECMA标准部分（语法、规定、标准...非常重要！！！）
        2）DOM
        3）BOM
    

二、js书写位置
    js可以直接写在标签中、script标签中、js文件中
    1、直接写在标签中
        代码示例：
            <button οnclick="alert('这是一个弹窗')">按钮</button>
            表示添加行为：当点击这个按钮时显示弹窗内容为这是一个弹窗
            
    2、写在script标签的内容中（script可以放在任意位置）
    3、写在js文件中
        1）操作流程：
            在js文件中写入需要添加的行为，然后给script标签添加src属性值为js文件地址
        2）注意：
            当script标签引入了js文件之后，就不能在script标签内容中写js代码了（内容中的代码不会生效，只会执行引入的js文件中的代码），如果还需要在script内容中写代码，需要另外写一个script标签
            
            
三、js注释
    1、js代码单行注释    //
        快捷键    ctrl + /
        
    2、js多行注释        /*  */
        快捷键    ctrl + shift + /

    3、快捷键更改
        vscode界面左下角管理--键盘快捷方式
        
四、js的三条输出语句
    1、弹窗语句
        alert('弹窗输出一段文字');
        
    2、控制台输出语句
        console.log('在控制台输出一段文字');
        
    3、文档中输出语句（页面中输出）
        document.write('在文档中输出一段文字');
        注意：
            将输出的内容用标签包裹，再套一个引号，可以实现输出一个标签，代码示例：
                document.write('<h1>10086</h1>');
            
    
五、js书写的注意事项
    1、注意语法：
        1）js对大小写敏感，因此要注意大小写！！！
        2）js中所有的符号必须是英文的！！！
        3）书写js语句不要随意换行！！！
    2、注意规范：
        1）每条js语句写完最好写分号，最好换行
    
    
六、变量
    1、什么是变量
        变量就是用来存储一个变化的值的标识符
        
    2、变量的使用
        1）声明变量
            var x;
        2）给变量赋值
            x = 10;
        2）使用变量
            alert(x);    //10
        3）变量重新赋值
            x = 20;
        4）声明变量同时赋值
            var x = 10;
        5）同时声明多个变量
            var x,y,z;
        6）同时生命多个变量并且赋值
            var x = 10,y = 20,z = 30;
            
    3、使用变量的注意事项：
        1）重新声明相同的变量，这个操作在ES5以下的版本中不会有问题，但这是不符合规范的！【书写规范】
        2）在没有声明变量的情况下直接给变量赋值，这个操作在语法层面不会出现问题，但这是不符合规范的！【书写规范】
    
    4、变量命名规则
        1）可以包含数字，但不能以数字开头！
        2）不能包含特殊符号！（$和_除外）
        3）不能使用ES的关键字和保留字作为变量名（保留字就是现在不是关键字但之后会属于关键字）
        4）如果变量由多个词组成，应遵循驼峰命名规范（从第二个词开始首字母大写）
        
    
七、常量
    1、什么是常量
        变量就是用来存储一个固定的值的标识符
    
    2、常量的使用
        var X ;
        常量的使用和变量是一致的，可以说写法用法一模一样，区别在于常量命名时需要将所有字母大写
    
    3、常量和变量区分
        1）对于一个需要存储的数据，如果确定值不会发生变化，那就用常量存储，可能会发生变化的就用变量
        2）对于一个已经声明且赋值的常量，语法层面是可以修改的，但只要程序员看到这是一个全大写方式命名的常量就不会去修改它，这时程序员之间的默契，是约定俗成的！！！
    
    
八、交换变量的值【小案例】
    1、如何交换两个已经声明且赋值的变量？
        1）思路：声明一个临时变量，将其中一个值赋值给临时变量，然后依次重新赋值原先的两个变量
        2）代码示例：
            var x = 10;
            var y = 20;
            var z;
            z = x;
            x = y;
            y = z;
        

九、通过控制台查看错误
    和html、css不同，当某行js代码报错之后，后面的js代码不会继续执行，此时可以在控制台（console）查看错误信息，可以快速地定位发生错误的js代码

十、数据类型介绍
    在js中有两大类数据类型：基本数据类型（原始数据类型）、引用数据类型（复杂数据类型）
    1、基本数据类型
        1）number 数值类型
            值包括以下几种：
            a.合法的数字
            b.Infinity        正无穷
            c.-Infinity        负无穷
            d.NaN            not a number
        2）string 字符类型
            放在单引号('')或双引号("")里面的内容都是字符类型
            注意：单引号和双引号一定是成对出现的！！！
        3）bollean 布尔类型
            布尔类型用来作逻辑判断
            布尔类型的值有以下两个：
            a.true        真
            b.false        假
        4）undifined 未定义类型
            当一个变量声明了但没有赋值，（或者直接给变量赋值为undifined）它的类型就是Undifined未定义类型，这个类型的值只有一个：
            undifined    未定义
        5）null 空对象类型
            返回的数据类型为object，它表示空无，这个类型的值只有一个：
            null    空无
    
    2、引用数据类型（复杂数据类型）
        --之后会讲--
    
    3、转义字符 \
        \" 表示对"进行转义
        告诉浏览器解析的时候把这个引号看成是普通的引号来解析，不要看成字符它本身的引号
    
    4、查看数据类型
        语法：
            typeof x;
            
            
十一、数据类型转换-其余类型转换成number类型
    其余类型转换成number类型，有以下四个方案：
    1、使用Number()函数
        1）语法：
            x = Number(x);
        2）注意：
            结果会返回一个number类型的值，需要一个变量去接收它！！！
        3）string类型转化成number类型：
            a.纯数字--直接转化
                var x = '10.1';
                x = Number(x);    //x值为10.1
                
            b.包含非数字--NaN
                var x = '123abc';
                x = Number(x);    //x值为NaN
                
            c.空字符串--0
                var x = '';
                x = Number(x);    //x值为0
                
        4）boolean类型转化成number类型：
            a.true--1
                var x = true;
                x = Number(x);    //x值为1
                
            b.false--0
                var x = false;
                x = Number(x)    //x值为0
                
        5）undifine类型转化成number类型：
            a.undifined--NaN
                var x = undefined;
                x = Number(x);     //x值为NaN
            
        6）null类型转化成number类型：
            a.null--0
                var x = null;
                x = Number(x);    //x值为0
            
    2、使用隐式转换
        1）语法：
            x = + x;
        2）注意：
            a.隐式转换的规则和Number()函数完全一致，只是写法不同
            b.加号和数据之间空格可加可不加
        3）代码示例：
            var x = "123.123";
            x = + x;
                
    3、使用parseInt()函数
        1）语法：
            x = parseInt(x);
        2）string类型转换成number类型：
            转化规则：
                从第一个字符开始，如果是数字就转化它，直到碰到非数字（包括小数点）就停止转化，只输出整数部分
            a.纯数字--去除小数部分，转化成整数
            b.数字开头+非数字--只转化整数部分
            c.非数字开头--返回NaN
        3）boolean、undefined、null数据类型转化成number类型：
            以上三种数据类型的值使用该函数转化成number全都返回NaN
                
    4、使用parsFloat()函数
        1）语法：
            x = parseFloat(x);
        2）string类型转换成number类型：
            转化规则：
                从第一个字符开始，如果是数字就转化它，直到碰到非数字（小数点除外）就停止转化，只输出浮点数部分
            a.纯数字--全部转化
            b.数字开头+非数字--只转化小数部分
            c.非数字开头--如果有小数部分就返回小数部分，没有小数部分就返回NaN
        3）boolean、undefined、null数据类型转化成number类型：
            以上三种数据类型的值使用该函数转化成number全都返回NaN
            
            
十二、其余类型转换成string类型
    1、使用String()函数
        1）语法：
            x = String(x);
        2）转换规则：
            所有的数据类型通过String()函数转换都会在原有的基础上加上一对引号（单引号和双引号是一样的，都是字符类型）
    
    2、使用隐式转换
        1）语法：
            x = x + '';
        2）转换规则：
            和String()函数的转换一样，所有的数据类型使用隐式转换转换成string类型都相当于在原有的基础上加一对引号
            
    3、使用.toString()方法
        1）语法：
            x = x.toString();
        2)转换规则：
            a.number类型、boolean类型通过该方法转化成string类型相当于在原有的基础上加引号；
            b.undefined、null类型通过该方法转换成string类型会直接报错！！！
            
            
十三、其余类型转化成Boolean类型
    1、使用Boolean()函数
        1）语法：
            x = boolean(x);
        2）string类型转化成boolean类型：
            a.空字符串--false
            b.非空字符串--true
            
        3）number类型转化成boolean类型：
            a.0和NaN--false
            b.除0和NaN以外的其他number类型的值--true
        4）undefined类型、null类型转化成boolean类型：
            都为false
            
    2、使用隐式转换
        1）语法：
            x = !!x;
        2）转换规则：
            和使用Boolean()函数完全一样，只是语法不同