JavaScript程序设计(第2版)(txt+pdf+epub+mobi电子书下载)

作者：王小科

出版社：高等教育出版分社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

JavaScript程序设计(第2版)试读：

前言

JavaScript是Netscape公司开发的在HTML内基于对象的Script编程语言。JavaScript 不仅是 Web 页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的解释型脚本语言，在Web系统中得到了非常广泛的应用。

本书通过通俗易懂的文字和实用生动的例子，系统地介绍了Web开发概述、JavaScript程序设计基础、HTML文档、JavaScript语言基础、JavaScript常用内置对象、事件处理、JavaScript 常用文档对象、JavaScript 常用窗口对象、级联样式表（CSS）技术、JavaScript中的XML、Ajax技术以、JQuery技术、JavaScript实用技巧与高级应用等内容，并且在每一章的后面还提供了习题及上机指导，方便读者及时验证自己的学习效果。

本书适合作为普通高等院校计算机及相关专业教材，同时也适合 JavaScript爱好者，初、中、高级Web设计人员及网页开发人员参考使用。学习本书时，读者最好具备 HTML 和 CSS 样式等方面的基础知识。如果在前期已经开设了HTML程序设计及CSS样式等相关课程，则在教学过程中可以略讲或不讲第3章或第9章的内容。对于第11章和第13章，由于内容较深，老师可以根据实际的教学情况选择是否讲解或掌握讲解的深度和难度。

本书作为教材使用时，课堂教学建议 36～42 学时，实验教学建议 18～26 学时。各章主要内容和学时建议分配如下，老师可以根据实际教学情况进行调整。续表

本书中所有例题和相关代码都已经调试通过，同时制作了相关的多媒体课件，可在人民邮电出版社教学服务与资源网（www.ptpedu.com.cn）上免费下载。对于本书中的代码，为了避免版面的浪费，我们在编写较大的实例过程中，一般会省略部分 HTML 代码，只给出了核心代码或关键代码，读者以此为基础可以很方便、快速地编写出实际运行代码。

由于编者水平有限，书中难免存在错误、疏漏之处，敬请广大读者批评指正。编者2013年12月第1章Web应用开发概述

本章要点：

■ 什么是C/S结构和B/S结构

■ C/S结构和B/S结构的比较

■ 什么是Web

■ Web的工作原理

■ Web的发展历程

■ Web开发技术

随着网络技术的迅猛发展，国内外的信息化建设已经进入以Web应用为核心的阶段。作为即将进入Web应用开发阵营的准程序员，首先需要对网络程序开发的体系结构、Web基本知识以及Web 开发技术有所了解。本章将对网络程序开发体系结构、Web 基本概念、Web 的工作原理、Web的发展历程和Web开发技术进行介绍。1.1Web简介

Web是WWW（World Wide Web）的简称，即“万维网”，在不同的领域，有不同的含义。针对普通的用户，Web仅仅是一种环境——互联网的使用环境；而针对网站制作或设计者，它是一系列技术的总称（包括网站的页面布局、后台程序、美工、数据库领域等）。下面将对什么是Web和Web的工作原理进行详细介绍。1.1.1 什么是Web

Web的本意是网和网状物，现在被广泛译作网络、万维网或互联网等。它是一种基于超文本方式工作的信息系统。作为一个能够处理文字，图像，声音和视频等多媒体信息的综合系统，它提供了丰富的信息资源，这些信息资源通常表现为以下三种形式。

□ 超文本（hypertext）

超文本一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。

□ 超媒体（hypermedia）

超媒体是超文本（hypertext）和多媒体在信息浏览环境下的结合，有了超媒体，用户不仅能从一个文本跳到另一个文本，而且可以显示图像、播放动画、音频和视频等。

□ 超文本传输协议（HTTP）

超文本传输协议是超文本在互联网上的传输协议。1.1.2 Web的工作原理

在Web中，信息资源将以Web页面的形式分别存放在各个Web服务器上，用户可以通过浏览器选择并浏览所需的信息。Web的具体工作流程如图1-3所示。图1-1 Web的工作流程图

