Learn JavaScript Well

MOPCON 2020 分享主題「打造資深實力 - 你該學好的 JavaScript」

Transcript

1. ޒഒላӃ
   .01$0/
   ଧ଄ࢿਂመྗ
   你該學好的 JavaScript
   ҝ㟬ࣗݾላ
   

   View Slide

2. a.k.a Eddie
   愛現! 喜歡冷門的玩具
   Ruby/Rails 開發者、講師
   Ruby 技術推廣、教育、諮詢
   台灣、日本等國內外 Ruby 技術研討會講者
   部落格：https://kaochenlong.com
   高見龍@eddiekao
   

   View Slide

3. ޒഒላӃ
   .01$0/
   第18刷 發售中 發售中
   發售中
   

   View Slide

4. ޒഒላӃ
   .01$0/
   Git
   小教室
   

   View Slide

5. ޒഒላӃ
   .01$0/
   已絕版
   

   View Slide

6. ޒഒላӃ
   .01$0/
   敬請
   期待
   

   View Slide

7. ޒഒላӃ
   .01$0/
   ༗ᘋ㐸౴
   
   電子書
   

   View Slide

8. ޒഒላӃ
   .01$0/
   ʮላशෆधཁҝެ࢘ɺҝ௕׭ɼ
   ෆधཁҝผਓɼ୞ҝ你ࣗݾʯ
   ߴݟཾ
   

   View Slide

9. ޒഒላӃ
   .01$0/
   ᫚৬ೈᱪ޻ఔࢣʁ
   

   View Slide

10. ޒഒላӃ
    .01$0/
    ೖ໳Ҏ্ɼதڃະᕝ
    

    View Slide

11. ޒഒላӃ
    .01$0/
    େߝ
    

    View Slide

12. ޒഒላӃ
    .01$0/
    େߝ
    w+BWB4DSJQUత޷ᢛෆ޷
    wಹࠣ༗झత+BWB4DSJQUޠ๏എޙతނࣄ
    w你֘೺ٕೳᴍᏐᴍࡏṜࠣ஍ํʂ
    wኺ৽ख্࿏౸࿝അ్ࣝ
    

    View Slide

13. ޒഒላӃ
    .01$0/
    DISCLAIMER
    本次分享內容可能隱含部份商業或課程置入訊
    息，請謹慎評估！
    

    View Slide

14. ޒഒላӃ
    .01$0/
    ޷᪑ෆ޷
    

    View Slide

15. ޒഒላӃ
    .01$0/
    ʮՖऒᚙɼ+BWB4DSJQUಹॄኄᗞઃܭʂʯ
    ޷ᢛෆ޷
    

    View Slide

16. ޒഒላӃ
    .01$0/
    ʮੈք্୞༗ၷछఔࣜޠݴɼ
    Ұछඃഃ౸ष಄ɼ另Ұछᔒਓ༻ʯ
    $೭෕#KBSOF4USPVTUSVQ
    ޷ᢛෆ޷
    

    View Slide

17. ޒഒላӃ
    .01$0/
    +4-JOU
    ޷ᢛෆ޷
    

    View Slide

18. ޒഒላӃ
    .01$0/
    +4-JOU
    Մೳ။ᩋ你᧷ಘࣗݾෆ။ሜఔࣜʂ
    ޷ᢛෆ޷
    

    View Slide

19. ޒഒላӃ
    .01$0/
    function hello() {
    return "world";
    }
    function hello()
    {
    return "world";
    }
    ޷ᢛෆ޷
    
    

    View Slide

20. ޒഒላӃ
    .01$0/
    㑌छఔࣜޠݴ౎༗޷ᢛෆ޷తҰ໘
    ޷ᢛෆ޷
    

    View Slide

21. ޒഒላӃ
    .01$0/
    ෆཁ୞ੋ᪑ஶ鄉ຽҰىഃ
    ޷ᢛෆ޷
    

    View Slide

22. ޒഒላӃ
    .01$0/
    ༗झޠ๏എޙతނࣄ
    

    View Slide

23. ޒഒላӃ
    .01$0/
    你஌ಓએࠂੋዎኄҰճࣄ嗎ʁ
    ༗झޠ๏
    

    View Slide

24. ޒഒላӃ
    .01$0/
    ᏓᏐએࠂ
    ༗झޠ๏
    

    View Slide

25. ޒഒላӃ
    .01$0/
    var a = 1;
    console.log(a); // 會印出什什麼？
    ༗झޠ๏
    1
    
    

    View Slide

