[精彩]javascript教案

0第1章JavaScript概述1995 年 Netscape 公司和 Sun 公司联合开发出 JavaScript 脚本语言，并在其 Netscape

00Navigator 2 中实现了 JavaScript 脚本规范的第一个版本即 JavaScript 1.0 版， 不久就显示了其强大的生机和发展潜力。由于当时 Netscape Navigator 主宰着 Web 浏览器市场，而

Microsoft 的 IE 则扮演追赶者的角色，为了跟上 Netscape步伐，Microsoft 在其 Internet

Explorer 3 中以JScript 为名发布了一个 JavaScript 的克隆版本 JScript 1.0。

001997 年，为了避免无序竞争，同时解决 JavaScript 几个版本语法、特性等方面的混乱，

JavaScript 1.1 作为草案提交给 ECMA （欧洲计算机厂商协会），并由 Netscape、 Sun、

Microsoft、Borland 及其它一些对脚本语言比较感兴趣的公司组成的 TC39（第 39 技术委员会：以下简称 TC39）协商并推出了 ECMA-262 规范版本。

JavaScript 有何特点

JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，主要用于

000

0创建具有交互性较强的动态页面。主要具有如下特点：

0

 基于对象：JavaScript 是基于对象的脚本编程语言，能通过 DOM（文档结构模型）

及自身提供的对象及操作方法来实现所需的功能。

 事件驱动：JavaScript 采用事件驱动方式，能响应键盘事件、鼠标事件及浏览器窗

00事件等，并执行指定的操作。

00

 解释性语言：JavaScript 是一种解释性脚本语言，无需专门编译器编译，而是在嵌

入 JavaScript脚本的 HTML 文档载入时被浏览器逐行地解释，大量节省客户端与服

0务器端进行数据交互的时间。

00

 实时性：JavaScript 事件处理是实时的，无须经服务器就可以直接对客户端的事件

做出响应，并用处理结果实时更新目标页面。

00

 动态性：JavaScript 提供简单高效的语言流程，灵活处理对象的各种方法和属性，

同时及时响应文档页面事件，实现页面的交互性和动态性。

 跨平台：JavaScript 脚本的正确运行依赖于浏览器，而与具体的操作系统无关。只0

0

要客户端装有支持 JavaScript 脚本的浏览器，JavaScript 脚本运行结果就能正确反

0映在客户端浏览器平台上。

0

引入JavaScript脚本代码到HTML文档中0

1．通过标记对引入

除了标记对之间的内容外，都是最基本的HTML 代码，可见标记对将 JavaScript 脚本代码封装并嵌入到 HTML 文档中。

0注意：所谓标记对，就是必须成对出现的标记，否则其间的脚本代码不能被浏览器解释执行。

浏览器载入嵌有 JavaScript 脚本的 HTML文档时，能自动识别 JavaScript 脚本代码起始标记，并将其间的代码按照解释 JavaScript 脚本代码的方法0加以解释，然后将解释结果返回 HTML文档并在浏览器窗口显示。

下面重点介绍标记对之间插入的脚本代码类型；

00src 属性：用于将外部的脚本文件内容嵌入到当前文档中，一般在较新版本的浏览器中使用，使用 JavaScript 脚本编写的外部脚本文件必须使用.js 为扩展名，同时在标记对中不包含任何内容，如下：

0

2．通过

0

0

00

运行上述代码，null 指某个节点没有对应的属性。00

节点基本操作0

获取节点mentById( )方法

00

0该方法返回与指定 id 属性值的元素节点相对应的对象，对应着文档里一个特定的元素

0节点（元素对象）。该方法是与 document 对象相关联的函数，其语法如下：

mentById(id)

其中 id 为要定位的对象 id 属性值。

00

0

00

• Beans

0

00

00

• Cheese

0

• Milk

00

一般来说，我们不必为 HTML 文档中的每一个元素对象都定义一个独一无二的 id属0性值，也可通过下面的 getElementByTagName( )方法准确定位文档中特定的元素。

0注意：

0

1、JavaScript对大小写敏感， getElementById写成GetElementById 、getelementById等都不对。

02、typeof返回数据的类型，如数值、对象、字符串等。

2. getElementByTagName( )方法

00

该方法返回文档里指定标签 tag 的元素对象数组，与上述的 getElementById( )方法返回对象不同，且返回的对象数组中每个元素分别对应文档里一个特定的元素节点（元素对象）。

其语法如下：

00document. getElementByTagName(tag)

其中 tag 为指定的标签。该方法返回的是对象数组，而不是对象。

