第一天：

javascript:

概述：简称js，是一个运行在客户端浏览器的解释型、弱类型、面向对象的脚本语言。

   什么是解释型：在运行程序之前，不需要检查语法是否正确，直接运行，碰到错误就会停止后续代码。
 console.log("xxx");放在引号里面的就是字符串
         比如：1===>number 数字
               ”1“===>string 字符串

特点：

         1.可以使用一切编辑器工具编写js代码
         2.解释型
         3.弱类型
         4.面向对象编程方式
         5.可以做一切css完成不了的效果

如何使用js，两种方式：

            1）直接在html中写一个script标签，在里面书写js代码
                <script>js代码</script>
            2)创建一个xx.js文件，在其中写入js代码，最后在html中引用
                <script src="xx路径"></script>

几种输出方式：

           1.在控制台输出：console.log("xx");
           2.在页面上输出：document.write("xx");
           3.在弹出框输出：alert("xx");

变量和常量：

           变量：创建后可以再次修改
           var 变量名=值；
#### 特殊：1.变量名不能随便取
          2.不能以数字开头
          3.建议下划线或者小驼峰命名法
          4.如果你的变量名是name，不管你保存的是什么数据类型，都会悄悄的给你转变成一个字符串。
          常量：创建后值不可以再次修改，只能设置一次
          const 常量名=值；

算数运算符：+-*/%

    特殊：%读作取余，俗称模，两个数相除，不去商，而取除不尽的余数
    固定套路：1.判断奇偶性：number%2,结果为0是偶数，结果为1是奇数。
             2.获取1个数字的倒数n位。
                例子：1234%10===>4
                     1234%100===>34
                     1234%1000===>234

特殊：其实算数运算符具有隐式转换，默认转为数字在运算

    +运算：如果左右两边但凡出现了一个字符串，那么悄悄的转为字符串+运算不再是+运算二十字符串的拼接。
    -*/%运算：字符串也可以转为数字，但是前提是必须是纯数字组成的字符串才可以，如果字符串包含了非数字字符，直接转为NAN它不是一个数字，但是确实是数字类型。
    NaN的两个缺点：
                1.参与任何运算，结果都为NaN
                2.参与任何比较运算，结果都为false

数据类型：

    1.原始/基本/值类型：（5个）
           1.number  数字
           2.string  字符串
           3.Boolean   布尔取值为：true/false  往往用于判断比较
           4.undefined   取值：undefined
           5.null   空  取值：null  用来释放变量内存（节约内在空间）
    2.引用/对象类型：11个引用类型对象

分支结构：

       原理：判断条件的不同选择对应的代码去执行，执行了一条路就不会再走别的路
       结构（3种）：
                  1.if （判断条件）{   }
                  2.if （判断条件）{   } else {      }
                  3.if （判断条件）{   } else if {      }  else {       }
       特殊：
           1.else if你想写多少个随便
           2.最后else可以省略不写，如果条件都不满足，那么什么事都不会执行。
           3.书写判断顺序，需要根据你的需求来写，不乱写顺序。

用户输入弹出框：

    var user=prompt("提示文字"，“默认值”);

第二天

   数据类型转换：不同的数据类型做操作可能出来的结果不一样
       例：number+number=number
           number+string=string
       js获取页面上的一切东西，数据类型默认都是字符串
   查看数据类型：typeof（）;

算术运算符的隐式转换：

       默认：悄悄的将左右两边的东西，转为一个数字，在运算。
       特殊：1.+运算：碰上一个字符串，左右两边都会悄悄转为字符串，进行拼接。
            2.原来别的数据类型其实也可以转为数字。
                true===>1  false===>0  null====>0 undefined===>NaN
            3.其实-*/%，字符串也可以转为一个数字，前提是一个纯数字组成的字符串才行，但凡包含一个非数字字符就转为NaN
                "1000"===>1000  "100px"===>NaN
            4.NaN:不是一个数字，但是确实是一个数字类型
                NaN的两个缺点：1.NaN参与任何运算都是NaN
                              2.NaN参与任何比较运算判断都是false甚至不认识自己

问：我们没有办法使用普通的比较运算来判断xx元素是不是"NaN"?

    解决：!isNaN();
          true===>是一个有效数字
          false===>是一个NaN

显示/强制转换：

1.转字符串：var 变量名=xx.to string();
            值不能是undefined或null，因为undefined和null不能使用任何操作；
2.转数字： var 变量名=pareInt();或者pareFloat();

