Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

井上拓

May 13, 2017
Tweet

More Decks by 井上拓

Other Decks in Technology

Transcript

  1. 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 ؔ਺໊(ԾҾ਺){
 ॲཧ
 } ؔ਺໊(Ҿ਺);
  2. 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 Ϋϥε
  3. Ϋϥε • Ϋϥεͷऔಘ • btnͷத਎ • ෳ਺͋Δ͔Βॱ൪ʹॲཧ͠ͳ͍ͱ͍͚ͳ͍ let btn =

    document.getElementsByClassName('btn'); <button class=“btn”>Hello</button> <button class=“btn">Hello</button>
  4. ܁Γฦ͠ • ࢦఆͨ͠ճ਺ɺಉ͡ॲཧΛ܁Γฦ͢ • forจ for(let i = 1; i

    <= 10; i++){ console.log(i); } 10ճ܁Γฦ͢ 1 2 3 4 5 6 7 8 9 10 ݁Ռ
  5. ԋࢉࢠ • < > <= >= • ΠϯΫϦϝϯτ
 
 


    ऴΘͬͨΒiΛ+1͢Δ
 i = i + 1; for(let i = 0; i < btn.length; i++) for(let i = 0; i < btn.length; i++)
  6. 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++)
  7. ഑ྻ • ࿈൪ׂ͕ΓৼΒΕͨม਺ͷू߹ btn[i].addEventListener('click', function(){ ࣮͸ม਺ʮbtnʯͷத਎͸഑ྻ ఴ͑ࣈ ஋ 0 <button

    class=“btn”>Hello</button> 1 <button class=“btn”>Hello</button> දΈ͍ͨʹͳͬͯΔ(ఴ͑ࣈ͸0͔Βελʔτ)
  8. 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> ݁Ռ
  9. ཁૉͷऔಘ • HTMLͷཁૉΛऔಘ let btn = document.getElementById('btn'); let btn =

    document.getElementsByClassName('btn'); let btn = document.getElementsByTagName('button'); let btn = document.querySelectorAll(‘.button');
  10. 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 ࣭໰
  11. ԋࢉࢠ • == let x = 1; if(x == 1){

    //͜͜ͷॲཧ͕࣮ߦ͞ΕΔ } x͕1ͷͱ͖(true)
  12. ͞Βʹ৚݅Λ௥Ճ͢Δ x͕2ͷͱ͖(true) let x = 2; if(x == 1){ //͜͜ͷॲཧ͸࣮ߦ͞Εͳ͍

    }else if(x == 2){ //͜͜ͷॲཧ͕࣮ߦ͞ΕΔ }else{ //͜͜ͷॲཧ͸࣮ߦ͞Εͳ͍ }
  13. ͓Έ͘͡ɹώϯτ //1ʙ5·Ͱ஋ΛϥϯμϜʹฦ͢(ٖࣅཚ਺) let rand = Math.floor(Math.random() * 5) + 1;

    document.getElementById() //idͷऔಘ addEventListener('click', function(){} //ΫϦοΫ͞Εͨ࣌ͷΠϕϯτ if() //৚݅෼ذ alert() //ग़ྗ <button id=“btn">͓Έ͘͡</button> HTML JavaScript
  14. ͓Έ͘͡ɹ౴͑ //#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