1、js概述

JavaScript简称js，是一门【面向对象】的【弱类型】的【解释型】语言
    **弱类型**：变量保存的数据类型是随意的，数据类型是由数据决定的 -- 语法相对自由
        eg: var str = "string";  //字符型
            var num = 5;   //number型
    **强类型**：变量保存的数据，由数据的类型来决定 --- 语法相对严格
        eg:int num = 10；
    
    解释型：在程序运行之前，不需要检查语法是否正确，直接运行，碰到错误的时停止，相比于编译型更加自由。
    编译型：在程序运行之前，需要检查语法是否正确，如果有错误，直接不允许运行。
    
    面向对象：
        ...
        常用语法：对象名.属性名;
                 对象名.方法名();
                 
     js的特点：
        1.可以使用任何编辑器编写
        2.面向对象的
        3.弱类型
        4.解释型
        5.可以做一切css做不了的效果...

2、如何使用js

1.使用方式：2种

a.直接在html页面上写一个<script></script>标签，然后在里面编写代码 --- 一般在学习时使用
    语法：
        <script>代码块...</script>

b.引入一个外部的js文件 --- 工作常用、规范
    语法：
        <script src="js文件地址">此处编写的代码不生效</script>

注：一个包含有src属性的script标签，里面编写的代码不生效

2.输出方式/打桩输出/检查错误：3种

a.控制台输出日志：
    语法：console.log("你想要输出的内容");  //推荐使用
b.浏览器弹窗输出：
    语法：alert("你想要输出的内容");  //不推荐使用，alert()会阻止浏览器加载进程
c.页面输出日志：
    语法：document.write(“你想要输出的内容”); //不推荐使用,document.wwrite()会修改页面显示内容，覆盖掉原本的值

3、变量和常量

1.常量

常量创建后，值不允许修改
    语法：const 常量名 = 值;  //不常用

2.变量

变量创建后，可以对其值进行修改
    语法：var 变量名 = 值;   //常用

注：1)变量名的命名要遵守命名规范
      a.不能以数字开头
      b.建议下划线命名法或者驼峰命名法
      c.命名要尽量得见名知意

    2)如果你是变量名是name，不管你保存的数据类型什么，都会变成一个字符串

    3)不能使用关键字

4、算术运算符：+ - * / %

%：取余，俗称模
 固定使用场景：
     a.判断奇偶性
     b.获取一个数字的倒数n位数
       1234 % 10   //结果4
       1234 % 100  //结果34
     c.****特殊：+运算，如果左右两边都是一个数字，直接加在一起了
       但是如果左右两边有一个是字符串则进行拼接
       

5、数据类型：两个大类

1.基本/原始/值数据类型：5个

a.number === 数值
b.string === 字符串
c.boolean === 布尔 取值：true 和 false
d.undefined === 取值：undefined ,创建一个变量，默认值为undefined，用来做一切都是不合理的
e.null === 空 取值：null,不使用的变量可以进行释放

2.引用/对象类型:11个（属性和方法）

待填充...

6、数据类型的转换

为什么要进行数据转换？
不同的数据类型做操作可能出来的结果也不一样
    number + number = number
    number + string = string
    
    js获取页面上的一切东西，数据类型默认都是一个字符串

    查看数据类型：typeof("你想要查看的数据");

1.算术运算的隐式转换

默认：将左右两边都转为数值类型
特殊：
    a.+运算，当碰上一个字符串，左右两边都会悄悄的变成字符串，+运算也不再是+运算，变了拼接操作
    b.其他数据类型转换成数字
        true  ===> 1
        false ===> 0
        undefined ===> NaN
        null  ===> 0
    c.一个纯数字组成的字符串可以转换成一个数字，但凡包含一个非数字字符结果一定为NaN
    d.NaN：Not A Number：不是一个数字，但是确实又是数字类型，不是一个有效的数字
        缺点：1）NaN参与任何算术运算，结果仍为NaN
              2）NaN参与任何比较运算，结果都为false,甚至自己和自己都不相等
        判断一个元素是不是数字类型：
            语法：!isNaN(x);
                true  ===> 表示为一个有效数字
                false ===> 表示为结果为NaN

2.强制/显示转换

