【文档说明】都市圈地图引擎之javascript基础课件.ppt，共(57)页，199.725 KB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-45215.html

以下为本文档部分文字说明：

都市圈地图引擎之javascript基础大纲1.概述2.怎样使用javascript3.基本语法4.内置对象5.字符串和正则表达式6.面向对象开发7.调试1.概述1.Javascript是什么2.Javascript其用途3.javascri

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

的HTML语言中实现的,它的出现弥补了HTML语言的不足。javascript用途常规使用场景表单验证页面特效数学运算动态文档系统管理应用软件的批处理任务服务器端程序javascript在都市圈平台中的作用地图API的实现表单数据验证界面控制地图图片的输出2.怎样使用

javascript直接嵌入<scriptlanguage=―javascript‖>//代码</script>使用外部文件<scriptlanguage=―javascript‖src=―my.js‖></script>内联<divonclick=―alert(

0)‖></div>通过URLjavascript：被链接引用的语法。如<ahref=‖javascript:alert(‗Hello‘)‖>3.基本语法1.变量2.数据类型3.运算符4.运算符优先级5.控制程序的流程6

.函数7.其它3.1变量varmyvar;varnum=0,str=‘welcome‘;total=0;Java里的变量Integernum=0;Strings=―aaaa‖;3.2变量类型主要（基本）数据类型：•字符串•数值•布尔特殊数据类型：•Null•Undefin

ed复合（引用）数据类型：•对象•数组类型判断类型转换字符串vartitle=―welcome‖;varstrNum=―22‖;varstr=‗aaaa‖bbb‖ccccc‘;varstr1=―aa\‖bb\‖cccc‖;varstr2=―abc‖+‖de

f‖;varstr3=―\abc\def\‖;数值整型值1000223,088990x9,0xb,0xff浮点值.0001,0.0001,1e-4,1.0e-43.45e2Boolean类型Boolean数据类型却只有两个值。它们是true和falsevara=100;alert(a==100

);对象对象是属性和方法的集合.对象的种类内部对象、生成的对象、宿主给出的对象（如浏览器里面的window和document）以及ActiveX对象（外部组件）等对象对象定义varobj=newObject();成员存取：[],.obj.name=―Fred‖;

obj.age=22;obj[―aabbcc‖]=―test‖;obj[100]=100*2;成员检查：inalert(―name‖inobj);varattr=―age‖;alert(obj[attr]);varobj2={};

varobj3={name:‖jacky‖,age:20,address:{province:‘gd‘,city:‘gz‘}};数组vararr=newArray();arr[0]=100;arr[1]=―abc‖;vararr2=[];

vararr3=[100,‖abc‖];varobj={name:‖Fred‖,age:22,attrs:[1,2,3]};arr3[3]=obj;特殊数据类型Null数据类型包含null的变量包含“无值”或“无对象”。换句话说，该变量没有保存有效的数、字符串、Boolean、数组或对象

。可以通过给一个变量赋null值来清除变量的内容varmy_var=null;Undefined数据类型如下情况使返回undefined值：对象属性不存在，声明了变量但从未赋值varmy_var;alert(my_var);varo={};al

ert(o.attr)类型判断使用typeof运算符把类型信息当作字符串返回。typeof返回值有六种可能："number"、"string"、"boolean"、"object"、"function"和"undefined"。varstr=‘aaa;varnum=111;alert(type

of(str));alert(typeof(num)==‗number‘);类型转换强制转换vara=100,b=1000;varc=a+b;alert(c);显式转换字符转换成数字parseInt("abc")//返回NaN，不是一个数字parseInt("12abc")//返回12

。parseFloat("abc")//返回NaN。parseFloat("1.2abc")//返回1.2。javascript的动态属性动态•Vara;a.b=2;Deletea.b;类型动态•Va

ra=1;•a=―string‖;3.3运算符算术运算符负值-,递增++,递减—,乘法*,除法/,取模运算%,加法+,减法–,逻辑运算符逻辑非!,小于<,大于>,小于等于<=,大于等于>=,等于==,不等于!=,逻辑与&&,逻辑或||,条件（三元运算符）?:,逗号,,严格相等

===,非严格相等!==位运算符按位取反~,按位左移<<,按位右移>>,无符号右移>>>,按位与&,按位异或^,按位或|赋值运算符赋值=,复合赋值运算符OP=，类似+=，-=其它运算符删除delete,typ

