載入 Dojo 函式庫，開發第一隻 Dojo 程式。
看完這篇文章，將學會如何將 Dojo 載入 HTML 頁面，並使用 Dojo 的核心函數。
Step1
曾經使用過其它 web 套件或模組的話應該很熟悉了，首先必須在自己的程式中載入套件程式碼。有兩種載入方式：
- Cloud hosting 用超連結的方式載入遠端主機上的 Dojo Toolkit。目前官方提供三個來源，直接將下列程式碼擇一加入自己的網頁中即可 Google CDN
AOL CDN
Yandex CDN (Europe)
- 下載到本機 雖然上述 cloud hosting 的主機接屬穩定，但萬一出了問題，我們的網站也會受到影響導致服務中斷，因此也可以選擇將 Dojo Toolkit 下載到自己的本機上。假設下載檔案與網頁至於料夾下
Step2
使用上述方法完成 Dojo 的載入之後，我們來實際使用看看：
dojo.ready
短短五個字母的 ready 其中有很大的學問。所謂的 READY 指的是，一個 HTML 頁面中的 DOM 和 javascript 函數皆載入完成，而後我們操作 DOM 物件或使用 javascript 函數的時候，才不會因為其尚未建立完成而出錯。
然而 READY 的判斷不只與 HTML 頁面相關，也與瀏覽器的處理方式有關，因此 READY 的時機點變得不易掌握。Dojo 的 ready 函數提供了跨瀏覽器的整合，指定給 dojo.ready 的函數將在頁面準備完成後執行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- 載入dojo -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>
<script>
dojo.ready(function(){
alert("Dojo version " + dojo.version + " is loaded");
});
</script>
</head>
<body>
<h1 id="greeting">Hello</h1>
</body>
</html>
執行上面的程式碼應該會在頁面載入完成之後跳出一個視窗，顯示載入的 dojo 版本，如下圖
dojo.byId
dojo.byId 相當於 javascript 中 document.getElementById()。
接下來，利用 DOM 將頁面中的 "Hello" 在頁面載入完成之後，加上 dojo 載入的版本資訊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- 載入 Dojo -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>
<script>
dojo.ready(function(){
dojo.byId("greeting").innerHTML += ", from " + dojo.version;
});
</script>
</head>
<body>
<h1 id="greeting">Hello</h1>
</body>
</html>
另外，當 dojo.ready 要處理的程式碼較長的時候，可獨立出來為一個 function，再傳給 dojo.ready。要注意的是，傳遞函式時，只需傳入函式名稱即可，不需加上括號。
function init() {
alert("Dojo ready, version:" + dojo.version);
// More initialization here
}
dojo.ready(init);
相關文章---------------
沒有留言:
張貼留言