都市圈地图引擎之都市圈地图引擎之javascriptjavascript 基础基础

大纲大纲1.1. 概述概述2.2. 怎样使用怎样使用 javascriptjavascript

3.3. 基本语法基本语法4.4. 内置对象内置对象5.5. 字符串和正则表达式字符串和正则表达式6.6. 面向对象开发面向对象开发7.7. 调试调试

1.1. 概述概述1.1. JavascriptJavascript 是什么是什么2.2. JavascriptJavascript 其用途其用途3.3. javascriptjavascript 在都市圈平台中的作用在都市圈平台中的作用

JavascriptJavascript 是什么是什么JavaScriptJavaScript 是一种脚本语言 ，其目的是与是一种脚本语言 ，其目的是与

HTMLHTML 超文本标记语言、超文本标记语言、 JavaJava   脚本语言脚本语言（（ JavaJava 小程序）一起实现在一个小程序）一起实现在一个 WebWeb 页页面中链接多个对象，与面中链接多个对象，与 WebWeb 客户交互作用。客户交互作用。从而可以开发客户端的应用程序等。它是从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准通过嵌入或调入在标准 的的 HTMLHTML 语言中实语言中实现的现的 ,, 它的出现弥补了它的出现弥补了 HTMLHTML 语言的不足。语言的不足。

javascriptjavascript 用途用途 常规使用场景常规使用场景

表单验证表单验证页面特效页面特效数学运算数学运算动态文档动态文档

系统管理系统管理 应用软件的批处理任务应用软件的批处理任务 服务器端程序服务器端程序

javascriptjavascript 在都市圈平台中的作用在都市圈平台中的作用 地图地图 APIAPI 的实现的实现 表单数据验证表单数据验证 界面控制界面控制 地图图片的输出地图图片的输出

2.2. 怎样使用怎样使用 javascriptjavascript

直接嵌入直接嵌入<script language=<script language=““javascriptjavascript””>>//// 代码代码</script></script>

使用外部文件使用外部文件<script language=<script language=““javascriptjavascript””

src=src=““my.jsmy.js””></script>></script> 内联内联

<div onclick=<div onclick=““alert(0)alert(0)””></div>></div> 通过通过 URL javascriptURL javascript ：被链接引用的语法。如：被链接引用的语法。如

<a href=<a href=””javascript:alert(javascript:alert(‘‘HelloHello’’))””> >

3.3. 基本语法基本语法1.1. 变量变量2.2. 数据类型数据类型3.3. 运算符运算符4.4. 运算符优先级运算符优先级5.5. 控制程序的流程控制程序的流程6.6. 函数函数7.7. 其它其它

3.13.1 变量变量 var myvar;var myvar; var num=0,str=var num=0,str=’’welcomewelcome’’;; total=0;total=0;

JavaJava 里的变量里的变量Integer num=0;Integer num=0;

String s=String s=““aaaaaaaa””;;

3.23.2 变量类型变量类型 主要（基本）数据类型： 主要（基本）数据类型：

• 字符串 字符串 • 数值 数值 • 布尔 布尔

特殊数据类型： 特殊数据类型： • Null Null • UndefinedUndefined

复合（引用）数据类型： 复合（引用）数据类型： • 对象 对象 • 数组 数组

类型判断类型判断 类型转换类型转换

字符串字符串

var title=var title=““welcomewelcome””;;var strNum=var strNum=““2222””;;var str=var str=‘‘aaaaaaaa””bbbbbb””cccccccccc’’;;var str1=var str1=““aa\aa\””bb\bb\””cccccccc””;;var str2=var str2=““abcabc””++””defdef””;;var str3=var str3=““\\

abc\abc\def\def\

””;;

数值数值 整型值整型值

100100

0223,088990223,08899

0x9, 0xb, 0xff0x9, 0xb, 0xff 浮点值浮点值

.0001, 0.0001, 1e-4, 1.0e-4.0001, 0.0001, 1e-4, 1.0e-4

3.45e23.45e2

BooleanBoolean 类型类型Boolean Boolean 数据类型却只有两个值。它们是数据类型却只有两个值。它们是

true true 和 和 falsefalse

var a=100;var a=100;

alert(a==100);alert(a==100);

对象对象 对象是属性和方法的集合对象是属性和方法的集合 . . 对象的种类对象的种类

