okinawa

勉強メモ

JavaScriptの基本

・参考 JavaScript の基本 https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics

変数

変数宣言 let

JavaScriptは動的型付け言語。

let number = 9;
let string = 'あいうえお';
let boolean = true;
let boolean = false;
let boolean = 5 > 3;

String/int/booleanも全部let booleanはtrue falseのみを持つ。

定数宣言 const

const number = 10;

配列宣言

let myNameArray = ['Chris', 'Bob', 'Jim'];
let myNumberArray = [10, 15, 40];

オブジェクトの宣言

let dog = { name : 'ポチ', breed : 'ダルメシアン' };
dog.name // ポチ

テンプレートリテラル

文字列と変数をまとめて の中に書ける。 バッククオートで囲む。

const name = "あああ";
window.alert("こんにちは、" + name + "さん");//普通
window.alert(`こんにちは、'${name}さん`);// テンプレートリテラル

関数

関数宣言

戻り値の型指定いらない。

const function multiply(num1,num2) {
  let result = num1 * num2;
  return result;
}

関数呼び出し

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

匿名関数

よくイベントハンドラで使われている。

function() {
  alert('hello');
}

コールバック関数

関数の引数に渡される関数のこと。 JavaScriptって引数に関数を渡せるんやで。 ここではcall()がコールバック関数。

function call() { 
  window.alert("コールバック"); 
}

//引数名()で渡されたメソッドを呼び出せる。
function abc(hikisuu) { 
  window.alert("イベントリスナー"); 
  hikisuu(); 
} 

abc(call);

※大事な事 コールバック関数ってのは別に非同期と全然関係ないんだ! 単純に関数の引数に渡される関数のことなんだぜ!!!

・参考 JavaScript中級者への道【5. コールバック関数】 https://qiita.com/matsuby/items/3f635943f25e520b7c20

コールバック関数を呼び出す側の関数は高階関数という。

条件文

演算子

イコール ===

ナットイコール !==

if

let iceCream = 'チョコレート';
if(iceCream === 'チョコレート') {
  alert('やった、チョコレートアイス大好き!');
} else {
  alert('あれれ、でもチョコレートは私のお気に入り......');
}

while

while(条件式){
}

for

for(変数の定義; 条件式; 変数の更新){}

for(let number i; i <100; i++){
}

イベント

let myHTML = document.querySelector('html');
myHTML.onclick = function() {
    alert('痛っ! つつくのはやめて!');
};

上記を略して書くとこう。

document.querySelector('html').onclick = function() {
    alert('痛っ! つつくのはやめて!');
}

イベントでよく使う関数

要素の取得

document.querySlector('要素名');
document.querySlectorAll('要素名'); //要素を全て取得します。配列で返ってきます
document.getElemntById('id名');
document.getElementsByClassName('クラス名');

ちなみに、要素を作る場合
document.createElement('要素名');
要素.cloneNode(true); //複製する場合はtrue

ノードの取得

親要素.childNodes //親要素の子ノードを取得
親要素.children //親要素の子要素を取得
親要素.firstChild //親要素の最初の子ノードを取得
親要素.lastChild //親要素の最後の子ノードを取得
親要素.firstElementChild //親要素の最初の子要素を取得
親要素.firstElementChild //親要素の最初の子要素を取得
小要素.parentNode //小要素の親ノードを取得
要素.previousSibling //要素の1つ前の兄弟ノードを取得
要素.nextSibling //要素の1つ後の兄弟ノードを取得
要素.previousElementSibling //要素の1つ前の兄弟要素を取得
要素.nextElementSibling //要素の1つ後の兄弟要素を取

要素の追加と削除

要素.appendChild(子要素); //要素に小要素を追加します
要素.insertBefore(子要素, 指定要素); //要素の指定要素の前に子要素をいれます
要素.removeChild(子要素); //要素の子要素を削除します
要素.innerHTML = ''; //要素にHTMLを追加する

属性の変更

要素.textContent = 'text'; //要素の中身がtextになります
要素.style.color = 'red'; //要素の色がredになります
要素.classList.add('クラス名'); //要素にクラス名をつけます
要素.classList.remove('クラス名'); //要素のクラス名を除きます
要素.classList.contain('クラス名'); //要素にクラス名が付いているか判定します
要素.classList.toggle('クラス名'); //クラス名が付いていれば外し、付いてなければつけます

その他のよく使う関数 www.naka-style-blog.com

イベントリスナーの種類

イベントハンドラーとイベントリスナーの違い

イベントハンドラー:  イベントに対して処理を定義したメソッド。

イベントリスナー:   イベントに対して処理を結びつける仕組み。

であり、概念としては異なるものです。

1 普通のイベント登録

const btn = document.querySelector('button'); 
btn.onclick = function() { 
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; 
  document.body.style.backgroundColor = rndCol; 
}

2 addEventListenerで登録

const btn = document.querySelector('button'); 
function bgChange() { 
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; 
  document.body.style.backgroundColor = rndCol; 
} 
btn.addEventListener('click', bgChange);
btn.addEventListener('click', function() { 
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; 
  document.body.style.backgroundColor = rndCol; 
});

・イベントリスナーの削除

btn.removeEventListener('click', bgChange);

・addEventListenerの利点 削除できる。 一つのイベントに複数の関数をセットできる。

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

3 イベントハンドラーHTML属性(インラインイベントハンドラー)で登録

リスナーじゃなくてハンドラーだけど一応紹介。 onXXXのこと。 HTMLにJavaScriptが混在するので非推奨。

<button onclick="alert('Hello);">Press me</button>

・onChange属性 →input要素で何かしら変更があったときにイベントが発生する。  例えば、セレクトボックス選択時、テキスト入力後のENTER押下時。

・onClick属性 onClick="function()" クリック時にJavaScriptの関数を呼び出す。

イベントオブジェクト

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events ときどきイベントハンドラー関数内で event、evt、単に e などと名付けられた引数を見かけるかもしれません。 これらはイベントオブジェクトと呼ばれ、イベントの追加機能や情報を提供する目的でイベントハンドラーに自動的に渡されます。 例えば、またランダム色の例をちょっと書き換えてみましょう。

function bgChange(e) {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}

btn.addEventListener('click', bgChange);

イベントオブジェクト e が関数に含まれていて、関数内で e.target — これはボタンそのもの — の背景色スタイルを設定しているのがわかるでしょう。 イベントオブジェクトの target プロパティは、常にイベントが生じた要素への参照となっています。 ですからこの例ではページではなくボタンの背景色がランダムに変わります。

・イベントのバブリングとキャプチャリング 親子要素に同じイベント(btn.onClick()とか)をつけると順番に 発火しちゃって大変という話。