6月18日(木)3、4コマ目

今日、やったこと

[練習問題]選択用パーツたちを使う

class属性値を変更する

箇条書きを選択用ツールに

今日のホワイトボード

[練習問題]選択用パーツたちを使う

正解例をあげておきます。

HTMLファイル


JavaScriptファイル


class属性値を変更する

JavaScriptからclass属性値を変更するには、タグのclassNameプロパティ経由で行う。

図　class属性値を変更する

HTMLファイル


JavaScriptファイル


箇条書きを選択ツールに（第1段階）

箇条書きを選択用ツールにする。

まずは、cssで箇条書きのマーカーを削除し、枠線をつくる。

図　箇条書きを選択用ツールに（第1段階）

HTMLファイル


CSSファイル


箇条書きを選択ツールに（第2段階）

選択した項目を表示する。

箇条書きもクリックをすると、clickイベントが発生する。イベントハンドラも指定できる。

図　箇条書きを選択用ツールに（第2段階）

HTMLファイル


CSSファイル


JavaScriptファイル


箇条書きを選択ツールに（第3段階）

選択した項目に背景色をつける。

背景色はclass属性で設定できる。

図　箇条書きを選択用ツールに（第3段階）

HTMLファイル


CSSファイル


JavaScriptファイル


次回は

テーブルに追加。


このブログの人気の投稿

5月28日(木)1、2コマ目

今日、やったこと [練習問題]〇×ゲーム 今日のホワイトボード [練習問題]〇×ゲーム 第３段階までの正解例をあげておきます。 HTMLファイル <head></head>内にスタイル情報あり。 JavaScriptファイル 次回は 評価用課題を作ってもらいます。 今度からは静かに寝てもらえるかな。  
続きを読む

5月21日(木)1、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オブジェクトの以下のプロパティでイベントが発生した要...
続きを読む

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プロパティ。 練習問題2.html 練習問題3 図　練習問題3 〇文字列->数値 valueプロパティで取得した<input>タグのvalue属性値は文字列として扱われている。 ...
続きを読む