js 概述 ( 一 )

1 JS 概述

　　1 简称JS，是一种浏览器解释型语言，代码嵌套在HTML页面中，将由浏览器解释执行

　　　　作用：主要用来实现页面的动态效果，实现用户交互，实现网页中的网络请求

2 JS 组成 ：

　　1 ECMAScript 　

　　2 内置对象：BOM DOM 　其他内置对象

　　3 自定义对象：

3 JS使用方式

　　1 元素绑定

　　　　给具体的元素绑定JS的事件

　　　　事件：由用户行为触发的操作

　　　　语法：

　　　　　　<标签 事件函数名=‘JS代码’>

　　　　　　et:

　　　　　　　　onclick:单击事件

　　　　　　　　alert('  '); 网页弹框显示信息

　　2 文档内嵌：

　　　　使用<script></script>在文档中嵌入JS代码

　　　　可以书写在任意位置，出现任意多次

　　　　　　常用的JS语句： alert()　　console.log('在控制台输出一句话')  

　　3 外部JS文件

　　　　1 创建外部 .JS文件

　　　　2 使用script标签引入外部的JS文件

　　　　　　<script src></script>

　　　　注意：script标签用来引入外部文件时，标签中不能再书写js代码

 　　　　如果脚本标签做引入操作，那么标签内不能再书写JS代码

　　4 常用JS语句

　　　　1  alert();以警告框的形式提示信息

　　　　2 prompt();接收用户输入的弹框，输入结果会以函数返回值的形式给出

　　　　3 consoe.log() 在控制台输出，常用于调试

　　　　4 document.write(); 在网页中输出

　　　　注意：

　　　　　　1 document.write()方法会根据当前的书写位置在网页中插入内容

　　　　　　2 如果以元素绑定事件的方式在网页中写入内容，onclick='document.write();'会清空当前页，只显示写入的内容

　　　　　　3 使用document.write()方法写入内容，可以识别html标签

JS  基础语法
    1 .js代码是由语句组成的，每一条语句以分号结尾；
        语句是由关键字，运算会，表达式组成的
    2 JS代码严格区分大小写
        console.log();正解
        Console.log();错误
    3 所有的标点都是英文的
    4 JS中的注释
        //                 表示单行注释
        /* 注释内容 */ 多行注释
4  JS中的变量与常量
    1 变量：
        1 创建变量
            1 。先声明，后赋值 使用var关键字进行变量的声明，自定义变量名
            2 声明的同时赋值
        2 命名规范
            1 由数字，字母，下划线和$组成，禁止以数字开头，
            2 避免与关键字，保留字冲突
            3 做到见名知意
            4 严格区分大小写
            5 多个单词组成变量名，采用小驼峰标识
        3 使用注意
            1 变量声明可以省略关键字var，直接使用变量名赋值，
                不推荐省略关键字，涉及到变量作用域，
            2 变量如果只声明，未赋值，默认值为undefined
            3 赋值符号表示将右边的值赋给左边变量，要求左边必须是变量
    2 常量
        变量可以在程序任何地方修改，常量一经定义就不能更改
        1 创建
            使用const关键字创建常量，声明的同时必须赋值
        2 语法规范
            为了区分变量与常量，一般变量名采用小写或驼峰标识常量采用全大写的形式
        3 小数位的操作
            1 小数在计算机的存储中是不精确的，存在误差
            2 指定保留小数位
                方法：toFixed(n);n表示需要保留的小数位数
5 JS中的数据类型
    1 基础数据类型（基础）
        1 number 类型
            数值类型，包含整数和小数
            整数在内存中占4个字节（32位），小数占8个字节（64位）
            1 整数
                可以使用十进制，八进制，十六进制表示整数
                八进制：以0开头
                    8为基数，取值0-7，逢8进1
                    et: 
                        var a=010;
                十六进制：以0x 为前缀
                    et:
                        var c= 0x25;//37
                注意：
                    不管是哪一种进制表示的整数，在使用控制台输出时，都会转换为10进制输出显示
            2 小数 也叫浮点数
            2 科学计数法
                var b = 1.5e3
                e 表示10为底
                e 后面的数值，表示10的次方数
                计算方式：
                    1.5*10(3)
        2 string类型
            1 js 中字符串使用引号引起来，单双引号都可以
            2 字符串有每个字符都有对应的Unicode码值
                1 查看字符的Unicode码
                    方法：charCodeAt(index)
                    字符串中每个字符都对应一个下标，从0开始
                2 Unicode码
                    Unicode码值中前128位与ASC码对应一致
                    中文字符的范围（十六进制表示）
                    "u4eoo - u9fa5"
                3  将汉字的Unicode码转换为汉字字符
                    1 Unicode码转换为十六进制
                        toString(16); 将十进制数字转换为十六进制，，返回字符串
                    2 在十六进制字符串前添加u转义，转换为汉字 
                4 转义字符
                    
 换行
                    	 制表符
                    \ 表示
                    " 表示"
                    ' 表示'
            3 boolean类型 
                只有真和假 true false;表达式进行关系运算的结果一定是布尔类型
            4 undefined
                1 变量声明未赋值，默认为undefined
                2 访问对象不存在的属性时，也为undefined
            5 null 
                空类型，一般用来解除对象的引用
    2 复杂数据类型（引用）
        对象 函数
    3 判断数据类型
        操作符typeof typeof()
        var a = 10;
