JavaScript初体验.docx
- 文档编号:12228896
- 上传时间:2023-04-17
- 格式:DOCX
- 页数:54
- 大小:1.22MB
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脚本的标示,在
标示之间、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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript 体验