JSDC@2013 Taiwan

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
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

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 = 10;
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 :) ?