JavaScript初体验.docx

JavaScript初体验.docx

《JavaScript初体验.docx》由会员分享，可在线阅读，更多相关《JavaScript初体验.docx（54页珍藏版）》请在冰点文库上搜索。

JavaScript初体验

第1章JavaScript初体验

随着Internet的普及，电子商务、电子政务、网上银行等各种网络应用正迅速发展。

但与此同时，随着个人电脑性能的不断提高、网络用户规模的逐渐扩大，也带来了一些诸如个人电脑性能浪费、服务器压力过大、用户等待时间过长等问题。

JavaScript作为一种运行于客户端浏览器的、轻量的、解释性的并且基于对象与事件监听的脚本语言，在这种情况下，逐步受到重视并在实际中得到普遍应用。

本章将介绍JavaScript的基本概念、基本特征、应用技术基础（与HTML文件的融合、错误调试、浏览器支持）以及简单的JavaScript应用的实例。

1.1JavaScript简介

说到JavaScript不能不提的就是Netscape（网景）公司，这家公司的Netscape浏览器曾经风靡一时。

Netscape公司在设计浏览器时，为提高网页的互动性，开发了LiveScript编程语言，而LiveScript还是JavaScript的前身。

JavaScript是Netscape公司与Sun公司合作、改进并重新设计LiveScript之后的产物。

随着技术的进步，JavaScript的版本也在不断发展。

到目前为止，最新的JavaScript的版本是JavaScript 1.7。

目前支持JavaScript 1.7的浏览器有Firefox 2.0.x等。

目前，在Web应用中，使用相当普遍的技术就是Ajax（本书将在后面章节中介绍）。

Ajax的组成中，非常重要的技术就是JavaScript，这从Ajax的详细名称——AsynchronousJavaScriptandXML（异步JavaScript和XML）中可见一斑。

1.2认识JavaScript

概括地说，JavaScript就是一种基于对象和事件驱动，并具有安全性能的脚本语言。

对象和事件是JavaScript的两个核心，本书将在以后的章节详细介绍。

JavaScript是一种脚本语言。

脚本语言的特点是比较简单、易学，即使是程序设计新手也可以非常容易地使用JavaScript进行简单的编程。

JavaScript可以被嵌入到HTML文件中，不需要经过Web服务器就可以对用户操作作出响应，使网页更好地与用户交互；在利用客户端个人电脑性能资源的同时，适当减小服务器端的压力，并减少用户等待时间。

说明：

JavaScript在Web浏览器端执行时，不对客户端文件进行操作，加大了系统的安全性。

JavaScript的运行需要JavaScript解释器。

换言之，一个能运行JavaScript的Web浏览器，需要嵌入JavaScript解释器。

这与Java的只要有Java虚拟机就能运行、跨操作系统平台的特性类似。

因此，JavaScript的使用相当广泛。

目前几乎所有的主流浏览器（InternetExplorer、Firefox、Opera、Maxthon……）都支持JavaScript。

1.2.1JavaScript的运行环境

1．软件环境

前文中提到JavaScript的运行需要JavaScript解释器的支持，而与具体的操作系统无关。

目前支持JavaScript的Web浏览器有Internet Explorer、Firefox、Opera和Maxthon等。

另外，各种HTML、JavaScript的IDE工具也属于JavaScript运行的软件环境。

2．硬件环境

支持浏览器的操作系统，要求最低硬件配置。

❑CUP至少233MHz。

❑基本内存32MB。

❑显示器至少256色，分辨率640×480像素及以上。

❑鼠标等其他外设。

1.2.2JavaScript代码的编写工具——UltraEdit

JavaScript的代码编辑器有很多，如Windows系统内置的“记事本”工具、MicrosoftFrontPage、MicrosoftScriptEditor、PrimalScript、EditPlus、UltraEdit和Aptana等。

本节将介绍目前较为流行的，同时也是使用比较方便的代码编写工具——UltraEdit。

1．认识UltraEdit

UltraEdit是一款功能强大的代码文本编写工具，由IDMComputerSolutions开发。

UltraEdit的功能有：

同时编辑多种类型的多个文件、十六进制编辑模式、列编辑模式、行号和列号显示、选中行高亮显示、选中的字节数、代码折叠、拼写检查、宏功能、文件格式指示、文件大小指示、文件比较、多文件的查找和替换、查找字符串下拉列表、用户定制菜单/工具栏、输出窗口、命令调用、FTP支持以及强大的可扩展性等。

