第01章 JavaScript基础教学板书.docx

1、第01章 JavaScript基础教学板书第1 章 JavaScript基础JavaScript是一种基于对象的脚本编程语言，从本章中你可以了解到JavaScript是如何以及为何出现的，从它的开始到如今涵盖各种特性的实现，本章还介绍了JavaScript的具体应用及JavaScript脚本语言的开发环境。 JavaScript和客户端脚本编程的起源 在Web页面中使用JavaScript的方法 编写和调试JavaScript的几种常用工具1.1 JavaScript的历史与现状1.1.1 JavaScript的发展当Internet普及越来越广时，对于开发客户端脚本的需求也逐渐增大。此时，大

2、部分Internet用户仅仅通过28.8kbit/s的Modem来连接到网络，即使这时网页已经不断地变得更大和更复杂。加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次的往返交互。设想一下，用户填写完一个表单，点击提交按钮，等待30秒后，看到的却是一条告诉你忘记填写一个必要的字段的信息。那时正处于技术革新最前沿的Netscape，开始认真考虑开发一种客户端语言来处理简单的问题。当时为Netscape工作的Brendan Erich，开始着手为即将在1995年发行的Netscape Navigator 2.0开发一个称之为LiveScript的脚本语言，当时的目的是同时在浏览器

3、和服务器使用它。Netscape与Sun公司联手及时完成了LiveScript的实现。就在Netscape Navigator 2.0即将正式发布前，Netscape将其更名为JavaScript，目的是为了利用Java这个Internet时髦词汇。Netscape的这一决定也实现了当初的意图，JavaScript从此变成了因特网的必备组件。因为JavaScript 1.0如此成功，Netscape在Navigator 3.0中发布了JavaScript 1.1版本。恰巧那个时候，微软决定进军浏览器市场，发布了IE 3.0b并搭载了一个JavaScript的克隆版，叫做Jscript（这样命名

4、是为了避免与Netscape潜在的许可纠纷）。微软步入浏览器领域的这重要一步当然推动了JavaScript的进行一步发展。在微软进入后，有3种不同的JavaScript版本同时存在：Netscape Navigator 3.0中的JavaScript、IE中的JScript以及CEnvi中的ScriptEase。与其他编程语言不同的是，JavaScript并没有一个标准来统一其语法或特性，而这3种不同的版本恰恰突出了这个问题，随着用户担心的增加，这个语言标准化显然已经势在必行。1997年，JavaScript 1.1作为一个草案提交给ECMA（欧洲计算机制造商协会）。第39技术委员会（TC39

5、）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”。由来自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成的TC39锤炼出了ECMA-262，该标准定义了叫做ECMAScript的全新脚本语言。在 1998 年，该标准成为了国际 ISO 标准 (ISO/IEC 16262)。这个标准仍然处于发展之中。在 2005年12月，ECMA发布ECMA-357标准（ISO/IEC 22537）出台，主要增加对扩展标记语言XML的有效支持。从此，Web浏览器就开始努力（虽然有着不同成都的成功和失败）将ECMAScript作为JavaScript

6、实现的基础。1.1.2 JavaScript在HTML中的作用HTML超文本标识语言可用来制作所需的Web网页，通过HTML符号的描述就可以实现文字、表格、声音、图像、动画等多媒体信息的检索。然而采用单纯的HTML技术存在一定的缺陷，那就是它只能提供一种静态的信息资源，缺少动态的效果。这里所说的动态效果分为两种：一种是客户端的动态效果，就是我们看到的Web页面是活动的，可以处理各种事件，例如鼠标移动时图片会有翻转效果等：另一种是客户端与服务器端的交互产生的动态效果。实现客户端的动态效果，JavaScript无疑是一件适合的工具。JavaScript的出现，使得信息和用户之间不仅只是一种显示和浏

7、览的关系，而是实现了一种实时的、动态的、交互性的表达能力。从而基于CGI静态的HTML页面将可提供动态实时信息，并对客户操作进行反应的Web页面的取代。JavaScript脚本正是满足这种需求而产生的语言。JavaScript是一种基于对象和事件驱动并具有安全性能的脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C+、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。在HTML基础上，使用JavaScript可以开发交互式Web网页，它是通

8、过嵌入或调入在标准的HTML语言中实现的。JavaScript与HTML标识结合在一起，实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序，其作用主要体现在以下几个方面。动态性。JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。跨平台。JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并

