前端学习之JavaScript入门

有关于上述内容的详细问题参见JavaScript高级程序设计

引用类型

ECMAScript中的所有参数传递的都是值。当从一个变量向另一个变量复制引用类型的值时，同样也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。不同的是，这个值的副本实际上是一个指针，而这个指针指向存储在堆中的一个对象。复制操作结束后，两个变量实际上将引用同一个对象。

Object对象

Object类型是所有它的实例的基础，Object类型所具有的任何属性和方法同样存在于更具体的对象中。使用new操作符或对象字面量创建Object实例。

var person = new Object(); person.name="Nicholas";

var person = { name:"Nicholas", age:29 };
var person = { "name":"Nicholas", "age":29 };

var person = {};
person.name="Nicholas";

访问

person.name 或 person["name"]
for(var i in obj){
	// i是对象中的成员名称
	// obj[i]是对象中的成员值
	console.log(i,obj[i]);  
}  // 输出   name Nicholas age 29

Fonction对象

函数实际上是对象，每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。

创建

匿名函数自调用:

(function(a,b){
	alert(a+b);
})();

参数和返回值

ECMAScript中的函数在定义时不必指定是否返回值，return语句可以不带任何返回值，函数将返回undefined值。ECMAScript函数不介意传递进来多少个参数，也不在乎传进来来参数是什么类型，原因是ECMAScript中的参数在内部是用一个数组表示的，函数接受到的始终都是这个数组，而不关心数组中包含哪些参数。在函数体内可以通过arguments对象访问这个参数数组。arguments的值永远与对应命名参数的值保持同步。修改argument[x]的值就意味着修改对应命名形参的值；但是它们的内存空间是独立的，但它们的值会同步而已。如果只传入一个参数，那么argument[1]设置的值不会反应到对应命名参数中。argument的长度由传入的参数个数决定，没有传递值的命名参数将被自动赋值为undefined值。

属性和方法

函数内部属性和方法：arguments.callee、this、caller、length、prototype、prototype、apply()、call()
arguments对象还有一个名叫callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。

function factorial(num) {
	if(num <= 1){
		return 1;
	}else{
		return num*factorial(num-1);
	}
}
//相当于下面代码，但是下面代码消除了耦合
function factorial(num) {
	if(num <= 1){
		return 1;
	}else{
		return num*arguments.callee(num-1);
	}
}
var truefactorial = factorial; factorial = function(){ reutrn 0; };
alert(truefactorial(5)); //输出20

这里就印证了函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。使用arguments.callee就将上述代码进行了解耦合，可以改变指向函数的函数名。

this引用的是函数据以执行的环境对象，当在网页的全局作用域中调用函数时，this对象引用的是window对象。

window.color = "red";
var o = { color : "blue" }; // 定义一个Object对象
function sayColor(){ alert(this.color); }

sayColor();  // 输出red  sayColor在全局作用域中定义的，它引用的this变量指向window
o.sayColor = sayColor;
o.sayColor(); // 输出blue  这里将sayColor函数赋给了o对象的sayColor方法，这里this指向o对象

caller属性保存着调用当前函数的函数的引用，也就是被调用函数的caller属性指向直接调用函数。如果是在全局作用域中调用当前函数，它的值为null。argumets.callee.caller或本函数名.caller

length属性表示函数希望接收的命名参数的个数。对于ECMAScript中的引用类型而言，prototype是保存它们所有实例方法的真正所在，因此函数也有。每个函数都包含两个非继承而来的方法：apply()和call()。
apply方法接收两个参数：一个是在其中运行函数的作用域，一个是参数数值（可以是Array实例，也可以是arguments对象）。
apply方法接收两个参数：一个是在其中运行函数的作用域，一个是参数列表。

function sum(num1, num2){ return num1 + num2; }
function callsum1(num1, num2){ return sum.apply(this,arguments); } //传入callsum1的this指向的对象（作用域）
function callsum2(num1, num2){ return sum.apply(this,[num1,num2]); } 
function callsum3(num1, num2){ return sum.call(this,num1,num2); } 

apply()和call()主要用于扩充函数运行的作用域

window.color = "red";     // 全局的一个属性，相当于定义全局变量color = “red"
var o = { color : "blue" }; // 定义一个Object对象
function sayColor(){ alert(this.color); } 
sayColor();  // 输出red  sayColor在全局作用域中定义的，它引用的this变量指向window
sayColor().call(this);  //输出red
sayColor().call(window); //输出red

