HTML5学习笔记 —— JavaScript开发入门

一、注意的规范

1．所有操作符左右需要空格
2．每个级别之间一个Tab格
3．代码结束之后需要英文分号;
4．除了需要输入文字之外，其他所有符号均使用英文
引号的使用，自我保持一致

二、JavaScript引入方式

1．JavaScript引入方式分类

a.标签内联
b.内部书写
c.外部引入

2．JavaScript引入书写方式

a.标签内联
    <div class="wrap" onclick="alert('啊啊')"></div>

b.内部书写
    一般放在标签最后，即</body>的前面
        <script type="text/javascript">
            alert("啊啊");
    alert("我要\n换行");
    // 利用\n实现alert弹窗中换行。
        </script>
    JavaScript文件位置很重要，网页自上而下进行代码的运行。
    如果JavaScript放置在head标签当中，则会发生错误，如JavaScript效果因无法获取标签而无法运行。
    要解决此问题，则需要使用到widow.onload()事件。
    将JavaScript文件放置在所有标签后面</body>之前，能够保证网站的全部资源加载完成后再执行JavaScript的内容。

c.外部引入
    <script type="text/javascript" src="js/test.js" charset="UTF-8"></script>
    js文件中写入：
    alert("JS test");
    1)将type、src、charset等属性书写完整
    2)外部引入JavaScript的标签之间不允许有其他内容
    3)JavaScript文件位置很重要，网页自上而下进行代码的运行。
        如果JavaScript放置在head标签当中，则会发生错误，如JavaScript效果因无法获取标签而无法运行。
        要解决此问题，则需要使用到widow.onload()事件。
        将JavaScript文件放置在所有标签后面</body>之前，能够保证网站的全部资源加载完成后再执行JavaScript的内容。
    4)需要引入的JavaScript文件中，不要再出现<script></script>标签

3．JavaScript引入方式优先级

a.外部引入
    1)外部引入可维护性最强
    2)针对单页面，有代码冗余
    3)针对整站来说，外部引入加载速度最快
    4)外部引入良好的使用了缓存机制
    5)外部引入有可能造成服务器的请求压力

b.头部书写
    1)针对单页面，头部书写加载速度更快
    2)针对整站，存在代码冗余
    3)不会造成服务器请求压力
    4)代码可维护性一般

c.标签内部
    1)标签内部书写会存在代码冗余，不便于维护
    2)没有很好的实现结构和JS的相分离

d.加载速度
    1)针对单页面，头部书写加载速度更快
    2)针对整站来说，外部引入加载速度更快
    3)外部引入有良好的使用了缓存机制
    4)外部引入有可能造成服务器的请求压力

e.引入方式选择依据
    代码量少 → 加载速度快 → 用户体验好

三、DOM操作
1.DOM发展史

此处省略

2.DOM树

3.DOM主要节点

a.标签节点
b.属性节点
c.文本节点

4.节点的类型

使用nodeType判断节点类型

a.标签节点 —— 1
b.属性节点 —— 2
c.文本节点 —— 3
注意：在结构中输入的回车也会被认为是一个节点。
d.注释节点 —— 8
e.文档碎片 —— 11

5.DOM的节点操作

a.获取节点
带()的内容表示方法，如getElementById("demo")
    1)通过id名获取标签
        getElementById
        var demo = document.getElementById("demoId");

    2)通过类名获取标签
        getElementsByClassName
        var demo = document.getElementsByClassName("demoClassName");
        兼容性：谷歌、火狐支持、IE不支持
        兼容方法：
        类库封装
        http://www.h5course.com/a/2015042863.html

    3)通过标签名获取标签
        getElementsByTagName
        var demo = document.getElementsByTagName("div");

    4)通过属性获取标签
        <input type="text" name="ipt" value="获取标签">
        var iptEle = document.getElementsByName("ipt");
        兼容性：谷歌、火狐、IE都支持

    5)禁止直接用id名进行获取标签
        a)JavaScript变量名与id名重复的时候，部分浏览器会发生错误，特别是IE
        b)要防止id重复
        c)后期JavaScript代码不好维护
        d)id名与JavaScript属性名一样的时候会出现问题
            btn.onclick = function() {
                alert("我能弹出来嘛？");
            }
        // 可以弹出，但如果设定变量为var btn = 1;就会错误

b.获取节点类型
    // 获取outerEle的节点类型
    console.log(outerEle.nodeType);
    // 获取outerEle的所有子节点类型
    console.log(outerEle.childNodes);
    // 获取outerEle各个子节点的类型。
    console.log(outerEle.childNodes[0].nodeType);
    console.log(outerEle.childNodes[1].nodeType);
    console.log(outerEle.childNodes[2].nodeType);
    console.log(outerEle.childNodes[3].nodeType);