内部对象、生成的对象、宿主给出的对象（如浏内部对象、生成的对象、宿主给出的对象（如浏览器里面的览器里面的 window window 和 和 documentdocument ）以及 ）以及 ActiveX ActiveX 对象（外部组件） 等对象（外部组件） 等

对象对象 对象定义对象定义

var obj=new Object();var obj=new Object(); 成员存取：成员存取： [ ], .[ ], .

obj.name=obj.name=““FredFred””;;obj.age=22;obj.age=22;obj[obj[““aa bb ccaa bb cc””]=]=““testtest””;;obj[100]=100*2;obj[100]=100*2;

成员检查：成员检查： ininalert(alert(““namename”” in obj); in obj);

var attr=var attr=““ageage””;;alert(obj[attr]);alert(obj[attr]);

var obj2={};var obj2={};var obj3={name:var obj3={name:””jackyjacky””,age:20,address:{province:,age:20,address:{province:’’gdgd’’,city:,city:’’gzgz’’}};}};

数组数组var arr=new Array();var arr=new Array();

arr[0]=100;arr[0]=100;

arr[1]=arr[1]=““abcabc””;;

var arr2=[];var arr2=[];

var arr3=[100,var arr3=[100,””abcabc””];];

var obj={name:var obj={name:””FredFred””,age:22,attrs:,age:22,attrs:[1,2,3]};[1,2,3]};

arr3[3]=obj;arr3[3]=obj;

特殊数据类型特殊数据类型 Null Null 数据类型数据类型

包含 包含 null null 的变量包含的变量包含““无值无值””或或““无对象无对象””。换句话说，该变量。换句话说，该变量没有保存有效的数、字符串、没有保存有效的数、字符串、 BooleanBoolean 、数组或对象。可以通过、数组或对象。可以通过给一个变量赋 给一个变量赋 null null 值来清除变量的内容值来清除变量的内容

var my_var=null;var my_var=null; Undefined Undefined 数据类型数据类型

如下情况使返回 如下情况使返回 undefined undefined 值： 值： 对象属性不存在， 对象属性不存在， 声明了变量但从未赋值声明了变量但从未赋值var my_var;var my_var;alert(my_var);alert(my_var);var o={};var o={};alert(o.attr) alert(o.attr)

类型判断类型判断 使用使用 typeoftypeof 运算符把类型信息当作字符运算符把类型信息当作字符

串返回。串返回。 typeoftypeof 返回值有六种可能：返回值有六种可能： "numbe"numbe

r"r"、、 "string""string"、、 "boolean""boolean"、、 "objec"object"t"、、 "function" "function" 和 和 "undefined""undefined" 。。var str=var str=’’aaa;aaa;var num=111;var num=111;alert(typeof(str));alert(typeof(str));alert(typeof(num)==alert(typeof(num)==‘‘numbernumber’’););

类型转换类型转换 强制转换强制转换

var a=100,b=1000;var a=100,b=1000;var c=a+b;var c=a+b;alert(c);alert(c);

显式转换显式转换字符转换成数字字符转换成数字

parseInt(parseInt("abc""abc")) // // 返回 返回 NaNNaN ，不是一个数字，不是一个数字parseInt(parseInt("12abc""12abc")) // // 返回 返回 1212 。。parseFloat(parseFloat("abc""abc")) // // 返回 返回 NaNNaN 。。parseFloat(parseFloat("1.2abc""1.2abc")) // // 返回 返回 1.21.2 。。

javascriptjavascript 的动态的动态 属性动态属性动态

• Var a;Var a; a.b = 2;a.b = 2; Delete a.b;Delete a.b;

类型动态类型动态• Var a = 1;Var a = 1;• a = a = ““stringstring””;;

3.33.3 运算符运算符 算术运算符算术运算符

负值 负值 - ,- , 递增 递增 ++ ,++ , 递减 递减 —— ,, 乘法 乘法 * * ,, 除法 除法 / ,/ , 取模运算 取模运算 % ,% , 加法 加法 + ,+ , 减减法 法 –– ,,

逻辑运算符逻辑运算符逻辑非 逻辑非 ! ,! , 小于 小于 < ,< , 大于 大于 > ,> , 小于等于 小于等于 <= ,<= , 大于等于 大于等于 >= ,>= , 等于 等于 == ,== , 不不