26. ޒഒላӃ
    .01$0/
    console.log(a); // 會印出？
    var a = 1;
    ༗झޠ๏
    undefined
    

    View Slide

27. ޒഒላӃ
    .01$0/
    ᏓᏐఏঢ
    7BSJBCMF)PJTUJOH
    ༗झޠ๏
    

    View Slide

28. ޒഒላӃ
    .01$0/
    var a;
    console.log(a); // 所以印出 undefined
    a = 1;
    ༗झޠ๏
    被拉到上面？
    

    View Slide

29. ޒഒላӃ
    .01$0/
    ฤᩄWT௚ᩄ
    $PNQJMBUJPOWT*OUFSQSFUBUJPO
    ༗झޠ๏
    

    View Slide

30. ޒഒላӃ
    .01$0/
    ݐཱظWTࣥߦظ
    $SFBUJPO1IBTFWT&YFDVUJPO1IBTF
    ༗झޠ๏
    

    View Slide

31. ޒഒላӃ
    .01$0/
    ݐཱظ
    Ḽ࡭໊᜝ʢ*EFOUJpFSʣਐߦॳ࢝Խ
    1A 1B
    ༗झޠ๏
    

    View Slide

32. ޒഒላӃ
    .01$0/
    ࣥߦظ
    ࣥߦവᏐො值
    2
    ༗झޠ๏
    

    View Slide

33. ޒഒላӃ
    .01$0/
    var a = 1;
    console.log(a);
    ༗झޠ๏
    ݐཱظ
    var a;
    console.log(a);
    undefined
    1A
    1B
    

    View Slide

34. ޒഒላӃ
    .01$0/
    var a = 1;
    console.log(a);
    ༗झޠ๏
    ࣥߦظ
    a = 1;
    console.log(a);
    1
    2
    2
    

    View Slide

35. ޒഒላӃ
    .01$0/
    ၷ֊ஈ
    ༗झޠ๏
    

    View Slide

36. ޒഒላӃ
    .01$0/
    console.log(a);
    var a = 1;
    ༗झޠ๏
    ݐཱظ
    console.log(a);
    var a; undefined
    1A
    1B
    

    View Slide

37. ޒഒላӃ
    .01$0/
    console.log(a);
    var a = 1;
    ༗झޠ๏
    ࣥߦظ
    console.log(a);
    a = 1;
    undefined
    1
    2
    2
    

    View Slide

38. ޒഒላӃ
    .01$0/
    খଌᱛ
    ༗झޠ๏
    

    View Slide

39. ޒഒላӃ
    .01$0/
    var a = 1;
    var a;
    console.log(a); // 會印出什什麼？
    ༗झޠ๏
    1
    
    

    View Slide

40. ޒഒላӃ
    .01$0/
    if (false) {
    var a = 1;
    }
    console.log(a); // 會印出什什麼？
    ༗झޠ๏
    undefined
    
    

    View Slide

41. ޒഒላӃ
    .01$0/
    另ҰछᏓᏐએࠂ
    ༗झޠ๏
    

    View Slide

42. ޒഒላӃ
    .01$0/
    console.log(a); // 會印出什什麼？
    let a = 1;
    ༗झޠ๏
    Reference
    Error
    

    View Slide

43. ޒഒላӃ
    .01$0/
    ҼҝMFUෆ။ᏓᏐఏঢʁ
    ༗झޠ๏
    

    View Slide

44. ޒഒላӃ
    .01$0/
    console.log(a);
    let a = 1;
    ༗झޠ๏
    ݐཱظ
    console.log(a);
    let a;
    1A
    TDZ
    

    View Slide

45. ޒഒላӃ
    .01$0/
    console.log(a);
    let a = 1;
    ༗झޠ๏
    ࣥߦظ
    console.log(a);
    a = 1;
    Reference
    Error
    2
    

    View Slide

46. ޒഒላӃ
    .01$0/
    ࢑࣌ࢮე
    5%;5FNQPSBM%FBE;POF
    ༗झޠ๏
    

    View Slide

47. ޒഒላӃ
    .01$0/
    let a = 1;
    console.log(a); // 會印出什什麼？
    ༗झޠ๏
    

    View Slide

48. ޒഒላӃ
    .01$0/
    let a = 1;
    console.log(a);
    ༗झޠ๏
    ݐཱظ
    let a;
    console.log(a);
    1A
    TDZ
    

    View Slide

