JavaScript复习

  由于移动web的最后几节课都没有好好听，所以打算把JavaScript部分好好复习一下。因为在网页开发方面，还是挺有用的。
一、JavaScript变量
1.1 定义：可以不经过定义直接使用

<script type="text/javascript">var x;var y = 3;var a = 3.5, b = "6666"c = 2333;</script>

1.2 变量类型：主要包括数字型、布尔型、字符串、数组

<script type="text/javascript">var i = 10;var s = "abc";var b = false;var o = {};</script>

1.3 变量的特殊取值和类型转换
undefined：未初始化变量的取值
null：为初始化对象的取值
N/A：Not Acceptable
NaN：not a number。除以0、非数值字串等的取值
Infinity：无限小数
false：0、空串、null、undefined(其实输出还是显示undefined)、NaN、浮点数
true：其它
isNaN()：判断参数是否为数值（如果不是数值返回true）
isFinite()：数值是否在Number.Min_VALUE~Number.MAX_VALUE之间
下面展示一段代码，判断一下这些变量都取什么值？

var a = 3;var b = "5";var c1 = a + b; // var c2 = b + a; //b = 4;var d=a+parseInt(b); //var e=a+(b-0); //var f=parseFloat('a'); //var g=Number('abc'); //document.write(c1+" "+c2+" "+d+" "+e+" "+f+" "+g)

答案：
c1：35。这个和java的字符串的数字和字符串相加的结果是一样的，都是把数字看作字符串然后结合起来
c2：53
d：3+4=7
e：7。遇到-运算符会自动把字符串转化为数字；遇到+则是把数字转成字符串
f：NaN（不要以为是字符就会强制转换成ASCII码了，必须是满足数字格式的字符串才可以转化！）
g：NaN。字符和字符串不能强制转换成数字。如果要把字符转化为ASCII码，必须通过str.charCodeAt()转化。而ASCII数值转化为字符则要通过String.fromCharCode(number)
    所以parseFloat('123.666')可以输出123.666；而g='a';g=g.charCodeAt();会输出97；String.fromCharCode(97-32)会输出'A'。

g = 'abc';g = g.charCodeAt(0); // 97h = String.fromCharCode(g-32); // A

1.4 算数运算符
    大部分都是基本的运算符，有一个之前没见过的是===，表示恒等。它的判断条件比较复杂，这里不做详细说明，具体请见JavaScript 中2个等号与3个等号的区别。总之要记住的一句话就是：===比==的判断条件更加严格，因为它不仅要求两个变量的值相同，类型也要相同。如果用==，很奇葩的是"2"竟然会等于2，而用===就不会相等了。

document.write("2" == 2); // truedocument.write("2" === 2); // false

1.5 基本控制语句
    条件、循环、分支语句和java几乎一致所以不细讲。唯一不同的地方是java循环的foreach的形式是for (变量类型 变量名:数组名)，而javascript是for (var 变量名 in 数组名)。
    天真的我以为这就可以输出数组中的所有对象了，然后写下了这段代码：

var array = [90.12, 100, 76, 98, 66.2333];for (var num in array) {    document.write(num + " ");}

　　然而输出的结果却是0 1 2 3 4！后来查了资料发现其实这个foreach获取的是数组里面的对象名称，并不是对象的值。所以上面的代码输出的东西改成array[num]才可以。
　　为了证明foreach获取的东西是对象名，又写了下面的代码：

array = [];array["name"] = "库里";array["job"] = "NBA";array["rate"] = "45%";for (var type in array) {    document.write(type + " ");}// 输出结果：name, job, rate

1.6 字符串
　　关于字符串函数的详细内容请见JavaScript字符串函数大全，这里主要讲两个函数：split和join。它们的作用刚好相反，一个是将字符串分成数组，另一个是将数组里面的元素组合成一个字符串。它们都可以加上参数也可以不加参数。split不加参数的话，最后的数组只有一个元素，而且那个值就是字符串；join不加参数就是把数组的所有元素直接合起来。测试代码如下：

a = 'abc';arr1 = a.split(); // ["abc"]arr2 = a.split(""); // ['a', 'b', 'c']，注意传入空字符串还是会切分的，最后的数组大小就是字符串的长度document.write(arr1.join('.') + "<br>"); // abc，由于数组只有一个元素，join传不传参数结果一样document.write(arr2.join(',')); // a,b,c

2、函数
2.1 定义：函数可以看作是一个对象，每一个函数名都是指向对象的指针
2.2 引用
2.2.1 一个基本的例子