UltraEdit运行界面如图1.1所示。

本书介绍的UltraEdit版本为12.10a，支持的语言类型有HTML、JavaScript、Perl、PHP、CSS、C/C++、Java、C#和VisualBasic等。

UltraEdit会自动根据文件类型，选择合适的代码显示效果（彩色显示），用户可以根据需要自己选择合适的显示效果，还可以自定义显示类型，如图1.2和图1.3所示。

图1.1UltraEdit运行界面

图1.2UltraEdit的文件查看方式选择图1.3UltraEdit下HTML文件显示效果

2．UltraEdit的功能

选择UltraEdit作为JavaScript的代码编写工具，是因为UltraEdit除了以上功能外，还有HTML工具栏（如图1.4所示）、标签列表（如图1.5所示）、HTML精简（如图1.6所示）等功能。

正确使用这些功能，可以提高编写代码的效率。

图1.4UltraEdit的HTML工具栏

图1.5UltraEdit的标签列表图1.6HTML精简

（1）HTML工具栏

使用UltraEdit的HTML工具栏，可以直接在文件中插入相应的HTML标示信息，并且可以在可视效果下完成对颜色的选取。

例如，在文件中插入button标示，操作及效果如图1.7所示。

图1.7文件中插入button标示

单击工具栏上的按钮，直接在文件中插入标示内容，可以简化录入工作，减少重复操作。

（2）标签列表

标签列表的打开方式：

单击HTML工具栏上的“查看标签列表”按钮。

在标签列表中，列出了几乎所有的HTML基本标示及其属性、方法。

使用标签列表，可以在完全不用手工录入的情况下，形成一个基本的HTML页面。

使用方法：

直接双击标签列表中的某条标签，即可将标签对应的内容添加到HTML文件中。

（3）自动完成

自动完成代码功能。

UltraEdit下，在文件中插入信息，会弹出代码提示信息，如图1.8所示。

用户录入信息时，可以直接在弹出的信息中选择需要录入的信息。

开启自动完成功能的设置方法：

依次选择“高级”→“配置”命令，打开“配置”窗口。

选择“编辑器”下的“自动完成”选项，选中“自动显示自动完成对话框”复选框，单击“确定”按钮，即可设置自动完成功能，如图1.9所示。

  图1.8UltraEdit提示信息图1.9开启自动完成功能

（4）HTML精简

UltraEdit还有一个非常实用的功能，即HTML精简。

HTML精简，就是对HTML文件进行有效性验证，检查HTML中存在的问题，并在输出窗口中显示相关信息。

例如，编写如下格式的文件，文件中有一个错误——在HTML中，没有FORMMETHOD这个标记。

当文件编辑完成后，单击“HTML精简”按钮，UltraEdit会对HTML文件进行检验。

输出窗口中，显示如图1.10所示的信息。

单击“HTML精简”按钮后，输出窗口中显示信息（Info）、警告（Warning）、错误（Error）3种级别的信息。

每种提示信息都有对应HTML文件的行数、列数，以及每种提示信息的较为详细的描述。

双击提示信息，光标会停留在提示信息对应的行。

这种显示结果，便于用户迅速查找到错误信息及错误原因，排除HTML页面中的基本错误。

图1.10HTML精简操作效果

（5）预览文件

UltraEdit可以直接调用浏览器，在浏览器中查看文件。

单击“在默认浏览器显示文件”按钮，UltraEdit自动调用当前系统中的默认浏览器，在浏览器中运行HTML文件，用户不必每次都找到HTML文件，或找到浏览器，运行HTML文件。

3．UltraEdit的帮助

任何一种软件的使用都离不开帮助文档，帮助文档是最好的用户使用手册。

UltraEdit提供了非常完善的帮助文档，如图1.11所示。

用户可以按照目录查找需要的内容，也可以在索引中输入关键字搜索，还可以直接根据用户录入，搜索相关主题的帮助信息。

图1.11UltraEdit的帮助文档

提示：

用户可以根据实际需要，使用UltraEdit的帮助文档。

1.2.3JavaScript制作最简单的Hello World实例

下面就从最基本的“Hello World”实例开始JavaScript之旅。

打开网页，单击网页中的Hello按钮，弹出提示框信息“Hello World！