eof运算符typeof,voidvoid,instanceofinstanceof,newnew,inin3.4运算符的优先级运算符优先级是一套规则。该规则在计算表达式时控制运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算符执行。例如，乘法的

执行先于加法。vara=11+2*3;varb=(11+2)*3;3.5控制程序的流程选择结构(条件判断）单一选择结构（if），二路选择结构（if/else），内联三元运算符?:多路选择结构（switch）。循环结构在

循环的开头测试表达式（while），在循环的末尾测试表达式（do/while），对对象的每个属性都进行操作（for/in），由计数器控制的循环（for）。使用break和continue语句3.6函数函数的常规定义方式functionadd(a,b

){returna+b;}其它方式varadd=function(a,b){returna+b;};varutils={count:0,add:function(a+b){returna+b;},tes

t:function(){}};函数的参数传递方式值传递vara=1,b=2;varresult=add(a,b);alert(result);引用传递varo1={name:‖Fred‖,age:22

};functiontest(o){o1.name=―jacky‖;}test(o1);alert(o1.name);arguments,caller,calleefunctionfunc(a,b){alert(a);alert(

b);for(vari=0;i<arguments.length;i++){alert(arguments[i]);}}func(1,2,3);//输出123varsum=function(n){if(1==n)return1;e

lsereturnn+arguments.callee(n-1);//这里arguments.callee相当于sum}alert(sum(100));函数作用域varstr1=―abc‖;varstr2=―

xyz‖;functioninner(){varstr1=‗innerabc‘;str2=―xyz2‖;alert(‗inner:‖+str1+‖,‖+str2);}inner();alert(‗outer:‘+str1+‘,‘+str2);函数的作用域

函数的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){}函数闭包v

armsg=―welcome‖;vars=―top‖;functionouter(){varcount=0;vars=―outer‖;returnfunction(){vars=―inner‖;alert(s+‘:‘+count++);}}varf=outer(

);f();异常异常对象创建*exception=newError(*number,*description)‏异常触发语法throw*exception异常捕获语法try{}catch(ex){}finall

y{}异常(对象)记录：name,number与description异常的种类：运行时错误、语法错误4.内置对象Object、Array、Global、Function、Math、Date、Boolean、Number、String、Reg

Exp、ErrorObject对象提供所有对象通用的功能。属性prototype属性|constructor属性方法toLocaleString方法|toString方法|valueOf方法Array对象提供对创建任何数据类型的

数组的支持。属性constructor属性|length属性|prototype属性方法concat方法|join方法|pop方法|push方法|reverse方法|shift方法|slice方法|sort方法|

splice方法|toLocaleString方法|toString方法|unshift方法|valueOf方法vararr1=[1,2];vararr2=arr1.concat([3,4]);vararr=[];arr

.push(‗<div></div>‘);arr.push(‗<span></span>‘);varstr=arr.join(‗‘);vara=arr2.slice(0,2);//返回一个数组的一段。varb=arr2.splice(1,3

);//从一个数组中移除一个或多个元素Global是一个内部对象，目的是把所有全局方法集中在一个对象中eval(―vard=newDate()‖);parseInt(―110‖);parseFloat(―11.3‖);Function对象属性arguments属性|cal

ler属性|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方法|sma

ll方法|split方法|strike方法|sub方法|substr方法|substring方法|sup方法|toLowerCase方法|toUpperCase方法|toString方法|valueOf方法

