Blackbing Playground

Javascript練功房(序)

幾年前,當時AJAX尚未問世的時候,網路上充斥著許多Javascript的特效,比方說狀態列會有跑 馬燈效果、文字閃爍,當時雖然不懂Javascript,但總會有熱心的人教你如何把特效放到網頁上,例如:
第一步:先把第一段script放到head 標籤裡頭。
第二步:再把第二段script放到<body>標籤之中。
第三步:將第三段script放到你想要放的地方。

當時也完全不懂 Javascript到底怎麼運作,反正套用上OK就行了,偶爾調整一些參數,讓他看起來比較不一樣。可是有時候在A網頁可以執行,在B網頁卻又不能執 行,只能東改改西改改來看看到底可以改出什麼玩意。

接著瀏覽器不再是IE獨大,做網頁必須要考慮到其他瀏覽器的相容性,才漸漸發現某些Javascript無法在 非IE的瀏覽器上執行,這真的是網頁程式設計師的夢魘,雖然透過Javascript控制Element的style可以做到很多動態的效果,但是CSS 的寫法各瀏覽器支援程度不一致,又延伸出更多的問題,一度很消極的不想考慮非IE瀏覽器的問題。「反正客戶也不會用非IE的瀏覽器!」當時老是這麼想。

當Firefox打著要把積弱不振的IE幹掉的名號,迅速的在網路上蔓延開來,開放的精神也吸引許多 programer投入開發各式各樣的plug-in,漸漸的,我在開發時的第一線瀏覽器都已經改為Firefox了,沒道理自己寫的東西不支援 Firefox,所以在寫Javascript時會遵照著標準的寫法來撰寫,但是偶爾還是會出現,支援Firefox,卻不支援IE的囧情況,這時候才硬 著頭皮去解決跨瀏覽器的問題。於是程式碼常常會出現「if isIE blablalba… else if isFF blablabla…」。剛開始研究的時候總是會很有耐心的去解決跨瀏覽器的問題,而且總會為為了自己寫的東西能夠跨瀏覽器而自豪,但是漸漸 的,IE6、IE7、FF2、FF3、Safari、FF2、FF3、Safari、Google Chrome…..每種瀏覽器的都有不同的表現,且問題愈來愈多,這場瀏覽器大戰愈演愈烈。

「Javascript為什麼這麼奇怪?」我想這是很多在從事web開發的程式設計師,時常會感到抓狂時的咒罵 之詞,我想他的奇怪,除了它本身不似一般高階語言的嚴謹,又包涵很多本身獨有的特性,再加上各瀏覽器的不統一,造成這樣的結果,讓很多程式設計師感到乏 力。而偏偏這個語言又是一個應用範圍極廣的語言,只要你在做web開發,你就很難避免不接觸它,有了它,網頁不再呆板,甚至做到不輸給Flash的動畫效 果,對它真是又愛又恨。這時候有一大堆救世主出現了,有很多寫得很好的Framework,例如prototype、DOJO、jQuery、 YUI….紛紛投入WEB戰場,我們只要上戰場拿這些武器就可以輕易克服眾多瀏覽器。然而就算使用了這些武器,不瞭解武器的特性,也會很難揮動它;同樣的,如果不瞭解Javascript根本中的問題,就很難在戰場上廝殺。

接下來我會開始紀錄我一般在web開發中可能會遇到的Javascript部份問題,除了避免初學者在初學時到處碰壁,也督促我將各種問題紀錄下來,期望能讓更多的開發者專注在更有用的開發之中。我將問題分成三大類:


  1. javascript Core:主要針對javascript的核心問題,舉凡型態、特性、物件導向等問題。

  2. Browser DOM API:針對瀏覽器所提供的DOM API問題,包括跨瀏覽器、跨網域等問題。

  3. Debug:主要針對如何進行Javascript除錯,包括常見的錯誤描述(Error Code)、如何執行Javascript等。


若有任何與Javascript的問題也歡迎提出,我會盡我所能的解答所有問題。