JavaScript DOM编程艺术 读书笔记

JavaScript前言

JavaScript是一种高级编程语言

高级语言（High-level programming language）是高度封装了的编程语言，与低级语言相对。 它是以人類的日常語言為基礎的一種編程語言，使用一般人易於接受的文字來表示，使程序編寫員編寫更容易，亦有較高的可讀性，以方便對電腦認知較淺的人亦可以大概明白其內容。—来自维基百科

通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言

如果一个编程语言支持运行时期（动态）调度已标记的数据，该语言即为动态类型的。
—————
JavaScript定义类型时只需要定义var，无需另外指定
把一组数据结构和处理它们的方法组成对象（object），把相同行为的对象归纳为类（class），通过类的封装（encapsulation）隐藏内部细节，通过继承（inheritance）实现类的特化（specialization）／泛化（generalization），通过多态（polymorphism）实现基于对象类型的动态分派（dynamic dispatch）。（Milo Yip语）

特点：

1.交互性(它可以做的就是信息的动态交互)

2.安全性(它不允许直接访问本地硬盘)

3.跨平台性(只要是可以解释Js的浏览器都可以执行，和平台无关)。

JavaScript是由Sun公司和Netscape公司合作开发的

JScript是微软公司的标准

标准化后称之为ECMAScript

JavaScript和Java的区别

• 1.JS前身是LiveScript,Java之前是Sun公司的产品，现在是Oracle公司的产品。
• 2.JS是基于对象和事件的语言，Java是面向对象的语言
• 3.JS是弱类型的语言，Java是强类型的语言（即前文的动态类型与静态类型的区别）
• 4.JS的运行不需要编译就可以直接运行，Java需要编译为class字节码文件后才能运行

JavaScript语法

略过

DOM

Document Object Model文档对象模型

D文档

O对象：一种独立的数据结合

M

节点：
- 元素（标签）
- 文本（例如

标签间的文本）
- 属性（类似title）
- 层叠样式表

getElementById()方法

getElementByTagName()方法

上述两种方法都可以在document里面直接调用

getAttribute()需要通过Object.getAttribute("属性")这样调用（返回对象的属性

setAttribute()同上，它需要两个值，属性名和所赋予的值

JavaScript应用案例

分离css与js文件

将它们的置于标签的标签后

js是 <script src="xxx.js">

css是 <link herf="xxx.css">

本章应用的DOM属性有

childNodes 返回对象组

nodeType 返回类型 1 元素 2 属性 3 文本

nodeValue 检索和设置节点的值

firstChild 第一个子节点 同childNodes[0];

lastChild 最后一个子节点

良好的编程习惯

除了上述的分离css与js之外
多考虑浏览器不支持JavaScript之类的情况
或者默写dom属性无法调用的情况

预留后路

向后兼容性

window.onload = function () {
    if(!document.getElementById||!document.getElementByTagName) return false;
    //do something
}

结合良好的编程习惯及其他后对案例的改进

• 1.设想在js功能被禁用的浏览器中运行的情况

• 2.分离js代码

• 3.不要做太多的假设（即 未验证的情况下使用一些变量

//这个js函数用于window.onload时加载多个function时使用

addLoadEvent(firstFunc);
addLoadEvent(secondFunc);

function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

HTML—DOM提供了更简洁的记号来描述html元素的属性 例如

doucment.forms == document.getElementByTagName("form")

以及

element.src == element.getAttribute("src")

但其仅限于HTML中使用

DOM core 则可以在任何使用dom的地方使用

在完成本章节任务遇到了css样式中标签的问题 加入超链接的图片点击时 外层多了一个圈 显示为200*17的a标签

处理方式 将加入超链接的img 加入display: block;的样式

动态创建HTML

并不推荐使用的
document.write()
innerHTML// 适用于插入一大段HTML内容

---

DOM提供的方法

1

document.createElement(nodeName)
//例如
var para = document.createElement("p");
//创建一个p元素 并赋予变量para

2

parent.appendChild(child)
//用法
var testdiv = document.getElementById("testdiv");
var para = document.createElement("p");

testdiv.appendChild(para);

3

document.createTextNode(text)
//用法同创建元素节点

4

document.parentElement.appendNode(nodeName);
//将节点加到某个父节点上

5

parentElement.insertBefore(newElement,targetElement);
//将一个元素插入现有元素之前
//我们知道父元素到底是哪个，因为targetElement的parentNode

6

//自建了insertAfter函数
insertAfter(newElement,targetElement);
//shisi.js

充实文档内容

<abbr></abbr> 缩略语标签
<abbr title = “HyperText Markup Language">HTML</abbr>

HTML –> XHTML(符合XML规范的HTML)

后者更为严谨

后 暂略

CSS—DOM

三位一体的网页
- 结构层

由HTML和XHTML之类的标记语言负责创建 用标签对语义做出描述

- 表示层

由css负责创建

- 行为层

由JavaScript和DOM负责的领域 ”内容应该如何对事件做出反应“

动画效果

暂时略