・参考 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('痛っ! つつくのはやめて!');
}
イベントリスナーの種類
イベントハンドラーとイベントリスナーの違い
イベントハンドラー： イベントに対して処理を定義したメソッド。
イベントリスナー： イベントに対して処理を結びつける仕組み。
であり、概念としては異なるものです。
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()とか)をつけると順番に 発火しちゃって大変という話。
