FOR循环

作用：按照一定的规律，重复去做某件事情，此时我们就需要使用循环来处理了

获取页面中的DOM元素

document.getElementById

在整个文档中，同过元素的ID属性值，获取到这个元素对象 getElementById是获取元素的方法，而document限定了获取元素的范围，我们把这个范围称之为：“上下文 [context]”

  1. var oBox = document.getElementById('box');
  3. 1. 同过getElementById获取的元素是一个对象数据类型的值（里面包含很多内置的属性）
  4. typeof oBox  =>"object"
  6. 2. 分析包含的属性
  7. className：存储的是一个字符串，代表当前元素的样式类名
  8. id：存储的是当前元素ID值（字符串）
  10. innerHTML：存储当前元素中所有的内容（包含HTML标签）
  11. innerText：存储当前元素中所有的文本内容（没有元素标签）
  13. onclick：元素的一个事件属性，基于这个属性，可以给当前元素绑定点击事件
  14. onmouseover：鼠标滑过事件
  15. onmouseout：鼠标离开事件
  17. style：存储当前元素所有的 "行内样式" 值（获取和操作的都只能是写在标签上的行内样式，写在样式表中的样式，无法基于这个属性获取到）
  19. ...

[context].getElementsByTagName

在指定的上下文中，通过元素的标签名获取一组元素集合 上下文是我们自己来指定的

  1. var boxList = oBox.getElementsByTagName('li');
  3. 1. 获取的结果是一个元素集合（HTMLCollection）,首先它也是对象数据类型的，结构和数组非常相似（数字作为索引，length代表长度），但是不是数组，我们把它叫做“类数组”
  5. boxList[0] 获取当前集合中的第一个LI（通过索引获取到具体的某一个LI即可）
  6. boxList.length 获取集合中LI的数量
  8. 2. 集合中的每一项存储的值又是一个元素对象（对象数据类型，包含很多的内置属性，例如：id/className...）
  10. boxList[1].style.color='red';  修改集合中第二个LI的文字颜色

函数

在JS中，函数就是一个方法（一个功能体），基于函数一般都是为了实现某个功能

  1. var total=10;
  2. total+=10;
  3. total=total/2;
  4. total=total.toFixed(2);//=>保留小数点后边两位（数字由一个方法toFixed用来保留小数点后面的位数）
  6. ....
  8. 在后续的代码中，我们依然想实现相同的操作（加10除以2），我们需要重新编写代码
  9. var total=10;
  10. total+=10;
  11. total=total/2;
  12. total=total.toFixed(2);
  14. ...
  16. 这样的方式会导致页面中存在大量冗余的代码，也降低了开发的效率，如果我们能把实现这个功能的代码进行“封装”，后期需要这个功能执行即可，这样就好了！

函数诞生的目的就是为了实现封装：把实现一个功能的代码封装到一个函数中，后期想要实现这个功能，只需要把函数执行即可，不必要再次编写重复的代码，起到了低耦合高内聚（减少页面中的冗余代码，提高代码的重复使用率）的作用

  1. function fn(){
  2.     var total=10;
  3.     total+=10;
  4.     total/=2;
  5.     total=total.toFixed(2);
  6.     console.log(total);
  7. }
  8. fn();
  9. fn();
  10. ...
  11. 想用多少次，我们就执行多少次函数即可
  13. =====
  14. ES3标准中：
  15. //=>创建函数
  16. function 函数名([参数]){
  17.     函数体：实现功能的JS代码
  18. }
  19. //=>函数执行
  20. 函数名(); 
  22. =====
  23. ES6标准中创建箭头函数：
  24. let 函数名(变量名)=([参数])=>{
  25.     函数体
  26. }
  27. 函数名();
  29. let fn=()=>{
  30.     let total=10;
  31.     ...
  32. };
  33. fn();

函数作为引用数据类型中的一种，它也是按照引用地址来操作的，接下来我们学习一下函数的运行机制

  1. function fn(){
  2.     var total=10;
  3.     total+=10;
  4.     total=total.toFixed(2);
  5.     console.log(total);
  6. }
  7. fn();
  9. 【创建函数】
  10. 1. 函数也是引用类型，首先会开辟一个新的堆内存，把函数体中的代码当做“字符串”存储到内存中（对象向内存中存储的是键值对）
  11. 2. 把开辟的堆内存地址赋值给函数名(变量名)
  13. 此时我们输出fn（切记不是fn()）代表当前函数本身
  14. 如果我们执行fn()，这是把函数执行
  15. 所以是否加小括号是两种不同本质的操作
  17. 【函数执行】
  18. 目的：把之前存储到堆内存中的代码字符串变为真正的JS代码自上而下执行，从而实现应有的功能
  20. 1.函数执行，首先会形成一个私有的作用域（一个供代码执行的环境，也是一个栈内存）
  21. 2.把之前在堆内存中存储的字符串复制一份过来，变为真正的JS代码，在新开辟的作用域中自上而下执行

函数中的参数

参数是函数的入口：当我们在函数中封装一个功能，发现一些原材料不确定，需要执行函数的时候用户传递进来才可以，此时我们就基于参数的机制，提供出入口即可

  1. //=>此处的参数叫做形参：入口，形参是变量（n/m就是变量）
  2. function sum(n,m){
  3.     //=>n和m分别对应要求和的两个数字
  4.     var total = 0;
  5.     total = n + m;
  6.     console.log(total);
  7. }
  9. //=>此处函数执行传递的值是实参：实参是具体的数据值
  10. sum(10,20);  //=>n=10 m=20
  11. sum(10); //=>n=10 m=undefined
  12. sum(); //=>n和m都是undefined
  13. sum(10,20,30); //=>n=10 m=20  30没有形参变量接收