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…

本のタイトル・著者・出版社をキーワード検索できる機能を作ります。 routing Route::post('/serch', 'CustomerController@serch'); Controller public function serch(Request $request){ $keyword = $request->input('keyword'); //orWhereでor検索できる…