第二阶段第一周总结

    JavaScript其实由三部分组成的
        ECMAScript - 核心语法，以后JS不管做什么操作可能都离不开它（算法题/逻辑题)
        DOM        - Document Object Model - 文档对象模型，可以用JS来操作HTML和CSS了
        BOM         - Browser Object Model - 浏览器对象模型，可以用来操作浏览器

第一天总结

一.JS概念：JavaScript：运行在浏览器端的一个解释型（不检查错误，直接运行，碰到错误就停止）弱类型（数据类型由数据来决定）面型对象脚本语言。

二.变量和常量 ：以后反复使用的数据都要先提前保存到变量中，以后使用变量名，相当于就是再使用变量的值
    *变量：值可以改变的
        写法：var 变量名=值;

     常量：一旦创建后，值不允许再次修改
         写法：const 常量名=值;

三.算术运算符：+ - * / %（其余运算符正常运算）
         %：读作取余，俗称模，两个数相除，不去商，而取除不尽的余数
                固定套路：
                1、*判断奇偶性：num%2，结果为0说明是偶数，结果为1说明奇数 - 以后可以用于判断
                2、获取一个数字的倒数n位
                    1234%10     ->    4
                    1234%100    ->    34
                    1234%1000    ->    234

四.*****特殊：其实算数运算符具有隐式类型转换，默认转为数字在运算
                +运算：如果左右两边但凡出现了一个字符串，那么悄悄的都转为字符串，+运算不再是+运算，而是字符串的拼接
                -*/%：字符串也可以变为数字，但是前提：必须是纯数字组成的字符串才可以
                                 如果字符串包含了非数字字符，直接转为NaN:Not A Number - 不是一个数字，但是确实是数字类型，全是缺点：
                                            1、参与任何算术运算，结果仍为NaN
                                            2、参与任何比较运算，结果都是false
五、*数据类型：分两大类
        1、原始/基本/值类型：5个
               1、Number - 数字，取值：无数个
               2、String - 字符串，取值：无数个，必须写上'' 或 ""
               3、Boolean - 布尔，取值：两个：true/false - 往往用于判断比较的条件处使用
               4、Undefined - 取值：1个：undefined，创建了一个变量，但是没有赋值，默认值为undefined，祖师爷犯的错，用来做大部分操作都会报错！
               5、Null - 空，取值：1个：null，释放变量/内存，节约内存空间

        2.引用类型：11个对象

扩展：
        1、分支结构：判断条件的不同选择对应的代码去执行，执行了一条路就不会再走别的路
            如何使用：
                一个条件，一件事，满足就做，不满足就不做
                if(判断条件){
                    操作;
                }

                一个条件，两件事，满足就做第一件，不满足就做第二件
                if(判断条件){
                    操作;
                }else{
                    默认操作;
                }
    
                多个条件，多件事，满足谁就做谁
                if(条件1){
                    操作1;
                }else if(条件2){
                    操作2;
                }else if(条件3){
                    操作3;
                }else{
                    默认操作;
                }

            特殊：
                1、else if...你想写多少个随便，根据你的需求自己判断
                2、最后else可以省略不写，如果条件都不满足，那么什么事都不会执行，你的分支就白写了
                3、书写判断顺序，需要根据你的需求来写，不能乱写顺序
                
        2、用户输入弹出框：
            var user=prompt("提示文字","默认值")

第二天总结

六.数据类型的转换*****

    1.算术运算符的隐式转换*****
        1、默认转为数字，在运算
        2、+运算，碰上一个字符串，则为拼接
        3、-*/%，字符串也可以转为数字，前提是纯数字组成的字符串，包含非数字字符，则为NaN
            true -> 1
            false -> 0
            undefined -> NaN
            null -> 0
            "1000" -> 1000
            "1000x" -> NaN
        4、NaN：不是一个数字，但是确实是数字类型，不是一个有效数字
            1、参与任何算术运算结果都是NaN
            2、参与任何比较运算结果都是false，问题，不能用普通的比较运算来判断是不是NaN        
                解决：!isNaN(x);
                true->有效数字
                false->NaN

       2.强制转换

             1、转字符串：var str=x.toString();//页面上的一切数据默认都是字符串类型
                          //x不能是undefined和null，undefined和null不能使用.

              2、***转数字：执行原理：专门为字符串和小数转为整数数字准备的，从左向右依次读取每个字符，碰到非数字字符，就停止转换，如果一来就碰到了不认识的，则为NaN。
                *var num=parseInt;      //parse->解析  Int->整型

                *parseFloat(str);           //parse->解析  Float->浮点型
                执行原理：几乎和parseInt一致，认识第一个小数点

                var num=Number(x);//万能的，完全等效于隐式转换，还不如-0 *1 /1 %1

七.*****Function的基础

