《javascript DOM program art》 note

Javascript Dom 编程艺术


学完了javascript dom 编程艺术,感觉收获的话也不是很多吧,主要是才看了一遍,现在写个笔记吧,加深点记忆。

总的来看:

这本书讲的比较细,也确实很适合入门的。很多东西的话,我也知道,就是细节处理的不好。我把JS权威指南看了一大半再看这个,确实难度不大。但我要注意的是:AJAX,正则表达式。JS总的来说的话就是没有标准库,很多细节要处理,一个好的程序必须把细节处理好。JS很广泛,概念很宽泛吧。反正我也得慢慢学着走吧。

此书笔记

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

 

第一章:JS简史及其规范


http://zh.wikipedia.org/zh-cn/JavaScript 维基的解释

https://developer.mozilla.org/en-US/docs/Web/JavaScript MDN指南(在此希望自己能够翻译里面的一些内容)

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

1.ECMAScript,描述了该语言的语法和基本对象

2.文档对象模型(DOM),描述处理网页内容的方法和接口

3.浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

{    是一种解释性脚本语言(代码不进行预编译)。

主要用来向HTML页面添加交互行为。

可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

嵌入动态文本于HTML页面

对浏览器事件作出响应

读写HTML元素

在数据被提交到服务器之前验证数据

检测访客的浏览器信息

控制cookies,包括创建和修改等

}

 

第二章(语法):


这里我也主要看JAVASCRIPT权威指南就ok了。很全面的字典。圣经、搞基指南。

语法部分就写在JS搞基指南里吧。

不过要提的就是:Javascript解释器,我需要搞定解释与执行的原理和步骤。了解解释型程序设计语言的特性。

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

JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍。 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量。该方式即为显式声明详细如下: 代码如下: [js]var test = 5; //全局变量 function a() { var cc=3; //局部变量 alert(test); } function b(){alert(test);}[/js] 声明方式二: 没有使用var,直接给标识符test赋值,这样会隐式的声明了全局变量test。即使该语句是在一个function内,当该function被执行后test变成了全局变量。 代码如下: [js]test = 5;//全局变量 function a() { aa=3; //全局变量 alert(test); }[/js] 声明方式三: 使用window全局对象来声明,全局对象的属性对应也是全局变量,详细如下: 代码如下: [js]window.test; window.test = 5;[/js] 这种方式经常被用到一个匿名函数执行后将一些函数公开到全局。 如JQuery1.5中最末一句 复制代码 代码如下: [js]window.jQuery = window.$ = jQuery;[/js] 全局变量的优点: 可以减少变量的个数,减少由于实际参数和形式参数的数据传递带来的时间消耗。 全局变量的缺点: (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/DocumentObjectModel 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事件

[js] 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事件。 [/js]

第二种:

[js]window.onload =function (){ firstFunction();
secondFunction();
} [/js]

第三种:

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

此处发现一问题:

如果使用: window.onload =firstFunction();这个优先级很高。

即是否加括号也会执行,但是执行顺序对整个来说变了。

如下脚本:

[js]function vv() { console.log("11")
} function cc() {
console.log("22")
} window.onload=cc();
window.onload=vv;
//如果是顺序: window.onload=vv;
window.onload=cc();则只执行cc(),不会执行vv。
[/js]

Console下结果:

[js]22 11
[/js]

此时两个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的简介。

基本的也就这些。

总结


DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

[css](1)创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2)添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子节点前插入一个新的子节点

3)查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)

getElementById() //通过元素Id,唯一性[/css]

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

JAVASCRIPT DOM 编程艺术--读书笔记。

 

 

..