从图1-1中可以看出，Web的工作流程大致可以分为以下4个步骤。（1）用户在浏览器中输入URL地址（即统一资源定位符），或者通过超链接方式链接到一个网页或者网络资源后，浏览器将该信息转换成标准的HTTP请求发送给Web服务器。（2）当Web服务器接收到HTTP请求后，根据请求内容查找所需信息资源。（3）找到相应资源后，Web服务器将该部分资源通过标准的HTTP响应发送回浏览器。（4）浏览器将经服务器转换后的HTML代码显示给客户端用户。1.1.3 Web的发展历程

自从1989年由Tim Berners-Lee（蒂姆·伯纳斯·李）发明了World Wide Web以来，Web主要经历了3个阶段，分别是静态文档阶段（Web 1.0）、动态网页阶段（Web 1.5）和Web 2.0阶段。

1．静态文档阶段

静态文档阶段的Web，主要用于静态Web页面的浏览。用户通过客户端的Web浏览器，可以访问Internet上各个Web站点。在每个Web站点上，保存着提前编写好的HTML格式的Web页面，以及各Web页面之间可以实现跳转的超文本链接。通常情况下，这些Web页面都是通过HTML编写的。由于受低版本HTML和浏览器的制约，Web页面只能包括单纯的文本内容，浏览器也只能显示呆板的文字信息，不过这已经基本满足了建立Web站点的初衷，实现了信息资源共享。

随着互联网技术的不断发展以及网上信息呈几何级数的增加，人们逐渐发现手工编写包含所有信息和内容的页面对人力和物力都是一种极大的浪费，而且几乎变得难以实现。另外，这样的页面也无法实现各种动态的交互功能。这就促使 Web 技术进入了发展的第二阶段——动态网页阶段。

2．动态网页阶段

为了克服静态页面的不足，人们将传统单机环境下的编程技术与Web技术相结合，从而形成新的网络编程技术。网络编程技术通过在传统的静态页面中加入各种程序和逻辑控制，从而实现动态和个性化的交流与互动。我们将这种使用网络编程技术创建的页面称为动态页面，动态页面的后缀通常是.jsp、.php和.asp等，而静态页面的后缀通常是.htm、.html和.shtml等。

注意

这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页也可以是纯文字内容的，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网络编程技术生成的网页都称为动态网页。

3．Web 2.0阶段