”，如图1.12所示。

图1.12Hello World实例运行效果

单击Hello按钮，弹出提示框信息的代码如代码1.1所示。

代码1.1HelloWorld实例

--

functionhello（）

{

window.alert（"HelloWorld!

"）;

}

//-->

由此可以看出，使用JavaScript编程是一件比较简单的事情。

还有一种效果，打开页面，即在页面中显示“Hello World！

”信息。

使用JavaScript实现，效果如图1.13所示，方法如代码1.2所示。

图1.13页面输出Hello World效果

代码1.2页面输出Hello World

document.write（"

由于使用JavaScript生成页面的内容，因此为防止页面运行时错误，JavaScript代码段需要嵌入body标记中。

JavaScript在HTML页面中的嵌入方式将在1.4节详细介绍。

1.3JavaScript与Java的区别

JavaScript与Java是初学者很容易混淆的两种语言，两者貌似相近，实则相距甚远。

JavaScript与Java的区别如下：

（1）两个公司的两种不同产品

JavaScript是Netscape公司开发的一种脚本语言。

Java是Sun公司开发的、高级的面向对象的程序设计语言。

一个是Netscape，一个是Sun。

（2）程序执行方式不同

JavaScript是一种解释语言，运行之前需要将文本格式的代码下载到客户端，由客户端的Web浏览器边解释边执行，因此效率会有一定的影响。

Java则需要在执行之前进行编译，编译后形成字节码文件，只能执行编译之后的结果。

由于直接执行编译后的结果，因此效率较高。

一个是边解释边执行，一个是编译后再执行。

（3）语法不同

JavaScript的变量声明采用弱类型，变量可以在不声明的情况下直接使用。

解释器在运行时，对变量类型进行检查。

Java采用强类型变量检查，需要严格按照语法要求，没有声明的变量不可以使用，并且变量的类型不容易改变。

例如：

在JavaScript中，可以直接使用：

for（i=0;i<10;i++）

在Java中，同样的功能，则需要改写为：

for（inti=0;i<10;i++）

一个是弱类型，一个是强类型。

（4）基于对象和面向对象

JavaScript的定义中提到“JavaScript是一种基于对象和事件驱动的脚本语言”。

JavaScript内部提供多种方便用户使用的内置对象。

另外，JavaScript可以在操作页面中，由浏览器创建各种对象。

但是，JavaScript本身不具有面向对象的特征——封装、继承、多态，因此不是面向对象的语言。

Java是一种比较彻底的面向对象的语言，任何使用Java进行的编程，都要使用对象。

Java几乎所有的操作都离不开对象。

一个是基于对象，一个是面向对象。

（5）嵌入HTML方式不同

JavaScript可以直接在HTML文件中使用，并且使用标示。

Java如果想在普通的HTML页面中运行，则需要使用标示，并且指定的目标是已经编译好的字节码文件。

一个直接嵌入，一个需要额外的标示，并且需要编译之后的文件。

1.4JavaScript与HTML

前文中提到，JavaScript的一大特点就是可以直接嵌入HTML文件中使用。

下面将介绍JavaScript嵌入HTML的多种方式（在HTML网页头中嵌入、在HTML网页体中嵌入、在HTML网页的元素事件中嵌入、在HTML中调用已经存在的JavaScript文件等），及每种方式的具体实现方式。

1.4.1在HTML网页头中嵌入JavaScript代码

一般情况下，如果不是使用JavaScript生成HTML网页的内容，JavaScript放在HTML网页的头（）中。

这样，不会因为JavaScript影响整个网页的标示布局。

在HTML网页头中嵌入JavaScript的方式如下：

--

……

JavaScript脚本内容

……

//-->

包含JavaScript脚本的标示，在标示之间、标示之后添加，这样就可以直接在HTML文件中调用JavaScript代码。

1.4.2在HTML网页体中嵌入JavaScript代码

当需要使用JavaScript生成HTML网页内容时（某些JavaScript实现的动态树），就需要把JavaScript放在HTML网页体（）中。

具体使用方法如下：

--

……

JavaScript脚本内容

……

//-->

由上面代码可以看出，JavaScript在HTML网页体中嵌入的方式是：

在标示之间添加。

说明：

JavaScript代码可以在同一个HTML网页中同时嵌入网页头与网页体，并且在同一个网页中可以多次嵌入JavaScript代码。