49. ޒഒላӃ
    .01$0/
    let a = 1;
    console.log(a);
    ༗झޠ๏
    ࣥߦظ
    a = 1;
    console.log(a);
    1
    2
    2
    

    View Slide

50. ޒഒላӃ
    .01$0/
    MFU৽൛తWBS
    Ҏޙ౎༻MFUब޷ྃʁ
    ༗झޠ๏
    

    View Slide

51. ޒഒላӃ
    .01$0/
    വᏐએࠂ
    ༗झޠ๏
    

    View Slide

52. ޒഒላӃ
    .01$0/
    sayHello();
    function sayHello() {
    console.log('hello');
    }
    ༗झޠ๏
    ？
    

    View Slide

53. ޒഒላӃ
    .01$0/
    sayHello();
    function sayHello() {
    console.log('hello');
    }
    ༗झޠ๏
    ݐཱظ
    1A 1B
    sayHello();
    function sayHello() {
    console.log('hello');
    }
    2
    

    View Slide

54. ޒഒላӃ
    .01$0/
    sayHello();
    function sayHello() {
    console.log('hello');
    }
    ༗झޠ๏
    sayHello();
    function sayHello() {
    console.log('hello');
    }
    2
    ࣥߦظ
    hello
    

    View Slide

55. ޒഒላӃ
    .01$0/
    { }
    ༗झޠ๏
    物件？
    Block？
    
    

    View Slide

56. ޒഒላӃ
    .01$0/
    {
    hello: '哈囉'
    }
    ༗झޠ๏
    物件
    

    View Slide

57. ޒഒላӃ
    .01$0/
    {
    hello: for (var i = 0; i < 10; i++ ) {
    if (i % 2 === 0) {
    continue hello;
    }
    console.log(i);
    }
    }
    ༗झޠ๏
    label
    label
    Block
    

    View Slide

58. ޒഒላӃ
    .01$0/
    + 加號？
    十字架？
    ༗झޠ๏
    

    View Slide

59. ޒഒላӃ
    .01$0/
    DPFSDJPO<ˋkoʊˈɝː.ʃən>
    5IFVTFPGGPSDFUPQFSTVBEFTPNFPOFUPEP
    TPNFUIJOHUIBUUIFZBSFVOXJMMJOHUPEP
    ༗झޠ๏
    

    View Slide

60. ޒഒላӃ
    .01$0/
    +'' // 0
    +[] // 0
    +{} // NaN
    +-1 // -1
    +true // 1
    +false // 0
    +undefined // NaN
    +null // 0
    ༗झޠ๏
    

    View Slide

61. ޒഒላӃ
    .01$0/
    [] + [] // ?
    [] + {} // ?
    {} + [] // ?
    ༗झޠ๏
    

    View Slide

62. ޒഒላӃ
    .01$0/
    [] + []
    ༗झޠ๏
    

    View Slide

63. ޒഒላӃ
    .01$0/
    ༗झޠ๏
    

    View Slide

64. ޒഒላӃ
    .01$0/
    [] + []
    [].toString() + [].toString()
    ༗झޠ๏
    空字串
    空字串
    

    View Slide

65. ޒഒላӃ
    .01$0/
    [] + {}
    ༗झޠ๏
    

    View Slide

66. ޒഒላӃ
    .01$0/
    [] + {}
    [].toString() + {}.toString()
    ༗झޠ๏
    '[object Object]'
    字串串
    空字串
    

    View Slide

67. ޒഒላӃ
    .01$0/
    {} + []
    ༗झޠ๏
    Block
    

    View Slide

68. ޒഒላӃ
    .01$0/
    [] + {}
    Block 後⾯面跟了了 +[]
    ༗झޠ๏
    0
    

    View Slide

69. ޒഒላӃ
    .01$0/
    [] + [] // ''
    [] + {} // '[object Object]'
    {} + [] // 0
    ༗झޠ๏
    

    View Slide

70. ޒഒላӃ
    .01$0/
    /B//PU"/VNCFS
    ༗झޠ๏
    

    View Slide

71. ޒഒላӃ
    .01$0/
    console.log(typeof NaN); // 會印出什什麼？
    number
    ༗झޠ๏
    

    View Slide

72. ޒഒላӃ
    .01$0/
    /B/ੋҰछᏐࣈ
    ୠሏ༻ိදࣔʮෆੋᏐࣈʯ
    ༗झޠ๏
    

    View Slide

