web前端：14_JS复习补充

javaScript组成：

ECMA Script : 简称ES,指的是JavaScript的语法版本

BOM----游览器对象模型--通过js操作游览器（弹窗，刷新）

DOM----文档对象模型 --通过JS操作文档内容

前端三剑客:
    html: 负责网页的基本组成.显示的内容都通过它表示 -- 身体
    css: 负责网页内容美化,排版布局,性能优化 -- 衣服/化妆品
    JavaScript: 负责网页的动态效果,交互行为 -- 技能/行为

JavaScript的组成:
    ECMA Script: 简称ES. 指的是JavaScript的语法版本
    BOM -- browser object model --> 浏览器对象模型 --> 通过js操作浏览器(弹窗/刷新)
    DOM -- document object model --> 文档对象模型 --> 通过js操作网页内容

JavaScript的写法:
    1.写在script标签里(最好写在body最后) 先等html元素加载完了再执行js功能
        <script>js代码</script>

    2.把代码写在专门的js文件里.通过script里的src属性引入. 也可以引入网络上的js文件
        <script src='js路径'></script>

注释:
    单行注释:   // 注释内容
    多行注释:   /* 注释内容 */

输入输出语句:
    alert()     // 弹窗
    document.write()  // 在网页里输出数据.能够识别标签内容
    console.log()   // 在网页控制台里输出内容.里面的内容是在控制台输出,不在网页里

    prompt()    // 输入框.出来一个弹窗进行输入

变量 = 用来存储数据的容器
    声明变量:
        在js中声明变量使用let / var 声明
        let 变量名 = 变量值  //  声明变量并赋值
        let 变量名 = 变量值,变量名 = 变量值    //  一次声明多个变量
        let 变量名      // 声明空变量
        let name='麒麟',age=27

    使用变量:
        输出语句(变量)
        输出语句(变量,变量)
        console.log(name)
        console.log(name,age)

    输入变量:
        let 变量名 = prompt()
        let name = prompt('你叫什么名字')
    
数据类型: 不同的数据有不同的作用.分门别类方便后续区分使用
    查看数据的类型.可以通过typeof获取
        console.log(数据,typeof 数据)
        console.log(name,typeof name)

    number: 数值类型,在js中整数,小数,正负数都是用number表示. 不区分int/float
        let 变量名 = 数值
        let money = 480

    string:  字符串类型,用单'双"反` 引号包裹起来的数据.用来保存字符
        let 变量名 = '字符'
        let talk ='多喝热水'

        反引号是用作模板字符串.类似于python的格式化输出,更方便的输出带有变量的数据
            `${变量名}`
            alert(`你好.我是${name}`)

    boolean: 布尔类型.用于判断真/假  只有两个值  true/false
        let 变量名 = true
        let 变量名 = false
        let is_login = true

    undefined: 未定义类型.声明了一个变量,在未赋值的情况下.属性和值都为undefined
    null: 空类型.类似于python里的None

运算符:
    &&:  and 与运算符. 当有多个条件时,都满足才为真
    ||:   or  或运算符.  当有多个条件时,满足其中一个就为真
    !:   not  非运算符  取反

单目运算符(++/--) 让数据+1 -1. 运算符会根据位置不同,执行顺序也不同
    let i = 10
    ++在后面 --> 先运行再赋值   alert(i++)  // 结果为10,先输出再i+1
    ++在前面 --> 先赋值再运行   alert(++i)  // 结果为12.先i+1再输出

三目运算符: 双分支语句的语法糖(偷懒写法).在面对双分支的情况时,代码会更简便
    判断条件 ? 结果1 : 结果2
    判断条件 ? 为真的结果 : 为假的结果

代码不是越精简越好 --> 可以尽量精简,但是要优先保障可读性
                    你写了一堆很骚气很精简的代码. 但是写的乱/不好理解
                    照样是不推荐的写法
高血压:  不写注释/滥用语法糖(有的时候宁愿多写几行,提升代码可读性)

转义字符 --> 带有特别含义的字符
    \t  -->  制表符,缩进,tab键
    \n  -->  换行

类型转换:
    隐式类型转换 --> 程序运行时自动转换.
    强制类型转换 --> 手动转换数据类型
        String()  --  把数据转为字符串
        Number()  --  把数据转为数值类型.转换失败值为NaN
        Boolean()  --  把数据转为布尔类型.有值为真,无值为假

