JavaScript

JavaScript: 简称JS，是一个运行在客户端的,解释型、弱类型、面向对象的语言脚本。

1. 解释性：运行代码前不用检查代码是否正确，执行时，碰到代码有错误的地方才会报错停止，更加自由。
2. 弱类型：变量保存的数据随意，数据类型由数据来决定。
3. 面向对象：对象名.属性名；/ 对象名.方法名。
4. 可以做到一切css做不到的效果。

如何使用js：

1. <script>js代码</script>----------一般放在结构代码下面。
2. 外部引入js文件。

可以打桩输出检查错误：

1. console.log();-------------------在控制台输出日志
2. document.write()-----------------在页面上输出日志（可以识别标签，但绑定点击事件后，会替换原来的样式结构）
3. alert()--------------------------弹出框输入日志(弹出时会卡主页面。)

变量和常量

• 变量： 创建后，可以被修改。---反复使用的数据可以提前保存在一个变量里。 / var.变量名1=值1，var.变量名2=值2；
• 常量： 创建后，不可以被修改。 / const 常量=值
• 特殊： 如果你的变量名是name，保存的都只能是字符串。

算术运算符

1. ＋ — * / % -------%为取余； 6%8=6.
2. 固定套路：1. 判断奇偶性    2.获取一个数字的倒数第n位。------1234%10=4；1234%100=34...
3. *****特殊：算术运算具有隐式转换，默认转为数字类型在计算。
4. ➕：如果两边但凡出现了一个字符串，就不是运算了，而是字符串拼接。
5. 字符串也可以为数字，前提是：必须是纯数字组成的字符串。 -*/%中："100->100 / 100px->NaN"
6. true->1 / false->0 / undefind->NaN / null->0
7. !isNaN----有效数字。

数据类型：

1.numbe / 2.string / 3.boolean / 4.undefind（大部分操作都会报错） / 5.null(空)

分支结构：

• 判断条件的不同去选择对应的代码去执行，执行了一条路就不会再走其他路。
• 例如：if（条件）{ };--------一个条件一件事，满足就做，不满足就不做。
• if（条件）{ 操作1；} else{ 操作2 };--------一个条件，两件事，满足谁就做谁。
• if（条件1）{ 操作1；} else if(条件2){ 操作2 } else if(条件3){ 操作3 }...else{ 操作(默认)}---多个条件，多个事情，满足谁就做谁。
• 注意：根据需求判断书写顺序，书写顺序按照需求来写。

显示/强制转换：

• 隐式转换出来的结果不是想要的东西，就需要手动调用一些方法来将其强制转换为我们需要的类型再操作。
• 页面上的一切东西（提取到的元素等），数据类型都默认的是字符串类型。

转数字：

1. parseInt(str/num):专门适用于字符串和数字类型，从左到右依次转化，如遇到非数字的字符，则转化停止，如一来就不认识，则为NaN。(true/false/字母/小数点/汉字/undefind/null...)
2. pareFloat(str):针对字符串，几乎和pareInt一样，只是可以识别第一个小数点，第二个小数点识别不了。

function基础：

1. function：函数：需要提前定义好，以后可以需要时就调用的代码段。
2. 使用：function 函数名(){ 代码 }；
3. 用户可以对其绑定在元素上，例如绑定点击事件：<elem onclick="js代码"></elem>

何时使用：

1. 不希望打开页面就运行，而是在需要时在执行或者由用户来触发。
2. 希望可以反复执行，不用刷新页面。
3. 以后任何一个独立的功能体，都要封装成一个函数。
4. 函数的地位非常高，随时随地考虑能否封装成一个函数，尤其是重复的代码。
5. 函数内的一切内存，函数调用完后会自动释放。

带参数的函数：

1. 创建：形参：形式参数，不需要写var,默认值为undefind。--function 函数名(形参，形参，...){函数体；}
2. 使用：实参：实际参数：真实的值，需要在调用时传入---函数名(实参，实参，...);
3. 特殊：实参的顺序一定是和形参的顺寻一一对应的，数量也要对应。

比较运算符：

• < >= <= == != ------------用于做判断

• 结果：一定是一个布尔值（true/false）

逻辑运算符：

• && :并且---都满足为true，有一个满足为false。
• ||：或-----全部不满足为false，有一个满足为true。

循环结构：

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

循环三要素：

1. 循环条件：开始-结束 / 循环次数
2. 循环体：需要做的操作。
3. 循环变量：记录当前在哪一次。并且会不断变化，往往向着不满足循环的条件进行。

执行原理：

创建变量-判断条件，如条件满足，则做一次循环，并不会退出循环，而是回过头继续判断条件是否满足，满足就再做一次循环体操作。//宏观上循环一瞬间就结束，实际上是一次一次执行的。

特殊：

• 有的时候，并不清楚从何时开始到何时结束，这时可以用到死循环： 永远不会停下来的循环。
• 何时使用：不确定循环次数的时候 while(true){循环体}
• 退出循环：break; -----只能在循环中使用，多半搭配死循环。

