原本以为这本书会讲很多没接触过的底层东西，然而它只能算是一本前端的入门书籍，花了两天时间就浏览完了。书中阐述脱离框架去用javascript操作DOM的步骤。虽然简单，但是当你遇到问题时，也许正是因为了解这些基本的东西才有助于解决问题。
以下为各章提要或体会：
1 javascript历史
我们看一门技术形成的历史，好像与技术应用无关，却又极为重要。了解历史，会更懂得一门技术的最初形态，以及变化的阶段。比如dom技术，了解了之后，你就会明白为什么浏览器会有这么多兼容性问题。为什么IE浏览器这么与众不同。
2 javascript语法
javascript是一种解释型语言，解释型语言与编译型语言最大的差别是，解释型的语言代码中的错误只有在解释器执行时才能被发现。
本章提到的javascript较为简单。但仍可以找到一些有趣的少用的知识点，例如关联数组
var arr=[]
arr['a'] = 'aa'
arr['b'] = 'bb'
arr[0] = 'ccc'
arr.a和arr.b事实上是给数组对象增加了属性。arr.a和arr.b 并不算在数组长度里，它的长度是1
3 DOM
DOM
D ,document 文档
O, Object 对象，对象包括，用户自定义对象，内建对象，宿主对象
M,Model 模型
值得注意的是属性节点。属性写在标签上，但在DOM树中，它被当做一个节点。
4javascript图片库
本章提到几个节点的属性：nodeType, 它是一个数字
元素节点是 1
属性节点是 2
文本节点是 3
几个常用属性：
childNodes
firstChild
lastChild
5 最佳实践
本章提到了如何提高javascript性能的问题。用了flash的发展史进行了类比。由于早期我也从事过flash的开发，深有体会。flash 网站通常首页加载很慢，这是个硬伤，现在大部分的使用场景也逐渐被其它技术取代了。
作者认为，产生的问题是由于使用者滥用javascript的缘故，作者更强调浏览器的用户体验。另外，对于禁用javascript的浏览器，要考虑平稳退化的问题。现在的网站，把javascript关掉的情况虽然很少，但是如果真遇到这样的情况，书中还是给了一些解决方案的。
window.open(winURL, "popup", "width=320, height=400")
文中通过打开一个新窗口演示了javascript和html分离的过程
onclick和 javascript: 伪协议都没有做到分离
通过javascript 读取节点，把事件加到节点上才是实现分离的方法
6 图片库的改进
onclick同时会触发onkeypress ,也就是键盘事件
7 动态创建标记
改变文档的几个方法：
document.write
innerHTML
document.createElement
createTextNode
常用的添加子元素的方法：
appendChild
insertBefore
nextSibling 下一个兄弟元素
Ajax
Ajax核心依赖对象XMLHttpRequest. 早期IE浏览器的ajax对象并不是它，而是用ActiveXObject对象实现的。
XMLHttpRequest对象的方法主要有open和onreadystatechange, send, 在onreadystatechange函数内容部， request.readyState 为 4 时，就从request.responseText中取值
执行open，定义完onreadystatechange 之后，要调用send方法发送消息
readyState 的状态码
0未初始化
1 正在加载
2加载完毕
3正在交互
4完成
示例
<body>
<div>
<div id="desc">lllllll</div>
<button onclick="btn()">button</button>
</div>
<script>
function btn() {
var desc = document.getElementById('desc')
var request = new XMLHttpRequest()
request.open('GET', '/m.txt', true)
request.onreadystatechange = function() {
if(request.readyState == 4) {
desc.childNodes[0].nodeValue = request.responseText
}
}
request.send(null)
}
</script>
</body>
8 充实文档的内容
accesskey属性可用来定义节点相关的快捷键，如下，按alt+2相当于点击了button
<button onclick="btn()" accesskey="2">button</button>
9css-DOM
网页的信息可以分为三层：
1 结构层，即标签
2 表示层，样式
3 行为层，javascript交互
本章提到element.style 其实是一个对象（CSSStyleDeclaration），你可以这样赋值
desc.style.height = '300px'
然而你这样赋值也是可以的
desc.style = 'height:300px;color:red;'
它内部在获取值时应该是进行了转换。用字符串赋值给style会覆盖掉标签上定义的style
事实上，当你这样赋值时，它会在对象内部用下标记录你设置了哪些值
<div id="desc" style="width:100px;">lllllll</div>
<script>
desc.style.color = 'red'
desc.style.height = '300px'
</script>
CSSStyleDeclaration 打印结果
{
0: "width"
1: "color"
2: "height"
...
width: "100px"
height: "300px"
color: "red"
...
}
"无论你何时发现你可以对某个函数进行抽象，你都应该马上去做。"
使用javascript处理样式的情况大概有两种：
1.用css无法找到要处理的元素
2.css寻找元素的办法还未得到广泛支持
3.需要定时重复执行以下改变样式的操作
10 javascript实现动画
可以给节点element增加自定义的属性，用来记录setTimeout返回的id, 这是较少用的方法，但会使逻辑更清晰。
11 HTML5
其实html5就是把原本javascript的一些行为内置到了标签里，并且给某些标签增加了javascript的API
html5增加了 <section>, <article>,<header>,<footer>等标签，还有多媒体元素，例如<canvas>,<audio>,<video>
值得注意的是很多新元素带有自己的javascript 和DOM API。
javascript也包含了更多的模块， Ceolocation, Storage, Drag-and-Drop,Socket，多线程等。
Modernizr 是一个javascript库，可用于低版本的浏览器做html5的兼容
canvas
举了一个图片处理的例子
var ctx = canvas.getContent('2d');
ctx.drawImage(img,0,0);
var c = ctx.getImageData(0,0,img.width,img.height);
// c.data中有每个像素的红绿蓝彩色值。改变后将对象设置回image中
for(i=0;i<c.height;i++) {
for(j=0;j<c.width;j++) {
var x=(i*4)*c.width + (j*4);
var r=c.data[x];
var g=c.data[x+1];
var b=c.data[x+2];
c.data[x]=c.data[x+1]=c.data[x+2]=(r+g+b)/3;
}
}
ctx.putImageData(c,0,0,0,0,c.width,c.height)
return canvas.toDataURL();
video
为什么video 需要写多个source?
<video>
<source src="movie.mp4"/>
<source src="movie.webm"/>
<source src="movie.ogv"/>
</video>
由于不同的浏览器支持不同的编解码器。没有一款浏览器支持所有的。
与video相关的DOM属性
currentTime,返回当前播放的位置，以秒表示；
duration,返回媒体的总时长，以秒表示，对于流媒体，返回无穷大；
paused,表示媒体是否处于暂停状态.
loadeddata,在媒体可以从当前播放位置开始播放时发生。
ended,在媒体已播放完成而停止时发生。
文中给出了示例如何重写video的样式，做法就是删除自带的控件controls ，然后增加一个自己写的div或button,通过给button 添加事件来控制video的播放。
表单
input的类型增加了
email,url,date,number,range,search,tel,color
有些类型在PC浏览器中看不出变化，但是放到手机端就能看到，比如设成tel,点击会自动弹出数字键盘。
其它属性
autocomplete,用于为文本输入框添加一组建议的输入项
autofocus,用于让表单元素自动获得焦点
form,用于对<form>标签外部的表单元素分组
min、max和step,用在范围(range)和数值(number)输入框中
pattern,用于定义一个正则表达式，以便验证输入的值
placeholder,用于在文本输入框中显示临时性的提示信息
required, 表示必填
12综合示例
将前面的内容综合起来给出了一个示例。
示例内容。里面阐述了如何用ajax取代form表单提交改善用户体验。
javascript库
jquery
prototype
YUI
Dojo
MooTools
添加到头部，如果没有引入jQuery，添加一个script标签
<script>
!window.jQuery && document.write(unescape('%3Cscript src="scripts/jquery-1.4.3.min.js"%3E%3C/script%3E'))
</script>
网友评论