Javascript客户端脚本的设计和应用

2019-11-21 02:33:11

字体：大中小

来源：转载

供稿：网友

Javascript基本概念

　　JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言，最初由Netscape公司创造出来，起名Live Script，它和Java的关系只有一个：名字比较像。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。（注意，如同VBScript一样，JavaScript一样有服务器端版本）

一、JavaScript的基本语法

　　0、引言

　　Javascript的语法基本上与Java一致，但是由于Javascript是一个弱类型的脚本语言，在程序编写的过程中会有一些不同。同时由于Javascript是基于对象的语言，注意不是面向对象的语言，所以它在对对象的支持上有一定缺陷，大家所熟悉的诸如对象继承，多态等面向对象语言所具有的基本特性在Javascript中只能通过一些变通手段来实现（通常比较复杂）。然而，弱类型语言也有其优点，那就是简单性，Javascript中类型转化是非常方便的（弱类型语言在代码中基本上表现为无类型），一个String通过一个简单的加减操作就可以转化为Int（相当于调用了Integer.ParseInt(String)），而且不会抛异常。Javascript作为一种解释性语言，还能使用在编译性语言C/C++、JAVA难以支持的eval语句。由于运行在沙箱中，Javascript运行时有很多的安全性限制。它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失。总体上来说，Javascript应该是优缺点兼备（辨证的说=]）。
　　作为学过JAVA的软院本科生来说，学习Javascript并不困难。Javascript不像HTML、CSS这种经验性很强的的领域，一旦大家入门之后，剩余阶段的Javascript相关的学习很可能就是查阅资料而已。在这里我希望我所写的内容能够起到抛砖引玉的作用，为大家打下基础。以下内容主要是Javascript的入门知识，我会从关键字开始描述，强调关键字是为了让大家对Javascript的语法有比较全面的认识，可能大家在今后的开发中可能一直用不到其中的某些关键字，但我认为大家有必要了解一下，同时请留意其中标出的注意事项。随后将是在页面中加入脚本的四种方法。在“Javascript客户端编程”中，我将提及浏览器文档（DOM）模型和事件（EVENT）模型，其中会有如何寻找对象以及安装事件处理器（事件处理映射）的详细解说。最后我将在“Javascript样例”中给出一段核心代码的注解和三个样例。“Javascript学习资料”中有一些有用的书籍名，电子参考资料和相关网址，请留意其中的推荐参考资料和MLParser的使用指南。大家的对Javascript问题我将会在FAQ中给出解答。
　　第一次写，错误在所难免，恳请大家指正和谅解。

　　1、VAR

　　if( val > 2.3){
　　　　rs = 5.56;
　　}
　　else if( val + rs > "1.2") {
　　　　rs = document;
　　}
　　else{
　　　　rs = "Hello world";
　　}
　　IF-ELSE的用法与JAVA中的完全相同。
　　注意表达式中的中的“val + rs > '1.2' "这在JAVA中是不允许出现的。
　　另外虽然Javascript不要求在每句语句之后加分号，但加上分号是良好的编程习惯。
　　在样例中出现的未声明就使用的变量的情况在Javascript中是允许的，他们将自动转化为全局变量。
　　Javascript是大小写敏感的，所以请注意关键字的大小写。

　　3、SWITCH

　　switch(key - 65){
　　　　case 0:
　　　　　　ch = "A" ;
　　　　　　break;
　　　　case 1:
　　　　　　ch = "B" ;
　　　　　　break;
　　　　default:
　　　　　　ch = "X" ;
　　　　　　break;
　　　　case 9:
　　　　　　ch = "Y" ;
　　　　　　break;
　　}
　　SWITCH的用法与JAVA中的完全相同。
　　CASE后跟的变量建议使用常量表达式（整数和字符串），不要用浮点。
　　每个CASE结束时的BREAK语句通常不可少，除非想利用SWITCH的FALL-THROUGH来实现特定的功能。
　　DEFAULT语句可以放在SWITCH结构中的任意位置，可以于CASE语句交叉放置。

　　4、WHILE

　　while( i < 0 && bool_var){
　　　　if( i > -5)
　　　　　　continue;
　　　　i += 3 + i;
　　}
　　WHILE的用法与JAVA中的完全相同。
　　如果是BOOL变量可以不写bool_var == true/false，直接使用即可。
　　CONTINE语句会使程序流跳过循环中剩余的语句，进入循环的下一次迭代。
　　在Javascript中也有带LABEL的BREAK和CONTINUE，用法与JAVA相同。
　　在写循环时，注意不要产生“死”循环。样例程序片断中的就是一个“死”循环。

　　5、DO-WHILE

　　do{
　　　　i -= 8;
　　} while( i > 0);
　　DO-WHILE的用法与JAVA中的完全相同。
　　不要遗漏结尾WHILE（Expression）之后的分号。

　　6、FOR

