學習 JavaScript

JavaScript

科技博客 Derek Sivers 分享他學習 JavaScript 的經過,他強調目標是真正掌握 JavaScript 這個語言,不想抄捷徑、不要快速招數,我們來看看他的經驗。

繼續閱讀

JavaScript 面試測驗卷

你自問對 JavaScript 的認識有多深?Sohail Anwar 撰寫了一份有 25 道題目的 JavaScript 面試測驗卷, 考考你的 JavaScript 水平。這些題目並不困難,其中一道題目問 JavaScript 應該使用甚麼 HTML 標籤包裹著?Script?Body?Head?Title?相信很多編寫網頁程式的人都可以應付自如。這份試卷提供了正確答案,可以作為學習的資源。

繼續閱讀

JavaScript 的版本

近來網頁應用的開發人員越來越頭疼,微軟積極開發新版本的 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 有一篇教學文件介紹兩個作法。

繼續閱讀

dhtmlxGrid 讓你用 XML、CSV 或 JSON 建立動態數據驅動的網格

總部設在俄羅斯聖彼得堡的 DHTMLX 公司更新其 dhtmlxSuite 套件,這是一套專業的 Ajax 網頁介面組件,採用開放原碼 GPL 執照,這次主要更新了套件中的「網格」(dhtmlxGrid) 和「樹格」(dhtmlxTreeGrid) 組件,包括了大量的新功能和改進,例如從 JSON 和 JavaScript 陣列載入數據、智能渲染、及分層數據網格的分頁支援,套件亦加入了新的「滑竿」(dhtmlxSlider) 組件。

繼續閱讀

jQuery 與 Prototype 的比較

較早前 jQuery 推出新版本,聲稱效能提高 300%,在差不多時間 Prototype 的最新版本也表示改善了效能(當然還有其他安全性的改進),所以 Piotr Solnica 決定比較一下 jQuery 和 Prototype 在不同瀏覽器上的表現,他在 Firefox、Konqueror、Opera 和 IE 上執行他的測試測網頁,網頁會執行九項操作,每一項都分別用 jQuery 和 Prototype 執行一次,為了公平起見,每兩項操作之間都分隔三秒。時間的量度精度達到千分一秒,為了進一步提高公平性,這個網頁會在每一個瀏覽器上執行三次,取執行時間的平均值。測試的結果可以觀看 Piotr Solnica 的列表

繼續閱讀

DOM 的集合 (collection) 不等於陣列 (array)

初學 DOM 的人很容易把節點集合(collection of nodes)與節點陣列(arrray of nodes)混淆,並且把節點集合當作陣列來使用,結果鬧出不少問題,浪費很多除錯的時間。James Edwards 有一篇文章介紹這兩者的分別,並且說明如何把節點集合轉換為節點陣列。DOM 有很多內建的 method 送回節點集合,所以釐清這兩個概念非常重要。

節點集合的官方名稱是 NodeList,根據 W3C 的 DOM level 3 核心文件,送回 NodeList 的 methods 包括 Document.getElementByTagName()、Node.childNodes 等,歷遍 NodeList 的方法跟歷遍陣列差不多:

繼續閱讀

為甚麼選擇 Dojo?── 第二部份:Dojo 與其他 JavaScript 工具的比較

以下是 Dojo 官方網站上刊登的「為甚麼選擇 Dojo?」中文翻譯的第二部份,希望有助大家認識 Dojo 這個 JavaScript 工具庫,第一部份已於較早前發表。

有其他幾個工具往往與 Dojo 比較,以下不是一個全面的比較,只是 Dojo 與這些替代工具的特點和設計目標一個高層次的比較,這些替代工具在特徵、開發過程,以及哲學與 Dojo 的異同。

繼續閱讀

為甚麼選擇 Dojo?── 第一部份:Dojo 整體概覽

現時網絡上有不少免費的 JavaScript 工具,很多都是完全免費而且素質很高,Dojo 作為其中一個市場的領導者,它的官方網站最近集合了支持者的意見,輯集成一份宣傳品,向外解釋為甚麼你應該選擇 Dojo,它把其他 JavaScript 工具有甚麼好處。我把這篇文章翻譯成中文,分為兩部分刊登,第一部份是 Dojo 的整體概覽,第二部份是 Dojo 與其他 JavaScript 工具的比較。你同意他們的看法嗎?你有喜歡的 JavaScript 工具嗎?為甚麼?

繼續閱讀

XMLHttp 不是 Ajax 唯一的方法

隨著 Ajax 近年來瘋魔全球的網站設計師,大家一提起互動網頁、Web 2.0、SOA(服務導向架構),便自自然然想起組成 Ajax 的幾個字: Javascript、XML。彷彿要做到那靈巧的互動功能,便一定要調用 XMLHttp,真的是這樣嗎?

其實我們至少還有兩種方法:script tags 及 iframe,可以幫助我們編寫互動性強,又毋須把整頁網頁下載即可更新頁面資料的網頁。

說 script tags 大家可能丈八金剛──摸不著頭腦,但一說 JSON 是不是立即恍然大悟?沒錯,兩者其實是同一種東西,當然 JSON 聽起來比較「摩登」、「時尚」,它的概念是把數據編碼成 Javascript 的語句,從伺服器送給客戶端,客戶端則使用 Javascript 在網頁內動態地增加一個 script 物件,然後把 script 物件的網址指向伺服器的的程式,瀏覽器便會自動下載有關的 Javascript 然後執行,需要傳送參數的話可以利用 GET 方法在網址後面附上參數。

