2011 年 09 月 02 日 13:24 
你自問對 JavaScript 的認識有多深？Sohail Anwar 撰寫了一份有 25 道題目的 JavaScript 面試測驗卷， 考考你的 JavaScript 水平。這些題目並不困難，其中一道題目問 JavaScript 應該使用甚麼 HTML 標籤包裹著？Script？Body？Head？Title？相信很多編寫網頁程式的人都可以應付自如。這份試卷提供了正確答案，可以作為學習的資源。
| ||||
近來網頁應用的開發人員越來越頭疼，微軟積極開發新版本的 IE，每一次都聲稱支援更多更新更標準的 JScript 功能，做為開放原碼的龍頭瀏覽器 Mozilla，新版本推出得更加頻密，每一次它所支援的 JavaScript 都好像提升一個版本，市場份額較少的 Opera 和 Safari 也標榜支援最新最標準的 JavaScript，甚至宣稱自己的 JavaScript 引擎效能更高，Adobe 也說它的 Flex 技術平台使用與 ECMAScript 3 兼容的 ActionScript，同一時間，幾乎所有主流瀏覽器都宣稱兼容 ECMAScript 3。ECMA 作為標準制定機構竟然也來製造混亂，忽然取消原定於 2008 年末推出的 ECMAScript 4，說今年會推出 ECMAScript 5，而ECMAScript 4 則改名為 ECMAScript Harmony，但沒有路線圖或時間表。作為一個開發人員，你怎樣理解這場混亂？ 正當你在網上愉快地瀏覽著，按了一下超連結後，瀏覽器突然跳出一個視窗，詢問你是否要儲存一個壓縮檔案，這是多麼不爽的事！若果你的訪客一早知道這 個超連結會開啟一個壓縮檔案（你當然有很好的理由送出一個壓縮檔案，例如這是一個軟件包之類），他們的感受會好得多，也可以讓他們自行決定是否開啟，或者 什麼時候開啟。傳統的作法是在超連結後面加上一個檔案類型的提示，這可以是一句文字，也可以是一個小圖示，但要把所有這類型的超連結加上提示，除了手動以 外，有沒有更方便快捷又不會出錯的方法？Toby Somerville 在 SitePoint 有一篇教學文件介紹兩個作法。 這是一個純 CSS 的作法，但必須在支援 CSS3 的瀏覽器才適用，所有優秀的瀏覽器都支援這個作法，包括 Firefox、Safari 和 Opera，以下是一個範例： 總部設在俄羅斯聖彼得堡的 DHTMLX 公司更新其 dhtmlxSuite 套件，這是一套專業的 Ajax 網頁介面組件，採用開放原碼 GPL 執照，這次主要更新了套件中的「網格」(dhtmlxGrid) 和「樹格」(dhtmlxTreeGrid) 組件，包括了大量的新功能和改進，例如從 JSON 和 JavaScript 陣列載入數據、智能渲染、及分層數據網格的分頁支援，套件亦加入了新的「滑竿」(dhtmlxSlider) 組件。
較早前 jQuery 推出新版本，聲稱效能提高 300%，在差不多時間 Prototype 的最新版本也表示改善了效能（當然還有其他安全性的改進），所以 Piotr Solnica 決定比較一下 jQuery 和 Prototype 在不同瀏覽器上的表現，他在 Firefox、Konqueror、Opera 和 IE 上執行他的測試測網頁，網頁會執行九項操作，每一項都分別用 jQuery 和 Prototype 執行一次，為了公平起見，每兩項操作之間都分隔三秒。時間的量度精度達到千分一秒，為了進一步提高公平性，這個網頁會在每一個瀏覽器上執行三次，取執行時間的平均值。測試的結果可以觀看 Piotr Solnica 的列表。 Piotr Solnica 評論說：「在 15 個個案中，Prototype 至少比 jQuery 快兩倍，而 jQuery 則在 8 個個案中比 Prototype 快，那麼我應該選哪一個？我個人會選擇 Prototype，因為它有 jQuery 的所有功能，還有一些 jQuery 沒有的，它也比 jQuery 跑得快，對於一些需要炫目介面的項目，jQuery 可能比較適合，但只是僅此而已。這是我的看法，若你認為我錯了歡迎指正……」 有人在一齣科幻電影「星際之門」 (Stargate) 中見到主角編寫 JavaScript 程式，證明 JavaScript 的壽命將會在太空時代繼續發揚光大！
很高興大家今天使用的 JavaScript 在短期內不會被淘汰。 初學 DOM 的人很容易把節點集合（collection of nodes）與節點陣列（arrray of nodes）混淆，並且把節點集合當作陣列來使用，結果鬧出不少問題，浪費很多除錯的時間。James Edwards 有一篇文章介紹這兩者的分別，並且說明如何把節點集合轉換為節點陣列。DOM 有很多內建的 method 送回節點集合，所以釐清這兩個概念非常重要。 節點集合的官方名稱是 NodeList，根據 W3C 的 DOM level 3 核心文件，送回 NodeList 的 methods 包括 Document.getElementByTagName()、Node.childNodes 等，歷遍 NodeList 的方法跟歷遍陣列差不多： Javascript | copy code |? 1for(var i=0; i<collection .length; i++)2{3 //whatever4} 但你不能使用陣列專用的 methods 包括 push()、splice()、reverse() 等來處理 NodeList。 Simon Willison 替 jQuery 這個 JavaScript 函式庫製作了一套投影片，短短的只需大概十分鐘便可以看完，裡面介紹了 jQuery 的特色、有趣的地方、CSS 選擇器、DOM 指令、事件處理、Ajax 支援、插件等。
以下是 Dojo 官方網站上刊登的「為甚麼選擇 Dojo？」中文翻譯的第二部份，希望有助大家認識 Dojo 這個 JavaScript 工具庫，第一部份已於較早前發表。 有其他幾個工具往往與 Dojo 比較，以下不是一個全面的比較，只是 Dojo 與這些替代工具的特點和設計目標一個高層次的比較，這些替代工具在特徵、開發過程，以及哲學與 Dojo 的異同。 隨著 Ajax 近年來瘋魔全球的網站設計師，大家一提起互動網頁、Web 2.0、SOA（服務導向架構），便自自然然想起組成 Ajax 的幾個字： Javascript、XML。彷彿要做到那靈巧的互動功能，便一定要調用 XMLHttp，真的是這樣嗎？ 其實我們至少還有兩種方法：script tags 及 iframe，可以幫助我們編寫互動性強，又毋須把整頁網頁下載即可更新頁面資料的網頁。 說 script tags 大家可能丈八金剛──摸不著頭腦，但一說 JSON 是不是立即恍然大悟？沒錯，兩者其實是同一種東西，當然 JSON 聽起來比較「摩登」、「時尚」，它的概念是把數據編碼成 Javascript 的語句，從伺服器送給客戶端，客戶端則使用 Javascript 在網頁內動態地增加一個 script 物件，然後把 script 物件的網址指向伺服器的的程式，瀏覽器便會自動下載有關的 Javascript 然後執行，需要傳送參數的話可以利用 GET 方法在網址後面附上參數。 網上有很多圖像處理、相簿管理的網上應用系統，容許我們把大圖像裁剪為較小的圖像，但是用戶必須輸入裁剪框的座標和大小，對一般人來說顯然十分困 難，Dave Dash 在 Spindrop 發表了一篇教學文件，指導我們怎樣利用 DHTML（JavaScript + CSS + HTML）來製作一個靈活易用的圖像裁剪介面。 在學習前不防先看看 Dave 的示範。
Dave 這個示範的靈感其實來自蘋果電腦中地址簿的一項功能，Dave 認為這是他見過最簡潔易用的圖像裁剪介面，所以利用它作為設計藍本製做了這個 DHTML 教學文件。這個示範用 PHP 在 Symfony（一個 PHP 開發架構）上開發，不過你們即使沒有安裝 Symfony 也一樣可以學習其中的技巧，唯一必需的是 PHP。 這個介面把收集到的座標送回伺服器，然後利用 GD 函式庫進行真正的裁剪工作，這部份工作 Dave 也做了詳細解釋，並且列出了全部原始碼。 你有想像過單純用 JavaScript 和 DOM 便可以製作立體透視圖甚至動畫？James Edwards 在 Dynamic 3D with CSS and the DOM 中教導我們這方面的技巧。
作者從 Tanket 一篇介紹如何不用點陣圖像或向量圖出發，只用 CSS 的框架邊緣效果來繪畫等邊多角圖形，包括了正三角形、正四邊形、正五邊形、正六邊形等，例如有一個邊緣闊度達 50 像素的框架，左右框邊跟上下框邊顏色不同，在垂直和水平框邊的接界處便會產生如下圖的斜線：
只要控制左右和上下框邊的闊度比例，加上改變邊框的顏色，我們便可以得到任意角度和長度的斜線，這些線段就是我們繪畫立體透視圖的「材料」。下一步便是計算我們需要多少線段、每一段的角度、長度和位置，這個過程需要大量的數學運算，這便是 DOM 大顯身手的時候了。 下一步 James 使用 JavaScript 來進行美化的工作，例如把牆壁切片，獨立地計算每一片的位置從而得出更準確的透視效果，牆壁和地板的顏色也可以逐漸改變，使圖象更有深度，甚至在牆壁和地板加上紋理，增加真實感。 當所有程式完成後，用戶只要輸入一幅平面迷宮圖，網頁便會自動生成立體透視圖，快捷方便，沒有大小限制！這裡有一個線上示範（只限 Opera 和 Firefox 瀏覽器），James 還提供了完整的原始碼。 Harry Fuecks 在 Site Point 說了一個令他困惑的問題：IE 中的 JavaScript split() 函數並不符合規範。 Fuecks 引述 ECMA-262（即 JavaScript 1.5，參考「用 ECMAScript 寫網頁」）中有關 split() 函式的定義： 若果正規表達式裡面的分隔字元有括號包圍，每當分隔字元被搜尋到，括號中的內容便會被切割出來放到輸出的陣列裡。…… Fuecks 認為這種語法在其他編程語言很常見，例如在 Perl 中： Perl | copy code |? 1use Data::Dumper;2print Dumper(split(/(:)/, ‘a:b:c’)); 輸出是： Perl | copy code |? 1$VAR1 = ‘a’;2$VAR2 = ‘:’;3$VAR3 = ‘b’;4$VAR4 = ‘:’;5$VAR5 = ‘c’; 這是正確的輸出。在 PHP 中： PHP | copy code |? 1print_r(preg_split(’/(:)/’, ‘a:b:c’, -1, PREG_SPLIT_DELIM_CAPTURE)); 輸出是： PHP | copy code |? 1Array (2 [0] => a3 [1] => :4 [2] => b5 [3] => :6 [4] => c7) 顯然這個也跟規範吻合。在 Python 中： Python | copy code |? 1import re2print re.compile(’(:)’).split(’a:b:c’) 輸出是： Python | copy code |? 1[’a', ‘:’, ‘b’, ‘:’, ‘c’] 這也是正確的。在 Firefox 和 Opera 9 中使用 JavaScript： Javascript | copy code |? 1alert( "a:b:c".split(/(:)/) ); 繼續閱讀 » 在 IBM developWork 有一連兩篇的文章介紹如何編寫動態網頁，內文舉出了幾個常見的例子，包含詳細的說明和原始碼，對於希望令自己編寫的網頁有更多互動效果、更多姿多采，卻對於 JavaScript、CSS 等不甚了了的人來說，這是一份不錯的教學文件。 這份文件介紹以下六種動態網頁效果：矩形彈出視窗、tooltip、隱形／顯示段落、分頁、統計圖表等。 矩形彈出視窗
tooltip
隱藏／顯示段落
分頁
統計圖表
Dean Edwards 研究 document.onload 的缺點與及解決方法已經一段時間，現在他終於提出了一個跨瀏覽器而又簡潔的終極解決方案。 事情的原委是這樣的：很多開發人員使用 document.onload 來啟動 JavaScript 進行一些網頁效果的初始化工作，例如動畫菜單、Ajax 應用程式等，但是 document.onload 只有當網頁的所有內容，包括圖像、JavaScript、動畫、影音檔等全部下載後才會被觸發，倘若這些檔案容量很大，或者儲存在一個不受你操控的伺服器 上，網頁上的效果很可能被延遲啟動，甚至完全不能啟動。 這就是 Dean Edwards 希望解決的問題。 他早在 2005 年 9 月已經基本上找到了 Mozilla 和 IE6 上的解決方法，Mozilla 的解決方法是使用一個即使在 Mozilla 網站亦沒有詳細解說的 DOMContentLoaded 事件，IE6 則需要使用兩個 Miscrosoft 的自訂規格 defer 和 conditional comment，可惜這個方案有兩個缺點： 在 IE6 它必須使用外部 JavaScript 檔 它沒有解決 Opera 和 Safari 的問題 現在 Dean Edwards 終於為 Opera 和 Safari 找到了解決方案，而且在 IE6 也有了無需使用外部 JavaScript 檔的方法，所有問題正式畫上句號。 ECMAscript，很多人對這個名字感到陌生，說穿了它其實即是 JavaScript。JavaScript 在 1995 年由 Netscape 和 Sun 聯合推出，儘管技術上來說 JavaScript 和 Java 語言毫無關係，但是從當年發布 JavaScript 的新聞公告中，不難看出兩間公司蓄意暗示伺服器端的 Java 語言與瀏覽器端的 JavaScript 有某些聯繫，顯然這是基於市場推廣的考慮，但無論如何，JavaScript 就是這樣誕生了。 當年 Netscape 仍然佔有瀏覽器市場大部分的份額，微軟的 IE 被逼開發與 JavaScript 相容的 JScript 來抗衡，嚴格來說 JScript 大部分情況下都與 JavaScript 相容，但兩者從未真正完全相容。 由於兩間公司的競爭性質，它們每次推出新版本的瀏覽器都會新增一些對方沒有的功能，目的是要網頁編寫人員為了製造炫目的網頁效果而不得不使用它們專有的功能，情況便與差不多同期發生的 Java 和 J++ 如出一轍，JavaScript 和 JScript 的衝突無非是 Netscape 和微軟兩件公司為了爭奪經濟利益而作出的，除了對這兩件公司之外，整件事對任何人都沒有好處。其實這兩間公司為了保持與對手兼容，又要不斷創造新的功能，開發成本也有增無減。 這時一個很明顯的出路就是把 JavaScript 標準化，1996 年 Netscape 把 JavaScript 的語言規格呈交給 ECMA 國際，並於 1997 年 6 月被接納成為業界的標準。現時最新的版本已經發展到 ECMAScript 第三版（1999），編號是 ECMA-262，也稱為 JavaScript 1.5，在 ISO 的編號是 ISO/IEC 16262。 規範化的工作很遺憾地未能停止戰爭，JavaScript 和 JScript 固然與 ECMAScript 兼容，但是兩者仍然不斷新增獨有的功能，兩種語言背後的公司也藉著兩者的差異鼓動開發人員在他們的頁面中加上「本網頁在 XXX 瀏覽器上觀看可得出最佳效果」的標語。 開發人員為了使自己的網頁可以在最多的瀏覽器上觀看，被逼透過檢測瀏覽器的版本來決定發送甚麼資料到瀏覽器，他們最主要的方法就是在伺服器檢查 user-agent 的字串： Javascript | copy code |? 1$_ENV[’HTTP_USER_AGENT’] 這個字串由瀏覽器送給伺服器，很多開發人員藉著檢查這個字串是否 「Mozilla/X.0」來判斷用戶是否使用 Netscape，不是的話很多特殊的功能便會被移除或者關閉，結果是很多網頁在非 Netscape 的瀏覽器上不是排版出錯就是根本無法顯示，作為一個弱勢的瀏覽器，IE 試圖變更 user-agent 字串來冒充 Mozilla！其他較新的瀏覽器如 Opera、iCab、Konqueror 等都採取同一個策略來欺騙伺服器，有些甚至容許用戶選擇想冒充哪一個牌子的瀏覽器。 這種情況產生了一個必然的後果，就是網頁的內容很大部分用來判斷不同牌子的瀏覽器，然後根據結果執行相對應的程式，即使是同一個牌子的瀏覽器，但不同版本的也會支援不同的功能，網頁中充斥了做著相同的工作，但針對不同瀏覽器的程式片段，令下載的時間延長，也浪費了頻寬。 除了使用 user-agent 字串外，有些程式藉著檢查某些特定的語言功能來決定瀏覽器的牌子和版本，例如用： Javascript | copy code |? 1if (document.layers) 來判斷 繼續閱讀 » Dean Edwards 製作了一份 JavaScript 水平列表，由最簡單的： Javascript | copy code |? alert("Hello Wordl"); 到最高級的： CSS | copy code |? 01var Hello = new Binding( {02 greet: function(who) {03 alert("Hello " + who);04 },05 06 onclick: function() { 07 this.greet(Hello.WORLD)08 }09}, {10 WORLD: "World"11} );12document.bind("#hello", Hello); 你認為自己屬於哪一個級別？ | ||||
Copyright © 2012 香港網頁開發網誌 - All Rights Reserved | ||||
方法一：使用 CSS3 屬性選擇器
