1. JavaScript

I:概述：javascript，简称JS，是一个运行在客户端浏览器的【解释型】，【弱类型】，【面向对象】脚本语言

语言类型：
1.编译型：在运行程序之前，需要先检查语法是否正确，如果不正确，直接不允许运行-严格，比如java/C++ /C#；
2.解释型：在运行程序之前，不需要先检查语法是否正确，直接运行，但是碰到错误就会停止后续代码，更加自由，比如javascript/PHP/node.js；
3.弱类型：变量保存的数据是可以随意的，数据类型是由数据来决定的，更加自由；
4.强类型：变量保存的数据，是由数据类型来决定的,更加严格-java
5.面向对象：
    1.对象名.属性名；
    2.对象名.方法名();
    3.万物皆对象；
   
特点：
    1.可以用一切编辑器工具写JS代码
    2.解释型
    3.弱类型
    4.面向对象编程方式
    5.可以做一切CSS完成不了的效果（轮播/购物车/选项卡/验证/数据渲染）
   

2.如何使用JS

1.使用方法（2种方法）：
    1.直接在html页面上写一个script标签，里面就可以书写你的js代码
    <script>js代码块</script>
    2.外部js，进行引入（正式开发时使用）
        1.创建一个xxx.js文件,里面直接写js代码
        2.在html引入，<script src="">只要有src属性，此处就不可以再写代码了</script>
2.输出方式/打桩方式，帮助我们检查错误：3种    
    1.在控制台输出日志
    2.在页面上输出日志--document.write();--如果绑定了点击事件后输出，会把原来的html和网页内容全部覆盖
    3.在弹出框输出日志:alert();在浏览器自带的弹出框输出日志，但是弹出框会卡住页面，用户只能看到一个白板；

3.变量和常量

1.变量：创建后，值可以再次修改
    何时使用：
        以后反复使用得到的数据，都要提前把它保存在一个变量中，以后使用变量名，相当于就是在使用变量的值
    如何使用：
        var 变量名=值
    特殊：
        1.变量名其实不是随意的
        2.不能以关键字命名
        3.不能以数字开头
        4.建议下划线命名法或小驼峰命名法
        5.如果变量名是name，不管你保存的是什么数据类型，都会悄悄地转变成一个字符串
        6.多个变量创建可以简写：var 变量名1=值，变量名2=值，.....;
    
2.常量：创建后，值不可以再次修改，只能设置一次
    语法：const 变量名=值；

4.算术运算符 + - * / %

1.%：读作取余，俗称模，两个数相除，不取商，取除不尽的余数
    固定套路：
        1.判断奇偶性：num%2,结果为0说明是偶数，结果为1就说明是奇数，以后可以用于做判断
        2.获取一个数字的倒数n位
            1234%10--->4,
            1234%100-->34,
            1234%1000-->234

5.数据类型

1.原始类型/基本类型/值类型：5个
    1.Number-数字 取值：无数个；
    2.String-字符串 取值：无数个 必须写上''或""；
    3.Boolean-布尔类型 取值：true/false 往往用于判断比较的条件使用
    4.Undefined 取值：1个 undefined 创建了一个变量，但是没有赋值，默认值为undefined 用来做大部分操作都会报错;
    5.Null-空 取值：1个 null 释放变量/内存，节约内存空间
2.引用/对象类型：11个引用类型的对象（很多的方法和属性）

6.数据类型的转换

不同的数据类型做操作，可能出来的结果是不一样的
    Number+Number=Number
    Number+String=String
JS获取页面上一切的东西，数据类型默认都是一个字符串
typeof 如果想要查看数据类型：typeof(想要查看的东西)
1.算术运算符的隐式转换
    目的：就算不用输出看，心里也知道最后的结果是什么
    默认：悄悄地将左右两边的东西，转为一个数字再运算
    特殊：
        1.+运算，碰上一个字符串，左右两边都会悄悄地转为字符串，+运算不再是+运算，而是字符串的拼接操作；
        2.原来别的数据类型其实也可以转为数字
            true-->1
            false-->0
            null-->0
            undefined-->NaN
        3.其实 - * / %,字符串也可以转为一个数字，前提是要全部都是纯数字组成的字符串才行，但凡包含一个非数字字符就转为NaN
        "1000a"--->NaN
            4.NaN:not a number:不是一个数字，但是却是数字类型
                缺点：
                1.NaN参与任何算数运算结果都是NaN
                2.NaN参与任何比较运算，结果都是false，甚至不认识自己
                问题：我们没有办法使用普通的比较运算来判断x是不是NaN
                解决：个人更爱反用：！isNaN(x)
                    true->是一个有效数字
                    false->是一个NaN