随着互联网技术的不断发展，又提出了一种新的互联网模式——Web 2.0。这种模式更加以用户为中心，通过网络应用 (Web Applications）促进网络上人与人之间的信息交换和协同合作。

Web2.0技术主要包括：博客（BLOG）、微博（Twitter）、RSS、Wiki百科全书（Wiki）、网摘（Delicious） 、社会网络（SNS）、P2P、即时信息（IM）和基于位置的服务（LBS）等。1.2Web开发技术

Web是一种典型的分布式应用架构。Web应用中的每一次信息交换都要涉及客户端和服务器端两个层面。因此，Web开发技术大体上也可以被分为客户端技术和服务器端技术两大类。其中，客户端技术主要用于展现信息内容，而服务器端技术，则主要用于进行业务逻辑的处理和与数据库的交互等。下面进行详细介绍。1.2.1 客户端技术

在进行Web应用开发时，离不开客户端技术的支持。目前，比较常用的客户端技术包括HTML语言、CSS样式、Flash和客户端脚本技术。下面进行详细介绍。

□ HTML

HTML是客户端技术的基础，主要用于显示网页信息，它不需要编译，由浏览器解释执行。HTML简单易用，它在文件中加入标签，使其可以显示各种各样的字体、图形及闪烁效果，还增加了结构和标记，如头元素、文字、列表、表格、表单、框架、图像和多媒体等，并且提供了与Internet中其他文档的超链接。例如，在一个 HTML页中，应用图像标记插入一个图片，可以使用如图1-2所示的代码，该HTML页运行后的效果如图1-3所示。图1-2 HTML文件图1-3 运行结果

说明

HTML 不区分大小写，这一点与 Java 不同。例如图 1-4 中的 HTML 标记，也可以写为。

□ CSS

CSS是一种叫做样式表（style sheet）的技术，也有人称为层叠样式表（Cascading Style Sheet）。在制作网页时采用CSS样式，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变整个页面的风格。CSS大大提高了开发者对信息展现格式的控制能力，特别是在目前比较流行的 CSS+DIV 布局的网站中，CSS的作用更是举足轻重。例如，在“心之语许愿墙”网站中，如果将程序中的CSS代码删除，将显示如图1-4所示的效果，而添加CSS代码后，将显示如图1-5所示的效果。图1-4 没有添加CSS样式的页面效果图1-5 添加CSS样式的页面效果

说明

在网页中使用CSS样式不仅可以美化页面，而且可以优化网页速度。因为CSS样式表文件只是简单的文本格式，不需要安装额外的第3方插件。另外，由于CSS提供了很多滤镜效果，从而避免使用大量的图片，这样将大大缩小文件的体积，提高下载速度。

□ 客户端脚本技术

客户端脚本技术是指嵌入到Web页面中的程序代码，这些程序代码是一种解释性的语言，浏览器可以对客户端脚本进行解释。通过脚本语言可以实现以编程的方式对页面元素进行控制，从而增加页面的灵活性。常用的客户端脚本语言有JavaScript和VBScript。

说明

目前，应用最为广泛的客户端脚本语言是JavaScript，它是Ajax的重要组成部分。在本书的第2章将对JavaScript脚本语言进行详细介绍。

□ Flash

Flash 是一种交互式矢量动画制作技术，它可以包含动画、音频、视频以及应用程序，而且Flash文件比较小，非常适合在Web上应用。目前，很多Web开发者都将Flash技术引入到网页中，使网页更具有表现力。特别是应用 Flash 技术实现动态播放网站广告或新闻图片，并且加入随机的转场效果，如图1-6所示。图1-6 在网页中插入的Flash动画1.2.2 服务器端技术

在开发动态网站时，离不开服务器端技术，目前，比较常用的服务器端技术主要有CGI、ASP、PHP、ASP.NET和JSP。下面进行详细介绍。

□ CGI

CGI是最早用来创建动态网页的一种技术，它可以使浏览器与服务器之间产生互动关系。CGI的全称是Common Gateway Interface，即通用网关接口。它允许使用不同的语言来编写适合的CGI程序，该程序被放在Web服务器上运行。当客户端发出请求给服务器时，服务器根据用户请求建立一个新的进程来执行指定的CGI程序，并将执行结果以网页的形式传输到客户端的浏览器上显示。CGI可以说是当前应用程序的基础技术，但这种技术编制方式比较困难而且效率低下，因为每次页面被请求时，都要求服务器重新将CGI程序编译成可执行的代码。在CGI中使用最为常见的语言为C/C++、Java和Perl（Practical Extraction and Report Language，文件分析报告语言）。

□ ASP

ASP（Active Server Page）是一种使用很广泛的开发动态网站的技术。它通过在页面代码中嵌入VBScript或JavaScript脚本语言，来生成动态的内容，在服务器端必须安装了适当的解释器后，才可以通过调用此解释器来执行脚本程序，然后将执行结果与静态内容部分结合并传送到客户端浏览器上。对于一些复杂的操作，ASP可以调用存在于后台的COM组件来完成，所以说COM组件无限地扩充了ASP的能力。正因为ASP如此依赖本地的COM组件，使得它主要用于Windows NT平台中，所以Windows本身存在的问题都会映射到它的身上。当然该技术也存在很多优点，简单易学，并且ASP是与微软的IIS捆绑在一起的，在安装Windows操作系统的同时安装上IIS就可以运行ASP应用程序了。

□ PHP

PHP来自于Personal Home Page一词，但现在的PHP已经不再表示名词的缩写，而是一种开发动态网页技术的名称。PHP语法类似于C，并且混合了Perl、C++和Java的一些特性。它是一种开源的Web服务器脚本语言，与ASP一样可以在页面中加入脚本代码来生成动态内容。对于一些复杂的操作可以封装到函数或类中。在PHP中提供了许多已经定义好的函数，例如提供的标准的数据库接口，使得数据库连接方便，扩展性强。PHP可以被多个平台支持，但被广泛应用于UNIX/Linux平台。由于PHP本身的代码对外开放，经过许多软件工程师的检测，因此，该技术具有公认的安全性能。

□ ASP.NET

ASP.NET是一种建立动态Web应用程序的技术。它是.NET框架的一部分，可以使用任何.NET兼容的语言来编写ASP.NET应用程序。使用Visual Basic .NET，C#，J# ASP.NET 页面(Web Forms) 进行编译，可以提供比脚本语言更出色的性能表现。Web Forms允许在网页基础上建立强大的窗体。当建立页面时，可以使用ASP.NET服务器端控件来建立常用的UI元素，并对它们编程来完成一般的任务。这些控件允许开发者使用内建可重用的组件和自定义组件来快速建立Web Form，使代码简单化。

□ JSP

Java Server Pages简称JSP。JSP是以Java为基础开发的，所以它沿用Java强大的API功能。JSP页面中的HTML代码用来显示静态内容部分；嵌入到页面中的Java代码与JSP标记来生成动态的内容部分。JSP允许程序员编写自己的标签库来完成应用程序的特定要求。JSP可以被预编译，提高了程序的运行速度。另外JSP开发的应用程序经过一次编译后，便可随时随地运行。所以在绝大部分系统平台中，代码无需做修改就可以在支持JSP的任何服务器中运行。1.3网络程序体系结构

随着网络技术的不断发展，单机的软件程序已经难以满足网络计算的需要。为此，各种各样的网络程序开发体系结构应运而生。其中，运用最多的网络应用程序开发体系结构有两种，一种是基于浏览器/服务器的B/S结构，另一种是基于客户端/服务器的C/S结构。下面进行详细介绍。1.3.1 C/S结构介绍

C/S是Client/Server的缩写，即客户端/服务器结构。在这种结构中，服务器通常采用高性能的PC或工作站，并采用大型数据库系统（如Oracle或SQL Server），客户端则需要安装专用的客户端软件，如图1-7所示。这种结构可以充分利用两端硬件环境的优势，将任务合理分配到客户端和服务器，从而降低系统的通信开销。在2000年以前，C/S结构占据网络程序开发领域的主流。图1-7 C/S体系结构1.3.2 B/S结构介绍

B/S是Browser/Server的缩写，即浏览器/服务器结构。在这种结构中，客户端不需要开发任何用户界面，而统一采用如 IE 和火狐等浏览器，通过 Web 浏览器向 Web 服务器发送请求，由Web服务器进行处理，并将处理结果逐级传回客户端，如图1-8所示。这种结构利用不断成熟和普及的浏览器技术实现原来需要复杂专用软件才能实现的强大功能，从而节约了开发成本，是一种全新的软件体系结构。这种体系结构已经成为当今应用软件的首选体系结构。图1-8 B/S体系结构

说明

B/S由美国微软公司最早研发，C/S由美国Borland公司最早研发。1.3.3 两种体系结构的比较

C/S结构和B/S结构是当前网络程序开发体系结构的两大主流。目前，这两种结构都有自己的市场份额和客户群。这两种体系结构各有优缺点，下面将从3个方面进行比较说明。

1．开发和维护成本方面

C/S结构的开发和维护成本都比B/S结构的高。采用C/S结构时，对于不同客户端要开发不同的程序，而且软件的安装、调试和升级需要在所有的客户机上进行。例如，如果一个企业共有10个客户站点使用一套C/S结构的软件，则这10个客户站点都需要安装客户端程序。当这套软件进行了哪怕很微小的改动后，系统维护员都必须将客户端原有的软件卸载，再安装新的版本并进行配置。最可怕的是，客户端的维护工作必须不折不扣地进行10次。若某个客户端忘记进行这样的更新，则该客户端将会因软件版本不一致而无法工作。而B/S结构的软件，则不必在客户端进行安装及维护。如果我们将前面的C/S结构的软件换成B/S结构的，这样在软件升级后，系统维护员只需要将服务器的软件升级到最新版本，对于其他客户端，只要重新登录系统就可以使用最新版本的软件了。

2．客户端负载

C/S 的客户端不仅负责与用户的交互，收集用户信息，而且还需要完成通过网络向服务器请求对数据库、电子表格或文档等信息的处理工作。由此可见，应用程序的功能越复杂，客户端程序也就越庞大，这也给软件的维护工作带来了很大的困难。而B/S结构的客户端把事务处理逻辑部分交给了服务器，由服务器进行处理，客户端只需要进行显示，这样将使应用程序服务器的运行数据负荷较重，一旦发生服务器“崩溃”等问题，后果不堪设想。因此，许多单位都备有数据库存储服务器，以防万一。

3．安全性

C/S结构适用于专人使用的系统，可以通过严格的管理派发软件，达到保证系统安全的目的，这样的软件相对来说安全性比较高。而对于B/S结构的软件，由于使用的人数较多，且不固定，相对来说安全性就会低些。

由此可见，B/S相对于C/S具有更多的优势，现今大量的应用程序开始转移到应用B/S结构，许多软件公司也争相开发B/S结构的软件，也就是Web应用程序。随着Internet的发展，基于HTTP和HTML标准的Web应用呈几何数量级的增长，而这些Web应用又是由各种Web技术所开发的。习题

1-1 说明什么是C/S和B/S结构，以及二者之间的区别。

1-2 简述Web的工作原理。

1-3 Web从提出到现在共经历了哪三个阶段？

1-4 简述进行Web开发时都需要应用哪些客户端技术。

1-5 简述进行Web开发时服务器端应用的技术有哪些，重点说明什么是JSP？第2章JavaScript概述

本章主要内容包括什么是 JavaScript、JavaScript 的作用、JavaScript 的基本特点、JavaScript的环境要求，编写JavaScript的工具以及编写第一个JavaScript程序。通过本章的学习，读者应了解什么是JavaScript和如何编写JavaScript的程序，并熟练掌握JavaScript的开发工具的使用等，为后面学习JavaScript编程打下一个良好的基础。2.1JavaScript简述2.1.1 什么是JavaScript

JavaScript是由Netscape Communication Corporation（网景公司）所开发的。JavaScript原名LiveScript，是目前客户端浏览程序最普遍的Script语言。

JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的解释型脚本语言，在Web系统中得到了非常广泛的应用。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持用户交互并响应相应事件的动态页面。2.1.2 JavaScript的作用

使用JavaScript脚本实现的动态页面，在Web上随处可见。下面将介绍几种JavaScript常见的应用。

• 验证用户输入的内容

在程序开发过程中，用户输入内容的校验常分为两种：功能性校验和格式性校验。

功能性校验常常与服务器端的数据库相关联，因此，这种校验必须将表单提交到服务器端后才能进行。例如在开发管理员登录页面时，要求用户输入正确的用户名和密码，以确定管理员的真实身份。如果用户输入了错误的信息，将弹出相应的提示，如图2-1所示。这项校验必须通过表单提交后，由服务器端的程序进行验证。

格式性校验可以只发生在客户端，即在表单提交到服务器端之前完成。JavaScript能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 常用于对用户输入的格式性校验。

图 2-2 所示的是一个要求用户输入购卡人的详细信息，它要求对用户的输入进行以下校验。图2-1 验证用户名和密码是否正确（1）学生考号、移动电话、固定电话和E-mail不能为空。（2）学生考号必须是12位。（3）移动电话必须由11位数字组成，且以“13”和“15”开头。（4）固定电话必须是“3位区号-8位话号”或“4位区号-7位或8位话号”。（5）E-mail必须包含“@”和“.”两个有效字符。

当用户输入不符合指定格式的移动电话号码时，就会在页面输出提示信息“移动电话号码的格式不正确”，如图2-2所示。图2-2 校验用户输入的格式是否正确

• 实时显示添加内容

在Web编程中，多数情况下需要程序与用户进行交互，告诉用户已经发生的情况，或者从用户的输入那里获得下一步的数据，程序的运行过程大多数是一步步交互的过程。这种完全不用通过服务器端处理，仅在客户端动态显示网页的功能，不仅可以节省网页与服务器端之间的通信时间，又可以制作出便于用户使用的友好界面，使程序功能更加人性化。

例如，在填写许愿信息时，为了让用户可以实时看到添加后字条的样式，用户每输入一个文字，在右侧的字条预览区实时预览填写许愿字条内容的效果，如图2-3所示。图2-3 实时预览许愿字条

• 动画效果

在浏览网页时，经常会看到一些动画效果，使页面显得更加生动。使用 JavaScript 脚本语言也可以实现动画效果，例如在页面中实现一种星星闪烁的效果，如图2-4所示。图2-4 动画效果

• 窗口的应用

在打开网页时经常会看到一些浮动的广告窗口，这些广告窗口是网站最大的盈利手段。我们也可以通过JavaScript脚本语言来实现，例如图2-5所示的广告窗口。图2-5 窗口的应用

• 文字特效

使用JavaScript脚本语言可以使文字实现多种特效，例如波浪文字，如图2-6所示。图2-6 文字特效2.1.3 JavaScript的基本特点

JavaScript是为适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地应用于Internet网页制作上。JavaScript脚本语言具有以下几个基本特点。

• 解释性

JavaScript不同于一些编译性的程序语言，例如C、C++等，它是一种解释性的程序语言，它的源代码不需要经过编译，而是直接在浏览器中运行时被解释。

• 基于对象

JavaScript是一种基于对象的语言。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

• 事件驱动

JavaScript可以直接对用户或客户输入做出响应，无需经过Web服务程序。它对用户的响应，是以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，此动作称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

• 简单性

JavaScript是一种基于Java基本语句和控制流之上的简单而紧凑的设计，从而对于学习Java是一种非常好的过渡。其次它的变量类型采用弱类型，并未使用严格的数据类型。

• 跨平台

JavaScript 依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。

• 安全性

JavaScript是一种安全性语言，它不允许访问本地的硬盘，且不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。这样可有效地防止数据的丢失。2.2JavaScript的环境要求

JavaScript本身是一种脚本语言，不是一种工具，实际运行所写的JavaScript代码的软件是环境中的解释引擎——Netscape Navigator或Microsoft Internet Explorer浏览器。JavaScript依赖于浏览器的支持。2.2.1 硬件要求

在使用JavaScript进行程序开发时，要求使用的硬件开发环境如下。

• 首先必须具备运行Windows 98、Windows XP、Windows NT及其Service Pack 6a或更高版本，Windows 2000及其Service Pack 2或更高版本的基本硬件配置环境。

• 至少32M以上内存。

• 640×480分辨率以上的显示器。

• 至少20MB以上的可用硬盘空间。

注意

一般情况下，计算机的最低配置往往不能满足复杂的JavaScript程序的处理需要，如果增加内存的容量，可以明显地提高程序在浏览器中运行的速度。2.2.2 软件要求

本书介绍的 JavaScript 基本功能将适用于各种浏览器。为了能够更好地使用本书，建议读者软件安装配置如下。

• Windows 95/98或Windows NT及以上版本。

• Netscape Navigator 3.0或Internet Explorer 3.0以上版本。

• 编辑JavaScript程序可以使用任何一种文本编辑器，例如Windows中的记事本、写字板等应用软件。由于JavaScript程序可以嵌入于HTML文件中，因此，读者可以使用任可一种编辑HTML文件的工具软件，例如Macromedia Dreamweaver和Microsoft FrontPage等。2.3编写JavaScript的工具“工欲善其事，必先利其器”。随着 JavaScript 的发展，大量优秀的开发工具接踵而出。找到一个适合自己的开发工具，不仅可以加快学习进度，而且可以在以后的开发过程中及时发现问题，少走弯路。下面就来介绍几款简单易用的开发工具。2.3.1 使用记事本

记事本是最原始的 JavaScript 开发工具，它最大的优点就是不需要独立安装，只要安装微软公司的操作系统，利用系统自带的记事本，就可以开发 JavaScript 应用程序。对于计算机硬件条件有限的读者来说，记事本是最好的JavaScript应用程序开发工具。

例 2-1 下面将介绍如何通过使用记事本工具来作为 JavaScript 的编辑器编写第一个JavaScript脚本。（1）单击“开始”菜单，选择“程序”/“附件”/“记事本”选项，打开记事本工具。（2）在记事本的工作区域输入HTML标识符和JavaScript代码。

这是一段简单的JavaScript代码。

说明

利用记事本开发JavaScript程序也存在着缺点，就是整个编程过程要求开发者完全手工输入程序代码，这就影响了程序的开发速度。所以，在条件允许的情况下，最好不要只选择记事本开发JavaScript程序。2.3.2 使用FrontPage

FrontPage是微软公司开发的一款强大的Web制作工具和网络管理向导，它包括HTML处理程序、网络管理工具、动画图形创建、编辑工具以及Web服务器程序。通过FrontPage创建的网站不仅内容丰富而且专业，最值得一提的是，它的操作界面与 Word 的操作界面极为相似，非常容易学习和使用。

例2-2 下面介绍应用FrontPage编写JavaScript脚本的步骤。（1）打开FrontPage，默认创建一个new_page_1.htm的文档，如图2-8所示。用户可以直接在该文档中编写 JavaScript 脚本。另外，用户也可以通过菜单栏新建一个 HTML 文件来编写JavaScript脚本。单击“文件”/“新建”/“网页”选项，就会弹出一个网页制作的向导，从3方面提供了几十种基本方案供用户选择，如图2-9所示。在“常规”选项卡中一共提供了26种模板供用户选择。在“框架网页”中，提供了10种框架结构，几乎包括了所有常见的网页框架。“样式表”则能帮助用户确定统一的文字风格。图2-8 默认文档页图2-9 新建文档（2）在打开的页面中，页面下方有3个视图形式，分别为“普通”、“HTML”和“预览”。在“普通”视图中，可以在页面插入HTML元素，进行页面布局和设计，如图2-10所示；在“HTML”视图中，可以编辑JavaScript程序，如图2-11所示；在“预览”视图中，可以运行网页内容，如图2-12所示。图2-10 “普通”视图图2-11 “HTML”视图图2-12 “预览”视图2.3.3 使用Dreamweaver

Dreamweaver（DW）是当今流行的网页编辑工具之一。它采用了多种先进技术，提供了图形化程序设计窗口，能够快速高效地创建网页，并生成与之相关的程序代码，使网页创作过程变得简单化，生成的网页也极具表现力。从MX版开始，DW开始支持可视化开发，对于初学者确实是比较好的选择，因为都是所见即所得。其特征包括，语法加亮、函数补全，参数提示等。值得一提的是，Dreamweaver 在提供了强大的网页编辑功能的同时，还提供了完善的站点管理机制，极大地方便了程序员对网站的管理工作。

下载地址：http://www.adobe.com/downloads/

例2-3 下面介绍应用Dreamweaver编写JavaScript脚本的步骤。（1）安装Dreamweaver后，首次运行Dreamweaver时，展现给用户的是一个“工作区设置”的对话框，在此对话框中，用户可以选择自己喜欢的工作区布局，如“设计者”或“代码编写者”，如图2-13所示。这两者的区别是在Dreamweaver的右边或是左边显示窗口面板区。图2-13 “工作区设置”对话框（2）选择工作区布局，并单击“确定”按钮后。选择“文件”/“新建”命令，将打开“新建文档”对话框。在该对话框中的“类别”列表区选择“基本页”，再根据实际情况来选择所应用的脚本语言，这里选择的是“HTML”，然后单击“创建”按钮，创建以JavaScript为主脚本语言的文件，如图2-14所示。图2-14 “新建文档”对话框

说明

如果用户选择了“JavaScript”选项，则创建一个 JavaScript 文档。在创建 JavaScript脚本的外部文件时不需要使用之间。在标记中输入如下代码：

在Dreamweaver中输入JavaScript脚本程序的运行结果如图2-18所示。图2-18 在Dreamweaver中输入JavaScript脚本程序

JavaScript脚本在HTML文件中的位置有以下3种。

• 在HTML的标记中的任何位置。如果所编写的JavaScript程序用于输出网页的内容，应该将JavaScript程序置于HTML文件中需要显示该内容的位置。

• 在HTML的标记中。如果所编写的JavaScript程序需要在某一个HTML文件中多次使用，那么，就应该编写JavaScript函数（function），并将函数置于该HTML的标记中。

使用时直接调用该函数名就可以了。

单击“提交”按钮，调用check()函数。

• 在一个js的单独的文件中。如果所编写的JavaScript程序需要在多个HTML文件中使用，或者，所编写的JavaScript程序内容很长，这时，就应该将这段JavaScript程序置于单独的js文件中，然后在所需要的HTML文件“a.html”中，通过

被包含的ch1-1.js文件代码如下。

document.write('这是外部文件中JavaScript代码!');

试读结束[说明：试读内容隐藏了图片]

下载完整电子书