转整数：pareInt(string/number):

 执行原理：专门为字符串和小数点转为整数准备的，从左向右依次读取每个字符串，碰到非数字字符，就会停止转换，如果以来就碰到不认识的，则转为NaN.

转为小数点：pareFloat(string):

执行原理：几乎和pareInt一致，但只认识第一个小数点。

number:此方法是万能的，任何人都可以转为数字，完全等同于隐式转换，可以-0 *1 /1 %1；就可以转为数字

function的基础：

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

   2.如何使用：1.定义/声明/创建函数
                 function 函数名（）{    }
             2.调用函数
                 函数名();
                  1.要么在js中程序员直接写死，要执行几次：函数名（）；
                  2.要么交给用户绑定在某一个元素上，写上点击事件，让用户来触发
                      触发：<button  onclick="js代码段">内容</button>

  3.何时使用：
      1.不希望打开页面立刻执行，而需要时再使用或由用户来触发
      2.希望能够反复使用执行，不用刷新页面
      3.以后任何一个独立的功能体，都要单独封装为一个函数
      4.函数内的一切内存，函数调用完毕后都会自动释放

带参的函数：

结构：形参：其实就是一个变量，但是不需要写var，而且默认也没有保存任何值。
定义：function 函数名（形参1，形参2...）{  }
使用：实参：函数名（实参1，实参2...）;
特殊：
    1.传实参的顺序一定要和形参的顺序一一对应，并且数量也要对应
    2.不是一定要带参数的函数才是好函数，具体情况需要具体分析：
        具体分析：1.如果你的函数体就是固定的一则普通函数
                 2.如果你的函数体希望根据传入的实参不同，做的略微不同则带有参数的函数

分支结构：

程序的流程控制语句：3种
    1.顺序执行：默认从上向下依次执行
    2分支结构：通过条件的判断，选择部分代码执行
    3.循环结构：通过条件的判断，选择要不要重复执行某些代码。
比较运算符:> < >= <= == !=
    结果：一定都是布尔值
运算逻辑符：&& || ！
    &&：与，并且，要求全部条件都满足，最后结果才为true,只有一个条件不满足，结果则为false
    ||:或，要求全部条件都不满足，最后结果才为false,只有一个条件满足，结果则为true
    !:颠倒布尔值

循环结构：

 定义：反复执行相同或者相似的操作
 循环的三要素：
     1.循环的条件：从开始到结束，循环的次数
     2.循环体:做的什么操作
     3.循环变量：记录着我们当前再那一次，而且她会不断的发生变化，往往都会向着不满足条件进行

while循环：

  语法：var 循环变量=几；
        while(循环的条件) {  循环体；循环的变量   }；
  执行原理：首先创建了循环变量，然后判断条件，如果条件满足，则做一次循环体操作，并不会退出循环回过头继续判断条件满足吗，如果满足则再做一次循环体操作，知道循环条件不满足，才会退出循环
  宏观上感受循环一瞬间就结束了，但是微观上来说，其实是一次一次执行的
  特殊：
      1.有的时候真可能不知道从何开始，到何处结束那就是死循环：永远不会停下来的循环

死循环何时使用：

    不确定循环次数的时候 while(true) {    } 
    退出死循环语句：在循环里面添加"break"

随机数的公式：(math.random*(max-min+1)+min)

for循环：

语法：far(var 循环变量=几;循环条件;变量的变化) {    }
死循环：for(;;){  循环体   };

面试题：while和for的区别？

   语法上有区别，但两者都能做到相同的操作
   一般来说我们不确定循环次数的时候，会使用while循环-死循环
   一般来说我们确定循环次数的时候，就用for循环

数组的基础：

原理：数组：创建一个变量可以保存多个数组的集合
      数组都是线性排列，除了第一个元素，每个元素都有唯一的前驱元素，除了最后一个元素，每个元素都有唯一的后继元素
      每个元素都有一个自己的位置，称之为叫做下标，下标是从0开始的到最大长度-1

创建数组的2种方法：

   1.直接量方法：
       var 数组名=[];空数组
       使用： var 数组名=[数据1，数据2...]随便放什么类型的数据
   2.构造函数方式：
       var 数组名=new array();
   3.获取数组中的数据：
        数组名[下标]；
   4.添加/替换数组：
       数组名[下标]=新值；
       下标处有没有元素，如果没有元素则为添加，如果有元素则为替换
   5.数组具有三大不限制：
       1.不限制元素的个数
       2.不限制元素的类型
       3.不限制元素的下标越界
           1）如果获取元素，下标越界返回一个undefined
           2)如果添加元素，下标越界会得到一个稀疏数组，导致下标不在连续，如果搭配上循环去遍历每一个元素的话，我们会得到很多的额undefined
   6.数组的属性：
       长度：数组名.length-获取当前数组的长度最大下标+1
   7.三个固定套路：
        1.获取倒数第n个元素：arr[arr.length-n]
        2.始终向末尾添加元素：arr[arr.length]=新值
        3.缩容：删除倒数n个元素：arr.length-=n
   往往很多情况，我们不会拿出来某个元素来使用，而是拿出所有的每个元素来进行相同或者相似的操作

