JavaScriptの基本箇所についての復習③(DOM)

#はじめに
jsは色んな事に使える言語ですが、多くはWebページを動的にするために使用されているようです。
この記事からは、jsを使って動的なWebページを作るための手法について書いていきたいと思います。

#内容
動的なWebページを作るために、まずはDOMについて学びたいと思います。

#実行

DOMとは"Document Object Model"の頭文字を取った用語で、
htmlコードのクラスやidをJavaScriptでオブジェクトとして使う事ができる仕組みです。

例えば、

前略
<div class = "btn">押す</div>

というhtmlファイルがあったとします。
これは"押す"というテキストに"btn"というクラスがついています。
このテキストの色を赤にしたい時は、cssファイルを用意して

.btn{
 color: red;
}

と書いてあげれば良いのでした。
あんまり使われない表現かもしれませんが、
btnクラスをテキストにつけることによって、cssファイルの"色を変える"という処理を実行するともいえます。

同じようにして、btnクラスをテキストにつけることによって、JavaScriptの特定の処理を実行するということもできます。
例えば、"テキストをクリックしたら、コンソール画面（別途投稿予定）に'押されました'と表示される"という処理は次の様に書きます。

let btn1  = getElementsByClassName("btn");
btn1.addEventListener("click", function(){
 console.log('押されました');
});

見覚えのない文字列が出てきたので、一つ一つ解説していきます。

まず1行目。let btn1 = の部分は変数を宣言する部分ですので問題ないかと思います。
初見なのは右辺のgetElementsByClassName("btn");の部分です。
これはbtnクラスをDOM要素として取得するという意味となります。

そんなこと言われても、なかなか馴染みが無い表現で判りにくいと思います。
しかし、これからプログラミングと付き合っていく上でこの表現には親しんでいく必要があるので、是非とも慣れていってもらえればと思います。

とはいえ"取得する"というのも最初は判りにくい表現なので、

htmlファイルのbtnクラスとJavaScriptファイルの変数btn1をdocument.querySector()を使って関連付けさせた。
それにより、JavaScriptに書かれている"変数btn1を使用した関数"の結果がhtmlファイルの"btnクラスがついたオブジェクト"に適用されるようになる

といったことが起こっていると思ってもらえれば良いと思います。

残りの部分は関数であることは判りますが、btn1.addEventListener("click", 部分を見たことが無いと思います。
ここは、addEventListenerは"こういう時はそういう風に書く"とだけ思ってもらって、その前後について注目してください。
まず後の方にある"click"ですが、これはクリックした時に関数が実行されるという意味になります。
関数が発火する条件を書いています。
clickはそのまま"クリックする"という意味です。この部分も色々な種類があります。

前方のbtn1.は、先ほどのclickを行う対象を指定することになります。
この場合、JavaScriptのコード上でのbtn1に関係する処理は、htmlファイルでのbtnをクラスに持つオブジェクトで行われる、ということになります。

以上のような流れで、DOMを利用した処理が可能となります。
ここで書かれた事以外にも様々な文法があり、それを利用することで様々な複雑な処理が可能になります。今後の記事では、それを少しずつ解説できればと思います。

#注意
本記事は煩雑になってしまったので、今後定期的に修正を行っていきます。