はじめに

最近(対して最近でもない)、angurar.js、react.js、vue.jsなど、
JavaScriptのフレームワーク・ライブラリが人気を博しております。

フロントエンド(ブラウザ)だけではなく、バックエンドでも使えるようになり活躍の場が広がりました。
SPA(Single Page Application)の流行もあって、
様々な現場で扱う機会の増えたJavaScript。

今回は自分の復習も兼ねてJavaScriptの基礎を綴っていこうと思います！

JavaScriptで出来ること

JavaScriptを使うことによって動きのあるWEBサイトを作ることが出来ます。
例を少しあげましょう。

確定ボタンをクリックしたら確認のポップアップが表示される
フォームに入力したら入力文字数が表示される

ごく一例ではありますがこのように、
「〇〇を〇〇したら〇〇させる」
ということができるのがJavaScriptです！

もう少しエンジニアっぽく言い換える

「〇〇を〇〇したら〇〇させる」

これをもう少しエンジニアっぽい言葉に置き換えてみましょう。

〇〇を(ノード)
〇〇したら(イベント)
〇〇させる(関数)

「対象のノード(DOM)に対してイベントが実行されたら関数を実行させる」

というようなイメージでしょうかね！

JavaScriptを書いてみよう！

というわけで、
ここからはそれぞれに対して具体的にどんな記述をしていくのか説明していきます！
例としてボタンがクリックされたらアラートを表示するというものをやってみましょう！

因みにHTMLは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8"/>
  <title>なるべくわかりやすいJavaScript</title>
</head>
<body>
  <button id="btn">押したらアラートを表示</button>
  <script>
    // ここにJavaScriptを書く
  </script>
</body>
</html>

表示させるとボタンがぽつんとある画面ですね。シンプル。

ノードを取得する

まず初めにノードを取得しましょう。
詳しくは説明しませんが、ノードというのはDOMと呼ばれる仕組みの中における要素の事をさし、それに対してイベントを設定したり、関数を適用させることで動きのあるWEBサイトにできます。
JavaScriptの動作のきっかけとするオブジェクトと考えてもらえればよいと思います！

では実際にノード取得してみます。

<script>
  const btn = document.querySelector("#btn");
</script>

この一行だけでノード取得が可能です！便利！
今回はquerySelectorというAPIを使用していますが、getElementByIdでも問題ありません！

参考

イベントを登録する

では続いて〇〇したらに該当するイベント登録を行います。
今回はイベントリスナを使ってみましょう！

<script>
  const btn = document.querySelector("#btn");

  btn.addEventListener("click", /*関数名/, false);
</script>

これでクリックしたら関数実行という紐付けが完了しました！
簡単ですね！

イベントリスナ以外にもいくつかイベント登録する方法が用意されています。
HTMLタグに記述できるイベントハンドラ、
ノードに設定できるイベントプロパティなど。

個人的には記述が区別でき、複数イベントを登録できるイベントリスナが好みですが、
現場、メンバーによって異なると思いますので知っておいて損はありません！

参考

関数を作る

それでは最後に関数を書きましょう！

<script>
  const btn = document.querySelector("#btn");

  function viewAlert(e) {
    alert("アラートです");
  }

  btn.addEventListener("click", viewAlert, false);
</script>

アラートを表示させる関数viewAlertを実装し、
addEventListenerの第二関数に関数名を記述すればOKです。
簡単すぎる…！！

ここまでをコピペしたらボタンをクリックしてみてください。
アラートが表示されるはずです！

関数についてはメインロジックを書くので慣れが必要です。
が、慣れれば逆にメインロジックだけを書けばいいので整理もしやすいと思います！

最後に

いかがでしたでしょうか！？

バラバラに考えると記述の役割が異なるので理解しやすいのではないかと思います！

ご指摘等あればコメントをお願いいたします！
最後までお読みいただきありがとうございましたー！

またどこかでお会いしましょう！