1.转字符串：var str=xx.toString();//xx不能是undefined和null，因为undefined和null不能使用.做任何操作
2.转数字：3种
    a.parseInt(str/num);  parse->解析 Int->整型
      原理：专门为小数和字符串准备的，从左向右依次转换，碰到非数字字符就会停止转换,如果一来就碰到了不认识的字符，结果就为NaN，不认识小数点
      eg:
          console.log(parseInt(100.5));//100
          console.log(parseInt("100.5"));//100
          console.log(parseInt("100px"));//100
          console.log(parseInt("px100"));//NaN
          console.log(parseInt("1px00"));//1
          console.log(parseInt(true));//NaN
          console.log(parseInt(false));//NaN
          console.log(parseInt(undefined));//NaN
          console.log(parseInt(null));//NaN
          
    b.parseFloat(str);     parse->解析 Float->浮点数：小数
      原理：和parseFloat差不多，认识小数点
      eg:
          console.log(parseFloat(100.5));//100.5
          console.log(parseFloat("100.5"));//100.5
          console.log(parseFloat("100.5px"));//100.5
          console.log(parseFloat("px100.5"));//NaN
          console.log(parseFloat("10px0.5"));//10
          console.log(parseFloat("100.5.5.5"));//100.5
          console.log(parseFloat(".555"));//0.555
          
    c.Number(x);//此方法是万能的，任何人都可以转为数字
      等效于隐式转换

7、function基础

1.概念

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

2.如何使用

a.创建/定义/封装函数
    语法：
        function 函数名(){
            函数体;
        }
b.调用
    语法：函数名();
    

注：
    1)函数写好后不会自动执行，调用几次就执行几次
    2)交给用户来触发，通过绑定事件的方式

3.何时使用

a.不希望打开页面立刻执行，而需要时再用，或者由用户来触发
b.希望能够反复执行，不用刷新页面
c.后任何一个独立的功能体，都要单独封装为一个函数
d.函数在js中的地位最高：函数是第一等公民地位，所以尽可能封装为函数

4.带参函数

a.何时使用：当你希望调用函数时，输出的每一个值都有所不同时
b.创建
    形参：形式参数，其实就是一个变量，但是不需要写var，而且默认也没有保存任何值
    语法：
        function 函数名(elem1,elem2){//elem1,elem2为形参
            函数体;
        }
c.调用
    实参：实际参数，真正的值，需要你在调用函数时传入进去
    语法：函数名(elem1,elem2); //elem、elem2为实参

注：
    1）传参的顺序一定要一一对应上，并且数量也要对应
    2）不是一定需要带参数的函数，才是好函数，具体要不要带有参数，需要看我们的需求
        如果你的函数体就是固定的 - 则普通函数搞定
        如果你的函数体是根据参数的不同，做的略微不同 - 就使用带参数的函数

8、分支结构

1.程序的流程控制语句：3种

    a.顺序结构，从上到下顺序执行
    b.分支结构，通过条件判断，通过结果来选择执行那一块的代码
    c.循环结构，通过条件判断，选择要不要重复执行某块代码

2.比较运算符：>= <= > < == !=

    作用：主要用来做判断操作
    结果：一定是一个布尔值

    注：
        1）=：单等号是表示赋值，“==“双等号表示判断
        2）如果你想要判断多个条件，绝对不能数学的写法：
            18<=age<=65  //错误写法
            18<=age && age<=65  //正确写法，使用逻辑运算符

3.逻辑运算符

    &&：与、并且。要求全部条件都满足，最后的结果才为true，一假为假
    ||：或。要求全部条件都不满足，最后的结果才为false，一真为真
    !：颠倒布尔值：!true->false     !false->true  //做取反操作
    

4.分支的语法

    a.一个条件,一件事
        语法：
            if(条件){
                操作;
            }
            
    b.一个条件，两件事
        语法：
            if(条件){
                操作;
            }else{
                默认操作;
            }
            
    c.多个条件，多件事
        语法：
            if(条件1){
                操作;
            }else if(条件2){
                操作2;
            }
            ...
            else{
                默认操作;
            }

    注：else if可以有多个

9、循环

1.概念：

    循环结构：反复执行 相同 或 相似的操作

2.循环三要素

    a.循环条件：开始 - 结束，循环的次数
    b.循环体：做的操作是什么
    c.循环变量：记录着我们当前在哪一次，而且它会不断的变化
        