　　for (var i = 0; i < 8; i++){
　　　　document.writeln("Hello world !");
　　}
　　DO-WHILE的用法与JAVA中的完全相同。
　　不要在计数变量 i 之前加 int 类型标识符，Javascript是弱类型语言，加了 int 反倒会报语法错，但是可以用 var 使之成为局部变量。
　　FOR（... ; ... ; ...）中分号之间的内容都可以空缺（for （；；）相当于while（true）），其中也可以使用多句语句用逗号分隔。

　　7、FOR-IN

　　for ( var ite in document) {
　　　　str_result += document [ ite ];
　　}
　　FOR-IN控制语句在JAVA中不存在，它的作用有点类似JAVA中的 Iterator 接口描述的功能。在样例中，ite将遍历 docment 中所有的可遍历元素（不是所有元素），每次迭代时，ite中会包含被遍历数组或对象的索引字符串（可以看作对象名），例如，textfield（如果你在页面中有一个元素的ID为textfield），或者像数字1、2、3（它们用来引用对象中的未命名元素）。
　　引用对象中元素时使用关联数组的方式：数组名或对象名 [ 索引值 ]，例子中用 document [ ite ] 表示 document 中索引为 ite 的元素。
　　使用FOR-IN的最大好处就是你不需要知道目标对象或者数组究竟有多少元素，以及其内部结构是怎么样的，就可以遍历其所有可遍历元素。

　　8、CONTINUE-BREAK

　　again:
　　while ( test() ){
　　　　whie (is_run) {
　　　　　　if(work()) {
　　　　　　　　break again;
　　　　　　　　// continue again;
　　　　　　}
　　　　　　reap();
　　　　}
　　　　i++;
　　}
　　CONTINUE-BREAK的用法与JAVA中的完全相同。
　　使用带Label的break或者continue可以在内外循环中进行跳转。

　　9、FUNCTION

　　function Point ( x, y ) {
　　　　this.x = x;
　　　　this.y = y;
　　　　// this.func = m_func;
　　}
　　Point.prototype.func = m_func;
　　Point.prototype.s_name = "Point";
　　function m_func( num ) { ... }
　　new Point () ;
　　var newPoint = new Point( 1, 3 );
　　newPoint.func( newPoint.x + new Point.y);
　　PROTOTYPE是原型的意思，我改变在第九节中 Point 的实现。把 m_func 赋给了Point的原型。
　　这一改变唯一的好处就是我们不用在每次调用 Point 函数都对 func 属性赋值了，func 属性被保存在 Point 的原型对象中，从而节省了内存空间。 Point 与 Point.prototype 的关系请查阅相关的资料，这里不再详述。
　　用PROTOTYPE可以实现JAVA中的静态变量和静态方法（由于某些浏览器实现在对象创建之后才创建它的原型对象，所以建议在使用原型对象中静态成员之前先调用一次构造器方法，如同样例中 new Point();语句，调用结束之后，无用对象将被回收，但其原型对象将继续驻留在内存中），在Javascript支持的有限的对象继承也与PROTOTYPE有一定联系。

　　11、ARRAY

　　var arr_8 = new Array(8);
　　var arr = new Array();
　　var arr_d = [ 1, 2, , 4 , .., "Hi", null, true, document ];
　　var arr_m = [ [ 1, 2, 3, 4 ], [ 5, 6, 7], [ 8 ] ];

　　arr_8[ 3 ] = "ABC";
　　arr[ 100 ] = 8.8888;
　　arr_d[ 0 ] = "CDE";
　　arr_m[ 1 ][ 0 ] = "XYZ";
　　数组的创建可以通过 new Array 的构造器方法（参数是数组初始长度，空参数表示零长度）。
　　或者是把[ 数据，数据， ... , 数据]的数组直接量赋给变量，数据之间用逗号分隔，arr_d中蓝色的部分有两个连续的逗号表示第三个元素空缺，其值为 undefined。
　　构造器方法的样例： arr_8和arr ；数组直接量的样例： arr_d和arr_m 。

　　Javascript中的数组是动态数组，它将随着元素数量自动调节数组长度。
　　Javascript中的数组元素没有任何类型限制，未初始化的元素值为 undefined。
　　Javascript中的多维数组的实现与JAVA中的完全相同。arr_m中 [ 1, 2, 3, 4] 表示 arr_m[0]所指向的第二维数组的数据。
　　Javascript对数组的访问与JAVA中的完全相同。

　　var textfield = document.all[ "textfield" ];
　　document.all 是一个数组吗？不完全是。
　　那为什么我们可以用 “textfield” 来访问我们的对象呢？
　　这是因为以上我们所看到的是Javascript中非常特殊的用法――关联数组，也可以称之为索引器。
　　对象名[ "成员名" ] ＝对象名.成员名

