JavaScriptのイベントを体感しよう

by 256times

Slide 1

Slide 1 text

256 times ZVLJ

Slide 2

Slide 2 text

ϓϩϑΟʔϧ • yukiʢ@sac_180822ʣ • WEB੍࡞ͷPMΛ4೥΄Ͳ΍͍ͬͯ·ͨ͠ɻݱࡏ͸৘γεͰ͢ɻ • ϓϩάϥϛϯάܦݧ͸8ϲ݄Ͱ͢ɻ • ҭٳதʹͳʹ͔ҭࣇҎ֎ͷ͜ͱ͕΍Γͨ͘ͳͬͯϓϩάϥϛϯά Λ࢝ΊͯΈͨΒɺ໘നͯ͘໘നͯ͘੎͍༨ͬͯ256timesʹԠื͠ ͍ͯ·ͨ͠ɻ

Slide 3

Slide 3 text

256 times ࢀՃલͷΘͨ͠ͱࠓͷΘͨ͠

Slide 4

Slide 4 text

256 times ࢀՃલ͸ɾɾɾ

Slide 5

Slide 5 text

υοτΠϯετʔϧ Progate Udemy Rails νϡʔτϦΞϧ νΣϦʔຊ ɾ ɾ ɾ ͱΓ͋͑ͣ༗໊ͳڭࡐΛ͍Ζ͍Ζ΍ͬͯΈͨ

Slide 6

Slide 6 text

͜͏͍͏ͷ࡞Γ͍ͨ ↓ άάΔ ↓ ͜ͷهࣄྑͦ͞͏ʂ ✖ ໌֬ͳཧ༝͸ͳ͍͚ͲͳΜ͔ྑͦ͞͏ ✖ ͳ͔ͥωοτʹܝࡌ͞Ε͍ͯΔίʔυ͸શͯਖ਼ͩͱ৴͖͍ͬͯ͡Δ ✖ ͦͷίʔυ͕ݹ͍ॻ͖ํͰ΋ແବͳهड़͕ଟͯ͘΋ؾ෇͘ྗ͕ͳ͍ ↓ ΄΅ਅࣅͯ͠ॻ͘ ↓ ͜͜ͷίʔυͪΐͬͱΘ͔Βͳ͍͚Ͳಈ͍ͯΔ͔Β͍͔ͬ ↓ σβΠϯ͍ͬͯ͡ ↓ ͓ʔͰ͖ͨʂΘͨ͠࡞Εͨʂྗ͍͔ͭͨ΋ʂ

Slide 7

Slide 7 text

͜͏͍͏ͷΛ܁Γฦͯ͠ ྗ͕͍͍ͭͯΔͱࢥ͍ࠐΜͰ͍ͨ

Slide 8

Slide 8 text

256 times ͷ ాޱ͞ΜͱͷॳճϝϯλϦϯάͰɾɾɾ

Slide 9

Slide 9 text

ాޱ͞Μ ͡Ό͋·ͣ͸ϑΥʔϜ࡞ͬͯɺ Ϙλϯԡͨ͠Βೖྗ಺༰͕ग़Δ΍ͭ࡞ͬͯΈ·͠ΐ͏ Θͨ͠ ͸͍ʂ ాޱ͞Μ ςΩετೖྗͷ෦඼࡞͍ͬͯͩ͘͞ Θͨ͠ ʢϑΥʔϜɺϑΥʔϜɺͳΜͷλά͚ͩͬʁٽʣ ɾɾɾɾɾɾɾɾɾɾɾɾௐ΂Ε͹Ͱ͖·͢ɺͨͿΜ

Slide 10

Slide 10 text

ͳʹ΋Ͱ͖ͳ͍ɾɾɾʂ

Slide 11

Slide 11 text

ాޱ͞Μ ʮௐ΂ͳ͍ͱͰ͖ͳ͍͜ͱ͸ɺ Ͱ͖Δͱ͸ݴ͑ͳ͍Ͱ͢Ͷʯ

Slide 12

Slide 12 text

ాޱ͞Μ ʮ͜Ε͘Β͍ͷ͜ͱ͸֮͑·͠ΐ͏ʯ

Slide 13

Slide 13 text

5ϲ݄ؒɺҰԠຖ೔ϓϩάϥϛϯάֶशΛ ͍ͯͨ͠ʢͭ΋Γͩͬͨʣͷʹɺ ͳͥλά͢Βॻ͚ͳ͔ͬͨͷ͔ʁ

Slide 14

Slide 14 text

“֮͑Α͏”ͱ͍͏ҙࣝΛશ࣋ͨͣ͘ʹ औΓ૊ΜͰ͍ͨ

Slide 15

Slide 15 text

ʮϓϩάϥϛϯά͸֮͑ͳͯ͘ྑ͍ɺ άάΔྗ͕͋Ε͹OKʯ ͱ͍͏TwitterͰݟͨݴ༿Λͦͷ··ӏವΈʹ͍ͯͨ͠ ͦΜͳϫέͳ͔ͬͨʂ

Slide 16

Slide 16 text

