都市圈地图引擎之 javascript 基础

1. 都市圈地图引擎之javascript基础

2. 大纲 • 概述 • 怎样使用javascript • 基本语法 • 内置对象 • 字符串和正则表达式 • 面向对象开发 • 调试

3. 1.概述 • Javascript是什么 • Javascript其用途 • javascript在都市圈平台中的作用

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

5. javascript用途 • 常规使用场景 表单验证 页面特效 数学运算 动态文档 • 系统管理 • 应用软件的批处理任务 • 服务器端程序

6. javascript在都市圈平台中的作用 • 地图API的实现 • 表单数据验证 • 界面控制 • 地图图片的输出

7. 2.怎样使用javascript • 直接嵌入 <script language=“javascript”> //代码 </script> • 使用外部文件 <script language=“javascript” src=“my.js”></script> • 内联 <div onclick=“alert(0)”></div> • 通过URL javascript：被链接引用的语法。如<a href=”javascript:alert(‘Hello’)”>

8. 3.基本语法 • 变量 • 数据类型 • 运算符 • 运算符优先级 • 控制程序的流程 • 函数 • 其它

9. 3.1变量 • var myvar; • var num=0,str=’welcome’; • total=0; • Java里的变量 Integer num=0; String s=“aaaa”;

10. 3.2变量类型 • 主要（基本）数据类型： • 字符串 • 数值 • 布尔 • 特殊数据类型： • Null • Undefined • 复合（引用）数据类型： • 对象 • 数组 • 类型判断 • 类型转换

11. 字符串 var title=“welcome”; var strNum=“22”; var str=‘aaaa”bbb”ccccc’; var str1=“aa\”bb\”cccc”; var str2=“abc”+”def”; var str3=“\ abc\ def\ ”;

12. 数值 • 整型值 100 0223,08899 0x9, 0xb, 0xff • 浮点值 .0001, 0.0001, 1e-4, 1.0e-4 3.45e2

13. Boolean类型 Boolean 数据类型却只有两个值。它们是true 和 false var a=100; alert(a==100);

14. 对象 • 对象是属性和方法的集合. • 对象的种类 内部对象、生成的对象、宿主给出的对象（如浏览器里面的window 和 document）以及 ActiveX 对象（外部组件） 等

15. 对象 • 对象定义 var obj=new Object(); • 成员存取：[ ], . obj.name=“Fred”; obj.age=22; obj[“aa bb cc”]=“test”; obj[100]=100*2; • 成员检查：in alert(“name” in obj); var attr=“age”; alert(obj[attr]); var obj2={}; var obj3={name:”jacky”,age:20,address:{province:’gd’,city:’gz’}};

16. 数组 var arr=new Array(); arr[0]=100; arr[1]=“abc”; var arr2=[]; var arr3=[100,”abc”]; var obj={name:”Fred”,age:22,attrs:[1,2,3]}; arr3[3]=obj;

17. 特殊数据类型 • Null 数据类型 包含 null 的变量包含“无值”或“无对象”。换句话说，该变量没有保存有效的数、字符串、Boolean、数组或对象。可以通过给一个变量赋 null 值来清除变量的内容 var my_var=null; • Undefined 数据类型 如下情况使返回 undefined 值： 对象属性不存在， 声明了变量但从未赋值 var my_var; alert(my_var); var o={}; alert(o.attr)

18. 类型判断 • 使用typeof运算符把类型信息当作字符串返回。 • typeof返回值有六种可能："number"、"string"、"boolean"、"object"、"function" 和 "undefined"。 var str=’aaa; var num=111; alert(typeof(str)); alert(typeof(num)==‘number’);

19. 类型转换 • 强制转换 var a=100,b=1000; var c=a+b; alert(c); • 显式转换 字符转换成数字 parseInt("abc") // 返回 NaN，不是一个数字 parseInt("12abc") // 返回 12。 parseFloat("abc") // 返回 NaN。 parseFloat("1.2abc") // 返回 1.2。

20. javascript的动态 • 属性动态 • Var a; • a.b = 2; • Delete a.b; • 类型动态 • Var a = 1; • a = “string”;

21. 3.3运算符 • 算术运算符 负值 - ,递增 ++ ,递减 — ,乘法 * ,除法 / ,取模运算 % ,加法 + ,减法 –, • 逻辑运算符 逻辑非 ! ,小于 < ,大于 > ,小于等于 <= ,大于等于 >= ,等于 == ,不等于 != ,逻辑与 && ,逻辑或 || ,条件（三元运算符） ?: ,逗号 , ,严格相等 === ,非严格相等 !== • 位运算符 按位取反 ~ ,按位左移 << ,按位右移 >> ,无符号右移 >>> ,按位与 & ,按位异或 ^ ,按位或 | • 赋值运算符 赋值 = ,复合赋值运算符 OP=，类似+=，-= • 其它运算符 删除 delete ,typeof 运算符 typeof ,void void ,instanceof instanceof ,new new ,in in

