JavaScript
EventListenerを使う際には以下の形を覚えておきたい。 const hoge = document.querySelector('hoge'); hoge.addEventListener('EVENT', ()=>{ //処理 console.log('hogehoge); }) addEventListenerの第一引数のEVENTは、以下を参考に。 qiita.com
に限らず複数のNode（要素）から奇数の要素だけ取得したい場合には、JavaScriptを利用したい。 <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> const a = document.querySelectorAll('li:nth-child(odd)'); console.log(a); //NodeList(3) [li, li, li] 以下のようにすれ…
// Classを作成 class Player { constructor(name,score){ this.name = name; this.score = score; } } // Classを元にインスタンスを作成 const player1 = new Player('hira', 27); // オブジェクトのプロパティを出力可能 console.log(player1); console.l…
JavaScriptの配列を作成・操作する場合には以下のような方法があります。 配列の作成 const scores = { name: 'hira', age: 32, }; 配列の操作 //配列のキーと値の追加 scores.email = 'ujinchu'; //配列のキーと値の削除 delete scores.age //配列のキーと…
関数宣言 関数式 アロー関数 の3つで関数を定義可能です。 //関数宣言 function resault(i){ return i * 20; } console.log(resault(4)); //関数式 const result = function(i){ return i * 20; }; console.log(result(4)); // アロー関数 const resultArrow…
forやwhileで特定の条件のみ除外したい場合には、 continue break の2つが使える。 continueの場合 for(let i = 0;i < 10; i++){ if(i === 4){ continue; } console.log(i); } console 0 console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd…
複雑な条件分岐の場合には、if-elseif-elseではなくswitchを使いたい。 'use strict'; const signal = "gold"; switch(signal){ case 'red': console.log('止まれ'); break; case 'yellow': console.log('注意'); break; //以下のように2つの条件を並べるとo…
前回のコードを利用して、以下の仕様のゲームを作成していきます。 ゲームの仕様 5つの無地divが並んでいる。 clickすると1/5の確率で当たり、4/5の確率で外れが出る。 結果は回によって変わる。 <html lang="ja"> <head> <meta charset="utf-8"> <body> </body> body{ display: flex; flex-wrap: wrap; } .box{ width</meta></head></html>…
繰り返し処理を行う方法の1つにfor文があります。for文の書き方の一例としては、 for(let i = 0; i < 10 ; i ++){ // 繰り返し行いたい処理 }; という書き方になります。for文の中で指定した「i」が0から9になるまで、繰り返し行いたい処理を行うという操作…
HTMLに直接書き込まず、JavaScript側から要素を追加するという手段もあります。その際に使用するのが、 document.createElement('追加したい要素')というものです。例えば、 document.createElement('div') とすることで、div要素を作り出すことができます。…
前回使っていたJavaScriptのコードでは、以下のような書き方になっていました。 'use strict'; document.getElementById('target').addEventListener('click',function(){ document.getElementById('target').style.background = 'pink'; }) しかし、これで…
JavaScriptでは、指定した要素に対して、CSSで作ったclassのstyleを付け加えることも可能です。classのstyleを付け加えるには、 対象の要素.classList.add('追加するstyleのclass名'); をJavaScriptのfunctionに付け加えるだけでOK。前回のコードを使うと、…
前回の記事ではaddEventListenerにclickイベントを渡しましたが、他にもたくさんのイベントがあります。 イベントまとめ 主なイベント一覧 引数 イベント発火のタイミング click クリック時 mousedown マウスのボタンが押下された時 mouseup マウスのボタン…
JavaScriptで、クリックをすると色が変わるdiv要素を作っていきます。 <html lang="ja"> <head> <meta charset="utf-8"> <body> <div class="box" id="target">★ </div> </body> .box{ width: 100px; height: 100px; background: skyblue; cursor: pointer; } 'use strict'; document.getElementById('target').addEventListener('cli…</meta></head></html>
