おける重要な概念になりますが「イベントと関数」について学習したいと思います。イベントというのは何なのか?ということですが、イベントというのはユーザーの操作の事になります。「ボタンをクリックする」とか、「ページが読み込まれた」などの、特定の状況のことを表します。いっぽうで、関数というのは何なのかというと、特定の処理を実行して結果を返すプログラムのブロックの事をいうのですが、この関数をイベントに応じて呼び出すことで、ボタンがクリックされたり、ページが読み込まれたタイミングで何らかの処理を実行させるといったことが出来るようになります。HTMLだけだと画面が表示されるだけの静的ページしか作れないんですが、イベントと関数を組み合わせて利用することでページに動きをつける事が出来るようになります。実際に画面を動かしながら確認した方が理解しやすいので早速やってみたいと思います。画面にボタンを追加する先ずは、前回と同じように、空のHTMLを作成して、空のJavascriptファイルを読み込むようにしておきます。画面にボタンを1つ追加します。タグで挟まれた中に書いた文字列はボタンに表示されるラベルとなりますので、クリックというボタンを追加しておきます。このボタンの情報を取得しやすいように、ボタンにID属性(id=”myButton”)を追加しておきたいと思います。このID属性というのは、ページ内で一意な名称となるように(つまり同じ名前が重複しない形)にする必要があります。LiveServerを起動するとボタンが表示されるようになるかと思います。ボタンにイベントを追加する今度は、追加したボタンをクリックしたときに、アラートが表示されるようにしてみたいと思います。ファイルの方に関数を追加します。」というキーワードを使って定義しますので、このように記述します。記述した後に書いてある関数名は、「関数につける名前」を指定します。引数は、関数に渡す値を指定していて、カンマで区切って複数の引数を指定することが出来ます。文を使って指定します。文は省略することが可能です。側ではどのように書くかというとこのように書きます。関数の中の処理として、「ボタンがクリックされました」とアラートが表示されるようにしています。「alert」という関数は、引数に渡した文字をポップアップウィンドウで表示するものになります。タグの中に、「onclick=”<関数名>”」のように記述してあげることで設定することが出来ます。Javascriptファイル内にある、myFunction関数を呼び出しています。これで、画面を表示してボタンをクリックしてみると、アラートが表示されれば正常な状態です。画面にテキストボックスを追加するでは次に、画面に文字を入力する為の、テキストボックスを追加してあげて、そこに入力された値をJavascriptで表示できるようにしてみたいと思います。画面にテキストボックスを追加する方法ですが、このように記述します。「type=”text”」と記述すると追加することが出来ます。Javascript側でテキストボックスに入力された文字を取得するようにします。いう関数を利用します。要素の名前だったり属性値なんかを取得する事が出来たり、変更して書き換えたりすることが出来る便利なものになります。関数に引数でID属性を指定してあげると、一致するID属性のDOMを取得することができます。いう名前に入れているのですが、これは何か?というと、変数というものになります。宣言をしてあげて、適当な名前でデータを保存しておくことが出来ます。取得したテキストボックスのDOMからどのように入力された値を取り出すかというと、このように記述します。プロパティを参照することで、テキストボックスに入力された文字を取得できるようになります。引数に入れてあげることで、入力された値がアラートで表示できるようになります。テキストボックスに自分の名前を入力してボタンをクリックしてみましょう。ボタンを押した際に、名前がアラートで表示されていれば想定通りです。文字や変数を連結する今度は、入力した値をJavascriptで加工して、「こんにちわ!<XXX>さん」のようにしてみたいと思います。このように、文字列や変数は、「+」演算子で連結することが出来ます。画面で確認すると、このように、「こんにちは!XXXXさん」と表示されるようになりました。Javascriptで画面の文字を変更する最後に、アラートで表示するのではなく、Javascriptで組み立てた文字を画面に表示出来るようにしてみたいと思います。空の「divタグ」を追加しておきます。DivタグにもID属性を追加しておきたいと思います。しておきたいと思います。出力場所のDOMを取得します。これで、画面に表示させる準備ができました。ボタンを押した際に、このように名前が画面に表示されていれば想定通りとなります。お願いしますこんにちわ!JS太郎です!!このチャンネルでは、はじめてプログラミングをする人はもちろん、小学生からでも理解出来るように判りやすく解説しています。一緒にプログラミングを学んでご自身の付加価値を高めていきましょう。TypeScriptを利用するためにはvue-p子供にプログラミングを教えるなら、専用のブログを与えるのが最強2020年から小学校でのプログラミング教育が必修となりました。コメントをキャンセル入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。コメント*内容をご確認の上、送信してください。お名前*メールアドレス*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Webの学び舎TwitterFacebookはてブPocketLINE。