73. ޒഒላӃ
    .01$0/
    ʮݸ౳ᥒʯ᪑ʮݸ౳ᥒʯతࠩผʁ
    
    ༗झޠ๏
    

    View Slide

74. ޒഒላӃ
    .01$0/
    ʮݸ౳ᥒෆ။ൺֱܕผʁʯ
    ༗झޠ๏
    

    View Slide

75. ޒഒላӃ
    .01$0/
    ݸ౳ᥒ᪑ݸ౳ᥒతࠩผʁ
    ༗झޠ๏
    

    View Slide

76. ޒഒላӃ
    .01$0/
    ཧղࡉઅ
    ༗झޠ๏
    

    View Slide

77. ޒഒላӃ
    .01$0/
    你֘೺ٕೳᴍᏐᴍࡏṜࠣ஍ํʂ
    ਓੜۤ୹
    

    View Slide

78. ޒഒላӃ
    .01$0/
    ಓཧେՈ౎஌ಓɼୠೳ၏౸తᔒଟগ
    ਓੜᴍᏐ
    

    View Slide

79. ޒഒላӃ
    .01$0/
    ٕೳᴍᏐ༗ݶ
    ਓੜᴍᏐ
    

    View Slide

80. ޒഒላӃ
    .01$0/
    ೗Ռཁ౤ࢿࡏ+BWB4DSJQUత࿩
    ਓੜᴍᏐ
    

    View Slide

81. ޒഒላӃ
    .01$0/
    ਂೖ+BWB4DSJQU
    w෺݅ಋ޲
    wവᏐ$MPTVSF
    wUIJT
    wඇಉ㑊႔ཧ
    w&4.PEVMF
    

    View Slide

82. ޒഒላӃ
    .01$0/
    ֘ላલ୺ᐽՍ嗎ʁ֘ላ哪Ұݸʁ
    ਓੜᴍᏐ
    "
    

    View Slide

83. ޒഒላӃ
    .01$0/
    ೥ؐཁෆཁላK2VFSZʁ
    ਓੜᴍᏐ
    

    View Slide

84. ޒഒላӃ
    .01$0/
    ֘ላࢿྉ݁ߏɺԋࢉ๏嗎ʁ
    ਓੜᴍᏐ
    

    View Slide

85. ޒഒላӃ
    .01$0/
    ؐ༗ॄኄʁ
    ਓੜᴍᏐ
    

    View Slide

86. ޒഒላӃ
    .01$0/
    ൛ຊ߇੍
    ਓੜᴍᏐ
    非業配
    

    View Slide

87. ޒഒላӃ
    .01$0/
    "TTFUଧแ޻۩
    ਓੜᴍᏐ
    

    View Slide

88. ޒഒላӃ
    .01$0/
    ཆ੒؃จ݅తश׳
    ਓੜᴍᏐ
    

    View Slide

89. ޒഒላӃ
    .01$0/
    ӳจ
    ਓੜᴍᏐ
    

    View Slide

90. ޒഒላӃ
    .01$0/
    ౤ࢿҰఆ༗෩ᯃɼٕज़౤ࢿ༗ᩲ༗ഛɼ
    ਃߪલጯৄ閱ެ։說໌ॻɻ
    ਓੜᴍᏐ
    

    View Slide

91. ޒഒላӃ
    .01$0/
    ኺ৽ख্࿏౸࿝അ్ࣝ
    

    View Slide

92. ޒഒላӃ
    .01$0/
    ૉਓ᫚৬੒ޭతՄೳੑʁ
    ৽खᢛ࿝അ
    

    View Slide

93. ޒഒላӃ
    .01$0/
    զෆੋՊ൝ඟۀత
    ৽खᢛ࿝അ
    

    View Slide

94. ޒഒላӃ
    .01$0/
    զཁઌላ哪Ұ׺ఔࣜޠݴʁ
    ৽खᢛ࿝അ
    

    View Slide

95. ޒഒላӃ
    .01$0/
    ઌ૝辦๏፤౸໳ථʂ
    ৽खᢛ࿝അ
    

    View Slide

96. ޒഒላӃ
    .01$0/
    ઌᏓ੒ʮ৽खʯ
    ৽खᢛ࿝അ
    

    View Slide

97. ޒഒላӃ
    .01$0/
    ၏ላ໰తํࣜ
    ৽खᢛ࿝അ
    

    View Slide

