星期三, 5月 30, 2012

jQuery 教學 - 第一支程式 Hello World

Photobucket
KT這邊貼心小叮嚀一下:


在學習使用 jQuery之前,先了解一下CSS和HTML,
再來看 jQuery會比較容易上手。
(KT這邊略去不談CSS和HTML)

KT這邊開發軟體相關工具:
jQuery 版本: 1.7.2
程式編輯工具: Visual Studio 2010
瀏覽器版本: Mozilla firefox 13


影片教學:
(近期補上)

  • 學習目標
使用jQuery,在載入網頁後,秀出一個訊息視窗顯示 "Hello World"字樣

(似乎自古以來,每個程式語言,第一支程式,
就是先寫一個 Hello World來玩玩看。)



  • 實作步驟
Step 1.到 jquery官網下載 jquery

Photobucket

KT這邊下載最新版本1.7.2。
眼尖的你會發現,一個版號裡又會有兩種版本,
分別是Minified (精簡壓縮版),Uncompressed(未壓縮版)。

開發程式時,一般我們都選用「Uncompressed(未壓縮版)」,
這樣除錯時,才比較容易找到臭蟲(Bug)。

而開發完成後,要正式發佈到網路上,
我們則會選用Minified (精簡壓縮版),
減少下載 jquery的時間,讓執行的速度可以快一些。

目前1.7.2 Minified (精簡壓縮版)大小為:92.6KB,
1.7.2  Uncompressed(未壓縮版) 大小為: 246 KB,
大小整整差了2.6倍。


Step 2.開啟Visual Studio 2010

(這邊KT推薦使用  Visual Web Developer 2010 Express  或
 Visual Studio 2010 Express 是一套微軟開發,
完全免費超強的程式編輯軟體,無使用時間限制,
當然你也可以選用其他,你覺得順手的 jQuery編輯器)

Photobucket

Step 3.檔案=>新增=>專案
Photobucket

Step 4.選擇ASP.NET空白WEB應用程式
Photobucket

Step 5.在方案總管裡,在專案名稱上按下滑鼠右鍵=>加入=>新增項目
Photobucket

Step 6. 再加入新項目對話視窗裡,選擇HTML網頁
Photobucket

Step 7.在方案總管裡新增一個資料夾,檔名為「jQuery 」
Photobucket


Step 8. 在剛新建的「jQuery 」資料夾裡,加入之前下載的jQuery Uncompressed(未壓縮版)  
Photobucket

在加入後可以在方案總管裡的「jQuery 」資料夾樹根裡,
看到 jQuery Uncompressed(未壓縮版)
Photobucket

Step 9. 將「jquery-1.7.2.js」 拖曳到HelloWorld.htm的body標籤裡。
Photobucket
拖曳過去後,程式自動產生「載入jquery路徑程式碼」。

Step 10. 在body標籤裡,加入第九行程式碼:
Photobucket

 在Step 10圖中,第8行程式碼解說: 載入jquery函式庫路徑。
當然你也可以選擇載入網路端的路徑,底下三個中任選一個

 

 



在Step 10圖中,第9行程式碼解說:使用jquery語言,
都會使用Script標籤,前後包起來。
我們需要秀一個訊息視窗,這邊使用alert函數,
中間填入想要顯示的字串。
即可完成我們今天的學習目標。

按下F5,快速執行專案,即可以看到載入網頁後,
秀出一個訊息視窗顯示 "Hello World"字樣
Photobucket

大功告成。


範例程式碼下載:


相關文章:
jQuery 教學目錄

0 意見 :

張貼留言

回覆意見時,麻煩輸入一下暱稱
(隨便取個名字也好~ ^_^)
好讓我方便回覆您的問題,
選擇「名稱/網址」輸入您的暱稱,
麻煩一下,謝謝大家。

關閉廣告 [X]