sayColor().call(o); // 输出blue  这里将sayColor的call函数的this赋值为o对象

ECMAScript 5定义了bind()方法，这个方法会创建一个函数的实例，其this值会被绑定到传给bind函数的值

window.color = "red";     
var o = { color : "blue" }; 
function sayColor(){ alert(this.color); } 
var objectSayColor = sayColor.bind(o);
objectSayColor();  // 输出blue

函数声明提升

解析器在向执行环境中加载数据时，对函数声明和函数表达式并非一视同仁。解析器会先读取函数声明，并使其在执行任何代码之前可用（可访问）；而函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。

// 代码段一
alert(sum(10,10));
function sum(num1, num2){ return num1 + num2; }
// 代码段二
alert(sum(10,10));
var sum = function sum(num1, num2){ return num1 + num2; }

代码一开始执行之前，解析器已经通过函数声明提升的过程，读取并将函数声明添加到执行环境中。对代码求值时，Javascript引擎在第一遍会声明函数并将它们放到源代码树的顶端。即使声明函数的代码在调用它代码后面，引擎也可以把函数声明提升到顶部。代码二会产生运行期间错误，原因在于一个初始化语句中，而不是一个函数声明。在执行到函数所在的语句之前，变量sum中不会保存有对函数的引用；而且，由于第一行代码就会导致unexpected identifier错误，实际上也不会执行到下一行。

// 函数预加载效果
console.log(num);
var num = 200;
// 相当于
var num;  //变量声明提升
console.log(num); //undefined
num = 200;

上面的代码段二相当于

var sum;
console.log(sum); //undefined
alert(sum(10,10)); // sum不是一个函数
sum = function sum(num1, num2){ return num1 + num2; }

js中代码的运行流程：
预编译过程：语法检测->变量提升->函数预加载
执行过程中，如果有错误（执行错误），当前这个script标签中，出错之前的代码正常执行，之后的代码不执行；继续找下一个script标签。

作用域

作用域的类型有全局和局部（函数），没有块级作用域，即花括号封闭除函数的代码块没有自己的作用域。下面的代码if语句中的变量声明将会被添加到当前的执行环境的作用域中。

if (true){
	var color = "blue";
}

Array对象

Global对象

所有在全局作用域中定义的属性和函数，都是Global对象的属性。不属于任何其他对象的属性和函数，都是Global对象的属性。所有原生引用类型的构造函数，像Object和Function，也都是Global对象的属性。

Window对象

ECMAScript虽然没有指出如何直接访问Gloal对象，但Web浏览器都是将这个全局对象作为window对象的一部分加以实现的。全局执行环境被认为是window对象，所有全局变量和函数都是作为window对象的属性和方法创建的。
另一种取得Global对象的方法：

var global = function(){ return this; }();

BOM

BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt等方法。但是它们之间也是有区别的，全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以。（var语句添加的window属性有一个名为[[Configurable]]的特性，这个特性的值设置为了false，因此这样定义的属性不可以通过delete操作符删除）

Window对象

如果页面包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引或者框架名称来访问相应的window对象。每个window对象都有一个name属性，其中包含框架的名称。下面代码创建了一个框架集，其中一个框架居上，两个居下。可以通过window.frames[0]或者window.frames[“topFrame”]来引用上方的框架。top对象始终指向最高（最外）层的框架，也就是浏览器窗口。因此也可以通过top.frames[0]或者top.frames[“topFrame”]来引用上方的框架。parent对象始终指向当前框架的直接上层框架。在没有框架的情况下，parent一定等于top，也等于window。与框架有关的最后一个对象是self，它始终指向window。

<html>
	<head>
		<title>Frameset Example</title>
	</head>
	<frameset rows="160,*">
	    <frame src="frame.htm" name="topFrame">
		<frameset cols="50%,50%">
			<frame src="anoterframe.htm" name="leftFrame">
			<frame src"yetanoterframe.htm" name="rightFrame">
		<frameset>
	<frameset>
</html>

