Learn JavaScript Well - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

ޒഒላӃ .01$0/ େߝ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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