6 JS 中数据类型转换
    1 自动类型转换（隐式）
        1 number+string类型    
            字符串使用+参与运算，都视为字符串的拼接，不再是数学运算
            转换规则：
            将参与运算的非字符串内容，自动转换为string规则，再进行字符串的转换
        2 boolena + string
             涉及字符串的+操作，都为字符串拼接
             true + '10' // true10
        3 number + boolean
            将布尔值转换为number类型，再进行相加运算
            true =1 ;
            false =0;
    2 强制类型转换
        1 字符串转换number类型
            1 Number(string) 
                可以将非数字类型转换为number
                1 数字字符串‘100’可以使用该方法转换类型
                2 包含非数字的字符串‘100a',转换结果为NaN
                    not a number,表示转换失败
                3 布尔类型转换number,对应1 和0
            2 从字符串中解析数字
                1 parseInt(str)
                    1 用来解析字符串中的整数，参数如果不是字符串，会自动转换为字符串再进行解析
                    2 只对字符串开头部分进行采摘，如果首个字符不是数字，直接返回NaN
                2 parseFloat(str)
                    用来解析字符串中的整数和小数部分
        2 将非字符串类型转换为 string类型
7 运算符
    1 算术运算
        + - * / % 
        ++ -- 自增加和自减运算
        
        1 + - * / %
            １　字符串+，表示拼接
            2 数字字符串参与数学运算（- *  / % ）,会自动转换数据类型，转成number后参与运算，
            3 布尔类型的数据会自动转换为number 1或0 参与数学运算
        2 ++ -- 
            1 自增运算符，自减运算符，表示在自身基础上进行+1 -1 的操作
            2 只有变量能使用++ -- ，常量不能自增或自减
            3 单独使用++ -- 与变量结合，做前缀或后缀没有区别，都是对变量进行+1 或 -1操作
                et :
                    var a = 10;
                    ++a;
                    --a;
            4 如果与其他运算符结合，前缀和后缀会影响结果
                et:
                    与赋值符号结合
                    var a = 10;
                    var r = a++;// 先赋值，后自增
                    var r1 == ++a;//先自增，后赋值
    2 比较运算符（比较运算符）
        > >= < <= == !=  === !==
        1 数字与数字之间的比较
        2 字符串之间的比较
            1 string 与 number 之间进行关系运算
                自动将string 转换为number,再进行比较;
                如果string无法转换为number，则进行NaN与number的比较，结果永远为false
            2 string 与 string 之间进行关系运算
                进行每一位字符Unicode码值的比较，从前往后，如果第一位字符可以比较出结果，就直接获取结果，
                如果无法出结果，依次进行后一位字符的比较
        3 判断相等与恒等
            == 判断相等，只进行值得比较，包含数据类型转换
            === 判断恒等，不允许数据类型转换，比较类型与值判断相等时，会发生自动类型转换，最终结果相等，即为true
            判断恒等，要求操作数据类型一致，值相等，才返回true
        4 判断不等和不恒等
            ！= 判断不等，两个操作数的值不相等时返回true
            ！== 判断不恒等，两个操作数类型与值之间只要有一项不同，都返回true
    3 逻辑运算
        逻辑与：&&
        逻辑或：||
        逻辑非：!
        逻辑运算与关系运算的结果都为布尔类型
        1 逻辑与
            两个表达式同时为真，逻辑运算的结果才为真。
                条件1 条件2     结果
            &&    true    true    true
            &&    false    true    false
            &&  true    false    false
        2 逻辑或，
            只要有一个主真，逻辑或的结果就为真。
        3 逻辑非：
            非真即假。对表达式的结果进行取非操作

