ネットワークプログラミング実習 2026年度前期(2年)

今日、やったこと querySelectorAll() forEach()メソッド eventオブジェクト event.target、event.currentTarget 今日のホワイトボード querySelectorAll() 以下のサンプルで確認。 図　querySelectorAll()確認用サンプル JaavScriptには、セレクタを指定してタグを取得する以下の2つのメソッドがある。 図　querySelector()とquerySelectorAll() 複数のタグに対して、同じイベントに同じイベントハンドラを指定した場合は、querySelectorAll()が便利。 なお、セレクタは下表のようになる。 対象 セレクタ タグ タグ名 ID #ID名 クラス .クラス名 forEach()メソッド 配列から要素を順に取り出して処理をおこなうときに便利。 図　forEach()メソッド for()でもできるけど、1行で簡潔に書くことができる。 ソースコードをあげておきます。 HTMLファイル JavaScriptファイル eventオブジェクト、targetプロパティ、currentTargetプロパティ イベントハンドラ関数にて、eventオブジェクトで発生したイベント情報を確認できます。 eventオブジェクトの以下のプロパティでイベントが発生した要...

今日、やったこと querySelector()＋addEventListener()練習問題 HTMLからJavaScriptを分離 今日のホワイトボード querySelector()＋addEventListener()練習問題 練習問題１ イベントハンドラに表示メッセージを渡す。 図　練習問題1 練習問題1.html 練習問題2 テキストボックス入力内容を表示する。 図　練習問題２ 〇<input>タグの入力・選択内容 <input>タグで入力・選択した内容（value属性値）をJavaScriptで取得するには、valueプロパティを使う。 〇<p>タグの表示内容 <p>タグの表示内容をJavaScriptで変更するには、textContentプロパティを使う。 <p>タグだけでなく、開始タグ、終了タグの間(テキストエレメント）へのアクセスはtextContentプロパティ。 練習問題2.html 練習問題3 図　練習問題3 〇文字列->数値 valueプロパティで取得した<input>タグのvalue属性値は文字列として扱われている。 ...

今日、やったこと [練習問題]練習問題3 [練習問題　解説]練習問題3 イベントとイベントハンドラ 今日のホワイトボード [練習問題　解説]練習問題3 正解例をあげておきます。 3-1 オブジェクトの配列を作る問題。 3-2 配列の要素の最小値、最大値を検索。 3-3 オブジェクトにメソッドを追加。 メソッドからプロパティにアクセスするには this.プロパティ名 でアクセス。 3-4 メソッドは 　プロパティ名: function() {   } を 　 プロパティ名() {   } と　 ：function 　を省略できる。 3-5 メソッドの引数。 3-6 3-4のオブジェクトを配列化。 3-7 プロパティを関数が代入された変数にすることで、メソッドを作ることもできる。 HTMLのイベント処理をJavaScriptで行う HTMLのボタンクリックやテキストボックス入力などのイベントが発生した際、JavaSriptで処理を行うことができる。 タグのonXXX属性でイベントとイベントハンドラを紐づけ イベントとイベントハンドラ（処理を行う関数）の紐づけはタグの onXXX属性 で設定できる。（下図の上） 図　タグのOnXXX属性でイベントとイベントハンドラを紐づけ（上図の上） イベントハンドラに自作関数を指定 当然、自作関数をイベントハンドラに指定することもできる。 JavaScriptでタグとイベント、イベントハンドラを紐づけ タグのOnXXX属性を使わずに、JavaScriptだけでタグとイベント、イベントハンドラの設定もできる。 ①querySelector()関数でタグを取得 ②取得したタグのonXXXプロパティにイベントハンドラ(関数)への参照をセット 図　onclickプロパティに関数への参照を代入する ブラウザはJavaScriptをいつ実行...