ゼロからはじめるjavascript基礎のき

広島フロントエンド勉強会 Vol.9のスライド

Transcript

1. ޿ౡϑϩϯτΤϯυษڧձ Vol.9 θϩ͔Β͸͡ΊΔJavaScript جૅͷ͖ CodeCode Ҫ্୓
2. JavaScriptͰԿ͕Ͱ͖Δͷ͔஌Δ ໨ඪ
3. ࠓճͷ಺༰͸ॳ৺ऀ޲͚Ͱ͢ɻ JavaScriptͷશͯΛ໢ཏ͍ͯ͠ ΔΘ͚Ͱ͸ɺ͋Γ·ͤΜɻ ໨ඪ
4. ໨࣍ • JavaScriptͱ͸ • JavaScriptΛॻ͘४උ • JavaScriptͰHello World • DOMૢ࡞ • ࿅श໰୊ • ·ͱΊ
5. JavaScriptͱ͸
6. JavaScriptͱ͸ • 1995೥ʹωοτεέʔϓ͕ࣾ։ൃ • ΫϩεϓϥοτϑΥʔϜͰಈ࡞͢ΔɺΦϒδΣΫ τࢦ޲ͷεΫϦϓτݴޠ • ౰࣌Java͕ਓؾͩͬͨͷͰͦΕʹ͋΍͔ͬͯ JavaScriptͱ໋໊
 JavaͱJavaScript͸ผ෺ʂ
7. JavaScriptͱ͸ • IE3ʹ࣮૷͞Εരൃతʹීٴ
 ͔͠͠ɺϒϥ΢β͝ͱʹݴޠ࢓༷ͷಠ֦ࣗு • ECMAScriptͱͯ͠ඪ४Խ
 ES2015
8. JavaScriptͷछྨ • ΫϥΠΞϯταΠυJavaScript
 ϒϥ΢βͱͦͷυΩϡϝϯτΦϒδΣΫτϞσϧ (DOM) Λ੍ޚ͢ΔΦϒδΣΫτΛఏڙ͢Δ • αʔόʔαΠυJavaScript
 αʔόͷՔಇʹؔ࿈͢ΔΦϒδΣΫτΛఏڙ͢Δ