　　关联数组的使用，可以使某些操作从硬编码中解脱出来，使之更具有灵活性。请看下面一个例子。
　　假如我们在执行某个与对象相关的操作时需要靠外界输出才能确定调用的函数。
　　方案之一：SWITCH，每更改一个分支就需要更新该方法。
　　方案之二：对象 + . + 函数名();，语法错误。
　　方案之三：对象 [ 函数名字符串 ]();，好的。
　　方案之四：eval(对象名字符串 + "." + 函数名字符串 + "();");，也可以的。

　　关联数组的使用，使我们能够用字符串，数字或者其他的类型的变量作为索引来访问我们所需要访问的属性和方法。
　　在FOR-EACH中常常会用这种方法来遍历对象或数组属性和方法。

　　12、UNDEFINDED-NULL

　　undefined == null ? true
　　undefined === null ? false
　　undefined 表示所引用的对象未经定义。
　　null表示所引用的对象的值是空值。
　　在布尔表达式中它的作用基本与null一致，都表示 false。

　　13、TRY-CATCH-FINALLY-THROW

　　try{
　　　　throw new Error( "Test Exception" ) ;
　　}
　　catch( e ){
　　　　document.writeln( e.name + ":" + e.message);
　　}
　　finally{
　　　　document.writeln( "Final here");
　　}
　　TRY-CATCH-FINALLY-THROW的用法与JAVA中的完全相同。
　　这是Javascript 1.5才有的新特性，在早期的浏览器中可能不支持。目前常用的浏览器 IE6、NAV7、Opera、FireFox 1.0 都支持。

　　14、WITH

　　function Point ( x, y ) {
　　　　this.x = x;
　　　　this.y = y;
　　}
　　var newPoint = new Point( 1, 3 );
　　with (newPoint) {
　　　　var sum = x + y;
　　}
　　WITH的用法与DELPH中的完全相同。
　　由于使用了WITH，在其作用域中newPoint.x 和 newPoint.y 分别被简化为了 x 和 y 。

　　15、TYPEOF

　　swich (typeof obj) {
　　　　case "String" :
　　　　　　rs = "string" ;
　　　　　　break;
　　　　case "Object" :
　　　　　　rs = "object" ;
　　　　　　break;
　　　　case "Number" :
　　　　　　rs = "Number" ;
　　　　　　break;
　　　　defualt:
　　　　　　 rs = "Unknown Type" ;
　　}
　　TYPEOF的作用是返回变量中数据类型对应的字符串。
　　TYPEOF返回的字符串随着浏览器的不同会有一定的差异。

二、在网页中使用JavaScript

　　1、链接标记的URL中

　　<a href = "Javascript: alert('Hi !');" >Click Me </a>
　　Click Me
　　这种做法通常只在教学演试中使用。
　　HREF中的"Javascript : // "的协议头一定要加，其中可以写多句脚本，但不能写 RETURN 语句。

　　2、HTML标签的事件处理属性中

　　<a href = "#" onclick = "Javascript: alert('Hello !');return false;">Click Me Too</a>
　　Click Me Too
　　这种做法比较简单，比较常用。return false 是为了禁止页面跳转。
　　通常 "Javascript : // "的协议头可以不加，简写为 onclick = "alert('Hello !');return false;"。

　　3、页面的SCRIPT标签中

<script language="javascript" type="text/javascript">
　　<![CDATA[//><!]]>
　　</script>
　　...
　　<a href = "#" onclick = " testJs();return false;">Click Me Again</a>
　　Click Me Again
　　这种做法把脚本与HTML做了一定的分离，代码的整体结构比较良好。
　　在代码的周围加上<![CDATA[//><!]]>是为了避免不支持脚本的浏览器把脚本当作普通文本输出。
　　与之作用类似的还有<noscript>标签，<noscript>标签在浏览器不支持脚本时显示出其中的提示性文字。
　　<script>标签通常都放在<head>标签内。

　　4、外部脚本文件中

[ testJs.js ]
　　<![CDATA[//><!]]>
　　[ *.htm ]
　　<script language="javascript" type="text/javascript" src="mat/js/testJs.js"></script>
　　...
　　<a href = "#" onclick ="testJsExt();return false;">Click Me Nowww！ </a>
　　Click Me Nowww !
　　外部脚本就是把脚本保存在一个单独的 *.js 文件中，通过指定<script>标签的 src 属性，把脚本引入。
　　效果相当于在原先的<script> 标签中间插入外部文件中的脚本文本。
　　注意某些浏览器将忽略有SRC属性的<script>标签中的脚本代码。
　　这种方法从本质上来讲与第三种方法没有差别，但是由于把脚本和HTML做了完全的分离，所以是商业领域最常用的方法。
　　现在我们在标签<a>中仍然有Javascript的痕迹，在Javascript客户端编程中我将会介绍如何将其去除，以及使Javascript脚本在HTML中留下最少痕迹的手段