Javascript Dom 编程艺术

---

学完了javascript dom 编程艺术，感觉收获的话也不是很多吧，主要是才看了一遍，现在写个笔记吧，加深点记忆。
总的来看：
这本书讲的比较细，也确实很适合入门的。很多东西的话，我也知道，就是细节处理的不好。我把JS权威指南看了一大半再看这个，确实难度不大。但我要注意的是：AJAX，正则表达式。JS总的来说的话就是没有标准库，很多细节要处理，一个好的程序必须把细节处理好。JS很广泛，概念很宽泛吧。反正我也得慢慢学着走吧。

此书笔记

• 按照书里的章节进行记录。
• 进行一定扩充。

---

第一章：ＪＳ简史及其规范

---

http://zh.wikipedia.org/zh-cn/JavaScript 维基的解释
https://developer.mozilla.org/en-US/docs/Web/JavaScript MDN指南（在此希望自己能够翻译里面的一些内容）

一般来说，完整的JavaScript包括以下几个部分：

ECMAScript，描述了该语言的语法和基本对象
文档对象模型（DOM），描述处理网页内容的方法和接口
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口
它的基本特点如下：

是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
JavaScript常用来完成以下任务：

嵌入动态文本于HTML页面
对浏览器事件作出响应
读写HTML元素
在数据被提交到服务器之前验证数据
检测访客的浏览器信息
控制cookies，包括创建和修改等

---

第二章（语法）：

---

这里我也主要看JAVASCRIPT权威指南就ok了。很全面的字典。圣经、搞基指南。
语法部分就写在JS搞基指南里吧。
不过要提的就是：Javascript解释器，我需要搞定解释与执行的原理和步骤。了解解释型程序设计语言的特性。

• chrome 的V8在：https://developer.chrome.com/home
• 还有就是从输入网址到整体显示的过程：http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/ 浏览器的工作原理：新式网络浏览器幕后揭秘。HTML5 Rocks好网站啊。

这里说一点就是变量的作用域：global variable；local variable；和变量的声明。

JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍。
声明方式一： 使用var（关键字）+变量名(标识符)的方式在function外部声明，即为全局变量，否则在function声明的是局部变量。该方式即为显式声明详细如下：
代码如下:

var test = 5; //全局变量
function a（） {
var cc=3; //局部变量 alert(test);
}
function b（）{alert(test);}

声明方式二：
没有使用var，直接给标识符test赋值，这样会隐式的声明了全局变量test。即使该语句是在一个function内，当该function被执行后test变成了全局变量。
代码如下:

test = 5;//全局变量
function a() {
aa=3; //全局变量
alert(test); }

声明方式三： 使用window全局对象来声明，全局对象的属性对应也是全局变量，详细如下： 代码如下:

window.test; window.test = 5;

这种方式经常被用到一个匿名函数执行后将一些函数公开到全局。 如JQuery1.5中最末一句 复制代码 代码如下:

window.jQuery = window.$ = jQuery;

全局变量的优点： 可以减少变量的个数，减少由于实际参数和形式参数的数据传递带来的时间消耗。 全局变量的缺点：

（1）全局变量保存在静态存贮区，程序开始运行时为其分配内存，程序结束释放该内存。与局部变量的动态分配、动态释放相比，生存期比较长，因此过多的全局变量会占用较多的内存单元。

（2）全局变量破坏了函数的封装性能。函数象一个黑匣子，一般是通过函数参数和返回值进行输入输出，函数内部实现相对独立。但函数中如果使用了全局变量，那么函数体内的语句就可以绕过函数参数和返回值进行存取，这种情况破坏了函数的独立性，使函数对全局变量产生依赖。同时，也降低了该函数的可移植性。

（3）全局变量使函数的代码可读性降低。由于多个函数都可能使用全局变量，函数执行时全局变量的值可能随时发生变化，对于程序的查错和调试都非常不利。
因此，如果不是万不得已，最好不要使用全局变量。

---

第三章（DOM）：

---