2.显示转换/强制转换
    隐式转换出来的结果往往不是我们想要的，我们程序员就要手动调用一些方法，强制转为我们需要的类型，再操作
    1.转字符串：
        var str=x.toString();
        x不能是undefined或null,因为null和undefined不能做任何的.操作
        页面上的一切东西，数据类型默认都是一个字符串
    2.转数字：
    parseInt(string/num);parse-->解析 Int-->整型
    执行原理：专门为字符串和小数转为转为整数数字准备的，从左向右依次读取每个字符，如果碰到非数字字符，就停止转换，如果以来就碰到非数字字符，则为NaN
    parseFloat(string/num);parse-->解析 float-->浮点型
    执行原理：几乎和paeseInt一模一样，认识第一个小数点
    Number(x);此方法是万能的，任何人都可以转为数字
    不好用，完全等效于隐式转换，没必要，还不如：x-0 *1 /1 %1

7.function

函数：称之为方法：需要提前【预定义好】的，以后就可以【反复使用】的【代码段】
1.如何使用
    1.定义/声明/创建函数   function 函数名（）{若干的代码段}
    2.调用/使用函数  
        1.要么在js中程序员写死要执行几次：函数名()
        2.交给用户绑定在某个元素上，写上点击事件，让用户来触发
        <elem onclik="js代码" >内容</elem>
2.何时使用
    1.不希望打开页面立即执行，需要的时候再使用或由用户来触发
    2.希望能够反复执行，不用刷新页面
    3.以后任何一个独立的功能体，都要封装为一个函数
    4.函数的地位非常高，随时随地考虑能不能封装为一个函数
    5.函数内的一切内存，函数调用完毕后，都会自动释放
3.带参数的函数
    1.实参：实际参数，真正的值，需要在你调用时再传入 function 函数名(实参,实参，实参.....)
    2.形参:形式参数，其实就是一个变量，但是不需要写var,而且默认也没有保存任何值，默认值为undefined
    function 函数名(行参,行参,行参,....)
    3.特殊：
        1.传实参的顺序一定要和实参的顺序一一对应
        2.不是一定要带参数的函数才是好函数，具体情况需要具体分析：
            如果函数体就是固定的-则为普通函数
            如果函数体希望根据传入的实参不同，做的略微不同，-则为带有参数的函数

8.分支结构

1.程序的流程控制语句
    1.顺序执行-默认，从上向下的依次执行
    2.分支结构-通过条件的判断，选择部分代码执行
    3.循环结构-通过条件的判断，选择要不要重复执行某些代码
2.比较运算符 > < >= <= == !=
    用于做判断/比较的
        结果：一定是一个布尔值
        强调：如果想要判断多个条件，不能写为：18<age<23,要用逻辑运算符
3.逻辑运算符 && ｜｜ ！
    && 与 并且：要求全部条件都要满足，最后的结果才为true,只要有一个不满足，结果则为false
   ｜｜：要求全部条件都要不满足，最后的结果才为false,只要有一个满足，结果则为true
    ！：颠倒布尔值
4.分支的语法
    1.一个条件一件事，满足就做，不满足就不做
        if(条件){操作}
    2.一个条件两件事，满足就做第一件，不满足就做第二件
        if(条件){操作1}else{操作2}
    3.多个条件多件事，满足谁就做谁
        if(条件1){操作1}else if(条件2){操作2}

9.循环结构

循环结构：反复执行【相同/相似】的操作
1.循环的3要素
    1.循环条件--->开始-结束，循环的次数
    2.循环体 --->做的操作是什么
    3.循环变量  --->记录着我们当前在哪一次，而且他会不断的变化，往往都会向着不满足循环条件进行
2.while循环
    语法：var 变量名=几;while(循环条件){循环体;循环变量变化}
        1.执行原理：首先创建了循环变量，然后判断条件，如果满足，则做【一次】循环体操作，并不会退出循环，回过头继续判断循环条件满足吗，如果满足，则再做一次，直到循环条件不满足，才会退出循环
        2.特殊：有的时候可能真不知道从何开始，到何结束，死循环：永远不会停下来的循环
        3.何时使用：
            1.不确定循环次数的时候  while(true){循环体；}
            2.退出循环语句：break-只能在循环中使用，多半都是搭配死循环使用的
3.for循环
    语法：for(var 循环变量=几;循环条件;变量的变化){循环体}
    死循环：for(;;;){循环体}

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

10.数组的基础

数组：创建一个变量，可以保存【多个数组】的集合
数组都是线性排列
    1.除了第一个元素，每一个元素都有唯一的前驱元素，除了最后一个元素，每个元素都有唯一的后继元素
    2.每一个元素都有一个自己的位置，称之为下标，下标都是从0开始，到最到长度-1
创建数组     
    1.直接量方式
        var arr=[]
    2.构造函数方式
        var arr = new array()
