生在幸福的 JS 年代

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 :) ?