9、支持JavaScript的浏览器就可以正确执行。相对安全性。JavaScript 是客户端脚本，通过浏览器解释执行。它不允许访问本地的硬盘，并且不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失。节省客户端与服务器端的交互时间。随着WWW的迅速发展。有许多服务器提供的服务要与客户端进行交互，如确定用户的身份、服务的内等等，这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时，需要一个进程

10、为它服务，它要占用服务器的资源（如CPU服务、内存耗费等），如果用户填表出现错误，交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多，服务器的性能影响就越大。而JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用CGI的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。 1.1.3 AjaxAjax即“Asynchronous JavaScript and XML”（异步JavaScript和XML），Ajax并非缩写词，而是

11、由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。Ajax描述了把JavaScript和Web服务器组合起来的编程范型，JavaScript是Ajax的核心技术之一，在Ajax技术架构中起着不可替代的作用。Ajax是一种Web应用程序开发的手段，它采用客户端脚本与Web服务器交换数据，所以不必采用中断交互的完整页面刷新，就可以动态地更新Web页面。使用Ajax技术可以不必刷新整个页面，只是对页面的局部进行更新，而且还可以节省网络宽带，提高网页加载速度，从而缩短用户等待时间，改善用户的操作体验。1.2 JavaScript的运行1.2.1 JavaSc

12、ript代码的装载与解析当一个HTML页面被装载时，它会装载并解析过程中遇到的任何JavaScript。Script标签可以出现在文档的head中，也可以出现在body中。如果有指向外部JavaScript文件的链接，它会先装载该链接，再继续解析页面。嵌入第三方的脚本时，如果远程服务器因负担过重而无法及时返回文件，就有可能导致页面的装载时间显著变长。代码解析是浏览器取得代码并将之转化成可执行代码的过程。这个过程的第一步是检查代码的语法是否正确，如果不正确，过程会立即失败。如果一个包含语法错误的函数被运行，将很可能会得到一条错误消息，显示函数还没定义。当浏览器确认代码合法之后，它会解析scrip

13、t块中所有的变量和函数。如果要调用的函数来自其他script块或者其他文件，请确保它在当前script元素之前装载。1.2.2 在HTML页面中嵌入JavaScriptJavaScript的脚本包括在 HTML中，它成为 HTML文档的一部分，与 HTML标识相结合，构成动态的、能够交互的网页。1引入JavaScript脚本代码到HTML文档中如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 script 标签（同时使用 type 属性来定义脚本语言）。这样， 和 就可以告诉浏览器 JavaScript 从何处开始，到何处结束。浏览器载入嵌有 JavaScript 脚本

14、的 HTML文档时，能自动识别 JavaScript 脚本代码起始标记和结束标记，并将其间的代码按照解释 JavaScript 脚本代码的方法加以解释，然后将解释结果返回 HTML文档并在浏览器窗口显示。【例1-1】将 JavaScript脚本嵌入到 HTML 文档中。 JavaScript Test document.write(Hello World!); 在例1-1的代码中除了script标记对之间的内容外，都是最基本的HTML 代码，可见script标记对将 JavaScript 脚本代码封装并嵌入到 HTML 文档中。script标记对将 JavaScript 脚本代码封装，同时告诉

15、浏览器其间的代码为 JavaScript 脚本代码，然后调用 document 文档对象的 write( )方法写字符串到 HTML文档中。 下面重点介绍script标记的几个属性： （1）language 属性：用于指定封装代码的脚本语言及版本，有的浏览器还支持 perl、VBScript 等，所有浏览器都支持 JavaScript（当然，非常老的版本除外），同时language 属性默认值也为 JavaScript； （2）type 属性：指定script标记对之间插入的脚本代码类型； （3）src 属性：用于将外部的脚本文件内容嵌入到当前文档中，一般在较新版本的浏览器中使用，使用 Jav

16、aScript 脚本编写的外部脚本文件必须使用.js 为扩展名，同时在script标记对中不包含任何内容，如下： 下面讨论标记的 src 属性如何引入 JavaScript脚本代码。【例1-2】改写例1-1 的代码并保存为 1-2.htm： JavaScript Test 同时再编辑如下代码并将其保存为 1-2.js：document.write(Hello World!);将1-2.htm 和 1-2.js 文件放置于同一目录，在浏览器中打开1-2.htm，结果与例1-1显示相同。 可见通过外部引入 JavaScript 脚本文件的方式，能实现同样的功能。同时具有如下优点： 将脚本程序同现有

