21世纪高等院校规划教材：《网页设计与制作实用技术》课程配套电子教案（PPT教学课件）第十三章 在网页中使用 JavaScript

第13章在网页中使用 JavaScript 通过本章学习,应该掌握以下内容 1. Javascript的特点及运行环境 2. Javascript编程基础 3. Javascript事件驱动 4. Javascript t的对象

通过本章学习，应该掌握以下内容： 1. JavaScript的特点及运行环境 2. JavaScript编程基础 3. JavaScript事件驱动 4. JavaScript的对象 第13章 在网页中使用JavaScript

13.1脚本语言简介 JavaScript是 Netscape公司推出的跨平台、基 于对象的脚本语言,用于客户端与服务器端的应用程 序 JavaScript是一种基于对象和事件驱动并具有安 全性能的脚本语言。和 VBScript一样,它可以被嵌入 到HTML文件中,能直接被浏览器执行,从而产生各 种各样的动态网页效果。 Javascript弥补了HTML语 言的缺陷,它与HTML、CSS结合被人们称为 DHTML

13.1 脚本语言简介 JavaScript是Netscape公司推出的跨平台、基 于对象的脚本语言，用于客户端与服务器端的应用程 序。 JavaScript是一种基于对象和事件驱动并具有安 全性能的脚本语言。和VBScript一样，它可以被嵌入 到HTML文件中，能直接被浏览器执行，从而产生各 种各样的动态网页效果。JavaScript弥补了HTML语 言的缺陷 ， 它 与 HTML 、 CSS 结合被人们称为 DHTML

1311 JavaScript的特点 (1)脚本编写语言 (2)基于对象 (3)简单性 (4)安全性 (5)动态性 (6)跨平台

（1）脚本编写语言 （2）基于对象 （3）简单性 （4）安全性 （5）动态性 （6）跨平台 13.1.1 JavaScript的特点

131.2 JavaScript的运行和编辑环境 运行环境: Internet Explorer4.0或 Netscape Navigator3.0以上。 编辑环境:任何可以编辑M文档的文本编辑 器或专门的网页编辑器( FrontPage、 Dreamweaver 等)

13.1.2 JavaScript的运行和编辑环境 运行环境：Internet Explorer 4.0或Netscape Navigator 3.0以上。 编辑环境：任何可以编辑HTML文档的文本编辑 器或专门的网页编辑器（FrontPage、Dreamweaver 等）

1313在网页中使用 Javascript (1)使用 SCRIPT标记符插入脚本 在网页中最常用的一种插入脚本的方式是使用 SCRIPT标记符,方法是:把脚本标记符 置于网页上的HEAD部分或BODY部 分,然后在其中加入脚本程序。尽管可以在网页上 的多个位置使用 SCRIPT标记符,但最好还是将脚本 代码放在HEAD部分,以确保容易维护

（1）使用SCRIPT标记符插入脚本 在网页中最常用的一种插入脚本的方式是使用 SCRIPT 标 记 符 ， 方 法 是 ： 把 脚 本 标 记 符 置于网页上的HEAD部分或BODY部 分，然后在其中加入脚本程序。尽管可以在网页上 的多个位置使用SCRIPT标记符，但最好还是将脚本 代码放在HEAD部分，以确保容易维护。 13.1.3 在网页中使用JavaScript

用户在编写 Javascrip时应注意以下几点: ①书写 Javascript时应注意大小写 ②在 JavaScrip中,行尾用换行符作为一行完整代码 的终止字符 ③若需要将几行代码放在一行中,应使用分号将它们 分开 ④在 Javascrip中,/和*也是注释标记

① 书写JavaScript时应注意大小写. ② 在JavaScript中，行尾用换行符作为一行完整代码 的终止字符. ③ 若需要将几行代码放在一行中，应使用分号将它们 分开. ④ 在JavaScript中，/* 和 */也是注释标记。 用户在编写JavaScript时应注意以下几点：

(2)直接添加脚本 HTML可以直接在表单的输入元素标记符内添加脚 本,以响应输入元素的事件。 (3)链接脚本文件 如果同一段脚本要在若干个Web页中使用,则没有 必要在多处维护相同的冗余代码,此时可以将脚本放 在单独的一个文件里,然后再在任何需要该文件的 Web页中调用该文件。 要引用外部脚本文件,应使用 SCRIPT标记符的src 属性来指定外部脚本文件的URL

（2）直接添加脚本 HTML可以直接在表单的输入元素标记符内添加脚 本，以响应输入元素的事件。 （3）链接脚本文件 如果同一段脚本要在若干个Web页中使用，则没有 必要在多处维护相同的冗余代码，此时可以将脚本放 在单独的一个文件里，然后再在任何需要该文件的 Web页中调用该文件。 要引用外部脚本文件，应使用SCRIPT标记符的src 属性来指定外部脚本文件的URL

13.2 Javascript编程基础 13.2.1 Javascript变量 所谓变量,就是程序中一个已命名的存储单元。 变量的主要作用是存取数据和提供存放信息的容器 JavaScript支持的数据类型如下: Number(数 字)、 Boolean(布尔)、 String(字符串)、Null (空)、 Undefined(未定义)、 Object(对象)

所谓变量，就是程序中一个已命名的存储单元。 变量的主要作用是存取数据和提供存放信息的容器。 JavaScript支持的数据类型如下：Number（数 字） 、Boolean（布尔） 、String（字符串） 、Null （空） 、Undefined（未定义） 、Object（对象） 。 13.2 JavaScript编程基础 13.2.1 JavaScript变量

在 Javascript中定义变量应遵循以下规则: 必须以字母或下划线()开头。 在所说明的范围内必须是唯一的。 用var来定义变量,也可以用赋值语句声明变量,但 不能既不用var声明变量,又不给它赋值

在JavaScript中定义变量应遵循以下规则： • 必须以字母或下划线（_）开头。 • 在所说明的范围内必须是唯一的。 • 用var来定义变量，也可以用赋值语句声明变量，但 不能既不用var声明变量，又不给它赋值

132.2 Javascript运算符 在 JavaScript中包括以下8类运算符: (1)算术运算符:+、-、*、/、%、+ (2)逻辑运算符:&&、‖、! (3)比较运算符:、>=、==、! (4)字符串运算符:+(字符串接合操作) (5)位操作运算符:&、|、 、》》> (6)赋值运算符:=、+= (7)条件运算符::?: (8)其他运算符:.、∏]、()、 delete、new、void

13.2.2 JavaScript运算符 在JavaScript中包括以下8类运算符： （1）算术运算符 ：+、-、*、/、%、++ 、-- （2）逻辑运算符：&&、||、！ （3）比较运算符： 、>=、= =、！= （4）字符串运算符 ：+（字符串接合操作） （5）位操作运算符：&、|、^、-、 ~ 、>、>>> （6）赋值运算符：=、+= 、-=、 *=、 ／=、 ％=、 &=、 （7）条件运算符：：？： （8）其他运算符：．、[ ] 、（） 、delete 、new 、void