生在幸福的 JS 年代

生在幸福的 JS 年代

3e6a21d5e1bc2d8371d17233338017c0?s=128

Cain Chen

May 19, 2013
Tweet

Transcript

  1. 生在幸福的 JS 年代 @ 閃光洽

  2. 關於我 Hina Chen, a.k.a. 閃光洽 氬焊,白鐵窗、鐵門安裝 務農,施肥,除草,投藥 我是跟鄉民進來湊熱鬧的 http://blog.hinablue.me

  3. 小前提 有些事情你需要知道, JavaScript 正夯! 可能會講前端、後端跟終端 與會者請盡可能使用跟得上時代的瀏覽器 史上第一位在東京迪士尼收到 TonyQ 議題催稿 可以用

    h , j , k , l 來換頁
  4. 那,開始吧! http://www.flickr.com/photos/thewire/3208524764/

  5. JAVASCRIPT 在很久很久以前... http://www.flickr.com/photos/thewire/3208524764/

  6. 網頁會動好像很厲害 IE 5 Netscape 3 / 4 Opera 3.5 沒了(Mozilla

    在 1998 才開始改寫 Netscape Dymanic HTML d o c u m e n t . a l l d o c u m e n t . l a y e r s / d o c u m e n t . g e t E l e m e n t B y I d d o c u m e n t . g e t E l e m e n t B y I d 瀏覽器編年表
  7. 在那個撥接上網的年代 大家都用網際網路來上網 就是那個藍藍的東西 沒有什麼人用 Flash 下/上行 256/64 Kb 沒有什麼人用 CSS

    1996 年出草( 我用 telnet 打 KK 老媽我對不起你! CSS 1.0
  8. 很厲害的代價... W3C 定的規則怎麼都不能用 IE 5, 5.5, 6 表示: Netscape 4+

    部分可以 Opera 4+ 都可以 JavaScript / JScript 傻傻分不清 IE 還有一招叫做 HTC
  9. ECMASCRIPT-262 2TH EDITION 1998 年 瀏覽器不一定會動 還不知道什麼叫做 JSON XMLHttpRequest 還未成熟

    IE 叫做 JScript
  10. ECMASCRIPT-262 3TH EDITION 1999 年 JSON 被提出,但是瀏覽器還看不懂 IE 5.0 Netscape

    4.x Opera 3.5
  11. ECMASCRIPT-262 5TH EDITION 2009 年 4th 被終結掉了 IE 8 Firefox

    3.5 Crhome 3.0 Safari 4 Opera 10.0
  12. 時代的眼淚 為了取得 DOM 元件 f u n c t i

    o n g e t D O M E l e m e n t ( n a m e ) { i f ( d o c u m e n t . g e t E l e m e n t B y I d ) { r e t u r n d o c u m e n t . g e t E l e m e n t B y I d t B y I d ( n a m e ) ; } e l s e i f ( d o c u m e n t . a l l ) { r e t u r n d o c u m e n t . a l l [ n a m e ] ; } e l s e i f ( d o c u m e n t . l a y e r s ) { r e t u r n d o c u m e n t . l a y e r s [ n a m e ] ; } }
  13. 時代的眼淚 為了設定 CSS 樣式 f u n c t i

    o n g e t D O M S t y l e ( n a m e ) { i f ( d o c u m e n t . g e t E l e m e n t B y I d ) { r e t u r n d o c u m e n t . g e t E l e m e n t B y I d t B y I d ( n a m e ) . s t y l e ; } e l s e i f ( d o c u m e n t . a l l ) { r e t u r n d o c u m e n t . a l l [ n a m e ] . s t y l e ; } e l s e i f ( d o c u m e n t . l a y e r s ) { r e t u r n d o c u m e n t . l a y e r s [ n a m e ] ; } }
  14. 時代的眼淚 為了 AJAX v a r d = d o

    c u m e n t . c r e a t e E l e m e n t ( ' d i v ' ) ; v a r s i d = " f r a m e _ " + M a t h . r a n d o m ( ) + " _ " + M a t h . r a n d o m ( ) ; d o c u m e n t . b o d y . a p p e n d C h i l d ( d ) ; d . i n n e r H T M L = ' < i f r a m e w i d t h = " 1 0 0 % " n a m e = " ' + s i d + ' " h e i g h t = " 0 " > < / i f r a m e > ' ; f o r m . t a r g e t = s i d ; f o r m . s u b m i t ( ) ;
  15. 時代的眼淚 實作糟糕的 Object 實體 f u n c t i

    o n m y O b j e c t ( n a m e , c m ) { t h i s . n a m e = n a m e ; t h i s . c m = c m + 3 0 ; } / / 好孩子不要學 v a r u s e r = n e w m y O b j e c t ( ' 閃光洽' , 1 8 ) ;
  16. 後來 不解釋! / * 取得元素 * / v a r

    e l e m = $ ( ' # e l e m e n t ' ) ; / * 設定樣式 * / e l e m . c s s ( ' b a c k g r o u n d ' , ' r e d ' ) ; / * A J A X * / $ . a j a x ( { u r l : ' / d o n t - h a c k - m e ' , s u c c e s s : f u n c t i o n ( d a t a ) { } , e r r o r : f u n c t i o n ( e r r ) { } } ) ; / * 我是鄉民 * / v a r u s e r = { n a m e : " 閃光洽" , c m : 3 0 } ;
  17. 瀏覽器大亂鬥 IE MUST DIE ? 說這句話之前,請先想想... 你做過多少 IE Hack ?

    你真的理解 IE 嗎? IE 6 存活了 10+ 年(起碼在台灣是這樣 為什麼你討厭 IE ? Firefox/Chrome/Opera 就真的不需要 Hack ?
  18. DOCUMENT.ALL Internet Explorer 5+ 判斷 IE 最靠譜的做法 悲劇 IE 6

    之後終於完全支援 document.getElementById IE 7 之後才加入對於 getElementBy(...) 系列支援 d o c u m e n t . a l l [ n ] d o c u m e n t . a l l [ " m y d i v I D " ] d o c u m e n t . a l l [ " m y d i v C l a s s N a m e " ] d o c u m e n t . a l l . t a g s ( " d i v " )
  19. DOCUMENT.LAYERS Netscape 3 對樣式支援度 X 到不可思議 判斷 Netscape 3.0 以下版本專用

    其餘不解釋
  20. DOCUMENT.GETELEMENTBY... 系列 IE 6+ / Netscape 4+ / Opera 3.5+

    拿近代瀏覽器來比不太公平 各瀏覽器 document.getElementByName 解讀不太 一樣 到頭來只有 document.getElementById 比較實用 要拿其他的東西只能用 NodeList
  21. 寫 DOM 最快的方法 適用任何版本的瀏覽器 d o c u m e

    n t . w r i t e ( ' < p > 我用 J S 我超強!< / p > ' ) ; d o c u m e n t . g e t E l e m e n t B y I d ( ' m y d i v ' ) . i n n e r H T M L ( ' < p > 我用 i n n e r H T M L 我超強!< / p > ' ) ;
  22. 寫得少,做得多 Implemented in JavaScript 1.0 with w i t h

    ( d o c u m e n t ) { w r i t e ( ' < p > 媽!我在這!< / p > ' ) ; w r i t e ( ' < p > 我寫 1 0 行省了十次 d o c u m e n t < / p > ' ) ; } v a r a = 0 ; w i t h ( M a t h ) { / * 所有跟 M a t h 有關的都可以省略不打 * / / * 現在你知道 J a v a S c r i p t 多討人厭了吧 * / a = P I * 5 * 5 ; b = r * c o s ( P I ) ; c = r * s i n ( P I / 2 ) ; }
  23. 樣式支援 CSS 是什麼?好吃嗎? 不好吃。 IE 有自己的 Netscape 3 表示遺憾。 IE

    6 當時稱霸(看看那精美的 CSS Behavior CSS filter
  24. 除錯 這是除了 try ... catch 之外,貌似最多人用過的方法。 a l e r

    t ( ' 媽,我在這裡!' ) ; a l e r t ( ' 沒有用過的人舉一下手讓大家加一下 F B 好友!' ) ; / * 天真的以為這樣可以用 * / a l e r t ( f u n c t i o n ( ) { r e t u r n ' 哈哈,你看看你!' ; } ) ;
  25. 我們走了多少冤枉路? 小時候覺得我會寫網頁,現在才知道大人的世界很複雜。 JavaScript 對於前端除錯一直不算友善。 身為程式語言 JavaScript 有不少 的地方。 大型 IDE

    對於網頁編輯仍有不少缺憾。 瀏覽器對於部分 CSS 依舊存在 的狀態。 IE 直到 8.0+ 才完全依循 W3C 的 CSS 2.1 規範。 讓人詬病 各自表述
  26. JAVASCRIPT 近代的顯學

  27. 消失的十年 ECMAScript-262 3th (1999) ~ 5th (2009) Dojo Toolkit, 2004

    年 Prototype, 2005 年 MooTools, 2006 年 jQuery, 2006 年 YUI, 2006 年 ExtJS, 2006 年 Comparison of JavaScript frameworks
  28. 無所不在的 JAVASCRIPT 瀏覽器 伺服器端 應用程式 行動裝置 APP JavaScript libraries

  29. 瀏覽器 再也不是那個 藍藍的東西 了! JavaScript Frameworks/Libraries 解決瀏覽器之亂 jQuery 2.0 移除

    IE 6/7/8 支援 Firefox/Chrome/Safari/IE9+ 表示: Opera 對於 JavaScript 嚴格到靠 X 現在的瀏覽器對於 JavaScript 的除錯都相當友善
  30. 代治不是憨人想的架甘丹 1996 年的預言

  31. IE 不能動 IE 有什麼不好?為何要停止使用 IE? “ 私以為 IE 的原罪並不是他很糟糕,只是沒有競爭者 的年代裡,他只是你唯一的選擇。

    因為客戶需求,你只能想辦法讓他動(蛋疼 除非你像我一樣不接 IE9- 的客戶 ”
  32. 伺服器端 NodeJS

  33. 相關應用 由於時間的關係,所以我條列一下 HTML5 API Windows 8 Application Titanium Mobile Application

    PhoneGap ViViPOS
  34. 回到前端 http://www.flickr.com/photos/nullprozent/4667861083/

  35. JAVASCRIPT 與瀏覽器 瀏覽器是史上最複雜的測試環境。 控制畫面元素, CSS 與使用者溝通, UI/UX 與伺服器溝通, AJAX, WebSocket

    與瀏覽器溝通, Worker, IndexesDB 透過瀏覽器與硬體溝通, Camera API
  36. LEARNING JAVASCRIPT “ Crockford is inspirational and extraordinarily rewarding to

    watch and listen to. --Flubba ” Best resources to learn JavaScript
  37. 該怎麼學習 JAVASCRIPT 阿鬼你還是說中文吧! “ 重點在你想要 做什麼,不是你 學這個 要做什麼 你可以理解你 想要做

    的部分就好。 如果你覺得 學這個 很麻煩,還是讓專業的來吧。 ”
  38. 換個方式來思考 大家都學過國中代數數學。 a + b = 1 0 ; a

    + b * c = 2 ; c / a = 5 ; a = ? b = ? c = ?
  39. 深入淺出? TL; DR; http://yuiblog.com/crockford/ jQuery DOB 首頁製作百寶箱

  40. 寫的少,做得多 只要會兜兜哲學,就可以把功能全部都兜起來! 前端 JS 載入最佳範例

  41. 好工具 1,2,3,4,5,6,7,8,9,10 謝謝大家

  42. 對於原生的支援 我沒有特別針對 IE,這個 填充物 可以用在任何瀏覽器。 “ 只是 IE9- 支援的東西 特別少,所以別誤會。

    ” polyfill - JavaScript Polyfills, Shims and More
  43. 用 JS 寫 JS 未來的 JavaScript 或許可以這樣做。 CoffeeScript TypeScript Dart

    JavaScript and Friends
  44. JAVASCRIPT 的未來 ECMAScript-262 6th 改進許多 不優良 的部分。 http://www.flickr.com/photos/nathansmith/4704268314/

  45. 我是設計師 學 JS 好處? 以後你可以大聲的跟客戶說

  46. 在我的電腦都會動 “ 設計師需要喜歡「會動的東西」 --Even Wu ”

  47. 幸福的年代 當代的 瀏覽器支援度相當完全 市面上的工具、套件與解決方法相當多元 IDE 的支援越來越完整 “ 門檻是用來跨越的,不是讓你去被絆倒的。 --我自己 ”

    [Layout] Web Design Part 1
  48. QUESTION :) ?