1.4.3在HTML网页的元素事件中嵌入JavaScript代码

当需要对HTML网页中的某个元素进行事件处理时（验证用户输入的值是否有效），如果事件处理的JavaScript代码量较少，可以直接在相应的HTML网页的元素事件中嵌入JavaScript代码。

例如，当文本框失去焦点时，需要对文本框是否为空进行判断，如果为空则弹出提示信息，如图1.14所示。

图1.14文本框信息检验的运行效果

判断文本框的值的JavaScript代码如代码1.3所示。

代码1.3文本框值的判断

if（this.value.length<1）window.alert（'文本框不能为空！

'）;">

代码说明：

当文本框失去焦点时，JavaScript对文本框的值进行长度检验，如果值长度小于1，弹出“文本框不能为空！

”的提示信息框。

类似于这种较为简单的JavaScript代码，可以直接在HTML网页的元素事件中嵌入。

嵌入方法为：

在事件对应的事件处理方法中加入“javascript:

”说明。

1.4.4用JavaScript获取网页内容实现数据验证

在JavaScript中获取页面元素的方法有很多种，可以根据元素的名称（name）来获取，可以根据元素的Id来获取，可以根据元素在form中的索引来获取……其中，比较常用的方法是根据元素名称获取与根据元素Id获取。

例如，在JavaScript中获取名为txtName的HTML网页文本框元素，代码如下：

var_txtNameObj=document.forms[0].elements（"txtName"）;

变量_txtNameObj即为名为txtName的文本框元素。

下面举例说明，用JavaScript获取网页内容实现数据验证。

要求：

单击“确定”按钮，对网页中文本框中的值进行长度（不能为空，并且小于200）及是否为数字的验证。

运行效果如图1.15~图1.17所示。

  图1.15文本框为空效果 图1.16文本框长度过大效果图1.17文本框内容不是数字的效果

使用JavaScript对网页内容进行验证的代码如代码1.4所示。

代码1.4使用JavaScript对网页中的内容进行验证

--

functionvalidate（）

{

var_txtNameObj=document.all.txtName;//获取文本框对象

var_txtNameValue=_txtNameObj.value;//文本框对象的值

if（（_txtNameValue==null）||（_txtNameValue.length<1））

{//判断文本框的值是否为空

window.alert（"文本框内容不能为空！

"）;

_txtNameObj.focus（）;//文本框获得焦点

return;

}

if（_txtNameValue.length>200）

{//判断文本框的值，长度是否大于200

window.alert（"文本框内容，长度不能超过200！

"）;

_txtNameObj.focus（）;

return;

}

if（isNaN（_txtNameValue））

{//判断文本框的值，是否全是数字

window.alert（"文本框内容，必须全部由数字组成！

"）;

_txtNameObj.focus（）;

return;

}

}

//-->

代码说明：

JavaScript中，首先获得文本框对象及其值，然后对其值是否为空进行判断，接下来对其值的长度是否大于200进行判断，最后对其值是否全是数字进行判断。

每次判断，如果条件成立，弹出相应的信息提示框，并使文本框获得焦点，然后返回，结束事件处理程序。

1.4.5在HTML中调用已经存在的JavaScript文件

如果JavaScript的内容较长，或者多个HTML网页中都调用相同的JavaScript程序，可以将较长的JavaScript或者通用的JavaScript写成独立的.js文件，直接在HTML网页中调用。

例如，判断用户输入的某个值是否在指定的取值区间内，需要在页面中调用一个通用JavaScript方法isRightCurrency（currencyObj,minVal,maxVal,msg），运行效果如图1.18和图1.19所示。

图1.18用户输入值的检验效果

（一）图1.19用户输入值的检验效果

（二）

HTML页面中调用.js文件进行验证的代码如代码1.5所示。

代码1.5HMTL中调用.js文件

金额：

/**

*检验对象的值是否在正确的区间

*currencyObj：

要检验的对象

*minVal：

最小值

*maxVal最大值

*msg：

提示信息

*/

functionisRightCurrency（currencyObj,minVal,maxVal,msg）

{

varcurrencyVal=currencyObj.value;//验证对象的值

if（（currencyVal==null）||（currencyVal.length<1））returnfalse;

varcurrencyFloat=parseFloat（currencyVal）;//数据类型转换

varminFloatVal=parseFloat（minVal）;

varmaxFloatVal=parse