5月14日(木)1、2コマ目
今日、やったこと
- querySelector()＋addEventListener()練習問題
- HTMLからJavaScriptを分離
今日のホワイトボード
querySelector()＋addEventListener()練習問題
練習問題１
イベントハンドラに表示メッセージを渡す。
|
| 図 練習問題1 |
練習問題1.html
練習問題2
テキストボックス入力内容を表示する。
|
| 図 練習問題２ |
〇<input>タグの入力・選択内容
<input>タグで入力・選択した内容（value属性値）をJavaScriptで取得するには、valueプロパティを使う。
〇<p>タグの表示内容
<p>タグの表示内容をJavaScriptで変更するには、textContentプロパティを使う。
<p>タグだけでなく、開始タグ、終了タグの間(テキストエレメント）へのアクセスはtextContentプロパティ。
<input>タグが1グループのラジオボタンだけならこれでOK。
練習問題2.html
練習問題3
|
| 図 練習問題3 |
〇文字列->数値
valueプロパティで取得した<input>タグのvalue属性値は文字列として扱われている。
文字列を数値に変換するには、Number()関数を使う。
もし、変換できない場合（"abc"とか）、NaNが返される。
練習問題3.html
[HTMLとJavaScriptを分離する]はじめに
簡単なJavaScriptプログラムならHTMLファイル中に書いても問題はないが、プログラムの行数が増えると、可読性が落ちる。
そこで、HTMLとJavaScriptを分離（別々のファイルにする）して可読性を上げる。
|
| 図 HTMLファイルとJavaScriptファイルに分離 |
HTMLファイルからJavaScriptファイルを読み込むには、<script>タグのsrc属性でJavaScriptのファイル名を指定。
このとき、相対パスで指定する場合、HTMLファイルがあるディレクトリがカレントディレクトリ。
|
| 図 <script>タグのsrc属性 |
[HTMLとJavaScriptを分離する]サンプルアプリケーション
以下を作った。
|
| 図 サンプルアプリケーション |
分離前.html
HTMLファイル中にJavaScriptもある。
選択されたラジオボタンを取得
JavaScriptで選択されたラジオボタンを取得するには、querySelector()の引数で
”選択された<input>タグ"を指定する。
|
| 図 querySelector()で選択されたラジオボタンを取得 |
ただし、
- 別の<input>タグがある
- ラジオボタンではなく、複数選択可能なチェックボックス
等の場合はセレクタを変更する必要あり。
選択値（value属性値）はvalueプロパティで。
[HTMLとJavaScriptを分離する]分離後
HTMLファイル
<script>タグのsrc属性でJavaScriptファイルを指定。
JavaScriptファイル
<script>タグの中身がそのまま。
練習問題
以下のようなトグルスイッチ的なボタン。
 |
| 図 練習問題 |
HTMLファイル
JavaScriptファイル
次回は
練習問題。
次々回に評価用課題を作ってもらう予定。