c.获取节点的名称
    // 获取outerEle的节点名称
    console.log(outerEle.nodeName);
    // 获取outerEle各个子节点的名称
    console.log(outerEle.childNodes[0].nodeName);
    console.log(outerEle.childNodes[1].nodeName);
    console.log(outerEle.childNodes[2].nodeName);
    console.log(outerEle.childNodes[3].nodeName);

d.针对节点本身的操作：增   删   改   查
    1)增加节点
        新增节点步骤：
        创建节点 —— 添加节点
        创建节点：
        创建标签节点
        document.createElement(标签名);
        创建文本节点
        document.createTextNode(文本内容);
            var newEle = document.createElement('h1');
            var newText = document.createTextNode('我是文本节点');
            console.log(newEle);
            console.log(newText);

        添加节点：

        appendChild()方法：
        parentNode.appendChild(node);
        appendChild方法添加的节点都在原有节点的最后一个。
        node是要添加的子节点
            // 将文本内容添加到新增标签中
            newEle.appendChild(newText);
            console.log(newEle);
            // 将新增标签添加到DOM树的outerEle节点中
            outerEle.appendChild(newEle);

        insertBefore()方法：
        parentNode.insertBefore(newNode, existingNode);
            // 将新增节点增加到原有outerEle节点中的innerEle标签之前
            outerEle.insertBefore(newEle, innerEle);

        appendChild()方法和insertBefore()方法都是对id的操作，只能操作一次，最后的操作会覆盖之前的所有操作。

    2)删除节点
        parentNode.removeChild(node);
        node是需要删除的节点
        删除parentNode的子节点中，指定的node节点及其包含的所有子节点，但该方法不能用来删除parentNode孙节点。
            // 删除outerEle节点中的innerEle节点，以及innerEle中的所有节点
            outerEle.removeChild(innerEle);

        删除所有子节点的方法：
        因在使用for循环删除所有子节点时，每删除一个子节点，子节点的数量就会边少。
        如果采用i++的方法进行操作，则会导致子节点的编号增加后，原本大编号的子节点因为节点数量减少，编号跟着减小而无法被找到。
        所以要使用i--的方式进行删除。

<body>
  <ul id="parentUl">
      <li>
        <a href="#">
          <img src="logo.png" alt="" title="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="logo.png" alt="" title="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="logo.png" alt="" title="">
        </a>
      </li>
  </ul>
  <script>
    var parent = document.getElementById('parentUl');
    var child = parent.childNodes;
    var len = child.length;

    parent.onclick = function() {
      for (var i = len - 1; i >= 0; i--) {
        console.log(i);
        console.log(parent.childNodes[i]);
        parent.removeChild(parent.childNodes[i]);
        console.log(parent.childNodes);
      }
    }

    3)替换节点
        parentNode.replaceChild(newNode, oldNode);
        将parentNode中的oldNode用newNode来进行替换，但该方法不能用来替换parentNode孙节点。
            outerEle.replaceChild(newEle, innerEle);

    4)查找节点
        节点关系：

        childNodes：所有子节点，包括所有类型
        console.log(outerEle.childNodes);

        children：所有是标签类型的子节点
        使用children属性获取子集，只可获取子集内的所有元素，而不可制定某种元素如div
        如：var boxChi = boxEle.children;
        console.log(outerEle.children);

        parentNode：父节点
            parentNode只是查找父级，与定位无关，只和DOM树结构有关
            console.log(innerEle.parentNode);

        offsetParent：获取一个元素用来定位的父级
            console.log(innerEle.offsetParent);
            参考的是有设置position定位（ position: relative;和position: absolute;都可以）的上一级（可能是父级，也可能是祖级等等）。
            如果没有设置定位，则参考body（实际指的是文档）。

        firstChild / firstElementChild：第一个子节点
        lastChild / lastElementChild：最后一个子节点
        nextSibling / nextElementSibling：下一个兄弟节点
        previousSibling / previousElementSibling：上一个兄弟节点
        注意：firstElementChild等查找标签节点的方法，只能IE9+支持，IE8-只能利用nextSibling +nodeType进行封装库函数进行查找。
            // 输出的是最后一个节点，无论节点类型。
            console.log(outerEle.lastChild);
            // 输出的是最后一个标签节点
            console.log(outerEle.lastElementChild);

    5)复制（克隆）节点
        node.cloneNode(deep);
        deep为布尔值，
        true：深复制：复制节点包含其后代的所有各类节点
        false：浅复制：只复制本身，不包含其中的所有内容，例如文本节点
        IE6~8会复制事件处理程序（用attachEvent绑定方法）
        解决办法：先移除事件再克隆

e.针对节点属性的操作
    1)样式
    a)获取标签样式的方法