1、Function：函数，称之为方法：需要提前【预定义好】的，以后就可以【反复使用】的【代码段】

        现实生活中：所有的方法都是需要提前学习的，是不会忘记的所以可以反复使用
        其实一阶段你就见过很多函数了，比如：
            rotate(360deg) - 完成了一个根据角度值顺时针旋转360度的功能

            url(图片路径) - 完成了一个根据图片路径显示图片的功能

            js中要学习自定义函数：完成了一个。。。。。。。的功能

2、如何使用：
       1、定义/声明/创建函数：
            function 函数名(){
                若干的代码
            }

       2、调用/使用函数：
            1、要么在js中程序员直接写死，要执行几次：函数名();
            2、交给用户绑定在某个元素上，写上点击事件，让用户来触发：
                <elem οnclick="js代码">内容</elem>

        3、何时使用：
              1、*不希望打开页面立刻执行，而需要时再使用 或 由用户来触发
              2、*希望能够反复执行，不用刷新页面
              3、以后任何一个独立的功能体，都要单独封装为一个函数（你的每一个作业）
              4、函数的地位非常高，函数是第一等公民地位，随时随地考虑能不能封装为一个函数，尤其是重复的代码
              5、函数内的一切内存，函数调用完毕后都会自动释放

         4、带参数的函数：
                 榨汁机  -> 函数：榨汁
                 原材料  -> 参数
                 创建：形参：形式参数，其实就是一个变量，但是不需要写var，而且默认也没有保存任何值，默认值为undefined
            function 函数名(形参,形参,...){
                函数体;
            }

        使用：实参：实际参数，真正的值，需要再你调用时再传入
            函数名(实参,实参,...)
        
        特殊：1、传实参的顺序一定要和形参的顺序一一对应，并且数量也要对应
                   2、不是一定要带参数的函数才是好函数，具体情况，需要具体分析：
                如果你的函数体就是固定的 - 则普通函数
                如果你的函数体希望根据传入的实参不同，做的略微不同 - 则带有参数的函数

八、***分支结构：
    1、程序的流程控制语句：3种
        1、顺序执行 - 默认，从上向下的依次执行
        2、分支结构 - 通过条件的判断，选择部分代码执行
        3、循环结构 - 通过条件的判断，选择要不要重复执行某些代码

    2、比较运算符：>  /  <  /  >=  /  <=  /  ==  /  !=
        用于做判断/比较的
        结果：一定是一个布尔值
        强调：如果你想要判断多个条件，绝对不能像小时候数学的写法：18<=age<=65，错误的！
            解决：逻辑运算符

    3、逻辑运算符：
        &&：（与，并且）：要求全部条件都要满足，最后的结果才为true
                       只要有一个条件不满足，结果则为false

        ||：或：要求全部条件都要不满足，最后的结果才为false
                   只要有一个条件满足，结果则为true

        !：颠倒布尔值

    4、分支的语法：
        一个条件，一件事，满足就做，不满足就不做
            if(条件){
                操作
            }

        一个条件，两件事，满足就做第一件，不满足就做第二件
            if(条件){
                操作
            }else{
                默认操作
            }

        多个条件，多件事，满足谁就做谁
            if(条件1){
                操作1
            }else if(条件2){
                操作2
            }else{
                默认操作
            }

第三天总结

  九、***循环结构：反复执行 【相同 或 相似】的操作
      循环三要素：
            1、循环条件：开始 - 结束，循环的次数
            2、循环体：做的操作是什么
            3、循环变量：记录着我们当前在哪一次，而且他会不断的变化，往往都会向着不满足循环条件进行

    1、while循环：
          语法：
          var 循环变量=几;
          while(循环条件){
            循环体;
            循环变量变化;
        }
        执行原理：首先创建了循环变量，然后判断条件，如果条件满足，则做【一次】循环体操作，并不会退出循环，回过头继续判断条件满足吗，如果满足，则再做【一次】循环体操作.......

           *for循环：

               for(var 循环变量=几;循环条件;循环变量的变化){
                       循环体;
                  }

             死循环要搭配上break才能停止循环

            面试题：while 和 for 的区别？
                  语法上有区别，但两者都能做到相同的操作
                       一般来说我们不确定循环次数的时候，会使用while循环 - 死循环
                       一般来说我们确定循环次数的时候，就用for循环 - 更漂亮更简洁，大部分情况都会使用它

十、*****数组的基础

1、创建数组：
        1、*直接量方式：
            var arr=[];//空数组
            var arr=[数据1,....]; 

        2、构造函数方式：
            var arr=new Array();//空数组
            var arr=new Array(数据1,....);//而且这个方法还有一个坑

2、获取数组中的数据
          数组名[下标];

3、添加/替换
        数组名[下标]=新值;
        下标处有没有元素，如果没有则为添加，如果有了就为替换

