生在幸福的 js 年代
DESCRIPTION
JSDC@2013 TaiwanTRANSCRIPT
生在幸福的 JS年代
@ 閃光洽
關於我Hina Chen, a.k.a. 閃光洽
氬焊，白鐵窗、鐵門安裝
務農，施肥，除草，投藥
我是跟鄉民進來湊熱鬧的
http://blog.hinablue.me
小前提有些事情你需要知道，
JavaScript 正夯！
可能會講前端、後端跟終端
與會者請盡可能使用跟得上時代的瀏覽器
史上第一位在東京迪士尼收到 TonyQ 議題催稿
可以用 h, j, k, l 來換頁
那，開始吧！
http://www.flickr.com/photos/thewire/3208524764/
JAVASCRIPT在很久很久以前...
http://www.flickr.com/photos/thewire/3208524764/
網頁會動好像很厲害
IE 5
Netscape 3 / 4
Opera 3.5
沒了（Mozilla 在 1998 才開始改寫 Netscape
Dymanic HTML
document.all
document.layers / document.getElementById
document.getElementById
瀏覽器編年表
在那個撥接上網的年代大家都用網際網路來上網
就是那個藍藍的東西
沒有什麼人用 Flash下／上行 256/64 Kb
沒有什麼人用 CSS1996 年出草（
我用 telnet 打 KK老媽我對不起你！
CSS 1.0
很厲害的代價...W3C 定的規則怎麼都不能用
IE 5, 5.5, 6 表示：
Netscape 4+ 部分可以
Opera 4+ 都可以
JavaScript / JScript 傻傻分不清
IE 還有一招叫做 HTC
ECMASCRIPT-262 2TH EDITION1998 年瀏覽器不一定會動
還不知道什麼叫做 JSONXMLHttpRequest 還未成熟
IE 叫做 JScript
ECMASCRIPT-262 3TH EDITION1999 年JSON 被提出，但是瀏覽器還看不懂
IE 5.0Netscape 4.xOpera 3.5
ECMASCRIPT-262 5TH EDITION2009 年4th 被終結掉了
IE 8Firefox 3.5Crhome 3.0Safari 4Opera 10.0
時代的眼淚為了取得 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]; }}
時代的眼淚為了設定 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]; }}
時代的眼淚為了 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"></iframe>';
form.target = sid;form.submit();
時代的眼淚實作糟糕的 Object 實體
function myObject(name, cm) { this.name = name; this.cm = cm + 30;}
// 好孩子不要學var user = new myObject('閃光洽', 18);
後來不解釋！
/* 取得元素 */var elem = $('#element');
/* 設定樣式 */elem.css('background', 'red');
/* AJAX */$.ajax({ url: '/dont-hack-me', success: function(data) {}, error: function(err) {}});
/* 我是鄉民 */var user = { name: "閃光洽", cm: 30};
瀏覽器大亂鬥IE MUST DIE ? 說這句話之前，請先想想...
你做過多少 IE Hack ?你真的理解 IE 嗎？
IE 6 存活了 10+ 年（起碼在台灣是這樣
為什麼你討厭 IE ?Firefox/Chrome/Opera 就真的不需要 Hack ?
DOCUMENT.ALLInternet Explorer 5+
判斷 IE 最靠譜的做法
悲劇
IE 6 之後終於完全支援 document.getElementByIdIE 7 之後才加入對於 getElementBy(...) 系列支援
document.all[n]document.all["mydivID"]document.all["mydivClassName"]document.all.tags("div")
DOCUMENT.LAYERSNetscape 3
對樣式支援度 X 到不可思議
判斷 Netscape 3.0 以下版本專用
其餘不解釋
DOCUMENT.GETELEMENTBY... 系列IE 6+ / Netscape 4+ / Opera 3.5+
拿近代瀏覽器來比不太公平
各瀏覽器 document.getElementByName 解讀不太
一樣
到頭來只有 document.getElementById 比較實用
要拿其他的東西只能用 NodeList
寫 DOM 最快的方法適用任何版本的瀏覽器
document.write('<p>我用 JS 我超強！</p>');
document.getElementById('mydiv') .innerHTML('<p>我用 innerHTML 我超強！</p>');
寫得少，做得多 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);}
樣式支援CSS 是什麼？好吃嗎？
不好吃。
IE 有自己的 Netscape 3 表示遺憾。
IE 6 當時稱霸（看看那精美的
CSS Behavior
CSS filter
除錯這是除了 try ... catch 之外，貌似最多人用過的方法。
alert('媽，我在這裡！');
alert('沒有用過的人舉一下手讓大家加一下 FB 好友！');
/* 天真的以為這樣可以用 */alert(function() { return '哈哈，你看看你！'; });
我們走了多少冤枉路？小時候覺得我會寫網頁，現在才知道大人的世界很複雜。
JavaScript 對於前端除錯一直不算友善。
身為程式語言 JavaScript 有不少 的地方。
大型 IDE 對於網頁編輯仍有不少缺憾。
瀏覽器對於部分 CSS 依舊存在 的狀態。
IE 直到 8.0+ 才完全依循 W3C 的 CSS 2.1 規範。
讓人詬病
各自表述
JAVASCRIPT近代的顯學
消失的十年ECMAScript-262 3th (1999) ~ 5th (2009)
Dojo Toolkit, 2004 年Prototype, 2005 年MooTools, 2006 年jQuery, 2006 年YUI, 2006 年ExtJS, 2006 年Comparison of JavaScript frameworks
無所不在的 JAVASCRIPT瀏覽器
伺服器端
應用程式
行動裝置
APPJavaScript libraries
瀏覽器再也不是那個 藍藍的東西 了！
JavaScript Frameworks/Libraries 解決瀏覽器之亂
jQuery 2.0 移除 IE 6/7/8 支援
Firefox/Chrome/Safari/IE9+ 表示：
Opera 對於 JavaScript 嚴格到靠 X現在的瀏覽器對於 JavaScript 的除錯都相當友善
IE 不能動IE 有什麼不好？為何要停止使用 IE？
“私以為 IE 的原罪並不是他很糟糕，只是沒有競爭者
的年代裡，他只是你唯一的選擇。
因為客戶需求，你只能想辦法讓他動（蛋疼
除非你像我一樣不接 IE9- 的客戶 ”
相關應用由於時間的關係，所以我條列一下
HTML5 APIWindows 8 ApplicationTitanium Mobile ApplicationPhoneGapViViPOS
回到前端
http://www.flickr.com/photos/nullprozent/4667861083/
JAVASCRIPT 與瀏覽器瀏覽器是史上最複雜的測試環境。
控制畫面元素, CSS與使用者溝通, UI/UX與伺服器溝通, AJAX, WebSocket與瀏覽器溝通, Worker, IndexesDB透過瀏覽器與硬體溝通, Camera API
LEARNING JAVASCRIPT“Crockford is inspirational and extraordinarilyrewarding to watch and listen to.
--Flubba
”Best resources to learn JavaScript
該怎麼學習 JAVASCRIPT阿鬼你還是說中文吧！
“ 重點在你想要 做什麼，不是你 學這個 要做什麼
你可以理解你 想要做 的部分就好。
如果你覺得 學這個 很麻煩，還是讓專業的來吧。 ”
換個方式來思考大家都學過國中代數數學。
a + b = 10;a + b * c = 2;c / a = 5;
a = ? b = ? c = ?
深入淺出？TL; DR;
http://yuiblog.com/crockford/
jQuery
DOB 首頁製作百寶箱
好工具1,2,3,4,5,6,7,8,9,10 謝謝大家
對於原生的支援我沒有特別針對 IE，這個 填充物 可以用在任何瀏覽器。
“ 只是 IE9- 支援的東西 特別少，所以別誤會。 ”
polyfill - JavaScript Polyfills, Shims and More
用 JS 寫 JS未來的 JavaScript 或許可以這樣做。
CoffeeScriptTypeScriptDartJavaScript and Friends
JAVASCRIPT 的未來ECMAScript-262 6th 改進許多 不優良 的部分。
http://www.flickr.com/photos/nathansmith/4704268314/
我是設計師學 JS 好處？
以後你可以大聲的跟客戶說
在我的電腦都會動“ 設計師需要喜歡「會動的東西」
--Even Wu
”
幸福的年代當代的 瀏覽器支援度相當完全
市面上的工具、套件與解決方法相當多元
IDE 的支援越來越完整
“ 門檻是用來跨越的，不是讓你去被絆倒的。
--我自己
”[Layout] Web Design Part 1
QUESTION :) ?