00

var items=mentByTagName("li");

for(var i=0;i<;i++)

{

000

(typeof item[i]);

}

00

将上述的代码替换前面购物清单之间的语句，可以看出该方法返回对象

0(object)数组，长度为 3。再看下面的代码：

0

var shoplist=mentById("purchases");

0var items=mentByTagName("*")

var i=;

以上语句运行后，items数组将只包含 id 属性值为 purchases的无序清单里的元素，i返回 3，与列表项元素个数相同。

000

3 getAttribute( )方法

0

该方法返回目标对象指定属性名称的某个属性值。语法如下：

00

ribute(attribute)

其中 attribute为对象指定要搜索的属性，下面的代码演示其使用方法：

0//源程序5.8

0

0

"/TR/REC-html140/">

0

0

0

0

000

This is the first Sample!

0

上述代码通过 控制循环，遍历整个文档的

标记。运行结果显示为

00000“First Sample”。0

4 setAttribute( )方法

该方法可以修改任意元素节点指定属性名称的某个属性值，语法如下：

ribute(attribute,value)

类似于 getAttribute( )方法，setAttribute( )方法也只能通过元素节点对象调用，传递两个参数：

0 attribute：指定目标节点要修改的属性

value：属性修改的目标值

下面的代码演示其功能：

//源程序5.9

0

0

0

0

0

"/TR/REC-html140/">

00

00

• Beans
• Cheese
• Milk

0

00

0000

00

运行结果显示 null和 New List，因为 id 属性值为purchases 的ul 元素节点的title 属性在

ribute("title","New List")代码运行之前根本不存在，所以显示 null；运行后，修

0改 title 属性为“New List”。这意味着至少完成了两个步骤：

（1）创建 ul元素节点的 title 属性；

（2）设置刚创建的 title属性值；

当然，如果 title 属性值本来就存在，运行 ribute("title","New List")后，title

0000原来的属性值被“New List”覆盖。0

5. removeAttribute( )方法

该方法可以删除任意元素节点指定的属性，语法如下：

000

Attribute(name)

类似于 getAttribute( )和 setAttribute( )方法，removeAttribute( )方法也只能通过元素节点

0对象调用。其中 name 标示要删除的属性名称，例如：

//源程序5.10

00

0

"/TR/REC-html140/">

00

0

0

0

0

000

0

0

00

节点处理方法

0由于文本节点具有易于操纵、对象明确等特点，DOM Level 1 提供了非常丰富的节点处

0理方法

0

0操作类型 方法原型 附加说明

createElement(tagName) 创建由tagName指定类型的标记

0

CreateTextNode(string) 创建包含字符创string的文本节点

createAttribute(name) 针对节点创建由name指定的属性，不常用生成节点

00createComment(string) 创建由字符串string指定的文本注释

00

appendChild(newChild) 添加子节点newChild到目标节点上 插入和 添加节点

insertBefore(newChild,targetChild) 将新节点newChild插入目标节点targetChild之前复制点

0cloneNode(bool) 复制节点自身，由逻辑量bool确定是否复制子节点0

removeChild(childName) 删除由childName指定的节点 删除和替换节点

replaceChild(newChild,oldChild) 用新节点newChild替换旧节点oldChild

00insertData(offset,string) 从由offset指定的位置插入string值

appendData(string) 将string值插入到文本节点的末尾处

0

0

deleteData(offset,count) 从由offset指定的位置删除count个字符

0replaceData(offset,count,string) 从由offset指定的位置用string代替count个字符

0splitText(offset) 从由offset指定的位置将文本节点分成两个文本节点，左边更新为原始节点，右边的返回到新节点文本节点操作

0substringData(offset,count) 返回从offset指定的位置开始的count个字符

0

生成节点0

0var e = ateElement(“element”);e表示一变量，用来新建元素的引用指针地址 = function() { var p = Element(“p”);

}Child(p);0

00

00

插入节点

0法1：

把新创建的节点插入到文档的节点树最简单的方法就是让它成为该文档某个现有节点的子0节点，appendChild(newChild)作为要添加子节点的节点的方法被调用，将一个标识为newChild 的节点添加到它的子节点的末尾。语法如下：

Child(newChild)

0

= function() { var p = Element(“p”); var h1= Element(“h1”);

}

Child(txt);0

00var txt= TextNode(“Hello World”);00

Child(p);Child(h1);

0

0法2：

insertBefore(newChild,targetChild)方法将文档中一个新节点 newChild 插入到原始节点

00targetChild 前面，语法如下：

0

