原文地址：http://help.arcgis.com/en/webapi/javascript/arcgis/jstutorials/
注意：本教程有兩個版本可選，介紹如何以一種異步的模塊定義風格中使用ArcGISAPI for JavaScript模塊。
本例應用在ArcGISAPI for JavaScript Sandbox中的實時版本。Sandbox是一個實時代碼編輯器，允許我們實時修改資源和查看變化。
1 建立一個簡單的HTML文件
首先，建立一個基本的HTML文件，這裏有個例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">
<title></title>
</head>
</html>
2 引入ArcGIS API forJavaScript
在使用ArcGIS API for JavaScript前，將下面的腳本和鏈接標籤添加到<head>中：
<link rel="stylesheet"href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css"> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
這個腳本標籤加載了ArcGIS API for JavaScript，當新版本的JavaScript API發佈後，可以更新版本號以匹配新發布的API版本。
Esri.css樣式單包含專門的Esri widgets（小工具）和組件，關於這些樣式單的更多信息，可以參考required CSS幫助專題。
可以隨意包含Dojo Dijit主題（theme）的樣式單，有四個主題可供使用：claro，tundra，soria 和nihilo。Dijit theme tester是預覽不同Dojo Dijit各自的主題是如何設計的最快方法。Tundra和claro是在API實例中最頻繁使用的。使用不同主題進行實驗可以找到你最喜歡的。另外，使用Dojo Dijit是個人選擇，但是這樣是實現API中小工具統一觀感的簡單方法。不同主題樣式單的URL如下：
http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/tundra/tundra.css http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/nihilo/nihilo.css http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/soria/soria.css3 加載模塊
使用第二個<script>從API中加載特定模塊。不需要再這個script標籤引入URL，JavaScript代碼直接在內部添加。
<script> dojo.require("esri.map"); </script>
建立一個簡單的頁面或者實驗時，將JavaScript嵌入script標籤是很有用的，但不適用與建立大型應用，這時需要將所有JavaScript放在獨立的.js文件中。
模塊通過dojo.require()加載(Dojo提供)，ESRI的JavaScript API建立在Dojo之上並依靠Dojo，因爲它的模塊系統和其他要素如矢量地圖、定位以及瀏覽器的抽象方式都不同。更多有關Dojo和JavaScript關係的信息參見Working with Dojo和Why Dojo。
4 確保DOM可用
接下來，一旦DOM可用，用dolo.ready來指定執行一個函數。這個函數由dojo.ready訪問，叫做init，地圖將被創建並且地圖圖層也被加載。地圖圖層來自於ArcGIS.com服務。
<script> dojo.require("esri.map"); function init() { // code to create the map and add a basemap will go here } dojo.ready(init); </script>
5 創建地圖
一個新的地圖由esri.map創建，它是地圖類的引用，通過esri.map模塊加載。傳遞給esri.map的字符串“mapDiv”是包含地圖的div要素的id。指定其他地圖屬性如底圖、起始中心點和上升水平，都傳遞給地圖構造函數。
var map; function init() { map = new esri.Map("mapDiv", { center: [-56.049, 38.485], zoom: 3, basemap: "streets" }); } dojo.ready(init);
因爲地圖變量聲明在全局函數的外面，在測試或者調試時是很有用的因爲瀏覽器開發控制檯可以與地圖交互。
其餘的底圖選項是："satellite", "hybrid", "topo", "gray", "ocean", "osm", "national_geographic"。通過在sandbox修改底圖選項交替使用底圖。查看Map class獲取更多地圖選項的細節信息。
6 定義頁面內容
由於JavaScript創建地圖要在適合的地方，下一步是添加項關聯的HTML。對這個實例來講，HTML非常簡單：一個<body>標籤，定義什麼在瀏覽器裏是可見的；body中創建地圖的地方一個單獨的div元素。
<bodyclass="claro"> <div id="mapDiv"></div> </body>
div有一個“mapDiv”的id要與傳入地圖構造函數裏面的id相同。body標籤有個“claro”的類屬性，這是用於將頁面上包含在head標籤中的claro樣式單中的樣式應用於小工具（widgets）。如果使用不同的主題如tundra，則用class=”tundra”。
7 設計頁面樣式
在本教程裏，地圖填充整個瀏覽器窗口。要實現該功能需要添加下面css在頁面的<head>標籤中：
<style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } </style>