生在幸福的 JS 年代

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