// 函数的引用var sum = function(sum1, sum2) {    return sum1+sum2;}alert(sum(10, 10)); // 20var asum = sum; // 函数是对象，所以可以直接赋值alert(asum(10, 20)); // 30sum = null;alert(asum(20, 10)); // sum定义空之后，asum指向的空间并没有消失，所以依然可以调用asum = function(num1, num2) {    return num1 - num2;}alert(asum(10, 20)); // 没有重载，直接覆盖// 运行结果：20、30、30、-10

2.2.2 定义和调用的位置：如果函数名作为一个对象，必须先定义再引用，比如var sum = function()这种方式；如果是function sum()，sum是全局函数，调用可以在定义之前

alert(add(inc, 10)); // 3628810(10*9*...*2=3628800)function add(inc, num1){    return inc(num1) + num1;}function inc(num1) {    if (num1 <= 1) return 1;    return num1 * inc(num1-1);}

2.2.3 可变参数的函数
　　arguments就是函数在被调用的时候传入的参数（然而eclipse并不会自动补全）

function total() {    var c = 0;    for (var i = 0; i < arguments.length; i++) {        c = parseInt(arguments[i]) + c;    }    return c;}document.write("<p> 没有参数：" + total() + "</p>");document.write("<p> 四个参数：" + total(1, 2, 3, 4) + "</p>");// 运行结果：0 10

3、闭包
3.1 闭包的含义
　　闭包的意思是函数内可以使用函数外定义的变量。比如下面这段函数：

var message = "Hello World"function sayHelloWorld() {    alert(message);}sayHelloWorld();

3.2 一个函数定义另一个函数
　　代码本身不会特别难懂，如下：

function addNum(num){    return function(num1, num2) {        return num1 + num2 + num;    }}var add1 = addNum(10);alert(add1(20, 30)); // 60

这个也充分体现了javascript里面把函数看作是对象的思想

4、对象
4.1 对象的定义：有两种写法

var person1 = new Object(); // 或者person = {};person1.name = "库里";person1.age = 27;person1.print = function(){alert(person1.name)};var person2 = {    name: "哈登",    age: 26,    print: function(){alert(person2.name)}}person1.print();person2.print();

4.2 对象的访问：通过 '.'

display({name: "杜兰特", age: 27});function display(args) {    if (typeof args.name == "string") alert(1);    if (typeof args.age == "number") alert(2);}

4.3 json数据格式

var people={"programmers": [{"firstName": "Brett","lastName": "McLaughlin","email": "aaaa"}, {"firstName": "Jason","lastName": "Hunter","email": "bbbb"}, {"firstName": "Elliotte","lastName": "Harold","email": "cccc"}],"musicians": [{"firstName": "Eric","lastName": "Clapton","instrument": "guitar"}, {"firstName": "Sergei","lastName": "Rachmaninoff","instrument": "piano"}],"authors": [{"firstName": "Isaac","lastName": "Asimov","genre": "sciencefiction"}, {"firstName": "Tad","lastName": "Williams","genre": "fantasy"}, {"firstName": "Frank","lastName": "Peretti","genre": "christianfiction"}]}alert(people.authors[1].genre); // "fantasy"alert(people.musicians[1].lastName); // "Rachmaninoffalert(people.programmers[2].firstName); // "Elliotte"

5、Prototype原型
5.1 工厂模式：在提到原型的概念之前，我们先看看工厂模式构建对象的方法

function createPerson(name, age) {    var person = {};    person.name = name;    person.age = age;    return person;}var person1 = createPerson("smie", 4);

5.2 用构造函数创建对象的两种方式
　　首先注意这种方式和之前的工厂模式不同！工厂模式是创建一个对象，然后返回，构造函数则函数本身就是一个对象，不用返回，也是用this指针修改函数对象的值

// 构造函数function Person(name, age) {    this.name = name;    this.age = age;    this.sayName = function(){alert(this.name)};}Person("sysu", "101"); // 把方法添加到window中 window.sayName();var person2 = new Object();Person.call(person2, "lll", 666); // 在另一个对象的作用域中调用person2.sayName();

　　但是这种方式带来了一个问题：就是每新建一个对象，对象里面的方法都重新定义，带来了空间上的浪费，尽管它们所属的对象类型都相同。一种解决方法是将sayName函数定义在对象外面：

function sayName(){    alert(this.name);}

　　这种方法解决了上面的问题，不过也带来了需要定义很多全局函数的问题。于是我们需要用原型来解决：

// 原型：所有实例共享对象和方法，可以直接使用，也可以被覆盖function People() {}People.prototype.name = "库里";People.prototype.age = 27;People.prototype.job = "NBA";People.prototype.sayName = function(){alert(this.name);};var people1 = new People();people1.sayName(); // 来自原型var people2 = new People();people2.name = "詹姆斯";people2.sayName(); // 来自实例alert(people1.sayName == people2.sayName); // true