1 运算符
    1 位运算符
        程序中的数据在计算机中都是以二进制形式存储的，位去处实际上是对二进制的每一位进行操作
        1 按位与 &
        　    将操作数转换二进制之后，按位与，相同则为1 ，不同则为0
            3 &５　＝１
            使用，常用于判断整数的奇偶，将一个操作数与1做位与，结果为1 ，该操作数为基数，结果为0说明操作数为偶数
                3 & 1  =1
                2 & 1 = 0
        2 按位或：|
            将操作数转换为二进制之后，做位或，相同.
        3 异或操作可以在不借助三方变量的情况下互换两个变量的值
    2 三目运算符
        语法：
            表达式1 ？ 表达式2: 表达式3
        使用：
            1 判断表达式1 的结果（布尔值）
            2 如果表达式1 结果为true，执行表达式2
            3 如果表达式1结果为false ,执行表达式3
2 流程控制
    控制代码的执行顺序
    流程控制语句：
        1 顺序结构：代码自上至下一行一行执行
        2 选择结构（分支）
        3 循环结构
    1 选择结构：
        根据条件判断的结果选择执行某一段代码
        语法：
            1 if(判断条件){
                条件为真执行的代码段，条件为假时，会跳过
                }
                注意：
                    1｛｝可以省略，省略之后，认为if()后面的第一条语句是条件成立时待执行的语句
                    2 判断条件必须是布尔类型的结果
                    3 非零值都为真，零为假
                        以下条件都为假:
                            if(0){}
                            if(0.0){}
                            if(''){}
                            if(NaN){}
                            if(undefined){}
                            if(null){}
            2 if-else语句
                语法：
                    if(){'条件为真执行'}
                    else{'条件为假执行'}
            3 if-else if语句
                多重分支结构
                if(条件1)｛条件1成立时执行｝
                else if(条件2)｛条件2成立时执行｝
                else if(...){}
                else{条件不满足时执行}
        2 swith语句
            语法：    
                switch(值)
                    ｛case 1:值匹配恒等时，执行的语句
                        break;
                      case 2:值匹配待执行的语句 
                        break;｝
                注意：
                    1 switch一般用于值得匹配，（）中表示的是值
                    2 case可以使用多个，每个case对应一种情况
                    3 case 后面直接写要对应匹配的值
                        et:
                            var a= 20;
                            switch(a){
                              case 1:console.log('a=1');break;
                              case 10:console.log('a=10');break;
                              default: console.log('查询不到');
                                
                              }
                    4 如果case给出的值匹配成功，执行当前的case:后面的语句
                    5 break用于跳出匹配，不再向下执行匹配
                    6 default 表示所有的case都匹配失败之后默认执行语句;
                其他情况：
                    1 default关键字一般写在switch的末尾，匹配失败之后最终执行的操作，可以省略
                    2 break表示跳出switch语句，可以省略，如果省略break ,
    2 循环结构
        重复执行某一段代码
        1 循环语句的三要素
            1 循环变量
            2 循环条件
            3 循环体
        2 语法：
            1 while 循环
                while(循环条件)｛条件成立时，执行循环体｝
            执行流程：
                1 定义循环变量
                2 判断循环条件
                3 条件成立，执行循环体
                4 更新循环变量（重点）
                5 重复步骤234，直到条件不成立跳出循环
            2 do-while循环
                do{
                循环体
                }while(循环条件);
                执行流程：
                    1 定义循环变量
                    2 执行do操作，循环体
                    3 循环体中更新循环变量
                    4 判断循环条件，决定是否继续执行循环体
                特点：
                    do-while循环不管条件是否成立，都至少执行一次循环体
            3 for 循环
                for(定义循环变量;循环条件;更新循环变量){
                    循环体
                }
                for循环与while循环：
                    1 循环的执行流程相同
                    2 for 循环常用于确定循环次数的场合
                        while循环常用于不确定循环次数的场合
            4 循环控制
                1 continue 跳出本次循环，开始下一次循环
                2 break结束循环，break直接结束循环，
            3 循环的嵌套
                可以在循环中再次嵌套其他循环
                
                生成样式代码、
                        *
                       ***
                      *****
                      
                    <script type='text/javascript'>
                    var aa = Number(prompt('输入整数'))
                   var a = aa+1 ;
                   for(var i=1;i<a;i++){
                    var show='';
                    for(var jj=0;jj<a-i;jj++){show+=' '}
                    var _ = i*2-1
                    for(var ii=0;ii<_;ii++){show+='*'}
                        console.log(show)
                        document.write(show+'<br>')
                    }
                    </script>
                    
                乘法表
                    <script type='text/javascript'>
                   var a = 10 ;
                   for(var i=1;i<a;i++){
                    var show=''
                    for (var ii=1;ii<=i;ii++){
                        show+=i;
                        show+='*';
                        show+=ii;
                        show+='='
                        show+=i*ii;
                        show+=' ';            }
                        console.log(show)          
                         // console.log(i,'*',ii,'=',i*ii,'')
                            }
                    </script>