$30 off During Our Annual Pro Sale. View Details »

生在幸福的 JS 年代

生在幸福的 JS 年代

Cain Chen

May 19, 2013
Tweet

More Decks by Cain Chen

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. 那,開始吧!
    http://www.flickr.com/photos/thewire/3208524764/

    View Slide

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

    View Slide

  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
    瀏覽器編年表

    View Slide

  7. 在那個撥接上網的年代
    大家都用網際網路來上網
    就是那個藍藍的東西
    沒有什麼人用 Flash
    下/上行 256/64 Kb
    沒有什麼人用 CSS
    1996 年出草(
    我用 telnet 打 KK
    老媽我對不起你!
    CSS 1.0

    View Slide

  8. 很厲害的代價...
    W3C 定的規則怎麼都不能用
    IE 5, 5.5, 6 表示:
    Netscape 4+ 部分可以
    Opera 4+ 都可以
    JavaScript / JScript 傻傻分不清
    IE 還有一招叫做 HTC

    View Slide

  9. ECMASCRIPT-262 2TH EDITION
    1998 年
    瀏覽器不一定會動
    還不知道什麼叫做 JSON
    XMLHttpRequest 還未成熟
    IE 叫做 JScript

    View Slide

  10. ECMASCRIPT-262 3TH EDITION
    1999 年
    JSON 被提出,但是瀏覽器還看不懂
    IE 5.0
    Netscape 4.x
    Opera 3.5

    View Slide

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

    View Slide

  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
    ]
    ;
    }
    }

    View Slide

  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
    ]
    ;
    }
    }

    View Slide

  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
    (
    )
    ;

    View Slide

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

    View Slide

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

    View Slide

  17. 瀏覽器大亂鬥
    IE MUST DIE ? 說這句話之前,請先想想...
    你做過多少 IE Hack ?
    你真的理解 IE 嗎?
    IE 6 存活了 10+ 年(起碼在台灣是這樣
    為什麼你討厭 IE ?
    Firefox/Chrome/Opera 就真的不需要 Hack ?

    View Slide

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

    View Slide

  19. DOCUMENT.LAYERS
    Netscape 3
    對樣式支援度 X 到不可思議
    判斷 Netscape 3.0 以下版本專用
    其餘不解釋

    View Slide

  20. DOCUMENT.GETELEMENTBY... 系列
    IE 6+ / Netscape 4+ / Opera 3.5+
    拿近代瀏覽器來比不太公平
    各瀏覽器 document.getElementByName 解讀不太
    一樣
    到頭來只有 document.getElementById 比較實用
    要拿其他的東西只能用 NodeList

    View Slide

  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
    >
    '
    )
    ;

    View Slide

  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
    )
    ;
    }

    View Slide

  23. 樣式支援
    CSS 是什麼?好吃嗎?
    不好吃。
    IE 有自己的
    Netscape 3 表示遺憾。
    IE 6 當時稱霸(看看那精美的
    CSS Behavior
    CSS filter

    View Slide

  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 '
    哈哈,你看看你!'
    ; }
    )
    ;

    View Slide

  25. 我們走了多少冤枉路?
    小時候覺得我會寫網頁,現在才知道大人的世界很複雜。
    JavaScript 對於前端除錯一直不算友善。
    身為程式語言 JavaScript 有不少 的地方。
    大型 IDE 對於網頁編輯仍有不少缺憾。
    瀏覽器對於部分 CSS 依舊存在 的狀態。
    IE 直到 8.0+ 才完全依循 W3C 的 CSS 2.1 規範。
    讓人詬病
    各自表述

    View Slide

  26. JAVASCRIPT
    近代的顯學

    View Slide

  27. 消失的十年
    ECMAScript-262 3th (1999) ~ 5th (2009)
    Dojo Toolkit, 2004 年
    Prototype, 2005 年
    MooTools, 2006 年
    jQuery, 2006 年
    YUI, 2006 年
    ExtJS, 2006 年
    Comparison of JavaScript frameworks

    View Slide

  28. 無所不在的 JAVASCRIPT
    瀏覽器
    伺服器端
    應用程式
    行動裝置
    APP
    JavaScript libraries

    View Slide

  29. 瀏覽器
    再也不是那個 藍藍的東西 了!
    JavaScript Frameworks/Libraries 解決瀏覽器之亂
    jQuery 2.0 移除 IE 6/7/8 支援
    Firefox/Chrome/Safari/IE9+ 表示:
    Opera 對於 JavaScript 嚴格到靠 X
    現在的瀏覽器對於 JavaScript 的除錯都相當友善

    View Slide

  30. 代治不是憨人想的架甘丹
    1996 年的預言

    View Slide

  31. IE 不能動
    IE 有什麼不好?為何要停止使用 IE?

    私以為 IE 的原罪並不是他很糟糕,只是沒有競爭者
    的年代裡,他只是你唯一的選擇。
    因為客戶需求,你只能想辦法讓他動(蛋疼
    除非你像我一樣不接 IE9- 的客戶 ”

    View Slide

  32. 伺服器端
    NodeJS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  36. LEARNING JAVASCRIPT

    Crockford is inspirational and extraordinarily
    rewarding to watch and listen to.
    --Flubba

    Best resources to learn JavaScript

    View Slide

  37. 該怎麼學習 JAVASCRIPT
    阿鬼你還是說中文吧!
    “ 重點在你想要 做什麼,不是你 學這個 要做什麼
    你可以理解你 想要做 的部分就好。
    如果你覺得 學這個 很麻煩,還是讓專業的來吧。 ”

    View Slide

  38. 換個方式來思考
    大家都學過國中代數數學。
    a + b = 1
    0
    ;
    a + b * c = 2
    ;
    c / a = 5
    ;
    a = ? b = ? c = ?

    View Slide

  39. 深入淺出?
    TL; DR;
    http://yuiblog.com/crockford/
    jQuery
    DOB 首頁製作百寶箱

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. 用 JS 寫 JS
    未來的 JavaScript 或許可以這樣做。
    CoffeeScript
    TypeScript
    Dart
    JavaScript and Friends

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    [Layout] Web Design Part 1

    View Slide

  48. QUESTION :) ?

    View Slide