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

都市圈地图引擎之javascript基础,大纲,概述 怎样使用javascript 基本语法 内置对象 字符串和正则表达式 面向对象开发 调试,1.概述,Javascript是什么 Javascript其用途 javascript在都市圈平台中的作用,Javascript是什么,JavaScript是一种脚本语言 ，其目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准 的HTML语言中实现的,它的出现弥补了HTML语言的不足。,javascript用途,常规使用场景 表单验证 页面特效 数学运算 动态文档 系统管理 应用软件的批处理任务 服务器端程序,javascript在都市圈平台中的作用,地图API的实现 表单数据验证 界面控制 地图图片的输出,2.怎样使用javascript,直接嵌入 /代码 使用外部文件 内联 通过URL javascript：被链接引用的语法。如,3.基本语法,变量 数据类型 运算符 运算符优先级 控制程序的流程 函数 其它,3.1变量,var myvar; var num=0,str=welcome; total=0; Java里的变量 Integer num=0; String s=“aaaa”;,3.2变量类型,主要（基本）数据类型： 字符串 数值 布尔 特殊数据类型： Null Undefined 复合（引用）数据类型： 对象 数组 类型判断 类型转换,字符串,var title=“welcome”; var strNum=“22”; var str=aaaa”bbb”ccccc; var str1=“aa”bb”cccc”; var str2=“abc”+”def”; var str3=“ abc def ”;,数值,整型值 100 0223,08899 0x9, 0xb, 0xff 浮点值 .0001, 0.0001, 1e-4, 1.0e-4 3.45e2,Boolean类型,Boolean 数据类型却只有两个值。它们是true 和 false var a=100; alert(a=100);,对象,对象是属性和方法的集合. 对象的种类 内部对象、生成的对象、宿主给出的对象（如浏览器里面的window 和 document）以及 ActiveX 对象（外部组件） 等,对象,对象定义 var obj=new Object(); 成员存取： , . =“Fred”; obj.age=22; obj“aa bb cc”=“test”; obj100=100*2; 成员检查：in alert(“name” in obj); var attr=“age”; alert(objattr); var obj2=; var obj3=name:”jacky”,age:20,address:province:gd,city:gz;,数组,var arr=new Array(); arr0=100; arr1=“abc”; var arr2=; var arr3=100,”abc”; var obj=name:”Fred”,age:22,attrs:1,2,3; arr33=obj;,特殊数据类型,Null 数据类型 包含 null 的变量包含“无值”或“无对象”。换句话说，该变量没有保存有效的数、字符串、Boolean、数组或对象。可以通过给一个变量赋 null 值来清除变量的内容 var my_var=null; Undefined 数据类型 如下情况使返回 undefined 值： 对象属性不存在， 声明了变量但从未赋值 var my_var; alert(my_var); var o=; alert(o.attr),类型判断,使用typeof 运算符把类型信息当作字符串返回。 typeof 返回值有六种可能：“number“、“string“、“boolean“、“object“、“function“ 和 “undefined“。 var str=aaa; var num=111; alert(typeof(str); alert(typeof(num)=number);,类型转换,强制转换 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。,javascript的动态,属性动态 Var a; a.b = 2; Delete a.b; 类型动态 Var a = 1; a = “string”;,3.3运算符,算术运算符 负值 - ,递增 + ,递减 ,乘法 * ,除法 / ,取模运算 % ,加法 + ,减法 , 逻辑运算符 逻辑非 ! ,小于 ,小于等于 = ,等于 = ,不等于 != ,逻辑与 & ,逻辑或 | ,条件（三元运算符） ?: ,逗号 , ,严格相等 = ,非严格相等 != 位运算符 按位取反 ,按位左移 ,无符号右移 ,按位与 & ,按位异或 ,按位或 | 赋值运算符 赋值 = ,复合赋值运算符 OP=，类似+=，-= 其它运算符 删除 delete ,typeof 运算符 typeof ,void void ,instanceof instanceof ,new new ,in in,3.4运算符的优先级,运算符优先级是一套规则。该规则在计算表达式时控制运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算符执行。例如，乘法的执行先于加法。 var a=11+2*3; var b=(11+2)*3;,3.5控制程序的流程,选择结构(条件判断） 单一选择结构（if）， 二路选择结构（if/else）， 内联三元运算符 ?: 多路选择结构（switch）。 循环结构 在循环的开头测试表达式（while）， 在循环的末尾测试表达式（do/while）， 对对象的每个属性都进行操作（for/in）， 由计数器控制的循环（for）。 使用 break 和 continue 语句,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() ;,函数的参数传递方式 值传递 var a=1,b=2; var result=add(a,b); alert(result); 引用传递 var o1=name:”Fred”,age:22; function test(o) =“jacky”; test(o1); alert();,arguments,caller,callee function func(a,b) alert(a); alert(b); for(var i=0;iarguments.length;i+) alert(argumentsi); func(1,2,3);/输出1 2 3 var sum=function(n) if(1=n)return 1; else return n+arguments.callee(n-1);/这里arguments.callee相当于sum alert(sum(100);,函数作用域,var str1=“abc”; var str2=“xyz”; function inner() var str1=inner abc; str2=“xyz2”; alert(inner:”+str1+”,”+str2); inner(); alert(outer:+str1+,+str2);,函数的作用域,函数的 apply、call 方法和 length 属性 语法： Ftotype.apply(thisArg,argArray);/1为对象 2为参数数组(数组可以容纳更多的参数) Ftotype.call(thisArg,arg1,arg2);/1为对象 2为参数可多个. 说明：让prototype方法可以临时访问thisArg对象的成员，改变了this指针(指向thisArg对象)，相当于java的内部类,c+的友员 with的使用 with(obj) ,函数闭包,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();,异常,异常对象创建 *exception = new Error(*number, *description) 异常触发语法 throw *exception 异常捕获语法 try catch (ex) finally 异常(对象)记录：name, number与description 异常的种类：运行时错误、语法错误,4.内置对象,Object、 Array、 Global、 Function、Math、 Date、Boolean、Number 、String 、RegExp、Error,Object 对象,提供所有对象通用的功能。 属性 prototype 属性 | constructor 属性 方法 toLocaleString 方法 | toString 方法 | valueOf 方法,Array对象,提供对创建任何数据类型的数组的支持。 属性 constructor 属性 | length 属性 | prototype 属性 方法 concat 方法 | join 方法 | pop 方法 | push 方法 | reverse 方法 | shift 方法 | slice 方法 | sort 方法 | splice 方法 | toLocaleString 方法 | toString 方法 | unshift 方法 | valueOf 方法,var arr1=1,2; var arr2=arr1.concat(3,4); var arr=; arr.push(); arr.push(); var str=arr.join(); var a=arr2.slice(0,2);/返回一个数组的一段。 var b=arr2.splice(1,3);/从一个数组中移除一个或多个元素,Global,是一个内部对象，目的是把所有全局方法集中在一个对象中 eval(“var d=new Date()”); parseInt(“110”); parseFloat(“11.3”);,Function对象,属性 arguments 属性 | caller 属性 | constructor 属性 | prototype 属性 方法 toString 方法 | valueOf 方法,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 方法,字符串,下面的示例演示了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“ / 出现的四个匹配。 ,正则表达式,语法 re = /pattern/flags re = new RegExp(“pattern“,“flags“) 参数 re 必选项。将要赋值为正则表达式模式的变量名。 Pattern 必选项。要使用的正则表达式模式。如果使用语法 1，用 “/“ 字符分隔模式。如果用语法 2，用引号将模式引起来。 flags 可选项。如果使用语法 2 要用引号将 flag 引起来。标志可以组合使用，可用的有： g （全文查找出现的所有 pattern） i （忽略大小写） m （多行查找）,下面的例子举例说明了 compile 方法的用法： function CompileDemo() var rs; var s = “AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp“ / 只为大写字母创建正则表达式。 var r = new RegExp(“A-Z“, “g“); var a1 = s.match(r) / 查找匹配。 / 只为小写字母编译正则表达式。 pile(“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 + “); / 返回字符串。 ,一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。 正则表达式的语法 $ * + n n, n,m w W d D s S | xyz,常用正则表达式,匹配中文字符的正则表达式： /u4e00-/u9fa5 匹配双字节字符(包括汉字在内)： /x00-/xff 匹配HTML标记的正则表达式： /.*|/ 匹配首尾空格的正则表达式： (/s*)|(/s*$)（像vbscript那样的trim函数） 匹配Email地址的正则表达式： /w+(-+./w+)*/w+(-./w+)*/./w+(-./w+)* 匹配网址URL的正则表达式： http:/(/w-+/.)+/w-+(/w- ./?%&=*)?,常用正则表达式,匹配中文字符的正则表达式： /u4e00-/u9fa5 匹配双字节字符(包括汉字在内)： /x00-/xff 匹配一个空白行 ： / t*$/ 匹配HTML标记的正则表达式： /.*|/ 匹配首尾空格的正则表达式： (/s*)|(/s*$)（像vbscript那样的trim函数） 匹配Email地址的正则表达式： /w+(-+./w+)*/w+(-./w+)*/./w+(-./w+)* 匹配网址URL的正则表达式： http:/(/w-+/.)+/w-+(/w- ./?%&=*)?,6.面向对象开发,Javascript原型 类的定义 类的继承 面向对象的支持,Javascript原型,JavaScript为每一个类型(Type)都提供了一个prototype属性，将这个属性指向一个对象，这个对象就成为了这个类型的“原型”，这意味着由这个类型所创建的所有对象都具有这个原型的特性。另外，JavaScript的对象是动态的，原型也不例外，给prototype增加或者减少属性，将改变这个类型的原型，这种改变将直接作用到由这个原型创建的所有对象上,类的定义,function Class1() =“Fred”; this.echo=function() alert(); ; var c=new Class1(); c.echo(); var Class1=function() ;,类的定义,function Class1() =“Fred”; Class1.method1=function() alert(method1); ; Ctotype= echo:function() alert(); ; var c=new Class1(); c.echo(); Class1.method1();,java里类的定义: public class Class1 private String name=“Fred”; public void echo() System.out.println(); public static void method1() System.out.println(“method1); ,类定义,var Class= create:function() return function() this.initialize.apply(this, arguments); ; var Class1=Class.create();/定义 C