6、数组
6.1 数组的定义

var a = new Array();var b = new Array(2); // 是有两个元素还是有一个元素是2？var c = new Array("tom", 3, "jerry");var d = ["tom", 3, "jerry"]; // 同cdocument.write(a.length);document.write(b.length);document.write(c.length);if (Array.isArray(a)) alert('OK');

　　注意数组b：大小为2，但是两个元素都是没有定义的状态。
6.2 数组的引用

var colors = ["red", "yellow", "green"];document.write(colors.toString() + "<br />"); // red,yellow,greendocument.write(colors.toLocaleString() + "<br />"); // red,yellow,green document.write(colors.valueOf() + "<br />"); // red,yellow,greendocument.write(colors + "<br />"); // red,yellow,greendocument.write(colors.join(";") + "<br />"); // red;yellow;greendocument.write(colors.push("blue", "brown") + "<br />"); // 返回5，red,yellow,green,blue,browndocument.write(colors.pop() + "<br />"); // 返回brown，red,yellow,green,bluedocument.write(colors.shift() + "<br />"); // 返回red，yellow,green,bluedocument.write(colors.unshift("red") + "<br />"); // 返回4，red,yellow,green,bluedocument.write(colors.sort() + "<br />"); // blue,green,red,yellowdocument.write(colors.reverse() + "<br />"); // yellow,red,green,blue

　　都是比较基本的函数，另外说明一下toLocaleString和toString的区别：toLocaleString的意思是返回本地字符串，所以最后输出的结果对不同的机子可能是不一样的。在这个例子中并没有体现，但如果要输出Date.toLocaleString的话，在不同的国家就能看出差异了。例如，同样是 3 月 21 日，在美国，toLocaleString 可能会返回 “03/21/08 01:02:03”，而在欧洲，返回值则可能是 “21/03/08 01:02:03”，因为欧洲的惯例是将日期放在月份前面。(摘自百度知道)
　　而toString的格式是通用的，除非自己强行把toString修改成其他函数了。

7、事件
7.1 定义事件处理程序的第一种方法

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JavaScript-事件处理1</title><script type ="text/javascript">function showMessage(){alert("Hello wolrd!");}</script></head><body><input type="button" value="Click Me" onclick="alert(event.type)"> <!-- click --><input type="button" value="Click Me" onclick="alert(this.value)"> <!-- Click Me --><!--this为被点击的对象--><input type="button" value="Hello" onclick="showMessage();"> <!--调用函数 --><input type="button" value="Click Me"onclick = "try {showmessage();}catch(ex){alert('函数调用错误！');}"><!--屏蔽出错信息--></body></html>

7.2 定义事件处理程序的第二种方法

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JavaScript-事件2</title><script type="text/javascript">function changetext(obj){obj.innerHTML="谢谢!";}</script></head><body><div><p id="p1">请点击该文本</p><p id="p2">this is another header</p></div><script type="text/javascript">var p1=document.getElementById("p1");var f1=function(){changetext(this);};p1.onclick= f1; // 必须放在标签的后面，因为这个js不是点击事件而是顺序执行的，如果写在前面，p1是还没有定义的p2.onclick= f1;</script></body></html>

下面是另一种方法，稍微复杂一点，用到了apply函数：

<html><head><script type="text/javascript">function bind(fn, context) {    return function() {        return fn.apply(context, arguments);    };}</script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JavaScript-事件2a</title></head><body><p id="p1">请点击该文本</p><p id="p2">this is another header</p><script type="text/javascript">var handler = {        message: "事件处理",        handleClick: function(event) {            alert(this.message);        }};var btn = document.getElementById("p1");btn.onclick = bind(handler.handleClick, handler);</script></body></html>

首先说一下apply函数的用法：apply的两个参数依次是对象和数组，意思是调用apply的函数会将那个对象作为this指针，而数组则是作为参数。call函数也有类似的功能，只是在参数形式上，不是传递数组，而是把数组内的元素依次显示出来。如下：

function sum(num1, num2) { return num1 + num2; } console.log(sum.call(window, 10, 10)); //20 console.log(sum.apply(window,[10,20])); //30 

所以之前的代码的效果其实就是alert(handler.message)这行代码。

7.3 第三种方法（冒泡与捕捉）
关键函数：addEventListener