等于 等于 != ,!= , 逻辑与 逻辑与 && ,&& , 逻辑或 逻辑或 || ,|| , 条件（三元运算符） 条件（三元运算符） ?: ,?: , 逗号 逗号 , ,, , 严严格相等 格相等 === ,=== , 非严格相等 非严格相等 !==!==

位运算符位运算符按位取反 按位取反 ~ ,~ , 按位左移 按位左移 << ,<< , 按位右移 按位右移 >> ,>> , 无符号右移 无符号右移 >>> ,>>> , 按位按位

与 与 & ,& , 按位异或 按位异或 ^ ,^ , 按位或 按位或 || 赋值运算符赋值运算符

赋值 赋值 = ,= , 复合赋值运算符 复合赋值运算符 OP=OP= ，类似，类似 +=+=，， -=-= 其它运算符其它运算符

删除 删除 delete ,typeof delete ,typeof 运算符 运算符 typeof ,void void ,instanceof typeof ,void void ,instanceof instanceof ,new new ,in ininstanceof ,new new ,in in

3.43.4 运算符的优先级运算符的优先级 运算符优先级是一套规则。该规则在计算运算符优先级是一套规则。该规则在计算

表达式时控制运算符执行的顺序。具有较表达式时控制运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算高优先级的运算符先于较低优先级的运算符执行。例如，乘法的执行先于加法。符执行。例如，乘法的执行先于加法。var a=11+2*3;var a=11+2*3;

var b=(11+2)*3;var b=(11+2)*3;