http://www.h5course.com/a/20150503117.html

        function getStyle(eleObj, property) {
            var proVal = 0;
            // 因在火狐中有时用window.getComputedStyle获取不到样式，所以该为document.defaultView
            if (document.defaultView) {
                // 属性的两种写法
                proVal = document.defaultView.getComputedStyle(eleObj)[property];
                // proVal = document.defaultView.getComputedStyle(eleObj).property;
                // .property无效，因传进的参数是字符串，字符串和eleObj对象无关，所以无法使用。但.width的方法是可以使用的
            } else {
                proVal = eleObj.currentStyle[property];
                // proVal = eleObj.currentStyle.property;
            }
            // 函数的返回值
            return proVal;
        }

    b)通过style属性的样式属性操作

        changeDiv.style.width = "400px";

    c)通过style属性的cssText属性操作
        boxEle.style.cssText = "width: 200px;height: 200px;background-color: pink;"

http://www.h5course.com/a/20151107308.html

    d)通过类名操作
        changeDiv.className = "big";
        HTML5-类库制作 类名的各种操作

http://www.h5course.com/a/2015042979.html

    2)属性
        设置：ele.setAttribute(name, value);
        获取：ele.getAttribute(name);
        谷歌及IE8+获取类名alert(outerEle.getAttribute('class'));
        IE6、7获取类名alert(outerEle.getAttribute('className')); // IE6中认为className才对应类名
        移除：ele.removeAttribute(name);

    3)内容
        a)表单元素
            value
            value通常是表单元素的属性，可以进行获取和设置
            获取：console.log(firstVal.value);
            设置：sumResult.value= parseInt(firstVal.value) + parseInt(secondVal.value);
        b)标签元素
            innerHTML：设置或获取位于对象开始和结束标签内的HTML
            即获取<em id="result">200</em>标签内部的内容“200”
            console.log(sumResult.innerHTML); —— 获取
            console.log(sumResult.innerHTML = 600); —— 设置

            outerHTML：设置或获取对象（本身）及其内容的HTML形式
            innerText：设置或获取位于对象开始和结束标签内的文本
            outerText：设置（包含标签本身）或获取（不包括标签）对象的文本

            兼容：FF不支持innerText和outerText
            区别：在IE6~8 innerHTML和outerHTML获取到的标签均为大写形式（无缩进）
              IE9+、谷歌、FF会将内容原样输出（包含空格、缩进）返回HTML。
              innerText与outerText获取的时候无区别，设置的时候，outerText不仅仅能够替换元素的子节点，还会替换整个元素（节点本身）。

<div class="wrap" id="box">
    123
    <div>456</div>
</div>
    // 这个目的是测试innerHTML获取谁的什么内容？
    // alert(boxEle.innerHTML);
    // console.log(boxEle.innerHTML);
    // // 这个目的是测试innerHTML给谁设置内容？
    // boxEle.innerHTML = "内容";

    // alert(boxEle.outerHTML);
    // console.log(boxEle.outerHTML);
    // boxEle.outerHTML = "内容";

    // alert(boxEle.innerText);
    // console.log(boxEle.innerText);
    // boxEle.innerText = "内容";

    // alert(boxEle.outerText);
    // console.log(boxEle.outerText);
    // boxEle.outerText = "内容";

四、详解

1.事件的种类

a.一般事件
    鼠标、键盘相关
b.表单事件
    表单相关
c.页面事件
    与页面有关的事件
    举例：
    load事件
    onload网站资源全部下载完成后才出发执行
    1)防止JavaScript无法正常获取标签
    2)防止JavaScript阻塞页面的渲染
    window.onload = function() {
        var test = document.getElementById("box");
        console.log(test);
    }   
    3)load事件下定义的变量、函数等，都属于window.onload事件，而不属于全局
    JavaScript文件位置很重要，网页自上而下进行代码的运行。
    如果JavaScript放置在head标签当中，则会发生错误，如JavaScript效果因无法获取标签而无法运行。
    要解决此问题，则需要使用到widow.onload()事件。
    将JavaScript文件放置在所有标签后面</body>之前，能够保证加载完html结构后再执行JavaScript的内容。

2.DOM0级事件

a.DOM0级事件绑定方法
    1)方法一
        对象.on事件类型 = function() {
        // 里面书写功能代码
        }
        sumBtn.onclick = function() {
            alert("111");
        }
    2)方法二
        对象.on事件类型 = 方法名;
        sumBtv.onclick = showResult;
        function showResult() {
            alert("222");
        }

b.DOM0级事件特点
    1)书写简单、阅读简单
    2)遵循冒泡的运行机制
    3)兼容性好
    4)绑定多个同种事件类型时，最后的一个会覆盖之前的事件
    5)为同一个对象绑定多个不同事件类型，不会发生覆盖，但有可能会同时触发，如单击事件和双击事件。
    6)IE中默认在window.even下，需要处理兼容。

    测试阻止冒泡是否对DOM0也有用

3.DOM2级事件绑定

