Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8647

JavaScript と DOM 応用編

$
0
0

DOMとJavaScriptについて、ちょっと理解できてきたので、より踏み込んだところをまとめて行きます。本記事はUdemyの講座を参考にしたメモです。

UdemyのAngelaさんの講座(英語だけどめっちゃわかりやすいです!) → リンク

addEventListenerでクリックしたときに関数を適用する

例えばユーザーがボタンをクリックした時に特定の処理を実行する際などに使用します。

qiita.js
//buttonがclickされたらclicked()関数を適用するdocument.querySelector("button").addEventListner("click",clicked);

※addEventListener()の中に入れる関数は()をつけない。clicked()ではなく、そのままclickedと記載する。

今回はclickされた時に関数を実行する処理でしたが、"click"以外にも"keydown"や"load"など、様々なTypeを指定することができます。
(Type一覧はこちら→ リンク

ちなみに上記では、clicked関数をあらかじめ作成して適用したわけですが、assEventListner内で関数を作成して適用することも可能です。英語ではAnonymus Functionというみたい。

qiita.js
document.querySelector("button").addEventListner("click",function(){alert("this button was clicked");});

関数名がなく function (){処理内容} が直接addEventListenerの中に追加されています。

addEventListenerでキーボードで入力したときに関数を適用する

qiita.js
// addEventSelector で keyboard が押されたときの処理をかく// keydownの詳細がevent として、anonymus functionに渡される。document.addEventListener("keydown",function(event){varkeyPressed=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であったのでメモします。

qiita.js
//足し算の関数functionadd(num1,num2){returnnum1+num2;}//掛け算の関数functionmultiply(num1,num2){returnnum1*num2;}//関数指定によって、適切な関数を適用するfunctioncalculator(num1,num2,operator){returnoperator(num1,num2);}

関数わからなくなったら、Chrome→表示→開発・管理→JavaScriptコンソールで 関数を読み込ませてから debugger; と打ち込んで関数を入れるとその関数がどこで間違っているのかが分かりやすくなります。

qiita.js
//consoleでやるとdebuggerモードになります。debugger;calculator(3,4,add);

JavaScriptで音声を再生する

それでは、ボタンを押した時に音声を再生させるにはどうすれば良いのでしょう。

qiita.js
//音声を変数に格納するvaraudio=newAudio("sound.mp3");//play関数でaudioを再生するaudio.play();//buttonをclickすると、functionが適用されるdocument.querySelector("button").addEventListner("click",function(){audio.play();});

this を使用してコードを省略する

例えば、下記のようにfor文とかを使用すると、毎回指定される要素が違いますよね。

qiita.js
for(vari=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)988035
JOHN (AUS)709085
SARAH (FRA)5050100

こんな表があった時に、それぞれこんな感じにオブジェクトを使用してデータを格納することができるのです。

qiita.js
//BOBのデータvarstudent1={Name="Bob",English:98,Math:80,Japanese:35,Nationality:"USA"}//JOHNのデータvarstudent2={Name="John",English:70,Math:90,Japanese:85,Nationality:"AUS"}//SARAHのデータvarstudent3={Name="Sarah",English:50,Math:50,Japanese:100,Nationality:"FRA"}

こんな風に1つの変数に複数のデータを格納することができるんですね。便利!

ちなみにその呼び出し方はこんな感じ。

qiita.js
//BOBのデータ全てを呼び出す。student1;//BOBのEnglish部分を抜き出すconsole.log(student1.English);

今回はBOBとJOHNとSARAHの3人だったから良いけど、これが10人、100人ってなったら流石に一回一回English, Math, Japanese, Nationalityって書いていくのめんどくさいですよね。

そこで登場するのが、Constructor Function (コンストラクタ関数)です。要は、上記の変数を作るための関数ですね。(特徴は関数の名前の最初が大文字であることです。)

qiita.js
//Constructor Function の作成functionTestScore(name,english,math,japanese,nationality){this.name=name;this.english=english;this.math=math;this.japanese=japanese;this.nationality=nationality;}// new student4 を作成するときvarstudent4=newTestScore("Amy",72,39,80,"CAN");// newを忘れないように注意。。

コンストラクタ関数に関数を入れる

ちなみに、このデータには
this.func = function(){alert("calling function");};
とかで関数を入れたりもできる。

qiita.js
//Constructor Function の中のデータに関数を入れるfunctionTestScore(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はどちらかというとデータによって、処理が変わるイメージを持ちました。

qiita.js
// あらかじめ 変数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秒後にクラスを外してもとの透明度に戻すという処理です。

style.css
.animation{opacity:0.5;}
qiita.js
functionapplyAnimation(){// button というクラスを持つ要素に animation というクラスを追加するdocument.querySelector(".button").classList.add("animation");// 1秒後に animation クラスを外すsetTimeout(function(){document.querySelector(".button").classList.remove("animation")},1000)}

これでなんちゃってアニメーションの完成です。

以上で JavaScript と DOM 応用編完結です。


Viewing all articles
Browse latest Browse all 8647

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>