22. 3.4运算符的优先级 • 运算符优先级是一套规则。该规则在计算表达式时控制运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算符执行。例如，乘法的执行先于加法。 var a=11+2*3; var b=(11+2)*3;

23. 3.5控制程序的流程 • 选择结构(条件判断） 单一选择结构（if）， 二路选择结构（if/else）， 内联三元运算符 ?: 多路选择结构（switch）。 • 循环结构 在循环的开头测试表达式（while）， 在循环的末尾测试表达式（do/while）， 对对象的每个属性都进行操作（for/in）， 由计数器控制的循环（for）。 • 使用 break 和 continue 语句

24. 3.6函数 • 函数的常规定义方式 function add(a,b){ return a+b; } 其它方式 var add=function(a,b){ return a+b; }; var utils={ count:0, add:function(a+b){ return a+b; }, test:function(){ } };

25. 函数的参数传递方式 值传递 var a=1,b=2; var result=add(a,b); alert(result); 引用传递 var o1={name:”Fred”,age:22}; function test(o){ o1.name=“jacky”; } test(o1); alert(o1.name);

26. arguments,caller,callee function func(a,b){ alert(a); alert(b); for(var i=0;i<arguments.length;i++){ alert(arguments[i]); } } func(1,2,3);//输出1 2 3 var sum=function(n){ if(1==n)return 1; elsereturn n+arguments.callee(n-1);//这里arguments.callee相当于sum } alert(sum(100));

27. 函数作用域 var str1=“abc”; var str2=“xyz”; function inner(){ var str1=‘inner abc’; str2=“xyz2”; alert(‘inner:”+str1+”,”+str2); } inner(); alert(‘outer:’+str1+’,’+str2);

28. 函数的作用域 • 函数的 apply、call 方法和 length 属性 语法： Function.prototype.apply(thisArg,argArray);//@1为对象 @2为参数数组(数组可以容纳更多的参数) Function.prototype.call(thisArg[,arg1[,arg2…]]);//@1为对象 @2为参数可多个... 说明：让prototype方法可以临时访问thisArg对象的成员，改变了this指针(指向thisArg对象)，相当于java的内部类,c++的友员 • with的使用 with(obj){ }

29. 函数闭包 var msg=“welcome”; var s=“top”; function outer(){ var count=0; var s=“outer”; return function(){ var s=“inner”; alert(s+’:’+count++); } } var f=outer(); f();

30. 异常 • 异常对象创建 *exception = new Error(*number, *description)‏ • 异常触发语法 throw *exception • 异常捕获语法 try{ } catch (ex) { } finally { } • 异常(对象)记录：name, number与description • 异常的种类：运行时错误、语法错误

31. 4.内置对象 • Object、Array、 Global、 Function、Math、 Date、Boolean、Number 、String、RegExp、Error

32. Object 对象 提供所有对象通用的功能。 • 属性 prototype 属性 | constructor 属性 • 方法 toLocaleString 方法 | toString 方法 | valueOf 方法

33. Array对象 提供对创建任何数据类型的数组的支持。 • 属性 constructor 属性 | length 属性 | prototype 属性 • 方法 concat 方法 | join 方法 | pop 方法 | push 方法 | reverse 方法 | shift 方法 | slice 方法 | sort 方法 | splice 方法 | toLocaleString 方法 | toString 方法 | unshift 方法 | valueOf 方法

34. var arr1=[1,2]; var arr2=arr1.concat([3,4]); var arr=[]; arr.push(‘<div></div>’); arr.push(‘<span></span>’); var str=arr.join(‘’); var a=arr2.slice(0,2);//返回一个数组的一段。 var b=arr2.splice(1,3);//从一个数组中移除一个或多个元素

35. Global • 是一个内部对象，目的是把所有全局方法集中在一个对象中 eval(“var d=new Date()”); parseInt(“110”); parseFloat(“11.3”);

36. Function对象 • 属性 arguments 属性 | caller 属性 | constructor 属性 | prototype 属性 • 方法 toString 方法 | valueOf 方法

37. 5.字符串和正则表达式 • 字符串 属性 constructor 属性 | length 属性 | prototype 属性 方法 anchor 方法 | big 方法 | blink 方法 | bold 方法 | charAt 方法 | charCodeAt 方法 | concat 方法 | fixed 方法 | fontcolor 方法 | fontsize 方法 | fromCharCode 方法 | indexOf 方法 | italics 方法 | lastIndexOf 方法 | link 方法 | match 方法 | replace 方法 | search 方法 | slice 方法 | small 方法 | split 方法 | strike 方法 | sub 方法 | substr 方法 | substring 方法 | sup 方法 | toLowerCase 方法 | toUpperCase 方法 | toString 方法 | valueOf 方法

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

39. 正则表达式 • 语法 re = /pattern/[flags] re = new RegExp("pattern",["flags"]) 参数 re 必选项。将要赋值为正则表达式模式的变量名。 Pattern 必选项。要使用的正则表达式模式。如果使用语法 1，用 "/" 字符分隔模式。如果用语法 2，用引号将模式引起来。 flags 可选项。如果使用语法 2 要用引号将 flag 引起来。标志可以组合使用，可用的有： g （全文查找出现的所有 pattern） i （忽略大小写） m （多行查找）

40. 下面的例子举例说明了 compile 方法的用法： function CompileDemo(){ var rs; var s = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp" // 只为大写字母创建正则表达式。 var r = new RegExp("[A-Z]", "g"); var a1 = s.match(r) // 查找匹配。 // 只为小写字母编译正则表达式。 r.compile("[a-z]", "g"); var a2 = s.match(r) // 查找匹配。 return(a1 + "\n" + a2; } 下面的例子举例说明了 test 方法的用法： function TestDemo(re, s){ var s1; // 声明变量。 // 检查字符串是否存在正则表达式。 if (re.test(s)) // 测试是否存在。 s1 = " contains "; // s 包含模式。 else s1 = " does not contain "; // s 不包含模式。 return("'" + s + "'" + s1 + "'"+ re.source + "'"); // 返回字符串。 }

41. 一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。 • 正则表达式的语法 ^ $ * + {n} {n,} {n,m} \w \W \d \D \s \S | [xyz]

42. 常用正则表达式 匹配中文字符的正则表达式： [/u4e00-/u9fa5] 匹配双字节字符(包括汉字在内)： [^/x00-/xff] 匹配HTML标记的正则表达式： /<(.*)>.*<///1>|<(.*) //>/ 匹配首尾空格的正则表达式： (^/s*)|(/s*$)（像vbscript那样的trim函数） 匹配Email地址的正则表达式： /w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)* 匹配网址URL的正则表达式： http://([/w-]+/.)+[/w-]+(/[/w- ./?%&=]*)?

43. 常用正则表达式 匹配中文字符的正则表达式： [/u4e00-/u9fa5] 匹配双字节字符(包括汉字在内)： [^/x00-/xff] 匹配一个空白行 ： /^\[ \t]*$/ 匹配HTML标记的正则表达式： /<(.*)>.*<///1>|<(.*) //>/ 匹配首尾空格的正则表达式： (^/s*)|(/s*$)（像vbscript那样的trim函数） 匹配Email地址的正则表达式： /w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)* 匹配网址URL的正则表达式： http://([/w-]+/.)+[/w-]+(/[/w- ./?%&=]*)?

44. 6.面向对象开发 • Javascript原型 • 类的定义 • 类的继承 • 面向对象的支持

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

46. 类的定义 function Class1(){ this.name=“Fred”; this.echo=function(){ alert(this.name); }; } var c=new Class1(); c.echo(); var Class1=function(){ };

47. 类的定义 function Class1(){ this.name=“Fred”; } Class1.method1=function(){ alert(‘method1’); }; Class1.prototype={ echo:function(){ alert(this.name); } }; var c=new Class1(); c.echo(); Class1.method1(); java里类的定义: public class Class1{ private String name=“Fred”; public void echo(){ System.out.println(this.name); } public static void method1(){ System.out.println(“method1); } }

48. 类定义 var Class={ create:function(){ return function() { this.initialize.apply(this, arguments); } } }; var Class1=Class.create();//定义 Class1.prototype={ initialize:function(var1,var2){ //构造函数初始化 }, echo:function(){ } }; var c=new Class1(“aaa”,”bbb”); c.echo();

49. 类的继承 • 构造函数继承 function ClassBase(){ this.baseName=“base”; this.echo=function(){ alert(this.baseName); } } function ClassChild(){ this.base= ClassBase(); this.base(); this.chidName=“child”; this.method2=function(){ alert(‘method2:’+this. baseName+’,’+ this.chidName); } }

50. 类的继承 • 原型继承。 • 原型定义： function ClassBase() {...} function ClassChild() { } ClassChild.prototype = new ClassBase(); ClassChild.prototype.method2=function(){ };