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

今日、やったこと

  • オブジェクト＋関数
  • [練習問題]練習問題３

今日のホワイトボード

オブジェクトのプロパティに関数

オブジェクトのプロパティに関数を指定することもできる。

※変数に関数を代入できるからプロパティに関数も指定できるはず

図　オブジェクトのプロパティに関数（基本パターン）

図　オブジェクトのプロパティに関数（基本パターン）


オブジェクト内の関数は

　: function

を省略できる。

図　オブジェクトのプロパティに関数　:functionは省略可


オブジェクト内の関数を　メソッド　と呼ぶ（こともある）。


オブジェクトの関数に引数

当然、引数も利用可能。

図　オブジェクトのプロパティに関数　引数も使える


関数内のthis

thisはこのオブジェクトと思って貰えば。

this.プロパティ名で同じオブジェクト内のプロパティの値にアクセスできる。

thisを省略すると、オブジェクト外の変数をアクセスする。

図　オブジェクトとthis

図　オブジェクトとthis


アロー関数式＋this

アロー関数式内のthisは、functionの関数のthisとは異なる。

※アロー関数式内でthisが使えないわけではない

図　アロー関数式とthis

図　アロー関数式とthis


次回は

練習問題３の解説。

JavaScriptでHTMLを操作する。


 







このブログの人気の投稿

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月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 アロー関数式。引数と戻り値の省略記法利用可。 オブジェクト 以前やった連想配列。連想配列はオブジェクトの使い方の１つ。 オブジェクトは連想配列と同じように、 { } 内に プロパティ名 (キー) : 値 で定義。要...
続きを読む