在使用框架的情况下，浏览器中会存在多个Global对象。在每个框架中定义的全局变量会自动成为框架中window对象的属性。由于每个window对象都包含原生类型的构造函数，因此每个框架都有一套自己的构造函数，这些构造函数一一对应，并不相等。例如top.Obhect并不等于top.frames[0].Object。这个问题会影响到对跨框架传递的对象使用instanceof操作符。

DOM

文档节点是每个文档的根节点。这里文档节点只有一个子节点，即<html>元素，称之为文档元素。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在HTML中，文档元素始终是<html>元素。在XML中没有预定义的元素，因此任何元素都可能成为文档元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DynamicTable</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            test-align: center;
            margin:50px;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>？</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>
<script>
    // 获取按钮
    document.getElementById("btn_add").onclick = function () {
        // 获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        // 创建td，赋值td的标签体
        var td_id = document.createElement("td");
        td_id.appendChild(document.createTextNode(id));
        var td_name = document.createElement("td");
        td_name.appendChild(document.createTextNode(name));
        var td_gender = document.createElement("td");
        td_gender.appendChild(document.createTextNode(gender));
        //创建超链接项 <a href="">删除</a>
        var td_link = document.createElement("td");
        var link = document.createElement("a");
        //设置链接属性
        link.setAttribute("href","javascript:void(0);");
        link.setAttribute("onclick","delTr(this);");
        link.appendChild(document.createTextNode("删除"));
        td_link.appendChild(link);
        // 创建tr
        var tr = document.createElement("tr");
        // 添加td到tr中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_link);
        // 获取table添加tr
        document.getElementsByTagName("table")[0].appendChild(tr);
    };

    // 删除方法
    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>

HTML DOM

    document.getElementById("btn_add").onclick = function () {
        // 获取文本框内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        // 获取table
        var table = document.getElementsByTagName("table")[0];
        //追加一行
        table.innerHTML += "<td>"+id+"</td><td>"+name+"</td><td>"+gender+"</td><td><a href='javascript:void(0);' οnclick='delTr(this);'>删除</a></td>";
    }

XML DOM

另写一篇文章解析

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SelTable</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            //test-align: center;
            //margin:50px;
        }
        .over{
            background-color: pink;
        }
        .out{
            background-color: white;
        }
    </style>
    <script>
        /*
        *  分析：全选 获取所有的checkbox 遍历checkbox，设置每个checkbox状态为选中
        * */

        //1.在页面加载完后绑定事件
        window.onload = function () {
            //2.给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function () {
                // 获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                // 遍历
                for(var i = 0; i < cbs.length; i++){
                    // 设置每个cb的状态为选中
                    cbs[i].checked = true;
                }
            };
            //2.给全不选按钮绑定单击事件
            document.getElementById("unSelectAll").onclick = function () {
                // 获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                // 遍历
                for(var i = 0; i < cbs.length; i++){
                    // 设置每个cb的状态为选中
                    cbs[i].checked = false;
                }
            };
            //2.给反选按钮绑定单击事件
            document.getElementById("selectRev").onclick = function () {
                // 获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                // 遍历
                for(var i = 0; i < cbs.length; i++){
                    // 设置每个cb的状态为选中
                    //if(cbs[i].checked == false){
                        //cbs[i].checked = true;
                    //}else{
                        //cbs[i].checked = false;
                    //}
                    cbs[i].checked = !cbs[i].checked;
                }
            };

            document.getElementById("firstCb").onclick = function () {
                // 获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                // 遍历
                for(var i = 0; i < cbs.length; i++){
                    // 设置每个cb的状态为选中
                    //if(cbs[i].checked == false){
                    //cbs[i].checked = true;
                    //}else{
                    //cbs[i].checked = false;
                    //}
                    //cbs[i].checked = document.getElementById("firstCb").checked;
                    cbs[i].checked = this.checked;
                }
            };

            // 给所有tr绑定鼠标移到元素之上和移出元素之上事件
            var trs = document.getElementsByTagName("tr");
            for(var i = 0; i < trs.length; i++){

                //移到元素之上
                trs[i].onmouseover = function () {
                    this.className = "over";
                }
                //移出元素之上
                trs[i].onmouseout = function () {
                    this.className = "out";
                }
            }
        }
    </script>
</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>？</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
<script>
</script>
</body>
</html>

参考文章：
JavaScript程序设计——基本概念
https://www.bilibili.com/video/BV1R7411x7Xi?p=594