for循环：

• 语法：for([var]循环变量=xx;循环条件;变量的变化){循环体}
• 死循环：for(;;){循环体}

while和for的区别：

1. 语法的区别，但两者的都能做到相同的操作
2. 一般来说确定循环次数用for，不确定循环次数用while

数组的基础：

var name1="1" var name2="2" var name3="3" var name4="4"......var name100="100"
变量是内存，变量创建的越多，内存消耗的越大，网站性能降低------解决：创建数组。

数组：

数组：创建一个变量用来保存多个数据的集合，数组都是线性排列（横着）。除了第一个元素，其他元素都有唯一的前驱元素；除了最后一个元素都有唯一的后继元素。 每个元素都有自己的位置，成为下标，从0开始到（最大长度-1）

创建数组：

1. 直接量法： var arr=[数据1，数据2，....]
2. 构造函数法：var arr=new Array(数据1，数据2，....)

获取数组中的数据：

数组名[下标]----arr[0]

添加/替换：

• 数组名[下标] = 新值
• 下标处没有元素，则为添加，若有为替换。

数组的三大不限制：

不限制元素的个数 不限制元素的类型 不限制元素的下标越界------如果获取元素，下标越界，返回的个undefind，如果添加元素，下标越界，会得到一个稀疏数组，导致下标不在连续，如果搭配上循环去遍历每一个元素，会得到很多undefind。

数组的属性：

• 数组中的唯一属性：长度（最大下标+1）
• 获取当前数组的长度：数组名.length

三个固定套路：

• 获取数组的倒数第n个元素：arr[arr.length-n]
• 始终向末尾添加元素：arr[arr.length]=新值
• 缩容：删除倒数n个元素：arr.length-=n

遍历数组：

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

DOM：

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

查找元素：

通过ID查找元素

语法：var elem=document.getElementByid("id名")\

特殊：

1. 返回值，找到了返回的是一个当前找到的DOM元素，也只能操作一个元素---麻烦
2. 找相同的id，只会返回第一个。
3. 其实不用写这个语法，直接写id也可以找到元素，

通过标签名找元素：

语法：var elem=document.getElementsByTagName("标签名")

特殊：

1. 返回值：找到了返回值的一个类数组DOM集合（类似数组的集合，都能用下标，length，都能遍历），若没找到返回一个空集合。
2. js不能直接操作DOM集合，只能操作DOM元素，解决：要么使用下标拿到一个元素，要么使用遍历拿到每一个元素。
3. 不一定要从document开始查找，如果从document开始找，会找到所有元素，可以换成我们已经找到的某个元素，就只会找到这个父元素下面的元素了。

通过class名查找元素：

语法：var elem=document.getElementsByClassName("类名")

特殊：

1. 返回值，找到的是一个类数组的DOM集合，没找到返回空集合。
2. js不能直接操作DOM集合，只能操作DOM元素，解决：要么使用下标拿到一个元素，要么使用遍历拿到每一个元素。
3. 不一定要从document开始查找，如果从document开始找，会找到所有元素，可以换成我们已经找到的某个元素，就只会找到这个父元素下面的元素了。

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

通过关系查找元素：

1. 父元素：elem.parentNode;
2. 子元素：elem.childen;
3. 第一个儿子：elem.firstElementchild;
4. 最后一个儿子：elem.lastElementchild;
5. 前一个兄弟：elem.previousElementSibling;
6. 后一个兄弟：elem.nextElementSibling;

前提条件：

必须先找到一个元素才可以调用关系网。

操作元素：

前提：找到元素才能操作元素！------<标签 属性名 = “属性名” style = 样式> 内容 </标签>

内容

1. innerHTML---获取和设置开始标签到结束标签之间的内容---支持识别标签。
   获取：elem.innerHTML;
   设置：elem.innerHTML="新内容"；
2. innnerTxet---获取和设置开始标签到结束标签之间的文本---不支持识别标签
   获取：elem.innerTxet;
   设置：elem.innerTxet="新文本"；

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

• value：专门为input的value准备的
  获取：input.value;
  设置：input.value="新值"；

属性：

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

简化版：缺陷： 1、class必须写为className - 2015年过后，ES6诞生过后，class变成了一个关键字2、不能操作自定义属性，只能操作标准属性

• 获取属性值：elem.属性名;
• 设置属性值：elem.属性名="新属性值";

样式：

使用样式的方式：

1. *内联/行内样式
2. 内部样式表
3. 外部样式表

用js来操作【内联样式】

1. 不会牵一发动全身
2. 优先级最高

获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";

特殊：

1. css属性名，有横线的地方，去掉横线，变为小驼峰命名法: border-radius -> borderRadius
2. 目前学习的，获取时，只能获取内联样式

绑定事件：

elem.on时间名 = function(){ 操作；
this关键字：目前只能用于事件内；
如果单个元素绑定事件：this——>这个元素
如果多个元素绑定事件，则——>当前触发的元素 }\

总结:

• 获取——用于判断/比较
• 设置——添加/修改