98. ޒഒላӃ
    .01$0/
    େ෦份తٕज़ඃᚙ໌ग़ိ
    ੋཁղܾಛఆ໰୊త
    ৽खᢛ࿝അ
    

    View Slide

99. ޒഒላӃ
    .01$0/
    ࿝അ్ࣝ೭༌ೖἫ
    ৽खᢛ࿝അ
    

    View Slide

100. ޒഒላӃ
     .01$0/
     ॏᴍɿ׭໢จ݅ن֨ख࡭
     ࣗզ੒௕
     ৽खᢛ࿝അ
     

     View Slide

101. ޒഒላӃ
     .01$0/
     ৽खᢛ࿝അ
     

     View Slide

102. ޒഒላӃ
     .01$0/
     ৽खᢛ࿝അ
     

     View Slide

103. ޒഒላӃ
     .01$0/
     ཧղࡉઅ
     ৽खᢛ࿝അ
     

     View Slide

104. ޒഒላӃ
     .01$0/
     อ࣋޷ح৺
     ৽खᢛ࿝അ
     

     View Slide

105. ޒഒላӃ
     .01$0/
     ෆཁ࠶૬৴ᔒ༗ࠜᎦత說๏ྃ
     ৽खᢛ࿝അ
     

     View Slide

106. ޒഒላӃ
     .01$0/
     ؁҆፻ʁ
     ৽खᢛ࿝അ
     

     View Slide

107. ޒഒላӃ
     .01$0/
     ᩇॻʂ
     ৽खᢛ࿝അ
     

     View Slide

108. ޒഒላӃ
     .01$0/
     ਪનॻ໨
     ৽खᢛ࿝അ
     

     View Slide

109. ޒഒላӃ
     .01$0/
     ਪનॻ໨
     w:PV%POU,OPX+4ܥྻ
     w᮷阱ʂޡղʂఱॏ৽ೝࣝ+BWB4DSJQUʂ
     w&MPRVFOU+BWB4DSJQU
     w&GGFDUJWF+BWB4DSJQU
     

     View Slide

110. ޒഒላӃ
     .01$0/
     閱ᩇݪ࢝ᛰ
     ৽खᢛ࿝അ
     

     View Slide

111. ޒഒላӃ
     .01$0/
     ( function( global, factory ) {
     "use strict";
     // 略略
     } )( typeof window !== "undefined" ? window : this,
     function( window, noGlobal ) {
     // 略略
     IIFE
     ৽खᢛ࿝അ
     

     View Slide

112. ޒഒላӃ
     .01$0/
     ࿝അ్ࣝ೭༌ग़Ἣ
     ৽खᢛ࿝അ
     

     View Slide

113. ޒഒላӃ
     .01$0/
     ࢪൺडߋ༗ಘ
     ৽खᢛ࿝അ
     

     View Slide

114. ޒഒላӃ
     .01$0/
     ʮ೗Ռ你ߨ౸࿈你Ѩ嫲౎ᡒత懂త࿩ʯ
     ৽खᢛ࿝അ
     

     View Slide

115. ޒഒላӃ
     .01$0/
     㑚Өࣗݴࣗޠʂ
     ৽खᢛ࿝അ
     

     View Slide

116. ޒഒላӃ
     .01$0/
     ሜจষ
     ৽खᢛ࿝അ
     

     View Slide

117. ޒഒላӃ
     .01$0/
     ሜจষෆੋҝྃ૝ߚɺ
     ࣕੋҝྃࢥߟᢛࣗզሣ࿩
     ৽खᢛ࿝അ
     

     View Slide

118. ޒഒላӃ
     .01$0/
     J5)PNF᭿ਓᩱ
     ৽खᢛ࿝അ
     

     View Slide

119. ޒഒላӃ
     .01$0/
     4JEF1SPKFDU
     ৽खᢛ࿝അ
     

     View Slide

120. ޒഒላӃ
     .01$0/
     ৽ख্࿏
     ৽खᢛ࿝അ
     

     View Slide

121. ޒഒላӃ
     .01$0/
     ෆཁযྀɺෆཁᛇ๩
     

     View Slide

122. ޒഒላӃ
     .01$0/
     photo by redjar
     

     View Slide

123. ޒഒላӃ
     .01$0/
     photo by Quality & Style
     

     View Slide

124. ޒഒላӃ
     .01$0/
     Ҏ্Ͱ͢ʂ
     

     View Slide

125. ޒഒላӃ
     .01$0/
     歡迎加
     好友
     

     View Slide