【入門編】イベントと関数 ～初心者向け～

今回は、Javascript における重要な概念になりますが「イベントと関数」について学習したいと思います。

イベントというのは何なのか？ということですが、
イベントというのはユーザーの操作の事になります。例えば、「ボタンをクリックする」とか、「ページが読み込まれた」などの、特定の状況のことを表します。

いっぽうで、関数というのは何なのかというと、特定の処理を実行して結果を返すプログラムのブロックの事をいうのですが、この関数をイベントに応じて呼び出すことで、
ボタンがクリックされたり、ページが読み込まれたタイミングで何らかの処理を実行させるといったことが出来るようになります。

HTMLだけだと画面が表示されるだけの静的ページしか作れないんですが、イベントと関数を組み合わせて利用することでページに動きをつける事が出来るようになります。
でわ、実際に画面を動かしながら確認した方が理解しやすいので早速やってみたいと思います。

画面にボタンを追加する

先ずは、前回と同じように、空のHTMLを作成して、空のJavascriptファイルを読み込むようにしておきます。

そして、画面にボタンを１つ追加します。

ボタンを追加するには、このようにBodyタグの中に 「button タグ」 を記述します。
タグで挟まれた中に書いた文字列はボタンに表示されるラベルとなりますので、クリックというボタンを追加しておきます。

ボタンを表示するだけであればこれで大丈夫なんですが、後で Javascript からこのボタンの情報を取得しやすいように、
ボタンにID属性（id=”myButton”）を追加しておきたいと思います。

このID属性というのは、ページ内で一意な名称となるように（つまり同じ名前が重複しない形）にする必要があります。
そして、LiveServerを起動するとボタンが表示されるようになるかと思います。

ボタンにイベントを追加する

今度は、追加したボタンをクリックしたときに、アラートが表示されるようにしてみたいと思います。

まずは、ボタンをクリックした時に実行する為の関数を用意しておく必要があるので、
Javascript ファイルの方に関数を追加します。

関数はどのように書くのかというと、「function 」というキーワードを使って定義しますので、このように記述します。
function と記述した後に書いてある関数名は、「関数につける名前」を指定します。
また、引数は、関数に渡す値を指定していて、カンマで区切って複数の引数を指定することが出来ます。
戻り値は、関数の処理結果として返される値で、return 文を使って指定します。
この戻り値がない場合は、return 文は省略することが可能です。

Javascript 側ではどのように書くかというとこのように書きます。

ここでは、「myFunction」という名前の関数を作成していて、
関数の中の処理として、「ボタンがクリックされました」とアラートが表示されるようにしています。
「alert」という関数は、引数に渡した文字をポップアップウィンドウで表示するものになります。

この関数は、戻り値は不要なので、return 文は省略しています。

そして、イベントを追加する方法ですが、
どのように書くかというと、

このように button タグの中に、「onclick=”<関数名>”」のように記述してあげることで設定することが出来ます。

これは、ボタンをクリックした際に onclick の中に記述した処理が実行されるのですが、
この場合は、クリックしたときに Javascriptファイル内にある、myFunction関数を呼び出しています。

これで、画面を表示してボタンをクリックしてみると、アラートが表示されれば正常な状態です。

画面にテキストボックスを追加する

では次に、画面に文字を入力する為の、テキストボックスを追加してあげて、そこに入力された値をJavascriptで表示できるようにしてみたいと思います。

先ずは、画面にテキストボックスを追加する方法ですが、このように記述します。

このようにテキストボックスは、「input」タグ を記述してあげて 「type=”text”」と記述すると追加することが出来ます。
こちらも、先程の button と同じように Javascript から扱えるように、ID属性を追加して、”myInput” としておきます。

そして、Javascript側でテキストボックスに入力された文字を取得するようにします。

まず、どのHTML要素の情報を取得するかを指定する必要がありますが

HTMLドキュメントの中から特定の要素を検索するには 「document.getElementById(”<ID属性の名前>”)」 という関数を利用します。

この、document.getElementById で取得された情報は DOM（Document Object Model）と呼ばれていて、

要素の名前だったり属性値なんかを取得する事が出来たり、変更して書き換えたりすることが出来る便利なものになります。

なので、この document.getElementById 関数に引数でID属性を指定してあげると、一致するID属性のDOMを取得することができます。

ここでは、document.getElementById 関数で取得したDOMを、myInput という名前に入れているのですが、

これは何か？というと、変数というものになります。

変数というのは、データを格納するための入れ物のようなもので、このように var で宣言をしてあげて、適当な名前でデータを保存しておくことが出来ます。

そして、取得したテキストボックスのDOMからどのように入力された値を取り出すかというと、このように記述します。

この変数の value プロパティを参照することで、テキストボックスに入力された文字を取得できるようになります。

この値を alert の引数に入れてあげることで、入力された値がアラートで表示できるようになります。

テキストボックスに自分の名前を入力してボタンをクリックしてみましょう。

ボタンを押した際に、名前がアラートで表示されていれば想定通りです。

文字や変数を連結する

今度は、入力した値をJavascriptで加工して、「こんにちわ！<XXX>さん」のようにしてみたいと思います。

このように、文字列や変数は、「＋」演算子で連結することが出来ます。

画面で確認すると、このように、「こんにちは！XXXXさん」と表示されるようになりました。

Javascriptで画面の文字を変更する

最後に、アラートで表示するのではなく、Javascriptで組み立てた文字を画面に表示出来るようにしてみたいと思います。

まずは、Javascriptで組み立てた文字を画面に出力する場所を用意しておく必要があるのでどのようにすればよいかというと

このように、HTMLに 空の「divタグ」を追加しておきます。

この DivタグにもID属性を追加しておきたいと思います。ここでは”myOutput” にしておきたいと思います。

そして、Javascript 側は、どのようにすればよいかというと、
テキストボックスと同じように、document.getElementById で出力場所のDOMを取得します。

そして、取得した出力場所の 中に文字を追加したい場合は、このように、「innerHTML」プロパティに値を設定してあげるとよいので、
Javascriptで組み立てた文字を innerHTML に渡してあげます。

これで、画面に表示させる準備ができました。
ボタンを押した際に、このように名前が画面に表示されていれば想定通りとなります。

今回の学習ポイント

• onclick イベントハンドラー で関数を呼び出すことが出来る
• document.getElementById(””) を利用してDOMが検索出来る
• DOMの value プロパティ を参照すると 設定値を取得出来る
• Javascript の 文字列は、「＋」演算子で連結が出来る
• DOMの innerHTML プロパティ に値を設定すると、表示されている文字を変更出来る

チャンネル登録 よろしくお願いします

こんにちわ！JS太郎です‼
このチャンネルでは、はじめてプログラミングをする人はもちろん、小学生からでも理解出来るように判りやすく解説しています。
是非、一緒にプログラミングを学んでご自身の付加価値を高めていきましょう。