繼續閱讀

教學文件:利用 DHTML 製作一個裁剪圖像的介面

網上有很多圖像處理、相簿管理的網上應用系統,容許我們把大圖像裁剪為較小的圖像,但是用戶必須輸入裁剪框的座標和大小,對一般人來說顯然十分困 難,Dave Dash 在 Spindrop 發表了一篇教學文件,指導我們怎樣利用 DHTML(JavaScript + CSS + HTML)來製作一個靈活易用的圖像裁剪介面。

在學習前不防先看看 Dave 的示範

Dave 這個示範的靈感其實來自蘋果電腦中地址簿的一項功能,Dave 認為這是他見過最簡潔易用的圖像裁剪介面,所以利用它作為設計藍本製做了這個 DHTML 教學文件。這個示範用 PHP 在 Symfony(一個 PHP 開發架構)上開發,不過你們即使沒有安裝 Symfony 也一樣可以學習其中的技巧,唯一必需的是 PHP。

繼續閱讀

我知道你去過甚麼地方

Jeremiah Grossman 在他的網誌上 用 JavaScript 編寫了一個實驗性的小程式,若果你使用的是 Firefox、Safari、Mozilla 或者 Netscape,一部份你曾經造訪的網站和瀏覽器上安裝的擴充模組便會顯示出來。由於這個程式在動態處理 CSS 上使用了一些 IE6 不兼容(但符合 W3C 的標準)的方法,所以無法在 IE6 上執行,但是已經有人把它修改變成 IE6 兼容的版本

繼續閱讀

使用 JavaScript 及 DOM 製作立體透視圖及動畫

你有想像過單純用 JavaScript 和 DOM 便可以製作立體透視圖甚至動畫?James Edwards 在 Dynamic 3D with CSS and the DOM 中教導我們這方面的技巧。

作者從 Tanket 一篇介紹如何不用點陣圖像或向量圖出發,只用 CSS 的框架邊緣效果來繪畫等邊多角圖形,包括了正三角形、正四邊形、正五邊形、正六邊形等,例如有一個邊緣闊度達 50 像素的框架,左右框邊跟上下框邊顏色不同,在垂直和水平框邊的接界處便會產生如下圖的斜線:

繼續閱讀

JavaScript 處理滑鼠滾輪教學文件

Ajaxian 報導 Adomas Paltanavicius 寫了一篇用 JavaScript 處理滑鼠滾輪的教學文件

現代的網頁發展得越來越像一個正規的應用程式,透過 JavaScript 和事件處理器(event handler)對各種輸入設備作出反應,例如:

繼續閱讀

在 IE 中的 JavaScript split() 函數

Harry Fuecks 在 Site Point 說了一個令他困惑的問題:IE 中的 JavaScript split() 函數並不符合規範

Fuecks 引述 ECMA-262(即 JavaScript 1.5,參考「用 ECMAScript 寫網頁」)中有關 split() 函式的定義:

若果正規表達式裏面的分隔字符有括號包圍,每當分隔字符被搜尋到,括號中的內容便會被切割出來放到輸出的陣列裏。……

Fuecks 認為這種語法在其他編程語言很常見,例如在 Perl 中:

use Data::Dumper;
print Dumper(split(/(:)/, 'a:b:c'));

繼續閱讀

如何編寫動態網頁:結合 HTML、JavaScript 和 CSS 的範例

IBM developWork 有一連兩篇的文章介紹如何編寫動態網頁,內文舉出了幾個常見的例子,包含詳細的說明和原始碼,對於希望令自己編寫的網頁有更多互動效果、更多姿多采,卻對於 JavaScript、CSS 等不甚了了的人來說,這是一份不錯的教學文件。

這份文件介紹以下六種動態網頁效果:矩形彈出視窗、tooltip、隱形/顯示段落、分頁、統計圖表等。

矩形彈出視窗

DHTML 矩形彈出視窗

tooltip

繼續閱讀

document.onload 完全破解

Dean Edwards 研究 document.onload 的缺點與及解決方法已經一段時間,現在他終於提出了一個跨瀏覽器而又簡潔的終極解決方案

事情的原委是這樣的:很多開發人員使用 document.onload 來啟動 JavaScript 進行一些網頁效果的初始化工作,例如動畫菜單、Ajax 應用程式等,但是 document.onload 只有當網頁的所有內容,包括圖像、JavaScript、動畫、影音檔等全部下載後才會被觸發,倘若這些檔案容量很大,或者儲存在一個不受你操控的伺服器 上,網頁上的效果很可能被延遲啟動,甚至完全不能啟動。

繼續閱讀

用 ECMAscript 寫網頁

ECMAscript,很多人對這個名字感到陌生,說穿了它其實即是 JavaScript。JavaScript 在 1995 年由 Netscape 和 Sun 聯合推出,儘管技術上來說 JavaScript 和 Java 語言毫無關係,但是從當年發布 JavaScript 的新聞公告中,不難看出兩間公司蓄意暗示伺服器端的 Java 語言與瀏覽器端的 JavaScript 有某些聯繫,顯然這是基於市場推廣的考慮,但無論如何,JavaScript 就是這樣誕生了。

當年 Netscape 仍然佔有瀏覽器市場大部分的份額,微軟的 IE 被逼開發與 JavaScript 相容的 JScript 來抗衡,嚴格來說 JScript 大部分情況下都與 JavaScript 相容,但兩者從未真正完全相容。

繼續閱讀