DOM：https://developer.mozilla.org/en-US/docs/Glossary/DOM

• D：Document
• O：Object
• M：Model
  
  • element node
  • text node
  • attribute node

需要了解更多的DOM的属性和方法。应该区别属性和方法。
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model MDN是个好东西。

列出书里用的一些【属性】：
+ childNodes
+ nodeType
+ nodeValue
+ firstChild
+ lastChild
+ nodeName (返回大写字母,节点元素名：IMG P DIV )

---

第四章（几章汇总）：

---

包括问题和提出的疑问与解决。

• 使用BOM：browser object model
• window对象：如：window.open(winurl,"xxx","width=320px,height=480px")
• javascript伪协议
• 内嵌的事件处理函数
• 对象检测
• 浏览器嗅探技术
• 性能考虑
• 平稳退化
• 分离javascript
• 向后兼容
• 代码压缩

共享onload事件

  function addLoadEvent(func) {
    var oldonload =window.onload;
    if(typeof window.onload != 'function') {
       window.onload = func;
    } else {
      window.onload = function() {
        oldonload();
        func();
            }
        }
    }
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);
还可以加很多事件，很方便共享onload事件。

第二种：

window.onload =function (){
firstFunction();
secondFunction();
}

第三种：

window.onload = firstFunction;
window.onload =secondFunction;
但是只有最后一个才会被执行。

此处发现一问题：
如果使用： window.onload =firstFunction();这个优先级很高。
即是否加括号也会执行，但是执行顺序对整个来说变了。

如下脚本：

function vv() {
    console.log("11")
}
function cc() {
    console.log("22")
}
window.onload=cc();
window.onload=vv;
如果是： window.onload=vv;
         window.onload=cc();则只执行cc(),不会执行vv。

在Console下结果：

22
11

此时两个window.onload都执行了。

**这是一个问题

还有一个是关于DOM 和 HTML-DOM 还有个CSS-DOM
例： element.getAttribute("src")   DOM Core
和： element.src    HTML-DOM
更多关于DOM的东西还是等我看完JS权威指南再说吧。嗯，也快了。
https://developer.mozilla.org/zh-CN/docs/Web/API/Document

---

第七章后

---

https://developer.mozilla.org/zh-CN/docs/Web/API/Document

• document.write
• innerHTML
• createElement
• creatTextNode
• appendChild
• insertBefore
• parentNode
• lastChild
• nextSibling
• 上面是本章节出现的方法和属性。

本章有个重要的技术就是AJAX，但过于简略，留着后面进行深入学习。

还有就是for/in循环
嗯，还有就是accesskey 设置网站里的快捷键。

---

第九章（CSS-DOM）

---

结构层：structural layer
表示层：presentation layer
行为层：behavior layer
网页里面简单的三个层。
如果深入来说，可以提到就是MVC等。关于前端的框架模式，设计模式。

减号和加好是保留字符。不允许出现在函数或者变量名里。
如：

• font-family 改为 element.style.fontFamily
• background-color 改为 backgroundColor

• 等很多。
  使用驼峰命名法。

  1. 只有把CSS style属性插入到标记里，即要是内联样式（内嵌样式）才能使用DOM style查询。
     不能访问其他位置的css，如外联样式表里的，或写在头文件里的。
  2. style对象的属性只能放到引号里，单双都可。如没有，js会把右边值解释为变量。如：para.style.color='black' 和 para.style.color =black
  3. 细节方面的处理为难题比较多。应在实际中去应用。

---

第十章、十一、十二、库

---

这本书就写了一点关于js动画方面的东西，很简单。所以不在详细写出来。
还有关于一些HTML5的简介。
基本的也就这些。

---

总结

---

作为入门级的JS书，写的比较详细。知识点虽然不多，但把js应该之一的地方突出了，从实际的小程序出发，吸引读者能够学下去，有了成就感才好继续嘛。突然不知道写啥了，就这么多吧。
JAVASCRIPT DOM 编程艺术--读书笔记。