࢓૊Έ͸ཧղ͍ͯͯ͠΋ɺશવ͍֮͑ͯͳ͍ ↓ Կ͔Λݟͳ͍ͱԿ΋ॻ͚ͳ͍ਓʹͳ͍ͬͯͨ

Slide 17

Slide 17 text

ڭ܇̍ جຊతͳ͜ͱ͸ɺ֮͑ͨํ͕ྑ͍ʹܾ·ͬͯΔ ʢΑ͘ग़ͯ͘Δॻ͖ํͱ͔ϝιουͱ͔ʣ

Slide 18

Slide 18 text

ڭ܇̎ Α͘෼͔Βͳ͍··ௐ΂·ͬͯ͘ ͳΜ͔͍͢͝΋ͷΛ࡞ΔྗΑΓɺ ࣗྗͰ௒جຊతͳ΋ͷΛ࡞ΔྗΛ਎ʹ͚ͭΔ

Slide 19

Slide 19 text

λά͢Β ࣗྗͰॻ͚ͳ͔ͬͨΘͨ͠Ͱ͕͢ɺ 256times Λऴ͑ͨࠓ͸ɾɾɾ

Slide 20

Slide 20 text

ࣗ෼ͷ࡞Γ͍ͨ΋ͷΛ࣮૷͢ΔͨΊʹ Ͳ͏͍͏ίʔυΛॻ͚͹ྑ͍͔ ༧ଌͰ͖ΔΑ͏ʹͳͬͨʂ ͦͯͦ͠Ε͕͋Δఔ౓ಈ͘ͱ͜Ζ·Ͱ ࣗྗͰίʔυ͕ॻ͚ΔΑ͏ʹͳͬͨʂ

Slide 21

Slide 21 text

͋ͱ͸ɾɾɾ Ոి΍ࣗಈԽγεςϜΛ࢖͍ͬͯΔͱ ແҙࣝʹཪଆͷॲཧΛ૝૾͢ΔΑ͏ʹͳͬͨʂ ͨͱ͑͹ચ୕ػ ͜ͷϞʔυͰελʔτϘλϯԡ͢ͱɺ ͜͜·Ͱ͸͍ͭ΋ͱಉ͡ॲཧ͚ͩͲ ͜ͷλΠϛϯάͰ৚݅෼ذ͞Εͯɾɾɾ ͜Ε΋ాޱ͞Μ͕ݴ͍ͬͯͨ ʮݟ͑ͳ͍ઢ͕ݟ͑ΔΑ͏ʹͳΔ͜ͱʯ

Slide 22

Slide 22 text

JavaScriptͷΠϕϯτΛ ςʔϚʹͨ͠ΞϓϦ

Slide 23

Slide 23 text

ͦ΋ͦ΋’click’Πϕϯτ͔͠ ࢖ͬͨ͜ͱ͕ͳ͔ͬͨ

Slide 24

Slide 24 text

256times ͷجૅ࿅Ͱ’keyup’͕ొ৔ͯ͠ ’keydown’΍’keypress’ͷଘࡏΛ஌Δ MDNΛݟͨΒଞʹ΋ͨ͘͞ΜΠϕϯτ͕ɾɾɾ

Slide 25

Slide 25 text

Α͘Α͘ߟ͑Δͱ webίϯςϯπ಺Ͱى͜Δ͢΂ͯͷมԽ͸ Πϕϯτ͕͖͔͚ͬʹͳ͍ͬͯΔ ͨ͘͞ΜΠϕϯτ͕͋Δͷ΋ೲಘʂ

Slide 26

Slide 26 text

ΫϦοΫͨ͠ΓεΫϩʔϧͨ͠ΓΩʔೖྗͨ͠Γɾɾɾ Ϣʔβʔͷಈ࡞ͻͱͭͻͱ͕ͭશͯΠϕϯτ Ϣʔβʔͷ༷ʑͳΠϕϯτΛΩϟονͯ͠ ԿΒ͔ͷॲཧΛߦ͍ͬͯΔ Button

Slide 27

Slide 27 text

ͲΜͳΠϕϯτ͕͋Δͷ͔஌͍ͬͯΔͱ ੍࡞ͷ෯͕޿͕Δ͸ͣ

Slide 28

Slide 28 text

͜ͷΠϕϯτɺͲͷλΠϛϯάͰൃՐ͢ΔΜͩΖɾɾɾ ࣅͨΑ͏ͳΠϕϯτ͕͍͔ͭ͋͘Δͷ͸ͳΜͰʁ ඍົʹλΠϛϯά͕ҧ͏ͷʁ ͲͷΠϕϯτΛ࢖͏ͷ͕ϕετͳͷ͔෼͔Βͳ͍ ͱʹ͔͘ṖͩΒ͚

Slide 29

Slide 29 text

ओཁͳΠϕϯτ͕໢ཏ͞Ε͍ͯͯ ͞Βʹʮ͍·ൃՐͨ͠ʯ͕ ࢹ֮తʹΘ͔ΔΞϓϦ͕΄͍͠ʂ