Chapter 0
为什么读这本书？作为js入门书，补基础,由于本书代码demo较简单，并没有贴代码，只记录一些自己要注意的知识点以及代码脚本
Chapter 1: javascript简史
DOM全称是document object model(文档对象模型),假设把文档看做一个对象,那DOM就是如何利用HTML和XML去对这个对象进行操作和控制的标准
1.2 AJAX(异步传输技术)引发了一次学习DOM脚本编程的热潮:
1.3 HTML5新特性:传统的Web应用交互由用户出发一个HTTP请求到服务器，服务器对其进行处理返回一个新的HTML到客户端，然后每当服务处理请求时，客户端只能等待，而使用AJAX的异步处理机制，就可以在不更新整个页面的前提下维护数据，这一特点主要基于XMLHTTP和XMLHTTPRequest
Chapter 2: Javascript语法<audio>和<video>控制媒体
<canvas>具备了完善的绘图能力 浏览器本地存储超越了cookie的限制： cookie: 4kb,每次请求一个新的页面都需要发送过去，不可以跨域调用 localstorage: 始终有效, 存储大小为5mb
2.1 数据类型
Javascript是一种弱类型语言,程序员可以在任何阶段改变变量的数据类型 var age = 'china'; age = 26; 如果想在变量中使用单引号或双引号,必须使用\对字符串进行转义 var mood = 'don\'t ask'; // don't ask
2.2 数组
数组的定义: var arrs = Array(); var arrs = Array(4);2.3 对象关联数组:
var arrs = Array();arrs['name'] = 'Carlton';arrs['age'] = '26';arrs['living'] = true;
2.3.1 对象是什么:由一些属性和方法组成的的无序集合,当此特性为函数时,我们称之为对象的方法(method), 不是函数时,则称之为对象的属性(proporty)
var obj1 = Object();obj.name = 'Carlton';obj.age = '26';obj.living = function(){alert(true);}
var obj2 = {
name: "Carlton", age: "26", living: function(){ alert(true); }}
2.3.2 对象有哪些:
内置对象:Array,Date,Math等
宿主对象:Form,Image(可访问img标签), Element,document
Chapter 3: DOM
3.1 DOM概述DOM拆开来看就是Document(文档)、Object(对象)、Model(模型) 对于HTML来说，DOM中document就是HTML文档, Object是供JS操作DOM的一些对象, Model是对HTML文档建立的一种模型,以tree的形式呈现 HTML文档就相当于一颗树，由不同的节点构成，关于节点： 整个文档就是一个文档节点 每个HTML标签就是一个元素节点 包含在HTML元素中的文本是文本节点 每一个HTML属性是一个属性节点 注释属于注释节点3.2 获取元素
document.getElementById(id);//获取特定id的某个节点 document.getElementByTagName(tagName);//获取特定标签的节点集合 document.getElementsByClassName(classname);//获取特定类名的节点集合 获取和设置属性: object.getAttribute(attr);//获取属性attr的值，object是一个节点 object.setAttribute(attr, value);//为属性attr设置相应值
Chapter 4: Javascript图片库 本章代码demo比较简单，在这里就不详细介绍，我只列了一些自己需要注意的点
Q:在点击某个链接时，留在这个网页而不是转到另一个窗口
A:通过增加一个“占位符”图片的方法在这个主页为图片预留一个浏览区域Q:点击链接时，在当前网页上看到图片A:使用return false取消网页默认行为<a href="#" οnclick="showPic(this);return false"></a>另一个默认动作是form表单中的<input type="submit">
ChildNodes属性可以获取任何一个元素的所有子元素
document.getElementByTagName("body")[0].ChildNodes;//获取body所有的子元素
nodeType可以让我们知道自己正在与哪一种节点打交道
元素节点、属性节点、文本节点的nodeType分别为1,2,3
node.nodeValue可以改变一个文本节点的值
node.firstChild 等价于 node.ChildNodes[0]
node.lastChild 等价于 node.ChildNodes[node.ChildNodes.length - 1]
Chapter 5: 最佳实践Chapter 6: 图片库改进版
6.1 结构化程序设计
其中一个原则是:函数应该只有一个出口和入口 如果一个函数有多个出口，应该将出口集中在开头部分，就可以接受了，例: function prepareGallery(){ if(!document.getElementByTagName) return false; if(!document.getElementById) return false; if(!document.getElementByClassName) return false; }
6.2 共享onload事件
addLoadEvent函数将完成的操作： 把现有的window.onload事件处理函数的值存入变量oldload 如果在这个处理函数上没有绑定任何函数，就像平时那样把心得函数添加给它 如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有的指令的末尾 function addLoadEvent(func){ var oldonload = window.onload; if(typedef window.onload != 'function'){ window.onload = func; } else { window.onload = function(){ oldonload(); func(); } } }
这就将那些在页面加载完毕时执行的函数创建为一个队列,如 addLoadEvent(firstFunction); addLoadEvent(secondFunction);
6.3 使用三元操作符
若函数格式如下所示 if(whichpic.getAttribute("title")){ var text = whicpic.getAttribute("title"); } else { var text = ""; } 则可以用三元操作符完成操作 var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
Chapter 7: 动态创建标记
7.1 document.write 和 innerHTML
document对象的write方法可以方便的将字符串插入文档中 document.write("<p>This is a test</p>") innerHTML属性: 用来读或写指定元素内的HTML内容 <div id="testDiv"> <p>This is a test</p> </div> 此时testDiv.innerHTML中的内容是<p>This is a test</p>
7.2 DOM方法
7.2.1 createElement方法
动态创建script引用var head= document.getElementsByTagName('head')[0];var script= document.createElement('script');script.type= 'text/javascript' / script.setAttribute("type", "text/javascript");script.src= 'call.js' / script.setAttribute("src", "call.js");head.appendChild(script);
7.2.2 createTextNode方法
var para = document.createElement("p");document.getElementById("testDiv").appChilid(para);var txt = document.createTextNode("Hello World");para.appendChild(txt);
7.2.3 insertBefore方法
parentElement.insertBefore(newElement, targetElement)newElement: 你想插入的元素targetElement: 你想将newElement插入哪个元素之前parentElement: targetElement元素的父元素,即targetElement.parentNode
7.2.4 自定义insertAfter方法
function inertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); } else { parent.insertBefore(newElement, targetElement.nextSibling);//目标元素的下一个兄弟元素 }}
7.3 AJAX
以前想要看到一个页面的变化，哪怕是很小的一部分，也要重新发送请求，刷新整个页面，而使用Ajax就可以只更新页面中的一小部分，其中的内容都不需要再更新，已经加载的页面只有一小部分会更新，而不必再次加载整个页面Ajax最的的优势是对页面的请求以异步的形式发送给服务器，这样不需要等服务器返回请求数据也可以继续浏览网页，不极大的提升了用户体验
7.3.1 XMLHttpRequest
var request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //ie浏览器创建对象 var request = new XMLHttpRequest();//其他浏览器创建对象 //示例代码 function getNewContent() { var request = XMLHttpRequest(); if(request){ request.open("GET", "example.txt", true); request.onreadystatechange = function(){ //XMLHttpRequest对象送回响应的时候执行 if(request.readstate == 4) { //4表示请求完成 //一些操作 } }; request.send(null); } else { alert("fail"); } }
Chapter 8: 充实文档的内容
8.1 DOCTYPE
在HTML5出现之前，我们一般使用XHTML文档规则,而不是用HTML,因为HTML有很多不方便的地方 HTML规则即允许使用小写(<a>)也允许使用大写字母(<A>),也可以省略结束标签(</p>,</li>) 使用XHTML规则 <!DOCTYPE html PUBLIC ".." "https://.."> 使用HTML5规则 <!DOCTYPE html> 同样支持HTML和XHTML规则