学習[39]日目 - プログラミング未経験おじさんの備忘録

昨日に引き続き本日もjavascriptに関して学習しました。

基礎で学んだhtmlとcssに利用する事で表示に動きを出す様な事が出来るみたいなので記述しながら見ていこうと思います。

DOMとは？
DOMはどの様に使って何が出来るの？

DOM（Document Object Model）の略称で、HTMLの一つ一つの要素を、JavaScriptのオブジェクトとして扱えるようにする仕組みです。
HTMLの要素に対応するオブジェクトのことを、DOMオブジェクトといいます。

＃DOMオブジェクトの取得
document.getElementById("id名");
document.getElementsByClassName("クラス名");
document.querySelector("セレクタ名");

上記の様な方法でDOMオブジェクトを取得したとします。

取得した後ですが、js上のイベントという概念があるので、これを用いて

クリックするというイベントが発生した時にどの様な処理を実行するかを下記の様に定義していきます。

#DOMオブジェクトにイベントが起きた時に関数を実行するメソッド
文法構成
(DOMオブジェクト).addEventListener("イベント名", 関数);
例）
let btn = document.querySelector("button")
function sayGreeting(){
  console.log("おはよう");
}
btn.addEventListenner("click",sayGreeting);

上記の様に記述したのですが、ここで大事な部分が出てきます。

基本的にjsファイルはcssと同様にhtmlにおいてlinkタグを用いてheadタグ内に記述するかと思うのですが、htmlファイル内の記述が上から順番に読まれる際にjsファイルに記述した内容がheadタグ以降に記述されている場合にはエラーが発生します。

このエラーを防止するには、ページの読み込みというイベントが発生した後に関数の処理を行う様な記述にしてあげる必要があります。

function sayGreetingWithButton(){
let btn = document.querySelector("button")
function sayGreeting(){
 console.log("おはよう");
}
btn.addEventListenner("click",sayGreeting);
}
window.addEventListener("load",sayGreetingWithButton);

上記の内容を追加することでloadイベント関数が実行される様になります。

さらに言うとこの記述は先日学習した無名関数を利用することで下記の様に2箇所のリファクタリングが可能となります。

window.addEventListener("load", function() {
  let btn = document.querySelector("button")

  btn.addEventListenner("click",function(){
  console.log("おはよう");
  });
});

この様に短く出来るので書き方含めてもっと理解を深めていこうと思います。

最後までお読み頂きありがとうございます。

明日も仕事頑張らねば。。