JavascriptをHTMLファイルに反映させる方法

はじめに

学習中のJavascriptについて自分用の備忘録としても書いていきます。
間違っている所等、ご指摘あれば教えてください。

script要素

Script要素とはHTMLであり、HTML内で実行できるコードを埋め込んだり、参照する事のできる要素です。

<script src = “参照したいファイル”></script>

以上のように記述します。
script要素はbody要素の一番最後に記述することが推奨されています。
理由は、HTMLはブラウザで上から読み込まれていくため、複雑なJavascriptがHTMLの上部に記述されていると、Webページが読み込まれるのが遅くなってしまうからです。（アプリケーションによってはhead要素内に記述することもある）

イベント

JavascriptはHTMLで「何かが起きたら」コードが実行されます。
その「何かが起きたら」をイベントと呼びます。
具体的には、「クリックをする」や「カーソルが上にくる」などになります。
また、イベントを認識してJavascriptのコードが実行されることを「イベントが発火する」と言います。

イベント発火のメソッド

イベントを認識して発火させる為には、どんな処理を発火させるかという記述が必要になります。
イベント発火の処理は’addEventListener’というメソッドを使用します。

要素.addEventListener('イベント名', 関数)

上記のように記述します。

HTML要素の取得

イベント発火をした際の処理を決めたら、今度は何に対してイベント発火をさせたいのかを決める必要があります。
JavascriptがHTMLを読んで認識できるものはHTMLのclass/id/selectorの３つです。
classを認識するには’getElementsByClassName’メソッドを使用します。
idを認識するには’getElementById’メソッドを使用します。
selectorを認識するには’querySelectorAll’メソッドを使用します。
それぞれ

docment.取得メソッド('取得したいclassやid名')

上記のように記述することでHTMLの要素を取得できます。

HTML要素を取得してイベント発火させる

上記で書いた取得と処理をつなぎ合わせる事で、HTMLで動的が処理を実行させる事ができます。
例として指定のclassのHTML要素に対してマウスカーソルが上に来た時発火させる記述を書きます。

 const mouseOver = document.getElementById("header")

  mouseOver.addEventListener('mouseover', function(){
    console.log("mouseover OK")
  })

上記の記述は、まず変数mouseOverを定義して、headerというclassの要素を取得します。
次に、変数mouseOverで取得した要素に対し、マウスが上にきたらコンソールに’mouseover OK’と表示するという処理を記述しています。
‘mouseover’はマウスカーソルが要素の上にきたらイベント発火するというものですが、この他にもマウスカーソルが外れたらという’mouseout’やクリックしたらという’click’などの多数の発火条件の指定方法があります。

終わりに

まだまだ勉強中の身のため、基礎の基礎しか書けていませんが、同じように勉強中の方にとって参考になれば幸いです。