9. DEMO
10. σϞ https://goo.gl/ODJqaN https://goo.gl/Vt1edI Github https://goo.gl/cJPWlW εϥΠυ
11. JavaScriptΛॻ͘४උ
12. CodePen
13. CodePen http://codepen.io/ ᶃ ᶄ ᶅ ᶆ
14. //HTMLʹॻ͘ <script> //͜͜ʹίʔυΛॻ͘ </script> //֎෦͔ΒಡΈࠐΉ <script src=“PATH/TO/JS“></script> <script></script>
15. document.addEventListener("DOMContentLoaded", function(){ //͜͜ʹίʔυΛॻ͘ }, false); DOMͷඳը͕ऴΘ͔ͬͯΒ࣮ߦ
16. Hello World
17. alert(“Hello World”); alert() • ϒϥ΢β͕΋ͭϙοϓΞοϓػೳ • ଟ༻ݫېʂ
18. console.log(“Hello World”); console.log() • JavaScriptͷσόοάػೳͷͻͱͭ • ։ൃπʔϧͷίϯιʔϧʹදࣔ͞ΕΔ • ফ͠๨Εʹ஫ҙ • IE9Ͱ͸όά͕͋Δ
19. Πϕϯτ
20. Πϕϯτ • Πϕϯτ͸ɺϚ΢εϘλϯΛΫϦοΫͨ͠ɺ ϖʔδ͕ಡΈࠐ·ΕͨͳͲͷಈ࡞͕ىͬͨ͜ ࣌ʹൃੜ
 
 + ΫϦοΫ
 + Ϛ΢εΦʔόʔ
 + ϩʔυ
21. let btn = document.getElementById('btn'); btn.addEventListener('click', function(){ alert('Hello World'); }); <button id=“btn">Hello</button> HTML JavaScript Πϕϯτ
22. let btn = document.getElementById('btn'); btn.addEventListener('click', function(){ alert('Hello World'); }); JavaScript Πϕϯτ
23. ม਺ • ࠶ར༻Ͱ͖ΔΑ͏ʹ໊લΛ͚ͭͨശ • ม਺Λ࢖͏ʹ͸એݴ͕ඞཁ
 var
 let • ϓϩάϥϜͰͷʮ=ʯ͸౳͍͠Ͱ͸ͳ͘ɺ୅ೖ let btn = document.getElementById('btn');
24. DOMͱ͸ • HTMLυΩϡϝϯτΛπϦʔߏ଄ͱͯ͠දݱͨ͠΋ͷ • ѻ͍͍ͨཁૉΛಛఆ͠ૢ࡞Ͱ͖ΔΑ͏ʹ͢Δ࢓૊Έ Document Object Model
25. ؔ਺ • ಉ͡ॲཧΛ·ͱΊͯఆٛ͠ɺԿ౓΋࢖͍ճ͠ ͕Ͱ͖ΔΑ͏ʹͨ͠΋ͷ btn.addEventListener('click', function(){ alert('Hello World'); });
26. let btn = document.getElementById('btn'); let btn2 = document.getElementById('btn2'); function onBtn(elm){ elm.addEventListener('click', function(){ alert('Hello World'); }); } onBtn(btn); onBtn(btn2); <button id=“btn”>Hello</button> <button id=“btn2">Hello</button> HTML JavaScript ؔ਺ Ϙλϯ͕૿͑ͨ৔߹ function ؔ਺໊(ԾҾ਺){
 ॲཧ
 } ؔ਺໊(Ҿ਺);
27. Ϙλϯ͕100ݸʹͳͬͯ΋ େৎ෉ʂ
28. let btn = document.getElementsByClassName('btn'); for(let i = 0; i < btn.length; i++) { btn[i].addEventListener('click', function(){ alert('Hello World'); }); } <button class=“btn">Hello</button> <button class=“btn">Hello</button> HTML JavaScript Ϋϥε
29. Ϋϥε • Ϋϥεͷऔಘ • btnͷத਎ • ෳ਺͋Δ͔Βॱ൪ʹॲཧ͠ͳ͍ͱ͍͚ͳ͍ let btn = document.getElementsByClassName('btn'); <button class=“btn”>Hello</button> <button class=“btn">Hello</button>
30. ܁Γฦ͠ • ࢦఆͨ͠ճ਺ɺಉ͡ॲཧΛ܁Γฦ͢ • forจ for(let i = 1; i <= 10; i++){ console.log(i); } 10ճ܁Γฦ͢ 1 2 3 4 5 6 7 8 9 10 ݁Ռ
31. ԋࢉࢠ • < > <= >= • ΠϯΫϦϝϯτ
 
 
 ऴΘͬͨΒiΛ+1͢Δ
 i = i + 1; for(let i = 0; i < btn.length; i++) for(let i = 0; i < btn.length; i++)
32. length • จࣈྻͷ௕͞(ݸ਺)Λऔಘ͢ΔϓϩύςΟ • ࠓճͷ৔߹͸2ݸ for(let i = 0; i < btn.length; i++) <button class=“btn”>Hello</button> <button class=“btn">Hello</button> for(let i = 0; i < 2; i++)
33. ഑ྻ • ࿈൪ׂ͕ΓৼΒΕͨม਺ͷू߹ btn[i].addEventListener('click', function(){ ࣮͸ม਺ʮbtnʯͷத਎͸഑ྻ ఴ͑ࣈ ஋ 0 <button class=“btn”>Hello</button> 1 <button class=“btn”>Hello</button> දΈ͍ͨʹͳͬͯΔ(ఴ͑ࣈ͸0͔Βελʔτ)
34. let btn = document.getElementsByClassName('btn'); for(let i = 0; i < btn.length; i++) { console.log(i + “൪໨ͷ஋ɿ”+ btn[i]); } <button class=“btn">Hello1</button> <button class=“btn">Hello2</button> HTML JavaScript ഑ྻ 0൪໨ͷ஋ɿ<button class=“btn”>Hello1</button> 1൪໨ͷ஋ɿ<button class=“btn">Hello2</button> ݁Ռ
35. ཁૉͷऔಘ • HTMLͷཁૉΛऔಘ let btn = document.getElementById('btn'); let btn = document.getElementsByClassName('btn'); let btn = document.getElementsByTagName('button'); let btn = document.querySelectorAll(‘.button');
36. ৚݅෼ذ
37. let btn = document.getElementById("btn"); btn.addEventListener('click', function(){ let cnf = confirm("ࠓ·ͰώϩϑϩʹࢀՃͨ͜͠ͱ͸͋Γ·͔͢ʁ\nOK: YES\nΩϟϯηϧ: NO"); if(cnf == true){ alert("ຖ౓͋Γ͕ͱ͏͍͟͝·͢ʂ"); }else{ alert("ࠓޙͱ΋ΑΖ͓͘͠ئ͍͠·͢ʂ"); } }); <button id=“btn">࣭໰</button> HTML JavaScript ࣭໰
38. ৚݅෼ذ • ৚݅ʹΑ࣮ͬͯߦ͢ΔॲཧΛม͑Δ • ifจ if(cnf == true){ alert("ຖ౓͋Γ͕ͱ͏͍͟͝·͢ʂ"); }else{ alert("ࠓޙͱ΋ΑΖ͓͘͠ئ͍͠·͢ʂ"); } true or false
39. ԋࢉࢠ • == let x = 1; if(x == 1){ //͜͜ͷॲཧ͕࣮ߦ͞ΕΔ } x͕1ͷͱ͖(true)
40. else x͕0ͷͱ͖(false) let x = 0; if(x == 1){ //͜͜ͷॲཧ͸࣮ߦ͞Εͳ͍ }else{ //͜͜ͷॲཧ͕࣮ߦ͞ΕΔ }
41. ͞Βʹ৚݅Λ௥Ճ͢Δ x͕2ͷͱ͖(true) let x = 2; if(x == 1){ //͜͜ͷॲཧ͸࣮ߦ͞Εͳ͍ }else if(x == 2){ //͜͜ͷॲཧ͕࣮ߦ͞ΕΔ }else{ //͜͜ͷॲཧ͸࣮ߦ͞Εͳ͍ }
42. ࿅श໰୊
43. ͓Έ͘͡ ʮ͓Έ͘͡ʯϘλϯΛԡ͢ͱେ٢ɾத٢ɾখ ٢ɾڟɾେڟͷ5ͭͷ݁Ռ͕ϥϯμϜʹฦͬͯ͘ ΔΑ͏ͳJavaScriptΛ࡞Δ let rand = Math.floor(Math.random() * 5) + 1; let rand = Math.floor(Math.random() * 5) + 1;
44. ͓Έ͘͡ɹώϯτ //1ʙ5·Ͱ஋ΛϥϯμϜʹฦ͢(ٖࣅཚ਺) let rand = Math.floor(Math.random() * 5) + 1; document.getElementById() //idͷऔಘ addEventListener('click', function(){} //ΫϦοΫ͞Εͨ࣌ͷΠϕϯτ if() //৚݅෼ذ alert() //ग़ྗ <button id=“btn">͓Έ͘͡</button> HTML JavaScript
45. ͓Έ͘͡ɹ౴͑ //#btnΛऔಘ let btn = document.getElementById("btn"); btn.addEventListener('click', function(){ //1͔Β5·Ͱͷཚ਺Λੜ੒ let rand = Math.floor(Math.random() * 5) + 1; if(rand == 1){ alert("େ٢"); }else if(rand == 2){ alert("த٢"); }else if(rand == 3){ alert("খ٢"); }else if(rand == 4){ alert("ڟ"); }else if(rand == 5){ alert("େڟ"); }else{ alert("Τϥʔ"); } }); JavaScript
46. ·ͱΊ
47. ·ͱΊ • ϒϥ΢βͰಈ͘།Ұͷϓϩάϥϛϯάݴޠ • ECMAScriptͱͯ͠ɺඪ४Խ • DOMΛ࢖ͬͯɺHTMLͷ಺༰Λૢ࡞Ͱ͖Δ • Ϣʔβͷૢ࡞Λݩʹɺ࣮ߦͰ͖Δ
48. Ͱ΋ɺ͜Ε͸ ΄ΜͷҰ෦
49. Ωʔϫʔυ • Ξχϝʔγϣϯ • Ajax • ΦϒδΣΫτࢦ޲ • this • ϥΠϒϥϦɾϑϨʔϜϫʔΫ
50. ϥΠϒϥϦɾϑϨʔϜϫʔΫ
51. ϥΠϒϥϦɾϑϨʔϜϫʔΫ • jQuery • React • AngularJS • Vue.js • Backbone.js • Knockout.js
52. ϥΠϒϥϦɾϑϨʔϜϫʔΫͰɺ JavaScript͸ɺ͞ΒʹศརʹͳΔ
53. ͦͯ͠ɺJavaScript͸ webΞϓϦʹ޲͔͍ͬͯΔ
54. ͞ΒʹֶͿͨΊʹ • MDN
 https://developer.mozilla.org/ja/docs/Web/ JavaScript