Before(newChild,targetChild)

调用此方法之前，要明白三点：

z 要插入的新节点 newChild

z 目标节点 targetChild

000

0z 这两个节点的父节点 parentElement

其中，parentElement=Node，且父节点必须是元素节点。以下面的语句

00为例：

Welcome to DOM World!

其表示的节点树如图 5.8所示。下面的代码演示如何在文本节点“Welcome to”之前添

000加一个同父文本节点“NUDT YSQ”：复制节点

00

var o = ode(deep);0

0有时候并不需要生成或插入新的节点，而只是复制就可以达到既定的目标。DOM 提供

0cloneNode( )方法来复制特定的节点，语法如下：

clonedNode=ode(bool)

其中参数 bool 为逻辑量：

0

0 bool=1 或true：表示复制节点自身的同时复制节点所有的子节点；

bool=0 或 false：表示仅仅复制节点自身。

00

删除和替换节点

0

0可以在节点树中生成、添加、复制一个节点，当然也可以删除节点树中特定的节点。

0DOM 提供 removeChild()方法来进行删除操作，语法如下：

0

removeNode=Child(name)

参数 name 指明要删除的节点名称，该方法返回所删除的节点对象。

0第6章 浏览器对象模型(BOM)Window对象

0

0属性

frames：Window对象数组，表示窗口中的各个框架00

self：当前窗口0

parent：某个窗口的父窗口top：最顶层的浏览器窗口00name：窗口名称

opener：当前窗口Window对象的引用00defaultStatus：默认的状态栏信息status：当前的状态栏信息

方法

0

0

0alert：警告对话框0

confirm：确认对话框prompt：提示对话框00open(url,name,features,replace)

setTimeout(expression,milliseconds)，延时执行操作，参1表示函数名，参2表示延时时间

00clearTimeout(timerId)，取消延时设置，timerId是调用setTimeout方法的返回值

0setInterval(expression,milliseconds)：定时执行操作，参1表示函数名，参2表示时间间隔

0clearInterval(timerId)：0

Navigator对象0

0appCodeName：浏览器的代码名，IE和Navigator都返回。appName：浏览器名称

0

appVersion：浏览器版本号platform：浏览器操作平台

00

userAgent：包含appName、appVersion信息0Location对象属性protocol：协议0

0

00hostname：主机名port：端口00

host：主机名和端口pathname：路径名称00hash：返回“#”以及后面的内容，如#top，指定文档中锚记的名称search：返回“？”以及以后的内容href：完整URL

00

方法0

e(url) //装载一个新文档() //刷新当前文档

0

History对象0

()：后退d()：前进0

()：指定一个地址

(-1) = ()；(1) = d()；(0) = 刷新页面

00

Screen对象0

属性

height：屏幕高度availHeight：不包括任务栏的高度00

0width：屏幕宽度0

availWidth：可用宽度

0

colorDepth：当前颜色设置所用位数-10Document对象常用属性bgColor：背景颜色fgColor：文本颜色title：标题URL：URL0

0

000

00forms：表单集合，form对象数组images：图像集合，image对象数组links：链接anchors：锚点0

0

0

方法：wirite,writeln0第7章 JQuery0

为了简化JavaScript的开发，一些JavaScript库诞生。JavaScript库封装了很多预定义的对象和实用函数。

jQuery是继 Prototype之后又一个优秀的 JavaScript框架， 由John Resig于2006年初创建，目前最新版本为 1.5，

00官方地址为： /， 中文地址为 /。

0在使用jQuery之前，你需要下载jQuery技术框架文件，并引入到页面中。jQuery框架文件是一个js文件，大小约为几十KB。导入jQuery 框架文件方法如下：

00

例如，构建一个简单的文档结构，代码如下所示（请不要忘记在文档顶部导入 文

件） ：

0

0

0

0

0

文本块2

然后定义“文本块2”字符串显示为红色，则代码如下（该代码段位于控制结构的底部） ：

00

第8章 特效//设定打开页面大小0

0

//控制打开页面的位置//图像按钮

0000

Tab组件

0

0

y=”none”;y=”none”;y=”block”;

00

0

JS的非常经典问题：在遍历数组时对DOM监听事件，索引值始终等于遍历结束后的值。

0

解决方法：给DOM节点添加_index属性//遍历数组，监听事件for (var i=0;i<;i++){

tabMenus[i]._index=i;00

0

00

tabMenus[i].onclick=function() {

}0for (var j=0;j<;j++) {00tabContents[j].y=”none”;

0tabContents[this._index].y=”block”;}}

0000