DOMとJavaScriptについて、ちょっと理解できてきたので、より踏み込んだところをまとめて行きます。本記事はUdemyの講座を参考にしたメモです。
UdemyのAngelaさんの講座（英語だけどめっちゃわかりやすいです！） → リンク
addEventListenerでクリックしたときに関数を適用する
例えばユーザーがボタンをクリックした時に特定の処理を実行する際などに使用します。
//buttonがclickされたらclicked()関数を適用する
document.querySelector("button").addEventListner("click",clicked);
※addEventListener()の中に入れる関数は（）をつけない。clicked()ではなく、そのままclickedと記載する。
今回はclickされた時に関数を実行する処理でしたが、"click"以外にも"keydown"や"load"など、様々なTypeを指定することができます。
（Type一覧はこちら→ リンク）
ちなみに上記では、clicked関数をあらかじめ作成して適用したわけですが、assEventListner内で関数を作成して適用することも可能です。英語ではAnonymus Functionというみたい。
document.querySelector("button").addEventListner("click",function(){
alert("this button was clicked");
});
関数名がなく function (){処理内容} が直接addEventListenerの中に追加されています。
addEventListenerでキーボードで入力したときに関数を適用する
// addEventSelector で keyboard が押されたときの処理をかく
// keydownの詳細がevent として、anonymus functionに渡される。
document.addEventListener("keydown",function(event){
var keyPressed = event["key"];
alert("Pressed key is "+keyPressed+ ".");
});
// function関数のeventとは何なのかをみてみる（今回はkeydownの詳細）
// consoleを開いて、keyboardを押してみるとみれる（関数内に入れる）
console.log(event);
// eventには、様々な要素が入っている。その中の "key"という要素を抜き出す。（関数内に入れる）
event["key"];
// これで"a"とか"k"とか何のキーが押されたのかがわかります。
※クリックの際は、querySlectorでクラス名を指定したけど、Keyboardの際はクラスとかないので、documentの後に直接 addEventListenerをかく。
※eventにはめっちゃ大量の要素が含まれていることがわかる。詳しくは、こちら
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
関数を使用して関数を作る
あんまりDOMと直結する内容ではないのですが、関数を使用して関数を使用する講義がUdemyであったのでメモします。
//足し算の関数
function add(num1, num2){
return num1 + num2;
}
//掛け算の関数
function multiply(num1, num2){
return num1 * num2;
}
//関数指定によって、適切な関数を適用する
function calculator(num1, num2, operator){
return operator(num1, num2);
}
関数わからなくなったら、Chrome→表示→開発・管理→JavaScriptコンソールで 関数を読み込ませてから debugger; と打ち込んで関数を入れるとその関数がどこで間違っているのかが分かりやすくなります。
//consoleでやるとdebuggerモードになります。
debugger;
calculator(3, 4, add);
JavaScriptで音声を再生する
それでは、ボタンを押した時に音声を再生させるにはどうすれば良いのでしょう。
//音声を変数に格納する
var audio = new Audio("sound.mp3");
//play関数でaudioを再生する
audio.play();
//buttonをclickすると、functionが適用される
document.querySelector("button").addEventListner("click",function(){
audio.play();
});
this を使用してコードを省略する
例えば、下記のようにfor文とかを使用すると、毎回指定される要素が違いますよね。
for (var i = 0; i< numberOfButtons; i++){
document.querySelectorAll("button")[i].addEventListener("click", function () {
this.style.color = "white";
//ちなみに、ここに console.log(this.innerHTML); とかって書くとthisが実際なんなのかわかるよ
});
}
例えば、i=0の時は document.querySelectorAll("button")[0]になります。
i=1の時は document.querySelectorAll("button")[1]になります。
ループするごとに違う要素が指定されるのです。
そんな時に、thisを使用すると、"現在指定されている要素"の代わりになるみたいです。ほかにも色々使用方法があるみたいですけど、今回に限るとthis は
document.querySelectorAll("button")[i] の部分を指定しています。（ぶっちゃけあんまり良くわかってない笑）
オブジェクトの作成
オブジェクトは、複数のプロパティを格納したものです。例えば、生徒が5人いてみんな同じ3教科のテストを受けました。その時のそれぞれの点数を格納するときとかに使用します。
つまり、同じプロパティを持つ複数の変数を作るときに便利な機能でしょうか。
Example
| 生徒名 (国籍) | 英語 | 数学 | 国語 |
|---|---|---|---|
| BOB (USA) | 98 | 80 | 35 |
| JOHN (AUS) | 70 | 90 | 85 |
| SARAH (FRA) | 50 | 50 | 100 |
こんな表があった時に、それぞれこんな感じにオブジェクトを使用してデータを格納することができるのです。
//BOBのデータ
var student1 = {
Name = "Bob",
English: 98,
Math: 80,
Japanese: 35,
Nationality: "USA"
}
//JOHNのデータ
var student2 = {
Name = "John",
English: 70,
Math: 90,
Japanese: 85,
Nationality: "AUS"
}
//SARAHのデータ
var student3 = {
Name = "Sarah",
English: 50,
Math: 50,
Japanese: 100,
Nationality: "FRA"
}
こんな風に１つの変数に複数のデータを格納することができるんですね。便利！
ちなみにその呼び出し方はこんな感じ。
//BOBのデータ全てを呼び出す。
student1;
//BOBのEnglish部分を抜き出す
console.log(student1.English);
今回はBOBとJOHNとSARAHの3人だったから良いけど、これが10人、100人ってなったら流石に一回一回English, Math, Japanese, Nationalityって書いていくのめんどくさいですよね。
そこで登場するのが、Constructor Function （コンストラクタ関数）です。要は、上記の変数を作るための関数ですね。（特徴は関数の名前の最初が大文字であることです。）
//Constructor Function の作成
function TestScore (name, english, math, japanese, nationality){
this.name = name;
this.english = english;
this.math = math;
this.japanese = japanese;
this.nationality = nationality;
}
// new student4 を作成するとき
var student4 = new TestScore("Amy", 72, 39, 80, "CAN");
// newを忘れないように注意。。
コンストラクタ関数に関数を入れる
ちなみに、このデータには
this.func = function(){alert("calling function");};
とかで関数を入れたりもできる。
//Constructor Function の中のデータに関数を入れる
function TestScore (name, english){
this.name = name;
this.english = english;
this.func = function() {
alert("calling function");
};
}
//student4 で関数を呼び出すときは、、
student４.func;
Switch 文。 Nintendoooooo じゃないSwitch。
Switch文は、基本的に普通のIF ELSE文と似ているものです。
IF ELSEは条件によって、処理が変わるけど、SWITCHはどちらかというとデータによって、処理が変わるイメージを持ちました。
// あらかじめ 変数nameは定義しておく必要はあり。 nameのデータによって処理かえる。
switch( name ) {
//nameがドラえもんだったら、、
case "ドラえもん":
console.log("僕ドラえもん〜！");
break;
//nameがピカチュウだったら、、
case "ピカチュウ":
console.log("ピッ ピカチュウ！");
break;
//nameがカオナシだったら、、
case "カオナシ":
console.log("あ、あ、う、あ、う。");
break;
//nameがそれ以外だったら、、
default:
console.log("あなたのことを知りません。");
break;
}
JavaScriptでなんちゃってAnimationを適用する
使うのは setTimeout() 関数です。
必要な引数は
setTimeout(function, ミリ秒数)
今回はボタンが押されたら透明度を50%にします。
手順としては、CSSで透明度50%になるクラスをつけて、ボタンがクリックされれば、そのクラスを追加して、1秒後にクラスを外してもとの透明度に戻すという処理です。
.animation{
opacity: 0.5;
}
function applyAnimation(){
// button というクラスを持つ要素に animation というクラスを追加する
document.querySelector(".button").classList.add("animation");
// 1秒後に animation クラスを外す
setTimeout(function(){
document.querySelector(".button").classList.remove("animation")
}, 1000)
}
これでなんちゃってアニメーションの完成です。
以上で JavaScript と DOM 応用編完結です。