重读《JavaScript DOM编程艺术》(第一版)

今天来了雅兴去图书馆看书。把《JavaScript DOM编程艺术》温习了一遍,平时写js的机会不是特别多,很多知识都有些模糊了。

伴随着身边键盘卡啦卡啦的声音,一位手速不是一般的快的程序猿。我也快速的回顾了下~


Chapter 1     JavaScript简史

1、Netscape(网景)/Sun公司

72f082025aafa40f511c2d26aa64034f79f01976

2、JavaScript 1.0 — Netscspe Navigator 2

3、VBScript — IE 3

4、ECMA标准化 — 浏览器之争

5、什么是DOM?

W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

6、DHTML:HTML\CSS\JS三种技术结合的产物。(忽略)

7、W3C DOM标准化

8、JavaScript

(1)ECMAScript:核心语言功能

(2)DOM:Document Object Model 文档对象模型(多层节点结构)

(3)BOM:Broser Object Model浏览器对象模型

9、五大主流浏览器

IE、firefox、Chrome、Safari、Opera


Chapter 2      JavaScript语法

1、基本语法

(1)区分大小写

(2)借鉴C

(3)驼峰大小写格式

(4)注释          //           /**/

2、JavaScript插入方法

(1)嵌入

(2)外部

3、变量

(1)不允许含空格、标点,$除外

(2)局部变量(var)/全局变量

4、数据类型

(1)Undefined

(2)null(空对象指针,Undefined的值是null派生的)

(3)Boolean(true/false)

(4)Number(NaN/Infinity)

(5)String(转义字符,单/双引号)

(6)Array(length,关联数组)

(7)Object(var mkq = new Person ;)

5、拼接

alert(“10″+20);  //1020

alert(10+20);  //30

6、基本操作符

(1)一元

++\–+(符)-(符)

(2)位

~/&/|/^/<>/>>>(无符号右移)

(3)布尔操作

!/&&/||

(4)乘性

乘:

其中一个NaN → NaN

Indefinity*0 → NaN(not a number)

Indefinity*Indefinity → Indefinity

除:

其中一个NaN → NaN

Indefinity/Indefinity → NaN

0/0 → NaN

余同除

(5)加性

+/-

(6)关系

/=/<=

(7)相等

!=

=  全等

!   不全等

(8)条件

… ? … : …

(10)赋值

(11)逗号

值为最后一项

7、语句

if/while/do-while/for

switch

break/continue

8、函数

(1)function

(2)作用域(局部变量(函数里var)/全局变量)


Chapter 3      DOM

1、DOM

D — Document

O — Object

M — Model

2、节点node

元素节点(element node):标签

文本节点(text node):内容

属性节点(attribute node):标签属性

3、getElementById()

getElementByTagName()

getElementByTagName(“*”).length元素节点的数目

4、getAttribute(属性名) 查属性节点

setAttribute(属性名,value) 修改属性节点


Chapter 4      案例研究:JavaScript美术馆

1

请选择图片

55555~调了我半个小时,结果是把source打成了sourse,我说怎么一点反应都没有。

回归知识点:

1、onclick=”return false;”

默认行为不会发生(不会链接到另一图片)

2、childNodes(所有子元素)

3、nodeType

(1)1 — 元素node

(2)2 — 属性node

(3)3 — 文本node

4、setAttribute():不必记忆哪种属性可以用DOM

5、nodeValue节点的值

6、firstChild第一个元素

lastChild最后一个元素


Chapter 5      JavaScript编程原则和良好习惯

1、创建新窗口

window.open(url,name,features);

window.open(winURL,”mkq”,”width=320,height=490″);

2、JS伪协议:极力不推荐

3、预留退路:如果JavaScript禁用,如何?

4、分离JavaScript

5、window.onload()


Chapter 6      JavaScript美术馆改进版

1、预留退路:假设JS禁用的情况下

  • 第一张
  • 就算JS禁用:

  • 第一张
  • 还是能展示每一张图片,就是观看起来麻烦一些。

    2、分离JavaScript

    应该在外部文件里用onclick=”…”,这样才能做到分离JS。

    方法:用一个id与JS联系。

    细节:

    (1)多个JS函数写进onload事件处理函数上

    (2)可读性

    (3)函数都要养成写{}的习惯

    (4)不要放过每一个细节

    (5)DOM Core和HTML-DOM

    DOM Core

    placeholder.setAttribute(“src”,source);

    HTML-DOM

    placeholder.src=source;

    让我想到了花了2天赶出来的工作室主页~以后要上线,绝对要改好了再出现!这样用户体验才能满分!


    Chapter 7     动态创建HTML内容

    1、动态html

    (1)老的方法:document.write()严重违背分离原则.innerHTML()

    (2)新的方法:createElement()/createTextNode()/appendChild()/insertBefore()

    2、creatElement()

    创造元素节点

    3、creatTextNode()

    创建文本节点。

    4、appendChild()

    创建子节点。

    5、insertBefore()

    把一个新的元素插入到一个现有元素前面

    parentElement(parentNode).insertBefore(newElement,targetElement)

    insertAfter()方法不存在

    6、innerHTML

    是一项专利技术,不是业界标准。

    7、最后的gallery


    JavaScript美术馆


    JavaScript美术馆









    Chapter 9    CSS-DOM

    1、三位一体网页

    (1)结构层 HTML

    (2)表示层 CSS

    (3)行为层 JS

    2、分离

    麻凯倩

    微信:makaiqian