投稿

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属性値は文字列として扱われている。 ...
続きを読む

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

イメージ
今日、やったこと [練習問題]練習問題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をいつ実行...
続きを読む

4月30日(木)1、2コマ目

イメージ
今日、やったこと オブジェクト＋関数 [練習問題]練習問題３ 今日のホワイトボード オブジェクトのプロパティに関数 オブジェクトのプロパティに関数を指定することもできる。 ※変数に関数を代入できるからプロパティに関数も指定できるはず 図　オブジェクトのプロパティに関数（基本パターン） 図　オブジェクトのプロパティに関数（基本パターン） オブジェクト内の関数は 　 : function を 省略できる 。 図　オブジェクトのプロパティに関数　:functionは省略可 オブジェクト内の関数を　メソッド　と呼ぶ（こともある）。 オブジェクトの関数に引数 当然、引数も利用可能。 図　オブジェクトのプロパティに関数　引数も使える 関数内のthis thisはこのオブジェクトと思って貰えば。 this.プロパティ名で同じオブジェクト内のプロパティの値にアクセスできる。 thisを省略すると、オブジェクト外の変数をアクセスする。 図　オブジェクトとthis 図　オブジェクトとthis アロー関数式＋this アロー関数式内のthisは、functionの関数のthisとは異なる。 ※アロー関数式内でthisが使えないわけではない ...
続きを読む

4月23日(木)1、2コマ目

イメージ
今日、やったこと 関数 [練習問題]練習問題2(関数) オブジェクト 今日のホワイトボード キーワード function を使って関数作成 C言語と違って 戻り値の型指定なし（戻り値があっても） 引数の型指定なし に注意。 図　関数①　functionを使った基本パターン   無名関数 C言語と違って 名前がない関数を作る 関数を変数に代入 ができる。 名前のない関数は 複数の処理を一まとめにしたい 使うのは１箇所だけ（複数箇所から呼び出されれない） の場合に重宝する。 図　関数③　無名関数 アロー関数式 無名関数の簡易表記法と思えば。 図　関数④　アロー関数式 アロー関数式　省略記法 アロー関数式には省略記法がある。 図　アロー関数式　省略記法 ①引数が1個だけ -> ( )省略可 引数が1個 だけなら、 引数を囲む（　） を省略できる。 ②処理は値を返すだけ -> { return }省略可 処理が 値を返すだけ なら、処理のブロックの { } と return を省略できる。 ③2つを合わせることもできる 引数が1個だけ　＋　処理は値を返すだけ　なら2つの省略記法を合わせて使える。 [練習問題]練習問題2 正解例を挙げておきます。 2-1 関数の基本パターン。 2-2 無名関数。 2-3 引き続き無名関数。 2-4 アロー関数式。アロー関数式の省略記法は使えない。 2-5 アロー関数式。アロー関数式の省略記法は使えない。 2-6 アロー関数式。戻り値だけの省略記法利用可。 2-7 アロー関数式。引数と戻り値の省略記法利用可。 2-8 アロー関数式。引数と戻り値の省略記法利用可。 オブジェクト 以前やった連想配列。連想配列はオブジェクトの使い方の１つ。 オブジェクトは連想配列と同じように、 { } 内に プロパティ名 (キー) : 値 で定義。要...
続きを読む

4月16日(木)1、2コマ目

イメージ
今日、やったこと JavaScriptの基本文法（配列まで） 練習問題1 今日のホワイトボード この授業では JavaScriptを扱います。 後期にはJavaScriptを使ったWebアプリケーションを作成します。 今まで作ってきたWebアプリケーション、これから作るWebアプリケーション １年次に作ったASP.NET CoreのWebアプリケーションは、サーバー側だけでプログラムが動く。 図　ASP.NET CoreのWebアプリケーション クライアントがWebブラウザだけならいいが、HTMLが使えないスマホアプリの場合、データだけを送信してほしい。 ただ、サーバーはデータを返すだけにすると、Webブラウザは対応できない。 そこで、Webブラウザでのプログラムを動かして、データを表示するようにしたい。 Webブラウザ上ではJavaScriptを使ってデータを表示する。 図　これから作るWebアプリケーション この授業はJavaScriptを使って、 ブラウザ入力値をサーバーに送信する サーバーから返信されたデータをブラウザ上で表示 ことがゴール。 プログラム実行 Webブラウザ（Google Chrome）の開発者ツールを使う。 開発者ツールのコンソールでプログラム入力、実行する。 変数 非厳密モード（デフォルト）なら宣言不要。 宣言時に型指定不要。値を代入時に型が決まる。 この授業ではlet、constで変数宣言。 varは使わない。 図　JavaScriptの変数 等価演算子 C言語に近いのは===。 でも、==も意外と便利。 図　２つの等価演算子 for in、for of for in は 添字 を順に取り出し。 for of は 要素 を順に取り出し。 図　for inとfor ofの違い 連想配列 配列は 添字 と要素が紐づく。 連想配列は キー と要素が紐づく。 図　連想配列 連想配列は要素に順番がない。よって、for ofが使え...
続きを読む