流程控制语句:
    程序运行的不同方式,基本的有三种
        1.顺序执行  --  程序由上往下依次执行,遇到bug停止
        2.选择执行  --  根据条件满足与否,执行对应的语句
        3.循环执行  --  根据条件满足与否,重复执行对应的语句
            2/3的条件判断都是基于boolean类型进行判断的

选择执行(分支语句) --> if
    单分支(if)  如果满足判断条件,执行if里的代码.不满足无事发生
    双分支(if else)  如果满足判断条件,执行if里的代码.不满足就执行else里的代码
    多分支(if / else if /else)如果满足判断条件,执行if/else if里的代码.都不满足就执行else里的代码

    单分支:
        if(判断条件){
            执行语句
        }

    双分支:
        if(判断条件){
            执行语句
        }else{
            执行语句
        }

    多分支:
        if(判断条件){
            执行语句
        }else if(判断条件){
            执行语句
        }else{
            执行语句
        }

选择分支语句 switch:  一般用来判断多个连续性/关联性的事务
    case 选择  default默认  break结束   如果case都不满足就执行default

    switch(表达式){
        case 情况1:
            代码
        break
        case 情况2:
            代码
        break
        default:
            代码
        break
    }

循环语句:
    while -- 根据循环条件判断是否执行代码.如果为真就循环执行.为假就不执行
    do while -- 先执行一遍代码,再进行循环条件判断 --> 至少会运行一次

    while(循环条件){
        执行语句
        更新语句
    }

    do{
        执行语句
        更新语句
    }while(循环条件)

    for循环的语法和python区别较大.但是都属于迭代循环 --> 相对来说更方便的循环方式
    for(声明变量;循环条件;更新条件){
        执行语句
    }

    for(let i=0;i<= 10; i++){
        document.write('多喝热水')
    }

    中断语句:  在循环里一般结合if进行判断.如果满足条件就结束/跳过循环
        break:  结束本轮循环
        continue:  跳过本次循环

函数(function) --> 把一些常用的功能封装起来取个名字. 需要使用的时候调用即可
    声明函数:
        function 函数名(){
            代码
        }
        function fun(){
            alert('#096')
        }

    调用函数:
        函数名()
        fun()
        alert()

函数参数: 可以把数据交给函数处理.让函数更灵活.而不是只能处理固定的数据
    形参: 没有具体的数据,先占个位置 -- 定义阶段
    实参: 有具体的值,在运行时取代形参 -- 调用阶段

    function 函数名(参数1,参数2){
        代码
    }
    函数名(数据1,数据2)

    function like(name){
        console.log(`那么多老师里面.我最喜欢的就是${name}了`)
    }
    like('沈昊麟')
    like('七零')
    like('麒麟')

函数返回值(return) --> 如果你希望函数里的数据能够让其他函数/功能调用.那就把它返回出去
    function 函数名(){
        return 返回值
    }
    function fun2(){
        return '多喝热水'
    }
    let hot = fun2()   // 调用函数,并把返回值赋值给变量hot
    alert(hot)

匿名函数/自执行函数 --> 不想取函数名/自动执行 
    !(function(形参){
        代码
    })(实参);

内置对象 --> js内置的一些对象.他们有自己的属性和方法
    数组Array -- 用法/语法和python里的列表类似.用中括号包裹多个数据.里面的数据通过下标来保存/获取
    字符串String -- 对字符串内容进行增删改查操作
    日期Date -- 获取时间日期
    数学Math -- 进行数学计算

数组的sort排序 --> 里面会涉及到排序的算法.原理不做深入解释.要了解就自己拓展
    数组的sort会结合自定义函数的返回值来排序. 如果返回值>0 就会交换里面的变量

 ps:三目运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        let age = 19
        alert(age >=18 ? '成年了' : '未成年')
    </script> 
</body>
</html>

ps：sort() 数组排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // sort()  数组排序  结合自定义函数的返回值来排序。如果返回值>0,就会交换里面的变量
        let arr = [2346,47,58679,342]
        function ASC(a,b){
            return a-b //升序排序，从小到大
        }

        function DESC(a,b){
            return b-a //降序排序，从大到小
        }

        arr.sort(ASC)
        document.write(arr)
    </script> 
</body>
</html>