a.事件绑定
    1)eleObj.addEventListener（事件类型，函数名或者匿名函数，true/false）
        第三个参数：true代表捕获，false代表冒泡
        兼容：IE9+、FF
    2)eleObj.attachEvent(on+事件类型, 函数名/匿名函数);
        IE10-可以兼容、仅IE11不支持
    3)attachEvent方法的this指向问题
        attachEvent方法无论在何时何地被调用，他所指向的对象都是window
        test.attachEvent('onclick', show);
        function show(){
            console.log(this);
        }
        // 输出[object] window
    4)更改attachEvent方法的this指向
        利用call方法修改this指向由window改为触发事件的对象
        function addEvent(ele, eventType, handler) {
            if (ele.addEventListener) {
                ele.addEventListener(eventType, handler, false);
            } else if (ele.attachEvent) {
                ele.attachEvent("on" + eventType, function() {
                    // 修改指向
                    handler.call(ele);
                    return handler;
                });
            }
        }

b.事件移除
    1)eleObj.removeEventListener（事件类型，函数名或者匿名函数，true/false）
        第三个参数：true代表捕获，false代表冒泡
        兼容：IE9+、FF

    2)eleObj.detachEvent(on+事件类型, 函数名/匿名函数);
        IE10-可以兼容、仅IE11不支持

    3)总结：如果addEventListener、attachEvent绑定的事件处理函数是匿名函数，则事件无法移除。
        移除事件方法中的参数值与绑定事件方法中的参数值必须保持一致，否则无法移除事件。
        如下：
        outerEle.addEventListener('click', function() {
            conEle.innerHTML += 1;
            outerEle.removeEventListener('click', function() {

            }, false);
        }, false);
        此时需要使用函数名进行移除，如下：
        outerEle.addEventListener('click', function show() {
        // 此方法等同于使用匿名函数，不建议使用，会出现无法清除的情况
            conEle.innerHTML += 1;
            outerEle.removeEventListener('click', show, false);
        }, false);

        // 使用如下方法
        function showInfo() {
            alert(1);
            outerEle.removeEventListener('click', showInfo, false);
        }
        outerEle.addEventListener('click', showInfo, false);

c.事件流
    从页面中接收事件的顺序

    1)事件冒泡
        从最内层的标签事件往外逐步执行，直到执行到document事件
        如果某层标签不存在事件，则跳过。
        若不存在事件的层级为触发的层级，则执行外层的事件。
        注意：IE9+、FF将事件一直冒泡到window对象
        兼容：IE9+、FF兼容，执行到window
              IE8-兼容，只执行到document，不会执行window
        DOM0支持冒泡。

    2)事件捕获
        从window对象的事件，逐步向内层标签执行，最后执行点击的最内层的标签的事件。
        如果某层标签不存在事件，则跳过。
        若不存在事件的层级为触发的层级，则执行外层的事件。
        兼容：IE9+、FF
          IE8-不兼容

    3)DOM2级规范是从document开始接收事件，但事实上很多浏览器未按照此规范进行。

d.事件对象
    ele.onclick = function(e) {

    }
    事件对象存储与事件有关的所有信息，若要实现对标签的操作，需要获取标签，而事件目标对象不需要获取。
    在IE8-，用DOM0级绑定的事件方法，认为事件对象是在window.event下，导致通过e参数获取到事件对象

e.事件目标对象
    IE：e.srcElement
    document.attachEvent('onclick', function(e) {
        console.log(e.srcElement);
    });
    FF：e.target
    document.addEventListener('click', function(e) {
        console.log(e.target);
    }, false);

f.阻止默认事件
    IE：e.returnValue = false;
    FF：e.preventDefault();
    如下代码会阻止a标签的链接跳转

    <body>
        <a href="http://www.h5course.com/"class="outer-box" id="outerBox">

        </a>
        <script type="text/javascript">
            var outerEle = document.getElementById('outerBox');
            var innerEle = document.getElementById('innerBox');
            var conEle = document.getElementById('con');

            outerEle.addEventListener('click', function(e) {
               e.preventDefault();
            }, false);
        </script>
    </body>

g.阻止事件冒泡
    IE：e.cancelBubble = true;
    FF：e.stopPropagation();
    表示执行到当前冒泡代码，下一段冒泡代码不执行。
    如果e.stopPropagation();放在document中时，冒泡不执行document，但会执行window。
    如果e.stopPropagation();放在window中时，window不执行，其他会执行。
    如下代码outerEle会弹出，document和window被阻止
    window.addEventListener('click', function() {
        alert('window');                        
    }, false);

    document.addEventListener('click', function() {
        alert('第零个');
    }, false);

    outerEle.addEventListener('click', function(e) {
        e.stopPropagation();
        alert('第一个');
    }, false);

    innerEle.addEventListener('click', function() {
        alert('第二个');            
    }, false);

    conEle.addEventListener('click', function() {
        alert('第三个');            
    }, false);