3.while循环

    语法：
        while(条件){
            循环体;
            循环变量发生变化;
        }
    执行变量：
        首先创建了循环变量，判断循环条件，如果条件满足，则做一次循环体操作，并不会退出循环，回过头来，再次判断条件满足，则再做一次循环体操作...直到条件不满足为false时，才会退出循环
    

    注：
        1）有的时候真有可能需要使用死循环：永远不会停下来的循环
        何时：不确定循环次数的时候
          	while(true){
          		死循环	
           	}
        2）退出循环语句：break; - 只能用在循环中，多半都是搭配死循环使用

4.for循环

和while的原理是一样的，但是他比while看上去更加的简洁，更加的舒服
语法：
    for(var 循环变量;循环条件;步长){
	循环体;
    }
    
    死循环：
for(;;){
	死循环
}

面试题：while 和 for的区别？
       while和for几乎没有区别：
           一般来说我们不确定循环次数的时候，会使用while循环 - 死循环
           一般来说我们确定循环次数的时候，会使用for循环 - 更漂亮更简洁，大部分情况

10、数组

1.创建数组

a.直接量方式
    语法：
        ar arr=[];//空数组
        var arr=[数据1,...];
b.构造函数方式：
    语法：
        var arr=new Array();//空数组
        var arr=new Array(数据1,...);
        

2.获取数组之中的数据

语法：数组名[i];  //i为数组下标

3.后续添加/替换元素

语法：
    //如果下标处没有人，那么则为添加，如果下标处已经有人了，则为替换
    数组名[i]=新数据;
    

4.数组具有三大不限制

a.不限制元素的类型
b.不限制元素的个数
c.不限制元素的下标越界
    缺点：
        1)如果获取元素，下标越界，返回的是一个undefined
        2)如果添加元素，下标越界，会得到一个稀疏数组，如果搭配上循环去获取每个元素，则会得到很多很多的undefined

5.数组的length属性

问题：自己数下标，是不科学的，很有可能就会数错
解决：数组中有一个唯一的属性length
如何使用：数组名.length
作用：获取数组的长度：长度是从1开始的

三种固定套路：
    a.向末尾添加元素：arr[arr.length]=新值;
    b.获取数组的倒数第n个元素：arr[arr.length-n];
    c.缩容：删除倒数n个元素：arr.length-=n;

6.数组的遍历

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

11、DOM操作

1.DOM

概念：
    Document Object Model：文档对象模型：专门用于操作HTML文档的，提供了一些方法

2.DOM树

概念：
    DOM将我们的HTML看做了是一个倒挂的树状结构，但是树根不是html标签，而是document对象

document对象：
   不需要我们程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document

作用：
    以通过树根去找到我们想要的任何一个DOM元素/节点/对象（属性和方法）
    DOM会将页面上每个元素、属性、文本、注释都当做是一个DOM元素/节点/对象

3.查找元素

a.通过id查找元素
    语法：var elem=document.getElementById("id值");
    特殊：
        1)返回值：找到了返回当前找到的DOM元素，没找到返回是一个null
        2)找到了返回的也只是第一个id的元素
        
b.通过标签名找元素
    语法：
        var elems=document/已经找到了的父元素.getElementsByTagName("标签名");
    特殊：
        1）返回值：找到了返回一个类数组DOM集合，没找到返回的是一个空数组
        2）JS只能直接操作DOM元素，不可以直接操作DOM集合，解决：要么使用下标拿到某一个元素，那么使用遍历拿到每一个的元素
        3）不一定非要从document开始查找，如果从document去找，会找到的所有的元素，可以换成我们已经找到的某个元素
        
c.通过class名查找元素
    语法：
        var elems=document/已经找到了的父素.getElementsByClassName("class名");
    特殊：
        1)返回值：找到了返回一个类数组DOM集合，没找到返回的是一个空数组
        2)JS只能直接操作DOM元素，不可以直接操作DOM集合，解决：要么使用下标拿到某一个元素，那么使用遍历拿到每一个的元素
        3)不一定非要从document开始查找，如果从document去找，会找到的所有的元素，可以换成我们已经找到的某个元素
        
d.通过关系查找
    前提条件：必须先找到一个元素才可以调用关系网
    
    父元素：elem.parentNode;  //单个元素
    子元素：elem.children;    //集合
    第一个子元素：elem.firstElementChild;  //单个元素
    最后一个元素：elem.lastElementChild;   //单个元素
    前一个兄弟：elem.previousElementSibling;  //单个元素
    后一个兄弟：elem.nextElementSibling;      //单个元素



    
    
    未完...