<html><head><script type="text/javascript">function changetext(obj) {    obj.innerHTML = "谢谢！";}</script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JavaScript-事件3</title></head><body><p id="p1">请点击该文本</p><p id="p2">this is another header</p><script type="text/javascript">var p1 = document.getElementById("p1");var f1=function(){alert("hello");};p1.addEventListener("click",f1,false);p1.addEventListener("click",function(){changetext(this);});p1.addEventListener("click",function(event){alert(event.type+":"+event.clientX+","+event.clientY +" "+event.screenX+","+event.screenY);});</script></body></html>

　　这种方法的优势在于一个对象可以很方便地绑定多个点击事件，如果用第二种方法指定onclick的值是做不到的。
　　addEventListener的第三个参数取false的意思是事件在冒泡阶段触发，为true意思是在捕捉阶段触发。看看下面的例子：

<html><head><script type="text/javascript">function show() {    alert(this.id);}</script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JavaScript-事件3a</title></head><h1>addListener</h1><body id="body"><div id="div"><p id="p1">This is first paragraph.</p><script type="text/javascript">var body = document.getElementById("body");var div = document.getElementById("div");var p1 = document.getElementById("p1");body.addEventListener("click", show, false);body.addEventListener("click", show, true);div.addEventListener("click", show, false);div.addEventListener("click", show, true);p1.addEventListener("click", show, false);p1.addEventListener("click", show, true);</script></div></body></html>

　　那么点击p1之后会按照什么顺序弹出警告框呢？只要记住捕捉阶段是从上层到下层，也就是html->div->p1的顺序，而冒泡阶段是翻过来的就可以了。如果定义了捕捉阶段，那么捕捉阶段会优先执行。所以最后的结果就是body->div->p->p->div->html
　　如果要删除事件处理程序，用target.removeEventListener(type, function, useCapture)的时候，必须保证三个参数都相同才能成功删除。

7.4 事件对象event

var btn = document.getElementById("myBtn");var hander=function(event){switch(event.type){case "click":alert("Clicked"); break;case "mouseover":event.target.style.backgroundColor = "red";case "mouseout":event.target.style.backgroundColor = "";}};btn.onclick = hander;btn.onmouseover = hander;btn.onmouseout = hander;document.body.onclick=function(event){alert(event.currentTarget===document.body); // truealert(this===document.body); // truealert(event.Target===document.getElementById("myBtn")); // false}; //点击了button

8、DOM节点树
8.1 节点的属性

属性名属性意义nodeName节点名nodeType类型（元素 1 属性 2 文本 3 注释 8文档 9 ）nodeValue节点值parentNode节点（元素）的父节点childNodes节点（元素）的所有子节点（数组）childrenchildren只返回元素如input, span, script, div等， 不会返回TextNode，而childNodes不但会返回元素， 还会返回TextNode，注释等。innerHTML节点（元素）的内容。innerText–只有IE可用outerHTML节点（元素）的元素（包含自己的标签）。outerTextattributes节点（元素）的所有属性节点className节点的属性的class的值classList节点所有的类。可以用方法add(增加一个类)，remove（删除一个类），toggle（增/删类），contains（是否包含一个类）修改它。(HTML 5的功能)data-自定义属性名 html5firstChild节点（元素）的第一个子节点（firstElementChild）lastChild节点元素的最后一个子节点（lastElementChild）nextSibling节点的下一个兄弟（nextElementSibling）previousSibling节点的上一个兄弟（previousElementSibling）

8.2 操作节点的方法：

操作方法作用appendChild()将新的节点添加到指定节点removeChild()删除子节点replaceChild()替换子节点insertBefore()在制定的子节点前面添加新的子节点createAttribute()创建属性节点createElement()创建元素节点createTextNode()创建文本节点getAttribute()返回指定的属性值setAttribute()把指定属性设置或修改为指定的值。focus()让输入类元素得焦点 htm5insertAdjacentHTML()在元素的开始标签和结束标签的前后插入元素。e.insertAdjacentHTML(“beforebegin”, “

Welcome!

“)scrollIntoView()滚动页面让元素可见contains()是否为后代元素 HTML5compareDocumentPosition()比较位置：1-无关 2-居前 3-居后 8-包含 16-被包含

8.3 通过document选择节点的方法

getElementById()
返回带有指定 ID 的元素。
getElementsByTagName()
返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()
返回包含带有指定类名(可以是空格隔开的多个类名)的所有元素的节点列表(数组)。html5
querySelectorAll()
取得与CSS选择符匹配的所有节点。html5
querySelector()
取得与CSS选择符匹配的第一个节点。html5
matchesSelector()
看元素(第一个参数)与CSS选择符(第二个参数)是否匹配(目前浏览器支持都不高) html5

其他内容都是关于实际操作的，就不详细介绍了，在之后的学习过程中遇到再详细讲。