17、页面的逻辑结构及浏览器结果分离。通过外部脚本，可以轻易实现多个页面共用完成同一功能的脚本文件，以便通过更新一个脚本文件内容达到批量更新的目的； 浏览器可以实现对目标脚本文件的高速缓存，避免额外的由于引用同样功能的脚本代码而导致下载时间的增加。 与C+语言等使用外部头文件（.h 文件等）相似，引入 JavaScript脚本代码时使用外部脚本文件的方式符合结构化编程思想，但也有不利的一面，主要表现在如下几点： 不是所有支持 JavaScript 脚本的浏览器都支持外部脚本，如 Netscape 2 和 Internet Explorer 3 及以下版本都不支持外部脚本。 外部脚本文件功能过于复杂或

18、其他原因导致的加载时间过长有可能导致页面事件得不到处理或者得不到正确的处理，程序员必须谨慎使用并确保脚本加载完成后其中的函数才被页面事件调用，否则浏览器报错。 综上所述，引入外部 JavaScript 脚本文件的方法是效果与风险并存，开发者应权衡优缺点以决定是将脚本代码嵌入到目标 HTML 文档中还是通过引用外部脚本文件的方式来实现相同的功能。2嵌入JavaScript脚本代码的位置JavaScript 脚本代码可放在 HTML 文档任何需要的位置。一般来说，可以在head标记、body标记之间按需要放置 JavaScript 脚本代码。（1）head标记之间放置 放置在head标记之间的 J

19、avaScript 脚本代码一般用于提前载入以响应用户的动作，一般不影响 HTML 文档的浏览器显示内容。如下是其基本文档结构： 文档标题 /脚本语句 （2）body标记之间放置 如果需要在页面载入时运行 JavaScript 脚本生成网页内容，应将脚本代码放置在body标记之间，可根据需要编写多个独立的脚本代码段并与HTML代码结合在一起。如下是其基本文档结构： 文档标题 /脚本语句 /HTML语句 /脚本语句 （3）在两个标记对之间混合放置 如果既需要提前载入脚本代码以响应用户的事件，又需要在页面载入时使用脚本生成页面内容，可以综合以上两种方式。如下是其基本文档结构： 文档标题 /脚本语句

20、 /脚本语句 在 HTML 文档中何种位置嵌入 JavaScript 脚本代码应由其实际功能需求来决定。1.3 JavaScript的开发环境由于JavaScript脚本代码是嵌入到HTML文档中被浏览器解释执行，所以开发JavaScript脚本代码并不需要特殊的编程环境，只需要普通的文本编辑器和支持 JavaScript 脚本的浏览器即可。JavaScript 脚本编程一般分为如下步骤： 选择 JavaScript 语言编辑器编辑脚本代码； 嵌入该 JavaScript 脚本代码到 HTML文档中； 选择支持 JavaScript 的浏览器浏览该 HTML 文档； 如果错误则检查并修正源代码

21、，重新浏览，此过程重复直至代码正确为止； 处理不支持 JavaScript 脚本的情况。 1.3.1 编写JavaScript代码由于JavaScript纯粹由文本构成，因此编写JavaScript代码可以用任何文本编辑器，也可以用编写HTML和CSS文件的任何程序，或者用像Visual Studio和Eclipse这样强大的集成开发环境。还可以使用开源的Aptana Studio作为JavaScript的编写工具，Aptana Studio 是一个集成式的Web应用程序开发环境，它不仅可以作为独立的程序运行，而且还可以作为Eclipse插件使用，其最广为人知的是它非常强悍的JavaScrip

22、t编辑器和调试器。Aptana Studio可以支持多种AJAX和JavaScript工具箱，包括JavaScript编辑和调试。这里我们介绍如何使用Aptana Studio编写JavaScript脚本，启动Aptana Studio 2.0后，出现如图1-1所示的开发环境界面。图1-1 Aptana Studio 2.0开发环境界面选择“File”|“New”|“Untitled HTML File”，新建一个空白的HTML文档，如图1-2所示。图1-2 新建HTML文档在Aptana Studio中编辑代码时，可以看到它的智能提示功能非常实用。它可以自动完成括号、引号的键入，无论是、()

