且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

《JavaScript构建Web和ArcGIS Server应用实战》——1.2 JavaScript基础

更新时间:2022-09-21 16:09:11

本节书摘来自异步社区《JavaScript构建Web和ArcGIS Server应用实战》一书中的第1章,第1.2节,作者: 【美】Eric Pimpler(派普勒) 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.2 JavaScript基础

顾名思义,ArcGIS API for JavaScript要求你使用JavaScript语言来开发应用程序,所以在开始创建应用程序之前你需要了解一些基础的JavaScript编程概念。

JavaScript是嵌入在所有Web浏览器中的一个轻量级的脚本语言。虽然JavaScript能在浏览器环境之外的其他应用程序中存在,但是众所周知它是和Web应用程序集成在一起的。

所有主流的浏览器,包括Internet Explorer、Firefox和Chrome等都嵌入了JavaScript。Web应用程序中使用JavaScript可以让我们创建不需要和服务器往返就可以获取数据的动态应用程序的能力,这样应用程序具有响应更加及时和用户交互友好的特性。然而,JavaScript并不具备提交请求到服务器的能力,其核心技术体现在异步JavaScript和XML(AJAX)堆栈中。

一种常见的误解是认为JavaScript是Java的简化版,但两种语言实际上除了名字相似外没有任何关联。
1.2.1 代码注释
在编写JavaScript代码时,***的做法是使用注释。这些注释最起码要包括代码的作者、最后一版的日期和代码的作用。另外,在代码的各个时期,都应该通过包含注释部分来定义应用程序特定部分的作用。该注释文档的作用是当下次代码需要更新时,能让你或者其他程序员可以进行快速处理。

任何添加到代码中的注释都不会被执行。注释部分会直接被JavaScript解释器忽略。JavaScript中的注释有多种方式,包括单行注释和多行注释。单行注释以//开始,任何你添加的额外字符都要在该行中。下列示例代码显示了单行注释是如何创建的:

//this is a single line comment. This line will not be executed

JavaScript中的多行注释以/开始,以/结束,其中间的任何一行都是注释的内容,不会被执行。下列示例代码显示的是多行注释:

/*
 Copyright 2012 Google Inc.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at http://www.apache.org/licenses/ LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and limitations under the License.
*/

1.2.2 变量
使用任何编程语言,对变量的理解都是最基本的要求。变量就是我们用来和某种类型的数据值关联的名字。简单地说,这些变量就是在计算机内存中开辟出来的一块用来存储数据的区域。

你可以将变量理解成一个盒子,它有一个名字并包括某种类型的数据。当初始化这个变量时,它一直为空直到被分配数据。一般地,变量为我们提供了存储和操作数据的能力。图1-5所示为当我们创建一个变量ssn时,起初这个变量为空,然后赋值为450-63-3567。变量的赋值类型有很多种,包括数值型、字符串型、布尔类型、对象类型和数组类型等。


《JavaScript构建Web和ArcGIS Server应用实战》——1.2 JavaScript基础

在JavaScript中,通过var关键字来声明变量。一般地,为变量分配变量名完全取决于你自己。然而,创建一个变量时你需要遵循一些规则。变量可以同时包含字母和数字,但是不能以数字开头,通常变量名以字母或下划线开头。此外,变量名中不允许出现空格和特殊字符,如%和&。除此之外,你可以***地创建变量名,但是你应当让分配的变量名能描述出数据的意义。使用同一个var关键字来声明多个变量也是合法的,如下列代码所示。

var i,j,k;

你还可以在声明变量的同时对其进行赋值,如下列代码所示。

var i = 10;
var j = 20;
var k = 30;

你或许已经发现每个JavaScript语句都是以分号结束。分号意味着JavaScript语句的结束,在JavaScript中都应当包括分号。
**
1.2.3 JavaScript大小写区分**
需要特别强调的是,JavaScript是一种区分大小写的脚本语言,因此在使用的时候要非常小心,否则会导致代码中出现一些难以跟踪的bug。所有的变量、关键字、函数和标识符都必须是一串大写字母。JavaScript区分大小写跟HTML不区分大小写常常令人感到混淆,这对于JavaScript开发新手来说是一个绊脚石。在下列代码段中,我们创建了三个变量,拼写全部一样。但是,因为它们不是相同的大小写方式,所以最后定义出来的是三个不同的变量。

