kaetsu.js #03

391 views

Published on

  • Be the first to comment

  • Be the first to like this

kaetsu.js #03

  1. 1. 1 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07kaetsu.js #03N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
  2. 2. 2 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07オブジェクト / ハッシュ•  データ型の一種"•  もの / 表"•  属性の集まり" -  名前付きのデータ属性" -  名前付きのデータアクセス用属性" -  内部属性(気にしなくても良い)
  3. 3. 3 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07オブジェクト型の変数の作成var chiko = {};
  4. 4. 4 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07属性と属性値の追加•  キー (key):属性の名前"•  バリュー (value):属性の値""chiko["name"] = "N. Shimizu"; "// chikoにname属性を追加している
  5. 5. 5 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07属性値の変更•  同じ属性に対して代入を行う"•  chikoのname属性を変えている例""chiko["name"] = "Noritada Shimizu";
  6. 6. 6 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07属性値の参照•  二通りの参照方法がある" -  変数名.属性名" -  変数名["属性名"]"•  chikoのname属性を参照している例:"console.log(chiko.name);"console.log(chiko["name"]);"
  7. 7. 7 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07未定義の属性も参照できる•  評価値はundefinedとなる"•  例"> console.log(chiko.aho);"undefined"> console.log(chiko.genius);"undefined 注意:>はプロンプト
  8. 8. 8 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07練習問題•  次の属性を持つオブジェクトを作成しよう" -  name (氏名)" -  code(学籍番号)" -  grade(学年)"•  属性値は自分のものを指定してみよう"•  指定した属性を参照してみよう"
  9. 9. 9 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07例var student = {};"student["name"] = "Kaetsu Taro";"student["code"] = "s120000";"student["grade"] = 1;"
  10. 10. 10 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07例その2var student = {};"student.name = "Kaetsu Taro";"student.code = "s120000";"student.grade = 1;"
  11. 11. 11 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07オブジェクト作成時に初期化を済ませるには•  {}の中に属性と初期値のリストを書く"var chiko = {" name: "N. Shimizu"," code: "chiko"," grade: 20"};
  12. 12. 12 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07属性値には関数も指定できるchiko.hello = function(){" console.log("Hello!");"};"// 名前のない関数を作成して、"// chiko のhello属性値としている"
  13. 13. 13 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07属性値にした関数の呼び出し•  変数名.関数名(); で呼び出せる"•  chikoオブジェクトのhello関数を呼び出す例:""> chiko.hello();"Hello! 注意:>はプロンプト
  14. 14. 14 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07メソッド:属性値にした関数•  変数名.関数名(); で呼び出せる"•  chikoオブジェクトのhello関数を呼び出す例:""> chiko.hello();"Hello! 注意:>はプロンプト
  15. 15. 15 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07引数ありのメソッドも定義できる> chiko.hello = function(target){" console.log("Hello! " + target);"};"> chiko.hello("World");"Hello! World 注意:>はプロンプト
  16. 16. 16 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07自分の属性値を参照するメソッド> chiko.email = function(){" return this.code + "@kaetsu.ac.jp";"};"> chiko.email();"chiko@kaetsu.ac.jp 注意:>はプロンプト
  17. 17. 17 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07this:自分自身への参照> chiko.email = function(){" return this.code + "@kaetsu.ac.jp";"};"> chiko.email();"chiko@kaetsu.ac.jp 注意:>はプロンプト
  18. 18. 18 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07練習問題その2•  メールアドレスを返すメソッドを追加しよう"•  次の自己紹介文を返すメソッドを追加しよう
「私は○○です。△年生です。メールアドレスは××です。」
  19. 19. 19 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07練習問題その3•  名前を設定するメソッド、setNameを追加しよう" -  引数を一つとる" -  引数に指定された文字列をname属性の値とする"
  20. 20. 20 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07練習問題その4•  次の順番にメソッドを実行してみよう" 1.  自己紹介をするメソッド" 2.  setName" 3.  自己紹介をするメソッド
  21. 21. 21 N. Shimizu (chiko@kaetsu.ac.jp / @chikoski) 2012/05/07今日のまとめ•  オブジェクト" -  属性のあつまり" -  属性 - 属性値"•  メソッド" -  属性値となった関数" -  this で自分自身を参照できる"

×