获取数组中的数据
     数组名[下标]
添加、替换
    数组名[下标]=值 
    下标处如果没有元素，则为添加
    下标处如果有元素，则为替换
数组具有三大不限制
    1.不限制元素个数
    2.不限制元素的类型
    3.不限制元素下标越界
        如果获取元素，下标越界，返回的一个undefined\
        如果添加元素，下标越界，会得到一个稀松数组，导致下标不再连续，如果搭配上循环去遍历每一个数组的话，会得到很多的undefined
            解决：数组中唯一的属性
                固定套路
                    1.获取倒数第N个元素：arr[arr.length-n]
                    2.始终向末尾添加元素：arr[arr.length]=新值
                    3.缩容：删除倒数N个元素 arr.length -=n
    遍历数组：
        往往很多情况，我们不会拿出某个元素来使用，而是拿出所有的每个元素来进行相同或相似的操作
        公式：
            for(var i=0;i<arr.length;i++){//当前次元素}

11.DOM

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

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

• document对象的作用：通过树根找到我们想要的任何一个DOM元素/节点/对象(属性和方法)
  

• DOM会将页面上的每个元素，文本，属性，注释都当作一个DOM元素/对象/节点
  

12.查找元素

1.通过ID查找
    语法：var elem=document.getElementById("id值")
    特殊：
        1.返回值，找到了返回的是一个当前的DOM元素，没有找到，返回一个null.做了别的操作可能会报错
        2.如果找到了多个相同的ID，只会返回第一个
        3.一次只能获取一个元素，一次也只能操作一个元素
        4.其实根本不需要此方法，直接写ID就可以找到元素
2.通过标签查找
    语法：var elems = document.getElementByTagName("标签名")
    特殊：
        1.返回值：找到了，返回的是一个类数组DOM集合（很像数组，都能用下标，都能用length,都能遍历），没找到，返回一个空集合
        2.*JS不能直接操作DOM集合，只能操作DOM元素，解决：要么使用下标拿到某一个元素，要么使用遍历，拿到每一个元素
        3.不一定非要从document开始查找，如果document去找，会找到所有的元素，如果换成我们已经找到的某个父元素，就只会找到这个父元素下面的元素了
3.通过类（class）名查找
      语法：var elems = document.getElementByClassName("class名")
        特殊：
            1.返回值：找到了，返回的是一个类数组DOM集合（很像数组，都能用下标，都能用length,都能遍历），没找到，返回一个空集合
            2.*JS不能直接操作DOM集合，只能操作DOM元素，解决：要么使用下标拿到某一个元素，要么使用遍历，拿到每一个元素
            3.不一定非要从document开始查找，如果document去找，会找到所有的元素，如果换成我们已经找到的某个父元素，就只会找到这个父元素下面的元素了
4.通过关系查找
    前提条件：必须找到一个元素才可以调用关系网 
        父元素：elem.parentNode;
        子元素：elem.children;
        第一个儿子：elem.firstElementChild;
        最后一个儿子：elem.lastELementChild;
        前一个兄弟：elem.previousElementSibling;
        后一个兄弟：elem.nextElementSibling;

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

13.操作元素

前提：找到元素才能操作元素：<标签 属性名="属性值" style="样式">内容</标签>
1.内容
    1.*innerHTML：获取和设置开始标签到结束标签之间的内容----支持识别标签
        获取：elem.innerHTML;
        设置：elem.innerHTML="新内容"
    2.*innerText:获取和设置开始标签到结束标签之间的文本----不支持识别标签
        获取：elem.innerText;
        设置：elem.innerText="新文本"
    以上两个属性都是为双标签准备的，但是操作不了单标签input的内容
    3.*value:z专门为input的value值准备的
        获取：input.value;
        设置：input.value="新值"；
2.属性
    获取属性值：elem.getAttribute("属性名")；
    设置属性值：elem.getAttribute("属性名","属性值")；
    简化版：
        获取属性值：elem.属性名；
        设置属性值：elem.属性名="新属性值"
    缺点：
        1.class必须写为className  ---ES6 在2015年诞生后，class变为了一个关键字
        2.不能获取自定义属性，只能操作标准属性
3.样式
    使用样式的方式
        获取：elem.style.css属性名；
        设置：elem.style.css属性名="CSS属性值"
    特殊：
        1.CSS属性名，有横线的地方，去掉横线，变为小驼峰命名法
        2.目前学习的，获取是只能获取内联样式，有小缺点
4.绑定事件
    elem.on事件名=function(){操作；}
    this关键字：目前只能用于事件内；
        如果单个元素绑定事件：this-->这个元素
        如果多个元素绑定事件：this-->当前触发事件的元素

** 获取就是用于判断，设置就是修改/添加 **