var myName = 'Eric';
var myname = 'John';
var MyName = 'Joe';

1.2.4 变量数据类型
JavaScript支持多种数据类型,你可以使用它们来分配变量。不像其他强类型语言,比如.NET或者C++,JavaScript是一种弱类型语言,意味着你不必为变量指定数据类型,JavaScript解释器会直接帮你判断。你可以为变量分配字符串、数值、布尔true/false值、数组或者对象类型的值。

数值和字符串值大部分都很简单。字符串是通过单引号或者双引号包裹的简单文本,如下列代码所示。

varbaseMapLayer = "Terrain";
var operationalLayer = 'Parcels';

数值类型不需要使用引号包裹,它可以是整型数或者浮点数。

var currentMonth = 12;
var layered = 3;
var speed = 34.35;

有一点我要向程序开发新手指出的是,数值类型可以通过使用单引号或者双引号分配给字符串变量。对于一些开发新手来说有时会为此感到困惑。比如,3.14没有使用单引号或者双引号内是一个数值类型,然而使用了单引号或者双引号,那么它就是一个字符串类型。

其他数据类型包括简单的true或false值的布尔型。数组是一系列数据值的集合,一个数组基本上可作为多个值的容器。比如,你可以在一个数组内存储地理数据图层名称列表并根据需要单独访问它们。

数组允许在一个单独变量中存储多个值。比如,希望存储所有添加到地图上的图层名称,你可以使用一个数组将所有图层的名称保存在一个单独的变量中,而不需要为每一个图层创建一个变量。然后你在数组中通过使用for循环以及一个索引值来引用其中的每个值。下列示例代码显示了一种在JavaScript中创建数组的方式。

var myLayers = new Array();
myLayers[0] = "Parcels";
myLayers[1] = "Streets";
myLayers[2] = "Streams";

你还可以简化上述数组变量的创建方式,使用中括号来包裹通过逗号分割的列表,如下列代码所示。

var myLayers = ["Parcels","Streets","Streams"];

你可以通过使用索引来访问数组中的元素,如下列代码所示。数组访问是从索引0开始的,即数组中的第一项占据第0个位置,数组中的每个连续项的索引是依次递增的。

var layerName = myLayers[0]; //returns Parcels

1.2.5 条件语句
JavaScript中的if/else语句和其他编程语言一样,是一种允许在代码中进行条件选择的控制语句。这种类型的语句在代码段的最顶部执行条件判断,假如判断返回的值是true,然后跟if代码块相关的语句将会执行。假如判断的返回值是false,则执行跳转到elseif代码块中。这种模式将一直进行下去,直到返回一个判断为true的值或者执行到达else语句。下列示例代码显示了该条件语句是如何执行的。