h.事件委托
    原理：事件绑定到父级（祖父、document也行，只要能接收到事件就行）。
    利用冒泡的原理，当事件接收到父级的时候，检测目标对象（target/srcElement）。
    判断点击的是不是你想要的目标，如果是执行相应的操作。
    注意：事件委托只能同一类型事件。
    var outerEle = document.getElementById('outerBox');
    // 1. 父级绑定事件
    outerEle.addEventListener('click', function(e) {
        // 2. 检测目标对象是否是你想要的
        if (e.target.className == "bg") {
            // 3. 执行相应的操作
            e.target.style.backgroundColor = 'red';
        }
        console.log(e.target.nodeName);
        // 2. 检测目标对象是否是你想要的
        if (e.target.nodeName == "P") {
            // 3. 执行相应的操作
            e.target.style.backgroundColor = 'red';
        }
    }, false);
    优势：
    1)大大减少了事件处理程序的数量，在页面中设置事件处理程序的时间就更少了
        （DOM引用减少——也就是我们通过id去获取标签，所需要的查找操作以及DOM引用也就更少了）。
    2)document（注：最为推荐的是绑定在document上）对象可以很快的访问到。
        而且可以在页面生命周期的任何时点上为它添加事件处理程序，并不需要等待DOMContentLoaded或者load事件。
        换句话说，只要可单击的元素在页面中呈现出来了，那么它就立刻具备了相应的功能。
        2.1 绑定方面：
        如果存在绑定document和父级的情况，在绑定的时候，document在网页加载的时候就会直接绑定事件。
        绑定父级的话，需要等父级加载完成之后才可以进行绑定操作，所以绑定的时间会比document慢。
        任意时间就可以触发。
        2.2 事件的触发（参考）：
        事件的触发时，如果事件绑定在document上。
        同时从点击的对象以上的各级中，未绑定同样事件的时候，事件的就直接冒泡到document，中间的各级都不需要触发事件。
        如果绑定在父级上，事件冒泡时，同样遵循一直冒泡到document。
        但是在冒泡的过程中，父级会触发事件，触发的过程会造成事件的运行，消耗一定的时间。
        所以绑定在document运行时会较快。
    3)整个页面占用的内存空间会更少，从而提升了整体的性能。

i.兼容库书写
    1)事件绑定
    2)事件移除
    3)事件目标对象
    4)阻止默认事件
    5)阻止事件冒泡

• 五、函数

1．函数的概念

函数的封装：代码量、性能、维护性、可阅读性强
函数用来封装一段可执行代码，可以同时在不同地方进行调用，减少相同代码重复书写，减少代码量，提高运行性能。
维护性好，只需要更改函数内部代码，即可实现功能的转换。
函数单独封装后，与其他代码分离，提高阅读性。

2．函数的定义语法

function 函数名() {
// 功能代码
return 返回值
}
举例
// 实现两个数之间的和
function sum(start, end) {
    var sum = 0;
    for (var i = start; i <= end; i++) {
        sum += i;
    };
    return sum;
}
console.log(sum(1, 100));
console.log(sum(10, 1000));
console.log(sum(100, 10000));

3．形参、实参的概念和区别

实参是具有实际意义，是一个实际的值。

形参不具有实际意义，其值在函数调用时再传入，传递参数时形参与实参一一对应（推荐）。
若函数的形参名和内部定义的变量名相同时，在定义的变量没有被赋值之前，该变量的值由形参传入，赋值之后，改为被赋值的新值。

函数没有对应实参时，默认返回值为undefined。

// 函数的调用/执行：函数名(实参)；
function sum() {
    var a = 10;
    var b = 20;
    // console.log(a + b);
    // 函数返回值
    return a + b;
}
// 函数的调用/执行：函数名(形参)；
function sum(first, second) {
    return first + second;
}
console.log(sum(20, 40));

4．arguments

a.arguments是什么
    arguments是在函数内部以一个类似数组的形式来存储参数的东西，而这个“东西”是对象，不是数组~
    函数在被调用时，传递进去的参数被保存在arguments对象中（再次强调：类似数组的方式），arguments的长度取决于传进函数的参数个数。
    如果传进的参数少于函数定义接收的个数，那么后面的参数视为未定义（即假设函数接收3个参数，如果只传进2个，那么第3个参数值视为undefined）。
    如果传进的参数大于函数定义接收的个数，多出来的参数值也会被保存在arguments中，只是在函数执行时，多出来的参数不会被使用。

