初めての JavaScript はクリックイベントで

アイキャッチ画像 JavaScript
2020.04.27

これまで HTML や CSS を学んでいて、もう少しブラウザで出来る表現を増やしたい！と思った時は JavaScript の勉強をお勧めします。

JavaScript を始める前に

JavaScript を始めるに当たって、いくつか悩んだことをご紹介します。

  • Java（ジャバ）と関係あるの？
  • jQuery（ジェイクエリー）って関係あるの？
  • JavaScript （ジャバスクリプト）って何が出来るの？

Java（ジャバ）と関係あるの？

結論からいうと全く関係ないです。名前が似ているだけで Java は業務システム構築、家電、スマホなどもっと幅広い分野で使われる高度なプログラム言語になります。

jQuery（ジェイクエリー）って関係あるの？

こちらは関係あります。JavaScript ライブラリになります。簡単に説明すると JavaScript の記述を短くて簡単に使えるようにしたものです。JavaScript があまり分からなくても jQuery を使えると JavaScript と同じことができます。

javascript（ジャバスクリプト）って何が出来るの？

やれることが幅広いですが、代表的なのは動的に CSS や要素を追加・削除をすることができ、動きのあるページを作ることが出来るようになります。前提としてこれから JavaScript を始めようとしている方は、まず HTML/CSS をある程度理解している必要があります。

説明のベースとなる HTML/CSS の確認

簡単な div要素を用意しスタイルを指定して行きます。今回 JavaScript を使うので、スタイルの指定は id属性を使って指定してます。class属性と同様に指定できますが、CSSでは値の前に #(シャープ)を付けて指定をします。

＜HTML ソース＞

<div id="box"></div>

＜CSS ソース＞

#box {
  width: 100px;
  height: 100px;
  background: orange;
  cursor: pointer;
}

＜ブラウザの表示＞

JavaScript を書く場所

Javascript を書く場所は HTML ファイルに書き込んだり、外部ファイルで管理して読み込むことが可能です。ここでは例として HTML ファイルに書き込む例をご紹介します。

JavaScript を HTML ファイルに書く場合は body の閉じタグ前が推奨されています。script タグで囲った中に JavaScript のコードを書いて行きます。‘use strict’; とありますが、こちらは厳密なエラーチェックができるようになるので書いておくことを推奨します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>サンプル</title>
  </head>
  <body>
    <div id="box"></div>
    
    <script>
      'use strict';

      //ここに JavaScript を書いて行きます。
    </script>
  </body>
</html>

JavaScript のクリックイベント

javascript の全体的なコードの確認は後の方でしますので、まずはコードの流れをザッと確認して行きましょう。

要素の取得

さて、オレンジ色の div要素にクリックイベントを追加したいわけですが、JavaScript で id 属性値から要素を取得する場合は以下のようなコードを書きます。

document.getElementById('id属性値');

今回の例で、属性値は box にしたので以下のようになります。

document.getElementById('box');

イベントと処理の書き方

javascript で何らかのイベントと処理を追加したい場合は以下のようなコードを書きます。

イベントターゲット.addEventListener('イベント', function() {
  ここに処理を書く ;
});

ここのイベントターゲットとイベントと処理ですが、どこが 何をしたら？ これをするという感じでプログラムを書いて行きます。

イベントターゲットの指定

どこが の部分ですが、前項で説明した id 属性を付けた div 要素がクリックされたときに処理をしたいので以下のように書きます。

document.getElementById('box').addEventListener('イベント', function() {
  ここに処理を書く ;
});

イベントの指定

何をしたら？ の部分ですが、イベントの種類にはいくつかあり下記サイトで確認することができます。

こちらのサイトでイベントの種類を確認できます。

クリックイベントは click で使えるのが確認できると思うので、先ほどのコードのイベント部分に click と書きます。

document.getElementById('box').addEventListener('click', function() {
  ここに処理を書く ;
});

処理の指定

これをする の部分ですが、JavaScript では最初から持っている命令がいくつかあるので、今回はその中のアラートを表示させる命令を使って行きます。アラートを表示させる命令は以下のように書きます。

alert('表示させたい内容');

今回はクリックした時に clicked! と表示させたいと思います。

document.getElementById('box').addEventListener('click', function() {
  alert('clicked!');
});

これで id属性がついた div要素 が クリックされたら アラートを出す。というコードになります。下記のオレンジ色のボックスをクリックするとアラートが表示されるので確認して見て下さい。また、全体的なコードを確認したい場合は HTML / JavaScript / CSS ソースの確認 をクリックするとソースが確認できます。

＜ブラウザの表示＞

＜HTML / JavaScript ソース＞

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>サンプル</title>
  </head>
  <body>
    <div id="box"></div>
    
    <script>
      'use strict';

      document.getElementById('box').addEventListener('click', function() {
        alert('clicked!');
      });
    </script>
  </body>
</html>

＜CSS ソース＞

#box {
  width: 100px;
  height: 100px;
  background: orange;
  cursor: pointer;
}

まとめ

HTML/CSS から比べると JavaScript はプログラムになるので少し難しく感じるかもしれませんが、ウェブページ制作で JavaScript を覚えることのメリットはすごく大きいので是非チャレンジしてみて下さい。

コメント

タイトルとURLをコピーしました