var layerName = 'streets';
if(layerName == 'aerial'){
   alert("An aerial map");
}
else if(layerName == 'hybrid'){
   alert("A hybrid map");
}
else {
   alert("A street map");
}
*```  
*1.2.6 循环语句**
循环语句能让我们反复地运行同一代码块。JavaScript中有两种基本的循环机制。for循环执行指定次数的代码块。while循环当条件为true时执行代码块,一旦条件变为false,循环机制将结束。

下列示例代码显示的是for循环语法。你会注意到它有一个整型的初始值和条件语句,你还可以提供一个增量,在当前值比最后的值小的条件下,for循环内部的代码块将被执行。

for (start value; condition statement; increment)
{
the code block to be executed
}

下列代码中初始值设置成0并赋值给一个名为i的变量,条件语句是当i小于或者等于10,然后i值每次循环递增1,使用的是++操作符,每循环一次,打印输出i的值。

var i = 0;
for (i =0; i <= 10; i++){

document.write("The number is "+ i);
document.write("<br/>");

JavaScript中的另外一种循环机制是while循环,这种循环用在当条件为true时执行代码块;一旦条件变为false,则停止执行循环。while循环接受一个作为条件判断的参数。如下列代码所示,当i小于或者等于10时,代码块将被执行。初始条件下,i被设置成值0。在代码块的最后,你会注意到i递增1(i = i +1)。

var i = 0;
while (i <= 10)
{

document.write("The number is "+ i);
document.write("<br/>");
i = i + 1;

}

**1.2.7 函数**
现在让我们来介绍函数这个重要主题。函数是简单命名的代码块,在调用时被执行。在本书中你编写的和开发工作中的大部分代码都会用到函数。

***实践是将代码分割成按照细小的离散单元进行操作的函数。这些代码块通常定义在Web页面的<head>中的<script>标签内,也可以定义在<body>中。然而,大多数情况下,还是将函数定义在<head>中,以保证页面加载后能找到这些函数。

函数通过使用关键字function后面跟上函数名称来创建,所需的任何变量可以作为参数传递到函数中执行。如果事件调用代码中有返回值的话,需要使用return关键字来返回数据。

函数还可以接受参数变量来传递信息到函数中。下列代码中,函数prod()传递两个变量:a和b。以变量形式的参数信息,可以在函数内部使用。

var x;
function multiplyValues(a,b)
{

x = a * b;
return x;  

}

**1.2.8 对象**
现在我们已经掌握了一些基本的JavaScript概念,我们将在这部分介绍最重要的概念。为了能更有效地使用ArcGIS API for JavaScript进行地图应用程序开发,你需要对对象有一个基本的理解。因此,对象是一个需要你了解和掌握如何进行Web地图应用程序开发的关键概念。

ArcGIS API for JavaScript中广泛使用对象。我们将详细讲述编程类库的细节,但是现在我们主要针对高级概念进行介绍。对象是一个复杂的结构,能够将多个数据值和行为统一到一个单独的结构中。对象和先前的数据类型比如数值型、字符串型和布尔型有着很大的不同,那些类型仅能够保存一个单值,而对象则有着更复杂的结构。

对象由数据和行为组成。数据以属性形式包含对象信息。比如,ArcGIS API for JavaScript中的Map对象有一系列的属性,包括地图范围、与地图相关的图形、地图的高度和宽度、与地图相关的图层ID和其他属性,这些属性包含了该对象的信息。

对象也有行为,也就是我们常说的方法,我们也可以将构造函数和事件组合到方法中。map中方法的行为包括添加图层、设置地图范围或者获取地图比例尺。

构造函数是用来创建对象新实例的函数。一些对象还可以传递参数到构造函数中来获得创建对象的更多控制。下列示例代码显示的是创建Map对象新实例的构造函数是如何使用的。你可以看出这是一个构造函数,因为此处使用了醒目的new关键字。new关键字跟在对象名后面,在为对象定义构造函数时可以使用任意参数来控制该新对象。这种情况下,我们创建一个新的Map对象并存储在一个名为map的变量中。三个参数传递到构造函数中用来控制Map对象的某些属性,包括底图、地图中心和缩放尺度。

var map = new Map("mapDiv",{
basemap:"streets",
center:[-117.148,32.706],//经度和纬度
zoom:12
});

事件是发生在对象上的行为,通过最终用户或者应用程序触发。这些事件包括地图单击、鼠标移动或添加图层到地图上。

属性和方法是通过点符号来分割对象实例的名字与属性或方法的。数据可以通过使用参数传递到方法中。下列代码第一行中,我们传递一个名为pt的变量到map.centerAt(pt)方法中。

var theExtent = map.extent;
var graphics = map.graphics;

方法也是类似的情况,只不过方法名后面还有括号。数据可以通过使用参数传递到方法中。下列代码第一行,我们传递一个名为pt的变量到map.centerAt(pt)中。

map.centerAt(pt);
map.panRight();