b.arguments的存储规则
    1)arguments在函数实参传入时进行创建，此时传入的参数定义了arguments的初始长度。
        形参和arguments的一一对应关系在此时建立，之后不可更改。
        但形参与arguments的值可以在函数中使用arguments[i] = j;的方式进行添加和修改。

    function show (a, b) {
        arguments[2] = 3;
        arguments[3] = 4;
        console.log(arguments);
    }show(1, 2);
    // 输出[1, 2, 2: 3, 3: 4]

    2)函数传入实参多余定义的形参时，则顺位存储在arguments中，可被输出。

    function show (a, b) {
        console.log(arguments);
    }show(1, 2, 3);
    // 输出 [1, 2, 3]

    3)函数传入的实参少于定义的形参时，已传入的参数存储在arguments中，同时将已传参的形参和arguments的值一一对应。
        未传参的形参不再和arguments一一对应，即再次定义或修改形参的值时，相当于在函数内部另外开辟一个空间存储形参。
        而新增加的arguments值，即使其位置与未传参的形参相同，也不再影响未传参形参的值。

        function show (a, b, c) {
            console.log(a);
            console.log(b);
            console.log(c);
            console.log(arguments[0]);
            console.log(arguments[1]);
            console.log(arguments[2]);
            a = 1;
            b = 2;
            c = 3;
        // 运行以上三个赋值语句时，输出11, 22, undefined, 11, 22, undefined, 1, 2, 3, 1, 2, undefined
            // arguments[0] = 1;
            // arguments[1] = 2;
            // arguments[2] = 3;
        // 运行以上三个赋值语句时，输出11, 22, undefined, 11, 22, undefined, 1, 2, undefined, 1, 2, 3
            console.log(a);
            console.log(b);
            console.log(c);
            console.log(arguments[0]);
            console.log(arguments[1]);
            console.log(arguments[2]);
        }show(11, 22);

c.arguments.callee
    arguments.callee是arguments的属性，表示对函数本身的引用（可以理解为代表的是函数名或函数的地址）。
    可用于递归调用，防止函数名变动后由于递归调用时的函数名未手动变更造成错误。

    function show () {
        console.log(arguments.callee);
        arguments.callee();
    }show();


    // 无限循环输出
    // function show () {
    //  console.log(arguments.callee);
    //  arguments.callee();
    // }show();

    d.arguments.callee.caller或函数名.caller
    .caller属性将返回引用当前函数的函数
    注意：
    1).caller属性只有在应用当前函数的函数被调用时才有效
    2)如果当前函数未被其他函数调用时，默认为被最顶层即window调用，则.caller输出null

    function parent () {
        child();
    }
    function child () {
        console.log(arguments.callee.caller);
    }
    child();        // 当执行child();时，输出null
    // parent();    // 当执行parent();时，输出function parent () {
        child();
    }

5．函数的调用/执行

a.函数名后加()即表示调用该函数。
b.将函数赋值给变量的方法为，直接将函数名赋值给变量，函数名之后不能加()。若加()则表示将函数运行后的结果赋值给变量
c.函数的未书写return时，默认返回值为undefined
d.函数在使用 return 语句时，函数会停止执行，并返回指定的值。
e.函数的return语句后，若是一个赋值语句，会在赋值之后，同时将所赋的值做为函数运行的结果返回给函数
f.实参是具有实际意义，是一个实际的值。
g.形参不具有实际意义，其值在函数调用时再传入，传递参数时形参与实参一一对应（推荐）。
h.函数没有对应实参时，默认返回值为undefined。
i.arguments访问的是实际参数，对实参或arguments的修改都会同步反映到两者身上，但能arguments访问的前提是实参必须先被定义

// 函数名加括号()时，表示调用函数，未加()时，表示函数本身。
function a() {
    n = n + 1;
}
var y = a;          // 表示将函数a赋值给变量y，函数并不进行调用运行
console.log(y); 输出函数
var y = a();        // 表示调用运行a函数，并把a函数的结果赋值给y
console.log(y); 因函数没有返回值，默认返回值undefined，故输出undefined

// 函数的调用/执行：函数名(实参)；
function sum() {
    var a = 10;
    var b = 20;
    // console.log(a + b);
    // 函数返回值
    return a + b;
}
console.log(sum());
// 函数的调用/执行：函数名(形参)；
function sum(first, second) {
    return first + second;
}
console.log(sum(20, 40));

// 使用 return 语句时，函数会停止执行，并返回指定的值
function outer(num) {
    num++;
    console.log(num);
    return function() {
        num++;
        console.log(num);
    }
    num++;              // 不执行
    console.log(num);       // 不执行
}
var result1 = outer(0);     // 输出1
result1();                  // 输出2
result1();                  // 输出3
var result2 = outer(1);     // 输出2
result2();                  // 输出3
result2();                  // 输出4

// 匿名函数
// 可用来解决命名冲突
var year = 2016;
(function() {
    var year = 2015;
    console.log(year);
})();
console.log(year)

// 非匿名函数也可以解决命名冲突
var year = 2016;
function show() {
    var year = 2015;
    console.log(year);
} show();
console.log(year)

6．作用域

a.作用域分类
    1)全局作用域：在window下属于全局作用域
    2)局部作用域：每个函数，均会创建一个局部作用域
