商务网站页面设计技术

第12章JavaScript概述12.1JavaScript的概念与发展12.2JavaScript的特点1、是一种脚本编写语言JavaScript是一种脚本语言，可以被嵌入到HTML的文件之中。它采用小程序段的方式实现编程，即可以用很小的程序做大量的事，这实际上也是JavaScript的杰出之处。7、解释性像其它脚本语言一样,JavaScript同样也是一种解释性语言,它提供了一个比较容易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标记结合在一起，从而方便用户的使用操作。12.3内部JavaScript代码的基本操作内部JavaScript是指JavaScript的代码是置于HTML文件内部的，而无需以独立于HTML文件的形式单独保存。下面我们首先介绍一个内部JavaScript代码的示例，然后说明将内部JavaScript代码嵌入到当前HTML文档的方法。12.3.1内部JavaScript代码的示例为了初步认识和更好地理解JavaScript，下面我们首先来看一个简单的JavaScript的例子。一、【示例12.1】本例子的功能是：说明如何在HTML文档中直接嵌入JavaScript脚本代码。有关的源程序文件可参见下面的HTML文件：“E12_1.htm”，在浏览器中的显示效果如图12.1所示。本章内容提要这一章共分为6节，主要对JavaScript进行概要性介绍，以便为后续的进一步学习奠定基础。具体内容包括：JavaScript的概念与发展JavaScript的特点内部JavaScript代码的基本操作外部JavaScript文件的基本操作JavaScript编程规范、JavaScript和Java的区别【源程序清单：E12_1.htm】htmlheadtitleJavaScript程序的示例/titlescriptlanguage=JavaScript!--hidescriptfromoldbrowsersdocument.write(这是一个JavaScript程序的示例br);functiongetname(str){alert(hello!+str+您好!欢迎您学习JavaScript);}document.close();//endhidingcontents--/script/headbodyp请在下面的文本框中输入你的名字/pforminputtype=textname=nameonBlur=getname(this.value)value=/form/body/html图12.1HTML文档中直接嵌入JavaScript脚本二、JavaScript脚本代码说明:在这个例子中(!--...--＞)部分是文档的注释部分，它可以避免旧版本或是不支持JavaScript的浏览器因为不认识这些函数而产生错误。注释最后一行的开头双斜线//，不可以省略，它代表了JavaScript的注释，若省略了的话，--＞之前的文字会被误认为是JavaScript的指令。Document.write()是文档对象的输出函数，其功能是将括号中的字符或变量值输出到窗口；document.close()是将输出关闭。这个例子可以让用户在文本框中输入其名字，当文本框失去焦点时，发生onBlur事件并调用getname(this.value)函数，将信息显示在对话窗口上。其中，函数getname(this.value)中的this.value是用户在文本框中输入的名字。12.3.2内部JavaScript代码的嵌入我们可以把JavaScript的脚本包括在HTML中，使它成为HTML文档的一部分。正是因为JavaScript脚本与HTML标记的结合，才使它成为了一个功能强大的Internet网上编程语言。上面的例子12.1就例示了如何在HTML文档中直接嵌入JavaScript脚本代码的方法。一、JavaScript脚本的嵌入位置JavaScript脚本是直接放在标记Script.../Script内部的，具体位置如下：scriptlanguage=JavaScript!--hidescriptfromoldbrowsersJavaScript语言代码；JavaScript语言代码;………………//endhidingcontents--/script二、说明:上述代码中标记Script.../Script指明了其内部嵌入的是“脚本”源代码。属性language=JavaScript，说明标记中的脚本源代码使用的是何种语言，这里表示使用的是JavaScript语言。!--...--部分是来自HTML文档的注释部分。把JavaScript代码放入其中，可以避免旧版本或是不支持JavaScript的浏览器因为不认识这些代码而产生错误。因为此时，这些浏览器会把!--...--部分的内容编译为HTML的注释。双斜线//，如果后面有内容则不可以省略，因为它代表了JavaScript的注释。虽然例子12.1中，Script.../Script标记是放入到文档开头标记head../Head之间的，但实际上它也可以放入到文档主体标记Body.../Body之间的任何位置。如果把Script.../Script标记放入到head../Head之间，则可以使JavaScript脚本在主页和其余部分代码之前装载。12.4外部JavaScript文件基本操作上面所述的内部JavaScript代码，由于其代码是置于HTML文件内部的，因而它只能够应用于当前的HTML文件。如希望站点中的其它文件也使用同样的JavaScript代码，则需要重新编写一次代码，上面的方法就不够灵活、也不方便。为此，引入外部JavaScript文件。外部JavaScript代码是指JavaScript代码是置于HTML文件外部，并以独立于HTML文件的形式单独保存在扩展名为.js的文本文件中。优点是，我们可以在站点的每个文件中引用该外部JavaScript文件中的代码，从而可以节省大量的空间，为程序编写带来巨大方便。12.4.1JavaScript文件示例下面我们来看一个外部JavaScript文件的例子。一、【示例12.2】本例子是用记事本编写的一个外部JavaScript文件“E12_2.js”。其功能是：说明外部JavaScript文件的组成。相关的JavaScript源程序及其在记事本窗口中的显示如下。【源程序清单：E12_2.js】document.write(这是一个JavaScript程序的示例br);functiongetname(str){alert(HI!+str+您好!欢迎您学习JavaScript);}document.close();图12.2外部JavaScript文件二、外部JavaScript文件说明:该示例中包含了2条语句：“document.write();”、“document.close();”和一个函数functiongetname(str)。关于上面JavaScript文件中的各个语句的解释同前面例子12.1一样，这里不再赘述。一个外部的JavaScript文件不能包含任何HTML标记，它的内容只能是JavaScript代码。12.4.2JavaScript文件的嵌入在商务网站的页面设计中，一般我们会把网站中经常使用的功能，编写为多个扩展名为.js的外部JavaScript文件。然后在需要使用该功能的页面中嵌入一个相应的外部JavaScript源文件，来代替直接在HTML文件中嵌入JavaScript脚本，这样就可以使相同的JavaScript源程序被不同的HTML文件所引用。一、JavaScript文件的嵌入嵌入外部JavaScript文件的代码如下：scriptlanguage=JavaScriptsrc=外部JavaScript代码文件名……/script下面我们来看一个在HTML文档中嵌入外部JavaScript文件的例子。二、【示例12.3】本例子的功能是：说明如何在HTML文档中嵌入外部JavaScript文件。有关的代码可参见下面的源程序文件：E12_3.htm，在浏览器中的显示效果如图12.3所示。【源程序清单：E12_3.htm】htmlheadtitleHTML文档中嵌入外部JavaScript文件的例子/titlescriptlanguage=JavaScriptsrc=E12_2.js/script/headbodypfontcolor=#0000FF请在下面的文本框中输入你的名字，然后在其他位置单击鼠标/font/phrsize=3color=#800000forminputstyle=background:yellowtype=textname=nameonBlur=getname(this.value)value=/form/body/html图12.3外部JavaScript文件的嵌入与应用【示例解析】本例中，script标记中的src属性指明了包含要运行的JavaScript代码的文件的文件名。在这里文件名为“E12_2.js”。这是相对文件名，要求HTML文档文件与该代码文件位于同一个目录下。12.4.3JavaScript文件编辑和保存一、JavaScript文件的编辑这里我们以windows系统中的“记事本”工具为例，对前面的JavaScript文件“E12_2.js”。进行编辑。首先打开“记事本”（方法是：“开始”菜单—“程序”—“附件”—“记事本”），然后在其中输入下面的JavaScript程序代码。document.write(这是一个JavaScript程序的示例br);functiongetname(str){alert(HI!+str+您好!欢迎您学习JavaScript);}document.close();输入过程中可以随时进行编辑、修改，非常方便。二、JavaScript文件的保存JavaScript文件的扩展名是.js。当整个JavaScript文件编辑完毕后，即可存盘。方法是在记事本窗口中，选择“文件”菜单—“保存”命令，此时将打开下面的“另存为”对话框，如图12.4所示图12.4文件“另存为”对话框在对话框的“保存在”列表框中选择存盘路径，在“保存类型”列表框中选择所有文件，然后将此文件命名为“E12_2.js”（一定要包含扩展名.js），点击“保存”按钮即可。12.4.4JavaScript常用编辑和显示软件一、JavaScript常用编辑软件任何一个纯文本编辑器都可以作为JavaScript的编辑器，如windows中的记事本、写字板，Linux中的Kedit、Lxy等，只要在保存文件时扩展名改为.js即可。除此之外，也可以使用一些“所见即所得”的、功能更为强大的编辑器，如Dreamweaver等编辑。本书的包含于HTML文档中的JavaScript代码，以及独立的JavaScript文件示例，主要在纯文本编辑器环境下进行的编辑。有关使用FrontPage进行JavaScript编辑的基本操作请参见附录。二、JavaScript常用显示软件由于JavaScript代码片断或独立的文件都必须嵌入到HTML文件中，才能够查看其显示效果。所以，JavaScript常用显示软件同HTML文件的显示软件一样，主要是各种浏览器，本书所有包含JavaScript代码片断或独立文件的HTML文件示例的显示都在IE浏览器下进行测试通过。12.5JavaScript编程规范编写JavaScript代码时，除了遵循HT