《WEBGIS编程入门》PPT课件

WEBGIS编程入门,摘要,HTML与CSSJavaScriptGoogleMapAPI,HTML简介,HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言，而是一种标记语言(markuplanguage)标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页,HTML简介,HTML标签是由尖括号包围的关键词，比如HTML标签通常是成对出现的，比如和标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签,HTML简介,HTML文档=网页,示例说明,与之间的文本描述网页与之间的文本是可见的页面内容与之间的文本被显示为标题与之间的文本被显示为段落,HTML标签,标题：-,HTML标签,段落：,HTML标签,链接：,HTML标签,图像：,HTML标签的属性,img标签的属性：src，图像的访问地址width，图像显示的宽度height，图像显示的高度,HTML注释,注释：,HTML文档规范,标签必须闭合，开始标签与结束标签成对出现，空标签在开始标签中关闭标签可以嵌套，html中嵌套body标签推荐使用小写字母,HTML标签参考手册,标签清单,CSS,CSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表通常存储在CSS文件中,CSS示例-内联样式,CSS示例-内部样式表,pcolor:red;margin-left:20px这是一个标题这是一段正文.,CSS示例-外部样式表,这是一个标题这是一段正文.,mystyle.csspcolor:red;margin-left:20px,CSS参考手册,JavaScript简介,JavaScript被设计用来向HTML页面添加交互行为。JavaScript是一种脚本语言（脚本语言是一种轻量级的编程语言）。JavaScript由数行可执行计算机代码组成。JavaScript通常被直接嵌入HTML页面。Java与JavaScript的关系：没有关系,JavaScript示例,和，告诉浏览器这是一段JavaScript程序document.write()是标准的页面调用指令，向页面内写入数据“HelloWorld!”，作为document.write()的参数，是写入页面的数据内容,在哪里放置JavaScript,标签里.标签里.外部脚本文件,JavaScript的数据类型,JS使用弱数据类型不区分数据的类型，统一使用var来保存数据JS变量的声明vara=5;varb;b=8;varc=Nanjing;/字符串类型,JavaScript的运算符,运算符说明，给定y=5,JavaScript的运算符,字符串的“+”运算txt1=Whatavery;txt2=niceday;txt3=txt1+txt2;/Whataveryniceday“字符串与数字的“+”运算result=5+”abc”;/”5abc”result=“abc”+5;/”abc5”,JavaScript中的比较运算,比较运算符，给定x=5,JavaScript中的逻辑运算,逻辑运算符，给定x=6，y=3,JavaScript中的条件判断,ifelse语句if(条件)条件成立时执行此代码else条件不成立时执行此代码示例：vard=newDate();vartime=d.getHours();if(time10)document.write(“早上好!)elsedocument.write(“中午好!),JavaScript中的条件判断,switch语句switch(n)case1:执行代码块1breakcase2:执行代码块2breakdefault:如果n即不是1也不是2，则执行此代码,JavaScript的函数,函数定义function函数名(var1,var2,.,varX)代码示例functionadd(a,b)returna+b;result=add(1,2);/3,循环,for循环for(变量=开始值;变量=结束值;变量=变量+步进值)需执行的代码while循环while(变量=结束值)需执行的代码,循环,dowhile循环do需执行的代码while(变量=结束值),JavaScript练习,安装googlechrome浏览器打开chrome浏览器“F12”选择“控制台”,JavaScript练习,练习1：数学运算a=5b=3,JavaScript练习,练习2：字符串的”+”运算a=5b=3c=“nanjing”a+c,c+a,a+b+c,JavaScript练习,练习3：函数的定义与调用functionaddUpTo(a,b)result=0;for(i=a;i=b;i+)result+=i;returnresult;调用：addUpTo(1,5),JavaScript练习,教程与习题,GoogleMapAPI入门,显示一副地图指定地图的位置指定地图的类型指定地图的缩放等级,GoogleMapAPI入门,functioninitialize()varmapOptions=center:newgoogle.maps.LatLng(32.0294,118.8419),zoom:16,mapTypeId:google.maps.MapTypeId.ROADMAP;varmap=newgoogle.maps.Map(document.getElementById(map_canvas),mapOptions);,GoogleMapAPI入门,center,屏幕中心位置的经纬度zoom,缩放级别，0-18mapTypeId，地图类型，ROADMAPSATELLITEHYBRIDTERRAIN,GoogleMapAPI文档,GoogleMapAPI入门,给地图添加标记functionaddMarker(lat,lon,titleText)varmarker=newgoogle.maps.Marker(position:newgoogle.maps.LatLng(lat,lon),title:titleText);/Toaddthemarkertothemap,callsetMap();marker.setMap(map);addMarker(32.0294,118.841