b.不同作用域的访问关系：
    函数外部不能访问函数外部
    var year = 2016;
    function show() {
        var year = 2015;
        console.log(year);
    } show();
    console.log(year)
    输出：
    2015
    2016

7．编译

a.预编译期：进行空间的创建（var和function才会创建空间）

b.执行期：用于空间的赋值，顺序从上到下

c.多个作用域形成作用域链
    在局部作用域当中出现变量的时候，首先查找当前的作用域是否具有存储空间（开辟空间）。
    如果有则直接采用，如果没有则需要向父级进行查找，如果父级没有则继续往上查找，知道找到window下为止。
    如果window下也不存在该存储空间，会在全局作用域下进行空间的创建。而这种作用域层层的关系，成为作用域链。

d.函数的编译执行规则
1)同名的函数所创建的空间即函数本身会发生覆盖，后创建的函数覆盖之前的函数
2)若是匿名函数被调用多次，其所开辟的空间互相之间相互独立，相互之间不影响

    (function() {
        var a = 1;
        function inner() {
            a += 1;
            console.log(a);
        }inner();
    })();
    // 输出2
    (function() {
        var a = 1;
        function inner() {
            a += 1;
            console.log(a);
        }inner();
    })();
    // 输出2
    (function() {
        var a = 1;
        function inner() {
            a += 1;
            console.log(a);
        }inner();
    })();
    // 输出2

    3)同一个函数被赋值给不同变量时，各变量所代表的都是单独的函数，各自之间开辟的空间互相不受影响
        匿名函数也具有相同性质，一旦被赋值给某个变量，在被调用时，就会在该变量下开辟固定的空间来存放变量。

        function outer() {
            var a = 1;
            return function inner() {
                a += 1;
                console.log(a);
            }
        }
        var f1 = outer();
        f1();           // 输出2
        f1();           // 输出3
        var f2 = outer();
        f2();           // 输出2
        f2();           // 输出3

        function outer() {
            var a = 1;
            return function() {
                a += 1;
                console.log(a);
            }
        }
        var f1 = outer();
        f1();           // 输出2
        f1();           // 输出3
        var f2 = outer();
        f2();           // 输出2
        f2();           // 输出3

        var f1 = (function() {
            var a = 1;
            return function() {
                a += 1;
                console.log(a);
            }
        })();
        f1();           // 输出2
        f1();           // 输出3
        var f2 = (function() {
            var a = 1;
            return function() {
                a += 1;
                console.log(a);
            }
        })();
        f2();           // 输出2
        f2();           // 输出3

    4)若函数的形参名和内部定义的变量名相同时，在定义的变量没有被赋值之前，该变量的值由形参传入，赋值之后，改为被赋值的新值。

    // 例子
    var a = 100;
    function show (a) {
        console.log(a);
        a++;
        console.log(a);
        var a = 10;
        console.log(a);
        var a = a++ + 20;
        console.log(a);
        a = ++a + 20;
        console.log(a);
    }show(600)
    600 601 10 30 51

    // 例子变化
    var a = 100;
    function show (a) {
        console.log(a);
        a++;
        console.log(a);
        var a = 10;
        console.log(a);
        a = a++;
        console.log(a);
        var a = a + a++ + a + 20;
        console.log(a);
        a = ++a + 20;
        console.log(a);
    }show(600);
    console.log(a);
    600 601 10 10 51 72 100

    5)全局变量只有赋值语句才可以定义，包括连续赋值的语句。
        单独用一个a;的语句是无法定义出undefined的全局变量的，此时浏览器会报错。
        因为只有赋值语句才会触发向上查找该变量的存储空间，若未查找到，才会开辟空间，而a;语句没有赋值，所以不会触发查找。

        function outer() {
            function inner() {
                a;
                console.log(a);
            }inner();
        }outer();
        // 报错

        (function() {
            var a = b = 5;                  // b变量被赋值语句定义为全局变量
            console.log(a);                 // 输出5
            console.log(typeof(a));         // 输出number
            console.log(b);             // 输出5
            console.log(typeof(b));         // 输出number
        })();
        // console.log(a);                  // 无法输出a，因a是函数中的变量，在全局中未定义，输出则会报错
        console.log(typeof(a));             // 输出undefined
        console.log(b);                 // 输出5
        console.log(typeof(b));             // 输出number

    6)全局变量的调用语句只有在全局变量定义的语句之后才有效，如果在定义语句之前，则会报错。
        因为变量在被赋值的时候才开始向上查找该变量的值，若未在父级查找到，才会在全局作用域上开辟空间。
        在赋值语句运行之前是不会开辟空间的，所以变量在被调用时，无法查找到空间，即会报错

        function outer() {
            console.log(a);
            function inner() {
                a = "内容";
                console.log(a);
            }inner();
        }outer();
        // 报错，a未定义

    7)对于同一变量名，同时存在局部变量和全局变量，或者局部变量和父函数的局部变量时。
        无论调用局部变量是在定义之前还是之后，都只会查找局部变量。

    function outer() {
        a = "内容1";
        function inner() {
            console.log(a);
            var a = "内容2";
            console.log(a);
        }inner();
    }outer();
    console.log(a);

    // 输出undefined 内容2 内容1