字符串下面的示例演示了match方法的用法：functionMatchDemo(){varr,re;//声明变量。vars="TheraininSpainfallsmainlyintheplain";re=/ain/i;//创建正则表达式模式。r=s.match(re);//

尝试匹配搜索字符串。return(r);//返回第一次出现"ain"的地方。}本示例说明带g标志设置的match方法的用法。functionMatchDemo(){varr,re;//声明变量。vars="TheraininSpainfallsmainlyintheplai

n";re=/ain/ig;//创建正则表达式模式。r=s.match(re);//尝试去匹配搜索字符串。return(r);//返回的数组包含了所有"ain"//出现的四个匹配。}正则表达式语法re=/pattern/[flags]re=newRegExp("patt

ern",["flags"])参数re必选项。将要赋值为正则表达式模式的变量名。Pattern必选项。要使用的正则表达式模式。如果使用语法1，用"/"字符分隔模式。如果用语法2，用引号将模式引起来。flags可选项。如果使用语法2要用引号

将flag引起来。标志可以组合使用，可用的有：g（全文查找出现的所有pattern）i（忽略大小写）m（多行查找）下面的例子举例说明了compile方法的用法：functionCompileDemo(){varrs;vars="AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp"

//只为大写字母创建正则表达式。varr=newRegExp("[A-Z]","g");vara1=s.match(r)//查找匹配。//只为小写字母编译正则表达式。r.compile("[a-z]","g");vara2=s.match(r)//查找

匹配。return(a1+"\n"+a2;}下面的例子举例说明了test方法的用法：functionTestDemo(re,s){vars1;//声明变量。//检查字符串是否存在正则表达式。if(re.test(s))//测试是否存在。s1="cont

ains";//s包含模式。elses1="doesnotcontain";//s不包含模式。return("'"+s+"'"+s1+"'"+re.source+"'");//返回字符串。}一个正则表达式就是由普

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

字符的正则表达式：[/u4e00-/u9fa5]匹配双字节字符(包括汉字在内)：[^/x00-/xff]匹配HTML标记的正则表达式：/<(.*)>.*<///1>|<(.*)//>/匹配首尾空格的正则表达式：(^/s*)|(/s*$

)（像vbscript那样的trim函数）匹配Email地址的正则表达式：/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*匹配网址URL的正则表达式：http://([/w-]+/.)+[/w-]+(/[/w-./

?%&=]*)?常用正则表达式匹配中文字符的正则表达式：[/u4e00-/u9fa5]匹配双字节字符(包括汉字在内)：[^/x00-/xff]匹配一个空白行：/^\[\t]*$/匹配HTML标记的正则表达式：/<(.*)>.*<///1>|<(.*)//>/匹配首尾空格的正则表达

式：(^/s*)|(/s*$)（像vbscript那样的trim函数）匹配Email地址的正则表达式：/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*匹配网址URL的正则表达式：http://([/w

-]+/.)+[/w-]+(/[/w-./?%&=]*)?6.面向对象开发Javascript原型类的定义类的继承面向对象的支持Javascript原型JavaScript为每一个类型(Type)都提供了一个prototype属性，

将这个属性指向一个对象，这个对象就成为了这个类型的―原型‖，这意味着由这个类型所创建的所有对象都具有这个原型的特性。另外，JavaScript的对象是动态的，原型也不例外，给prototype增加或者减

少属性，将改变这个类型的原型，这种改变将直接作用到由这个原型创建的所有对象上类的定义functionClass1(){this.name=―Fred‖;this.echo=function(){alert(this.

name);};}varc=newClass1();c.echo();varClass1=function(){};类的定义functionClass1(){this.name=―Fred‖;}Class1.method1=function(){alert(‗method1‘)

;};Class1.prototype={echo:function(){alert(this.name);}};varc=newClass1();c.echo();Class1.method1();java里类的定义:publicclassClass1{priva

teStringname=―Fred‖;publicvoidecho(){System.out.println(this.name);}publicstaticvoidmethod1(){System.out.println(―method1);}}类定义varClass={create

:function(){returnfunction(){this.initialize.apply(this,arguments);}}};varClass1=Class.create();//定义Class1.prototype={initialize:funct

ion(var1,var2){//构造函数初始化},echo:function(){}};varc=newClass1(―aaa‖,‖bbb‖);c.echo();类的继承构造函数继承functionClass

Base(){this.baseName=―base‖;this.echo=function(){alert(this.baseName);}}functionClassChild(){this.ba

se=ClassBase();this.base();this.chidName=―child‖;this.method2=function(){alert(‗method2:‘+this.baseName+‘,‘+this.chidName);}}类的继承原型继承。

原型定义：functionClassBase(){...}functionClassChild(){}ClassChild.prototype=newClassBase();ClassChild.pr

ototype.method2=function(){};面向对象的支持成员列举(反射)：for..in成员存取：[],.成员检查：in关键字(运算)‏with关键字：打开对象闭包this关键字：方法调用时的实例引用继承检

查：instanceof关键字(运算)对象构造：new关键字(运算)‏7.调试1.通用的调试2.IE下的调试3.Firefox下的调试4.Chrome下地调试7.1通用的调试Alert()try{}catch(e){}7.2IE下的调试IE•Visualstudio•Microsoft

ScriptDebugger•DebugbarIE6/7•companion.jsIE8/9•开发者工具7.2Firefox下的调试FirebugnJavascriptDebugger-venkman7.3Chrome下的调试开发者工具