3.53.5 控制程序的流程 控制程序的流程 选择结构选择结构 (( 条件判断）条件判断）

单一选择结构（单一选择结构（ ifif ）， ）， 二路选择结构（二路选择结构（ if/elseif/else ）， ）， 内联三元运算符 内联三元运算符 ?: ?: 多路选择结构（多路选择结构（ switchswitch ）。 ）。

循环结构循环结构在循环的开头测试表达式（在循环的开头测试表达式（ whilewhile ）， ）， 在循环的末尾测试表达式（在循环的末尾测试表达式（ do/whiledo/while ）， ）， 对对象的每个属性都进行操作（对对象的每个属性都进行操作（ for/infor/in ）， ）， 由计数器控制的循环（由计数器控制的循环（ forfor ）。 ）。

使用 使用 break break 和 和 continue continue 语句语句

3.63.6 函数函数 函数的常规定义方式函数的常规定义方式function add(a,b){function add(a,b){

return a+b;return a+b;}}其它方式其它方式var add=function(a,b){var add=function(a,b){

return a+b;return a+b;};};var utils={var utils={

count:0,count:0,add:function(a+b){add:function(a+b){

return a+b;return a+b;},},test:function(){test:function(){}}

};};

函数的参数传递方式函数的参数传递方式值传递值传递

var a=1,b=2;var a=1,b=2;var result=add(a,b);var result=add(a,b);alert(result);alert(result);

引用传递引用传递var o1={name:var o1={name:””FredFred””,age:22};,age:22};function test(o){function test(o){

o1.name=o1.name=““jackyjacky””;;}}test(o1);test(o1);alert(o1.name);alert(o1.name);

arguments,caller,calleearguments,caller,calleefunction func(a,b){ function func(a,b){                 alert(a); alert(a);                 alert(b); alert(b);                forfor(var i=0;i<arguments.length;i++){ (var i=0;i<arguments.length;i++){                             alert(arguments[i]); alert(arguments[i]);                 } }      } }     

func(1,2,3);//func(1,2,3);// 输出输出 1 2 3 1 2 3

var sum=function(n){ var sum=function(n){                  ifif(1==n)(1==n)returnreturn 1; 1;                  elseelse returnreturn n+arguments.callee(n-1);// n+arguments.callee(n-1);// 这里这里

arguments.calleearguments.callee 相当于相当于 sum sum      } }      alert(sum(100)); alert(sum(100));

函数作用域函数作用域var str1=var str1=““abcabc””;;var str2=var str2=““xyzxyz””;;function inner(){function inner(){

var str1=var str1=‘‘inner abcinner abc’’;;str2=str2=““xyz2xyz2””;;alert(alert(‘‘inner:inner:””+str1++str1+””,,””+str2);+str2);

}}inner();inner();alert(alert(‘‘outer:outer:’’+str1++str1+’’,,’’+str2);+str2);

函数的作用域函数的作用域 函数的 函数的 applyapply、、 call call 方法和 方法和 length length 属性属性

语法：语法：Function.prototype.apply(thisArg,argArray);//@1Function.prototype.apply(thisArg,argArray);//@1为对象 为对象 @2@2为参数数组为参数数组 (( 数组可以容纳更多的参数数组可以容纳更多的参数 ))

Function.prototype.call(thisArg[,arg1[,arg2Function.prototype.call(thisArg[,arg1[,arg2……]]);//]]);//@1@1为对象 为对象 @2@2为参数可多个为参数可多个 ......

说明：让说明：让 prototypeprototype 方法可以临时访问方法可以临时访问 thisArgthisArg 对象的对象的成员，改变了成员，改变了 thisthis指针指针 (( 指向指向 thisArgthisArg 对象对象 )) ，相当，相当于于 javajava 的内部类的内部类 ,c++,c++ 的友员的友员

withwith 的使用的使用with(obj){with(obj){}}

函数闭包函数闭包var msg=var msg=““welcomewelcome””;;var s=var s=““toptop””;;function outer(){function outer(){

var count=0;var count=0;var s=var s=““outerouter””;;return function(){return function(){

var s=var s=““innerinner””;;alert(s+alert(s+’’::’’+count++);+count++);

}}}}var f=outer();var f=outer();f();f();

异常异常 异常对象创建异常对象创建

*exception = new Error(*number, *description)*exception = new Error(*number, *description)

异常触发语法异常触发语法throw *exceptionthrow *exception

异常捕获语法异常捕获语法trytry {{

}}catch (ex) {catch (ex) {}}finally {finally {

}}

异常异常 ((对象对象 ))记录：记录： name, numbername, number与与descriptiondescription

异常的种类：运行时错误、语法错误异常的种类：运行时错误、语法错误

4.4. 内置对象内置对象 ObjectObject 、、 ArrayArray 、 、 GlobalGlobal 、 、

FunctionFunction、、MathMath 、 、 DateDate、、 BooleanBoolean、、 Number Number 、、 StriStringng 、、 RegExpRegExp、、 ErrorError

Object Object 对象对象

提供所有对象通用的功能。提供所有对象通用的功能。 属性属性

prototype prototype 属性 属性 | constructor | constructor 属性属性 方法方法

toLocaleString toLocaleString 方法 方法 | toString | toString 方法 方法 | | valueOf valueOf 方法方法

ArrayArray 对象对象提供对创建任何数据类型的数组的支持。提供对创建任何数据类型的数组的支持。 属性属性

constructor constructor 属性 属性 | length | length 属性 属性 | prototype | prototype 属性属性

方法方法concat concat 方法 方法 | join | join 方法 方法 | pop | pop 方法 方法 | push | push 方方

法 法 | reverse | reverse 方法 方法 | shift | shift 方法 方法 | slice | slice 方法 方法 | | sort sort 方法 方法 | splice | splice 方法 方法 | toLocaleString | toLocaleString 方方法 法 | toString | toString 方法 方法 | unshift | unshift 方法 方法 | valueOf | valueOf 方法方法

var arr1=[1,2];var arr1=[1,2];var arr2=arr1.concat([3,4]);var arr2=arr1.concat([3,4]);

var arr=[];var arr=[];arr.push(arr.push(‘‘<div></div><div></div>’’););arr.push(arr.push(‘‘<span></span><span></span>’’););var str=arr.join(var str=arr.join(‘’‘’););

var a=arr2.slice(0,2);//var a=arr2.slice(0,2);// 返回一个数组的一段。返回一个数组的一段。var b=arr2.splice(1,3);//var b=arr2.splice(1,3);// 从一个数组中移除一个从一个数组中移除一个

或多个元素 或多个元素

GlobalGlobal

是一个内部对象，目的是把所有全局方法是一个内部对象，目的是把所有全局方法集中在一个对象中 集中在一个对象中 eval(eval(““var d=new Date()var d=new Date()””););

parseInt(parseInt(““110110””););

parseFloat(parseFloat(““11.311.3””););

FunctionFunction 对象对象 属性属性

arguments arguments 属性 属性 | caller | caller 属性 属性 | constructor | constructor 属性 属性 | prototype | prototype 属性属性

方法方法toString toString 方法 方法 | valueOf | valueOf 方法方法

5.5. 字符串和正则表达式字符串和正则表达式 字符串字符串

属性属性constructor constructor 属性 属性 | length | length 属性 属性 | prototype | prototype 属性属性

方法方法anchor anchor 方法 方法 | big | big 方法 方法 | blink | blink 方法 方法 | bold | bold 方法 方法 | charAt | charAt 方方

法 法 | charCodeAt | charCodeAt 方法 方法 | concat | concat 方法 方法 | fixed | fixed 方法 方法 | | fontcolor fontcolor 方法 方法 | fontsize | fontsize 方法 方法 | fromCharCode | fromCharCode 方法 方法 | | indexOf indexOf 方法 方法 | italics | italics 方法 方法 | lastIndexOf | lastIndexOf 方法 方法 | link | link 方法 方法 | | match match 方法 方法 | replace | replace 方法 方法 | search | search 方法 方法 | slice | slice 方法 方法 | | small small 方法 方法 | split | split 方法 方法 | strike | strike 方法 方法 | sub | sub 方法 方法 | substr | substr 方方法 法 | substring | substring 方法 方法 | sup | sup 方法 方法 | toLowerCase | toLowerCase 方法 方法 | | toUpperCase toUpperCase 方法 方法 | toString | toString 方法 方法 | valueOf | valueOf 方法方法

字符串字符串下面的示例演示了下面的示例演示了 match match 方法的用法：方法的用法：function MatchDemo(){function MatchDemo(){ var r, re; // var r, re; // 声明变量。声明变量。 var s = "The rain in Spain falls mainly in the plain";var s = "The rain in Spain falls mainly in the plain"; re = /ain/i; // re = /ain/i; // 创建正则表达式模式。创建正则表达式模式。 r = s.match(re); // r = s.match(re); // 尝试匹配搜索字符串。尝试匹配搜索字符串。 return(r); // return(r); // 返回第一次出现 返回第一次出现 "ain" "ain" 的地方。的地方。}}

本示例说明带 本示例说明带 g g 标志设置的 标志设置的 match match 方法的用法。方法的用法。function MatchDemo(){function MatchDemo(){ var r, re; // var r, re; // 声明变量。声明变量。 var s = "The rain in Spain falls mainly in the plain";var s = "The rain in Spain falls mainly in the plain"; re = /ain/ig; // re = /ain/ig; // 创建正则表达式模式。创建正则表达式模式。 r = s.match(re); // r = s.match(re); // 尝试去匹配搜索字符串。尝试去匹配搜索字符串。 return(r); // return(r); // 返回的数组包含了所有 返回的数组包含了所有 "ain" "ain" // // 出现的四个匹配。出现的四个匹配。}}

正则表达式正则表达式 语法语法

re = re = //patternpattern//[[flagsflags] ] re = re = new RegExp("new RegExp("patternpattern",",[[""flagsflags""]]))

参数参数rere

必选项。将要赋值为正则表达式模式的变量名。 必选项。将要赋值为正则表达式模式的变量名。 Pattern Pattern

必选项。要使用的正则表达式模式。如果使用语法 必选项。要使用的正则表达式模式。如果使用语法 11 ，用 ，用 "/" "/" 字符分字符分隔模式。如果用语法 隔模式。如果用语法 22 ，用引号将模式引起来。 ，用引号将模式引起来。

flagsflags 可选项。如果使用语法 可选项。如果使用语法 2 2 要用引号将 要用引号将 flag flag 引起来。标志可以组合使引起来。标志可以组合使

用，可用的有： 用，可用的有： g g （全文查找出现的所有 （全文查找出现的所有 patternpattern ） ） i i （忽略大小写） （忽略大小写） m m （多行查找） （多行查找）

下面的例子举例说明了 下面的例子举例说明了 compile compile 方法的用法： 方法的用法： function CompileDemo(){function CompileDemo(){ var rs;var rs; var s = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp"var s = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp" // // 只为大写字母创建正则表达式。只为大写字母创建正则表达式。 var r = new RegExp("[A-Z]", "g");var r = new RegExp("[A-Z]", "g"); var a1 = s.match(r) // var a1 = s.match(r) // 查找匹配。查找匹配。 // // 只为小写字母编译正则表达式。只为小写字母编译正则表达式。 r.compile("[a-z]", "g");r.compile("[a-z]", "g"); var a2 = s.match(r) // var a2 = s.match(r) // 查找匹配。查找匹配。 return(a1 + "\n" + a2;return(a1 + "\n" + a2;}}

下面的例子举例说明了 下面的例子举例说明了 test test 方法的用法：方法的用法：function TestDemo(re, s){function TestDemo(re, s){ var s1; // var s1; // 声明变量。声明变量。 // // 检查字符串是否存在正则表达式。检查字符串是否存在正则表达式。 if (re.test(s)) // if (re.test(s)) // 测试是否存在。测试是否存在。 s1 = " contains "; // s s1 = " contains "; // s 包含模式。包含模式。 elseelse s1 = " does not contain "; // s s1 = " does not contain "; // s 不包含模式。不包含模式。 return("'" + s + "'" + s1 + "'"+ re.source + "'"); // return("'" + s + "'" + s1 + "'"+ re.source + "'"); // 返回字符串。返回字符串。}}

一个正则表达式就是由普通字符（例如字符 一个正则表达式就是由普通字符（例如字符 a a 到 到 zz ）以及特殊字符（称为）以及特殊字符（称为元字符元字符）组成）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。为一个模板，将某个字符模式与所搜索的字符串进行匹配。

正则表达式的语法正则表达式的语法^ ^ $ $ * * + + {n} {n} {n,} {n,} {n,m} {n,m} \w \w \W \W \d\d\D \D \s \s \S \S | | [xyz][xyz]

常用正则表达式常用正则表达式匹配中文字符的正则表达式： 匹配中文字符的正则表达式： [/u4e00-/u9fa5] [/u4e00-/u9fa5]

匹配双字节字符匹配双字节字符 (( 包括汉字在内包括汉字在内 )) ： ： [^/x00-/xff] [^/x00-/xff]

匹配匹配 HTMLHTML 标记的正则表达式： 标记的正则表达式： /<(.*)>.*<///1>|<(.*) //>/ /<(.*)>.*<///1>|<(.*) //>/

匹配首尾空格的正则表达式： 匹配首尾空格的正则表达式： (^/s*)|(/s*$)(^/s*)|(/s*$) （像（像 vbscriptvbscript那样的那样的trimtrim 函数） 函数）

匹配匹配 EmailEmail 地址的正则表达式： 地址的正则表达式： /w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)* /w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*

匹配网址匹配网址 URLURL 的正则表达式： 的正则表达式： http://([/w-]+/.)+[/w-]+(/[/w- ./?http://([/w-]+/.)+[/w-]+(/[/w- ./?%&=]*)? %&=]*)?

常用正则表达式常用正则表达式匹配中文字符的正则表达式： 匹配中文字符的正则表达式： [/u4e00-/u9fa5] [/u4e00-/u9fa5]

匹配双字节字符匹配双字节字符 (( 包括汉字在内包括汉字在内 )) ： ： [^/x00-/xff] [^/x00-/xff]

匹配一个空白行 ： 匹配一个空白行 ： /^\[ \t]*$/ /^\[ \t]*$/

匹配匹配 HTMLHTML 标记的正则表达式： 标记的正则表达式： /<(.*)>.*<///1>|<(.*) //>/ /<(.*)>.*<///1>|<(.*) //>/

匹配首尾空格的正则表达式： 匹配首尾空格的正则表达式： (^/s*)|(/s*$)(^/s*)|(/s*$) （像（像 vbscriptvbscript那样的那样的 trimtrim 函数） 函数）

匹配匹配 EmailEmail 地址的正则表达式： 地址的正则表达式： /w+([-+.]/w+)*@/w+([-.]/w+)*/./w+/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)* ([-.]/w+)*

匹配网址匹配网址 URLURL 的正则表达式： 的正则表达式： http://([/w-]+/.)+[/w-]+(/[/w- ./?%&=]*)? http://([/w-]+/.)+[/w-]+(/[/w- ./?%&=]*)?

6.6. 面向对象开发面向对象开发 JavascriptJavascript 原型原型 类的定义类的定义 类的继承类的继承 面向对象的支持面向对象的支持

JavascriptJavascript 原型原型

JavaScriptJavaScript为每一个类型为每一个类型 (Type)(Type)都提供了都提供了一个一个 prototypeprototype属性，将这个属性指向一属性，将这个属性指向一个对象，这个对象就成为了这个类型的个对象，这个对象就成为了这个类型的““原原型型””，这意味着由这个类型所创建的所有对，这意味着由这个类型所创建的所有对象都具有这个原型的特性。另象都具有这个原型的特性。另外，外， JavaScriptJavaScript的对象是动态的，原型也的对象是动态的，原型也不例外，给不例外，给 prototypeprototype增加或者减少属增加或者减少属性，将改变这个类型的原型，这种改变将性，将改变这个类型的原型，这种改变将直接作用到由这个原型创建的所有对象上直接作用到由这个原型创建的所有对象上

类的定义类的定义function Class1(){function Class1(){

this.name=this.name=““FredFred””;;this.echo=function(){this.echo=function(){

alert(this.name);alert(this.name);};};

}}var c=new Class1();var c=new Class1();c.echo();c.echo();

var Class1=function(){var Class1=function(){};};

类的定义类的定义function Class1(){function Class1(){

this.name=this.name=““FredFred””;;}}Class1.method1=function()Class1.method1=function()

{{alert(alert(‘‘method1method1’’););

};};Class1.prototype={Class1.prototype={

echo:function(){echo:function(){alert(this.name);alert(this.name);

}}};};var c=new Class1();var c=new Class1();c.echo();c.echo();Class1.method1();Class1.method1();

javajava 里类的定义里类的定义 ::

public class Class1{public class Class1{

private String name=private String name=““FredFred””;;

public void echo(){public void echo(){

System.out.println(this.name)System.out.println(this.name);;

} }

public static void method1(){public static void method1(){

System.out.println(System.out.println(““method1);method1);

}}

}}

类定义类定义var Class={var Class={

create:function(){create:function(){return function() {return function() {

this.initialize.apply(this, arguments);this.initialize.apply(this, arguments);}}

}}};};var Class1=Class.create();//var Class1=Class.create();// 定义定义Class1.prototype={Class1.prototype={

initialize:function(var1,var2){initialize:function(var1,var2){////构造函数初始化构造函数初始化

},},echo:function(){echo:function(){}}

};};var c=new Class1(var c=new Class1(““aaaaaa””,,””bbbbbb””););c.echo();c.echo();

类的继承类的继承 构造函数继承构造函数继承function ClassBase(){function ClassBase(){

this.baseName=this.baseName=““basebase””;;this.echo=function(){this.echo=function(){

alert(this.baseName);alert(this.baseName);}}

}}function ClassChild(){function ClassChild(){

this.base= ClassBase();this.base= ClassBase();this.base();this.base();

this.chidName=this.chidName=““childchild””;;this.method2=function(){this.method2=function(){

alert(alert(‘‘method2:method2:’’+this. baseName++this. baseName+’’,,’’+ this.chidName);+ this.chidName);}}

}}

类的继承类的继承 原型继承。原型继承。 原型定义：原型定义：

function ClassBase() {...}function ClassBase() {...}function ClassChild() {function ClassChild() {}}ClassChild.prototype = new ClassBase();ClassChild.prototype = new ClassBase();ClassChild.prototype.method2=function()ClassChild.prototype.method2=function()

{{};};

面向对象的支持面向对象的支持 成员列举成员列举 (( 反射反射 )) ：： for .. infor .. in 成员存取：成员存取： [ ], .[ ], . 成员检查：成员检查： inin关键字关键字 (( 运算运算 ))

withwith关键字：打开对象闭包关键字：打开对象闭包 thisthis关键字：方法调用时的实例引用关键字：方法调用时的实例引用

继承检查：继承检查： instanceofinstanceof关键字关键字 (( 运算运算 ) ) 对象构造：对象构造： newnew关键字关键字 (( 运算运算 ))

7.7. 调试调试1.1. 通用的调试通用的调试2.2. IEIE 下的调试下的调试3.3. FirefoxFirefox 下的调试下的调试4.4. ChromeChrome 下地调试下地调试

7.17.1 通用的调试通用的调试 Alert()Alert() try{}catch(e){}try{}catch(e){}

7.2 IE7.2 IE 下的调试下的调试 IEIE

• Visual studioVisual studio• Microsoft Script DebuggerMicrosoft Script Debugger• DebugbarDebugbar

IE6/7IE6/7• companion.jscompanion.js

IE8/9IE8/9• 开发者工具开发者工具

7.2Firefox7.2Firefox 下的调试下的调试 FirebugFirebug• Javascript Debugger-venkmanJavascript Debugger-venkman

7.3Chrome7.3Chrome 下的调试下的调试 开发者工具开发者工具