8)预编译期创建空间时，不会对变量进行赋值操作，此时变量的值为undefined，赋值是在函数被调用执行的时候才会进行。
如果调用函数时，函数内部在定义变量的语句之前调用变量，则此变量的值为undefined。

    function outer() {
        var a = "内容1";
        function inner() {
            console.log(a);
            var a = "内容2";
            console.log(a);
        }inner();
    }outer();

    // 输出undefined 内容2

    9)在定义变量之前的语句调用该变量时，变量的值虽然是undefined，但也是可以参与运算，只是将undefined的值当做一个字符串参与计算。

    var a = "HTML5";
    b = "你好";
    Test();
    function Test() {
        console.log(a + " " + b);
        var a = "welcome";
        var b = "h5";
        console.log(a + " " + b);
    }
    console.log(a + " " + b);

    // 输出undefined undefined
    // 输出welcome h5
    // 输出HTML5 你好

    10)函数如果在其内部调用外部函数时，外部函数所开辟的空间，即外部函数内部的变量，与调用的函数空间无关，只与外部函数的空间相关。
        即两个单独开辟空间的函数，无论如何调用，都不影响它们的空间之间的关系。
        函数的空间值在预编译期被开辟，与执行期（调用的过程）无关。

        var name = "a";
        function first() {
            alert(name);
        }
        function second() {
            var name = "b";
            first();
        }
        second();
        // 输出a

    11)函数如果调用其内部函数或兄弟函数中的变量时，会因查找不到该变量而认为该变量为未定义，造成报错

        function outer() {
            var a = 2;
        }outer();
        function show() {
            var b = 0;
            b += a;
            function inner() {
                var a = 1;
            }inner();
            console.log(b);
        }show();
        // 报错a未定义

六、调试

1．调试方法分类

a.注释方式
b.弹窗命令
c.控制台
d.文档命令

2．调试方法详解

a.注释方式
    1)单行注释
        // 空格书写注释内容
        // alert("JS test");
        单行注释不可换行
    2)多行注释（块注释）（函数功能的注释）
        注释规范：
        多行注释可以换行

        <script type="text/javascript">
            /*
             * [sum 求和的功能]
             * @param {[数字]} a [第一个数字]
             * @param {[数字]} b [第二个数字]
             * @return {[数字]}  [求和的结果]
             * sum(1, 100) 使用范例
             * 作者：陈立
             * 时间：2015.12.30
             */
            function sum(a, b) {
                return a + b;
            }
        </script>使用范围：

        针对文件/函数的功能以及用法进行描述的时候用块注释，其他情况下一般使用单行注释。
b.弹窗命令
    弹窗命令种类：alert、confirm、prompt
        alert("警告弹窗");
        confirm("确认弹窗");
        prompt("对话弹窗");

        <script type="text/javascript">
            alert("警告弹窗");
            confirm("确认弹窗");
            prompt("对话弹窗");
        </script>

    注意：此方法不常用。
c.控制台调试
    1)  谷歌控制台
        a)查看谷歌控制台（console）的提示信息
        b)控制台输出命令

        <script type="text/javascript">
            console.log("你好");
        </script>

            注意：此方法常用
        c)测试JavaScript代码的执行时间，timeName需要保持
            兼容：IE8+支持
            命令：
            console.time(timeName);
                console.timeEnd(timeEnd);
            例子：

            console.time('test');
            for (var i = 0; i < 100; i++) {
                for ( var j = 0; j < 100; j++) {
                    console.log(i * j);
                }
            }
            console.timeEnd('test');

    2)firebug
    3)IE Developer Tools
d.文档命令
    document.write();
    document.writeln();
例子：
    document.write("<p>啊啊</p>");
    document.writeln("哦哦");
    document.writeln("哦哦<br />");
    document.writeln("<pre>啦啦</pre>");
    // pre元素可以定义预格式的文本（原样输出）
    含义：document是文档对象，write是方法/功能
    对象：方法的调试调用write功能
    区别：write与writeln方法类似，只是writeln每个表达式之后会多写一个换行符号（\n属于转义字符，含义就是换行。
    但需要用<pre></pre>才会运行\n）。
    注意：面试要能写，因会在网页中显示内容，影响排版，故不常用。

e.使用高级计时器计算代码运行时间


// 计算代码运行时间方法
var time1 = new Date();
// 需要计算运行时间的代码
var time2 = new Date();
var difference = time1.getTime() - time2.getTime();
console.log(difference);
，