MooTools Core v1.4.5

新手指點

學習及調試方法

本文檔為Mootools 1.4.5官方翻譯文檔,Mootools對大部分瀏覽器原生對象做了擴展,所以使用Mootools與使用原生javascript對象相似,下面說下javascript/mootools的簡單學習調試方法:
javascript及其框架的學習還是比較簡單的,不用配置環境,有個瀏覽器就能寫javascript代碼.
但為了提高學習和開發的效率,建議使用Chrome瀏覽器或Firefox瀏覽器+firebug插件.學會了調試學習javascript基本就像順手推舟一樣簡單了.
下面有將用Chrome做個簡單調試說明.

打開開發工具

有兩種常方法

1. 按F12(Windows).
2. 在想要查看的元素上右鍵->審查元素,然后審查元素在開發工具中高亮顯示,如下圖:

   

   

開發工具面板說明

1. Elements 樹形展示DOM文檔結構.
2. Network 查看此頁面內的所有http請求(注:必須先打開開發工具才能看到請求,如果文檔加載完成后才打開開發工具請刷新頁面) 此功能在開發中非常有用,常用來分析ajax請求與響應是否一至.
3. Sources 資源選項,可以查看此文檔下的所有資源,如html文件,css文件,javascript文件,圖片等.
4. Console 控制臺這也是你學習Javascript及框架應該用的最多的功能,下文詳細介紹.
5. 其它功能自己去探索.

控制臺的使用

控制臺可以打印出javascript錯誤信息,也可以直接在里面運行javascript代碼,代碼的運行環境為javascript的全局環境. 可以在控制臺訪問到全局變量,這一點對學習Mootools和javascript很有用.以下將截圖介紹(引站點所以頁面已引入Mootools框架).

1. 打印Mootools的Browser對象,打印一個變量有兩種方法:使用瀏覽器的原生方法console.log(變量名),另直接輸入變量名.第二種較簡便,所以我們下文全部使用第二種方式.

   

   從上圖可以明了的看出Browser對象中有哪些東西,所以框架的有些用法不用看文檔,打印一下對象信息基本就了解怎么用了.

2. 設置或修改一個變量

   

   圖片已可解釋一切,我也不再累贅.

對初學者的建議

1. 在看文檔時打開控制臺,邊看文檔邊在控制臺運行文檔里的示例.
2. 譯者水平有限,如果不明白的地方可去官方參考英文文檔,不要放棄英文.

圖書推薦

• <<javascript高級程序設計>>很薄,花幾天時間就能看完,入門推薦.
• <<javascript權威指南>>這個是Javascript的圣經了,非常厚,內容非常詳細,建議當成工具書用.