23、，还是“”；还有自动提示功能，输入选中的提示项的快捷键是“Enter”。在输入HTML、CSS 、函数、参数、DOM对象等的时候都会有各种提示信息的Tip。如图1-3所示。图1-3 在Aptana Studio中编辑代码从菜单选择“File”|“New”|“Untitled JavaScript File”，创建一个JavaScript文件，编写例1-2中的1-2.js文件，如图1-4所示。图1-4 编写JavaScript文件1.3.2 运行与调试JavaScript代码运行和调试JavaScript的主要工具还是Web浏览器，主流的Web浏览器还会包含一些JavaScript调试程序。对于

24、JavaScript开发，Mozilla Firefox是最适合开发用的浏览器之一。Mozilla Firefox Web浏览器的插件Firebug是Web开发必不可少的，尤其是使用JavaScript和AJAX的Web开发，目前在JavaScript和CSS调试工具中位居首位。这个插件程序允许检查一个Web页面的所有元素、查看AJAX调用的结果以及查看CSS，所有这些都是实时的，这使得调试更加容易。在Firefox中安装好Firebug后，我们可以在Firefox“工具”菜单下的“附加组件”中看到已安装的Firebug插件，如图1-5所示。图1-5 Firebug插件在Firefox浏览器窗

25、口的右下角有一个小图标，点击这个图标打开Firebug，如图1-6所示。Firebug界面上的HTML、CSS、脚本和DOM标签页可以观察到每个元素的状态，在HTML标签页中选择一个元素，右侧面板就会显示选中元素上应用的样式信息。还可以进行编辑修改，而修改结果会在Firefox窗口中实时显示出来，但是在这里的进行的修改都是暂时的，刷新页面或关闭窗口之后就会丢失，绝对不会修改原始的文件。图1-6 Firebug中的HTML标签页在窗口的Firebug部分点击“控制台”标签页，如果控制台被禁用，请点击“控制台”标签页下的“启用”菜单打开并使用控制台，如图1-7所示。图1-7 Firebug控制台J

26、avaScript错误信息、Ajax调用、性能分析结果、命令行执行结果都会显示在控制台的界面上。在Firebug中没有必要使用警告语句或者页面记录，因为Firebug提供了很多手段让你将信息记录到Firebug控制台。其中最常用的函数是console.log()，它会将信息写入到控制台，但不会干扰当前页面。我们将例1-1的结果改由控制台输出。【例1-3】使用Firebug控制台进行信息输出。 使用Firebug控制台进行信息输出 console.log(Hello World!); 将该HTML文档在Firefox中打开，可以在Firebug的控制台界面看到如图1-8所示的输出结果。图1-8

27、使用Firebug控制台进行信息输出1.3.3 HTTP调试在Web中进行的所有操作都是运行在HTTP上面的，这是来回传递的信息包都使用的协议。能看到实际发送和接收的信息，不但对于Ajax调用，对于任何服务器/客户端交互都是很有帮助的。虽然有时候可以在后端记录这些信息，但是记录下来的信息不一定能真实反映出在前端发生的事情。因此，我们介绍如下几种HTTP调试器。1Firebug通过使用Firebug的调试器跟踪Ajax调用，可以观察到请求首部和响应首部。这可以很方便地确认收到的数据是否正确。通过对调用的检查还能看到向服务器发送了什么数据，以及从服务器收到了什么数据。2Live HTTP Head

28、ers如果要进校更细粒度的HTTP请求分析，可以使用Live HTTP Headers。这个Firefox扩展能显示所有HTTP请求/响应信息，不但便于进行Ajax调用，而且便于监视页面请求（包括表单数据）、重定向甚至Flash中发出的服务器调用。它还能重发指定的请求，甚至在重发之前，还允许修改请求首部，大大方便了对各种情形的测试。Firebug在响应信息的分析方面更出色，因此将它和Live HTTP Headers结合使用能得到更全面的分析。3ieHTTPHeadersIE也有类似的插件，名为ieHTTPHeaders，可以用它分析往来的通信。本章小结JavaScript是由Netscape公司开发的一种基于对象和事件驱动并具有安全性能的脚本语言，或者称为描述语言，只要用在Internet的客户端上。在HTML基础上使用JavaScript可以开发交互式Web网页。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更