遍历数组：

    把数组中的每个元素拿出来执行相同或者相似的操作
    公式：for(var i=0;i<数组名.length;i++) {  console.log(数组名[i])   }

DOM：

  1.document object model:文档对象模型，专门用于惭怍HTML文档的
  2.DOM树的概念：
      1.DOM将我们的html看作了是一个倒挂的树状结构，但是树根不是html标签，而是document对象
      2.document对象：不需要我们程序员创建的，由浏览器的js解释器自动创建，一个页面只有一个document
          作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象/属性，DOM会将页面上的每个元素、属性、文本、注释都会当作一个DOM元素
      3.查找元素：
          1.通过ID查找元素：
          语法：var 变量名=document.getElementById("id值")；
          特殊：1.返回值，找到了返回的是一个当前找到的DOM元素，没找到返回一个null，做了别的操作可能就会报错了
               2.找到了多个相同的ID，那么指挥返回第一个
               3.一次只能获取一个元素，也只能操作一个元素
               4.其实根本不需要使用此方法，直接写ID也可以找到元素
          2.通过标签名查找元素：
                语法： var 变量名=document/已经找到的父元素.getgetElementsByTagname("标签名")
                特殊:1.返回值：找到了返回的是一个类数组DOM集合（很想数组，都能用下标，都能用length,都能遍历），没找到返回一个空集合
                    2.js不能直接操作DOM集合，只能直接操作DOM元素，解决：要么使用下标拿到某一个元素，要么遍历拿到每一个元素
                    3.不一定非要从document开始查找，如果document去找回找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到这个父元素下面的元素了。
          3.通过class名查找：
               语法： var 变量名=document/已经找到的父元素.getgetElementsByclassname("class名")[];
               特殊：情况与标签一致
          4.通过关系查找：
              前提条件：必须先找到一个元素才可以调用关系选择器
              父元素：变量名.parentNode;
              子元素：变量名.children;
              第一个儿子：变量名.firstElementChild;
              最后一个儿子：变量名.lastElementChild;
              前一个兄弟：变量名.previousElementsibling;
              后一个兄弟：变量名.nextElementsibling;

强调DOM元素不能直接操作

操作元素：

前提：找到元素才能操作元素
1.操作元素的内容：
    1.innerHtml:获取和设置开始标签到结束标签之间的内容-支持识别标签
        获取：标签名.innerHTml;
        使用：标签名.innerHtml="新内容"；
    2.innerText:获取和设置开始标签到结束标签之间的文本-不支持识别标签。
        获取：标签名.innerText;
        使用：标签名.innerText="新文本"；
    以上两个属性都是为双标签准备的，但是操作不了单标签input的内容。
    3.value:专门为Input的value值准备的
        获取：input.value;
        使用：input.value="新值"；
2.操作元素的类型：
    获取属性值：标签名.getAttribute("属性名")；
    设置属性值：标签名.setAttribute("属性名","属性值")；
    简化版本：
        获取属性值：标签名.属性名；
        设置属性值：标签名.属性名=”新属性值“；
        缺陷：1.class必须写为className;
             2.不能操作自定义属性，只能操作标准属性；
3.操作元素的样式：
    使用样式的方法：1.内联/行类样式
                   2.内部样式
                   3.外部样式
 二阶段我们就是要用js来操作（内联样式）
     1.不会牵动所有
     2.优先级别最高
     获取：标签名.style.css属性名；
     设置：标签名.style.css属性名=”css属性值“；
     特殊：1.css属性名，有横线的地方，去掉横线变为小驼峰命名法；
         2.目前学习的，获取样式时只能获取内联样式
4.绑定事件：
    名字.事件=function（）{  操作   }；
    this关键字：目前只能用于事件内使用
        如果单个元素绑定事件：this===>就是这个元素
        如果多个元素绑定事件：this===>就是当前点击的这个元素
    总结：获取：往往都是用与判断比较
         设置：就是添加/修改