4、数组具有三大不限制
        1、不限制元素的个数
        2、不限制元素的类型
        3、不限制元素的下标越界 - 不是一个好东西了
            如果获取元素，下标越界，返回的一个undefined
            如果添加元素，下标越界，会得到一个稀疏数组，导致下标不再连续，如果搭配上循环去遍历每一个元素的话，我们会得到很多很多的undefined
        问题：自己数下标，是不科学的，很有可能就会数错

    5、解决：数组中唯一的属性：长度：数组名.length - 获取当前数组的长度：最大下标+1
        三个固定套路：
            1、获取倒数第n个元素：arr[arr.length-n]
            2、始终向末尾添加元素：arr[arr.length]=新值;
            3、缩容：删除倒数n个元素：arr.length-=n

        前面的下标好数，后面的下标也好数，但是中间的下标还是不好数

    6、***往往很多情况，我们不会拿出某个元素来使用，而是拿出所有的每个元素来进行 相同 或 相似的操作
        遍历数组：把数组中的每个元素拿出来执行相同相似的操作
        公式：
            for(var i=0;i<数组名.length;i++){
                console.log(数组名[i]);//当前次元素，要干什么，看你的
            }

第四天总结

DOM：Document Object Model：文档对象模型：专门用于操作HTML文档的，提供了一些属性和方法等待我们学习

DOM树概念：DOM将我们的HTML看做了是一个倒挂的树状结构，但是树根不是html标签，而是document对象
        document对象：不需要我程序员创建的，由浏览器的js解释器自动创建，一个页面只有一个document
        作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）
        DOM会将页面上每个元素、属性、文本、注释都会当作一个DOM元素/节点/对象

十一、查找元素：

1、通过ID查找元素
        语法：var elem=document.getElementById("id值");
        特殊：
            1、返回值，找到了返回的是一个当前找到的DOM元素，没找到，返回一个null，做了别的操作可能就会报错了
            2、找到了多个相同的id，那么只会返回第一个
            3、*垃圾方法，【你们不准使用】，一次只能获取一个元素，也只能操作一个元素，麻烦
            4、其实根本不需要使用此方法，直接写ID也可以找到元素 - 偷懒的写法

    2、通过标签名查找元素

          语法：var elems=document/已经找到了的父元素.getElementsByTagName("标签名");

    3、通过class名查找元素

          语法：var elems=document/已经找到了的父元素.getElementsByClassName("标签名");
      
         特殊：
            1、返回值：找到了返回的一个是类数组DOM集合（很像数组，都能用下标，都能用length，都能遍历），没找到返回一个空集合
            2、*JS不能直接操作DOM集合，只能直接操作DOM元素，解决：要么使用下标拿到某一个元素，要么使用遍历拿到每一个元素
            3、不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到这个父元素下面的元素了

       4、通过关系查找元素：前提条件：必须先找到一个元素才可以调用关系网
             父元素：elem.parentNode; 
             子元素：elem.children; - 集合
             第一个儿子：elem.firstElementChild;
             最后一个儿子：elem.lastElementChild;
             前一个兄弟：elem.previousElementSibling;
             后一个兄弟：elem.nextElementSibling;

                                                                            强调：DOM集合不能直接做操作！

十二、操作元素：

<标签名 id="" class="" title="" style="样式">内容</标签名> - 操作元素的前提就是要找到元素
    1、内容：
        *innerHTML（识别标签）/innerText（纯文本）/value（*专门为input的value值准备的）;
        获取：elem.innerHTML/innerText/value;
        设置：elem.innerHTML/innerText/value="新内容";

以上两个属性都是为双标签准备的，但是操作不了单标签input的内容

    2、*属性：
        获取属性值：elem.getAttribute("属性名");
        设置属性值：elem.setAttribute("属性名","属性值"); 
     

        简化版：
        获取属性值：elem.属性名;
        设置属性值：elem.属性名="属性值";
            缺陷：1、只能操作标准属性，不能操作自定义属性
                       2、class必须写为className
        
    3、*样式：
        获取：elem.style.css属性名;
        设置：elem.style.css属性名="css属性值";
        特殊：1、内联样式：不会牵一发动全身，优先级最高
                   2、css属性名：如果出现了横线，去掉横线换成小驼峰命名法
                   3、获取时，只能获取到内联样式，样式表中的获取不到，暂时的一个小缺陷
        
    4、绑定事件：
        在js中绑定事件：符合我们的原则：内容（html）、样式(css)、行为(js)分离
        elem.on事件名=function(){
            要做的操作
            this关键字：目前只能在事件之中使用，是一个指针，不同的场景，指向不同
            单个元素绑定事件：this->这个元素
            多个元素绑定事件：this->当前元素
        }