生在幸福的 JS 年代
2 likes903 views
本文探讨了Javascript的发展历程及其在浏览器中的应用，指出了不同浏览器对Javascript的支持和历史局限。作者通过回顾IE的缺陷和其他浏览器的进步，强调现代开发者应适应当前的技术环境。最后，呼吁学习Javascript以应对前端开发的不断变化。
![時代的眼淚
為了取得 DOM 元件
function getDOMElement(name) {
if (document.getElementById) {
return document.getElementByIdtById(name);
} else if (document.all) {
return document.all[name];
} else if (document.layers) {
return document.layers[name];
}
}](https://image.slidesharecdn.com/js-jsdc2013taiwan-130519212226-phpapp01/85/JS-12-320.jpg)
![時代的眼淚
為了設定 CSS 樣式
function getDOMStyle(name) {
if (document.getElementById) {
return document.getElementByIdtById(name).style;
} else if (document.all) {
return document.all[name].style;
} else if (document.layers) {
return document.layers[name];
}
}](https://image.slidesharecdn.com/js-jsdc2013taiwan-130519212226-phpapp01/85/JS-13-320.jpg)
![DOCUMENT.ALL
Internet Explorer 5+
判斷 IE 最靠譜的做法
悲劇
IE 6 之後終於完全支援 document.getElementById
IE 7 之後才加入對於 getElementBy(...) 系列支援
document.all[n]
document.all["mydivID"]
document.all["mydivClassName"]
document.all.tags("div")](https://image.slidesharecdn.com/js-jsdc2013taiwan-130519212226-phpapp01/85/JS-18-320.jpg)
![幸福的年代
當代的 瀏覽器支援度相當完全
市面上的工具、套件與解決方法相當多元
IDE 的支援越來越完整
“ 門檻是用來跨越的，不是讓你去被絆倒的。
--我自己
”[Layout] Web Design Part 1](https://image.slidesharecdn.com/js-jsdc2013taiwan-130519212226-phpapp01/85/JS-47-320.jpg)
生在幸福的 JS 年代
- 2. 關於我 Hina Chen, a.k.a. 閃光洽 氬焊，白鐵窗、鐵門安裝 務農，施肥，除草，投藥 我是跟鄉民進來湊熱鬧的 http://blog.hinablue.me
- 3. 小前提 有些事情你需要知道， JavaScript 正夯！ 可能會講前端、後端跟終端 與會者請盡可能使用跟得上時代的瀏覽器 史上第一位在東京迪士尼收到 TonyQ 議題催稿 可以用 h, j, k, l來換頁
- 6. 網頁會動好像很厲害 IE 5 Netscape 3 / 4 Opera 3.5 沒了（Mozilla 在 1998 才開始改寫 Netscape Dymanic HTML document.all document.layers / document.getElementById document.getElementById 瀏覽器編年表
- 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 元件 function getDOMElement(name) { if (document.getElementById) { return document.getElementByIdtById(name); } else if (document.all) { return document.all[name]; } else if (document.layers) { return document.layers[name]; } }
- 13. 時代的眼淚 為了設定 CSS 樣式 function getDOMStyle(name) { if (document.getElementById) { return document.getElementByIdtById(name).style; } else if (document.all) { return document.all[name].style; } else if (document.layers) { return document.layers[name]; } }
- 14. 時代的眼淚 為了 AJAX var d = document.createElement('div'); var sid = "frame_"+Math.random()+"_"+Math.random( ); document.body.appendChild(d); d.innerHTML='<iframe width="100%" name="'+sid+'" height="0"></ifra me>'; form.target = sid; form.submit();
- 15. 時代的眼淚 實作糟糕的 Object 實體 function myObject(name, cm) { this.name = name; this.cm = cm + 30; } // 好孩子不要學 var user = new myObject('閃光洽', 18);
- 16. 後來 不解釋！ /* 取得元素 */ var elem = $('#element'); /* 設定樣式 */ elem.css('background', 'red'); /* AJAX */ $.ajax({ url: '/dont-hack-me', success: function(data) {}, error: function(err) {} }); /* 我是鄉民 */ var user = { name: "閃光洽", cm: 30 };
- 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(...) 系列支援 document.all[n] document.all["mydivID"] document.all["mydivClassName"] document.all.tags("div")
- 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 最快的方法 適用任何版本的瀏覽器 document.write('<p>我用 JS 我超強！</p>'); document.getElementById('mydiv') .innerHTML('<p>我用 innerHTML 我超強！</p>');
- 22. 寫得少，做得多 Implemented in JavaScript 1.0with with(document) { write('<p>媽！我在這！</p>'); write('<p>我寫 10 行省了十次 document</p>'); } var a = 0; with(Math) { /* 所有跟 Math 有關的都可以省略不打 */ /* 現在你知道 JavaScript 多討人厭了吧 */ a = PI * 5 * 5; b = r * cos(PI); c = r * sin(PI / 2); }
- 23. 樣式支援 CSS 是什麼？好吃嗎？ 不好吃。 IE 有自己的 Netscape 3 表示遺憾。 IE 6 當時稱霸（看看那精美的 CSS Behavior CSS filter
- 24. 除錯 這是除了 try ... catch 之外，貌似最多人用過的方法。 alert('媽，我在這裡！'); alert('沒有用過的人舉一下手讓大家加一下 FB 好友！'); /* 天真的以為這樣可以用 */ alert(function() { return '哈哈，你看看你！'; });
- 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
- 29. 瀏覽器 再也不是那個 藍藍的東西 了！ JavaScript Frameworks/Libraries 解決瀏覽器之亂 jQuery 2.0 移除 IE 6/7/8 支援 Firefox/Chrome/Safari/IE9+ 表示： Opera 對於 JavaScript 嚴格到靠 X 現在的瀏覽器對於 JavaScript 的除錯都相當友善
- 31. IE 不能動 IE 有什麼不好？為何要停止使用 IE？ “ 私以為 IE 的原罪並不是他很糟糕，只是沒有競爭者 的年代裡，他只是你唯一的選擇。 因為客戶需求，你只能想辦法讓他動（蛋疼 除非你像我一樣不接 IE9- 的客戶 ”
- 32. 伺服器端 NodeJS
- 33. 相關應用 由於時間的關係，所以我條列一下 HTML5 API Windows 8 Application Titanium Mobile Application PhoneGap ViViPOS
- 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 = 10; a + b * c = 2; c / a = 5; a = ? b = ? c = ?
- 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/
- 47. 幸福的年代 當代的 瀏覽器支援度相當完全 市面上的工具、套件與解決方法相當多元 IDE 的支援越來越完整 “ 門檻是用來跨越的，不是讓你去被絆倒的。 --我自己 ”[Layout] Web Design Part 1
- 48. QUESTION :) ?