tenjin.web/4 JavaScript基礎ワークショップ

自機をつくろう! - オブジェクトを知る

はじめに、ヘルパー関数の使い方を確認...

// 右上のRunボタンで実行してみましょう
ok( true, '成功' );
ok( 1, 'これも成功' );
ok( false, '失敗' );
ok( null, 'これも失敗' );
log( 'ログを', '出力します', true );
error( 'エラーです!' );

オブジェクトを使ってみよう(1)

// ダブルクリックで編集できます
// 全部のテストをパスしましょう
var tama={};
ok( tama.name == 'tama', '文字列のプロパティ' );
ok( tama.age == 1, '数値のプロパティ' );

オブジェクトを使ってみよう(2)

var tama={};
ok( typeof(tama.mew) == 'function', '関数のプロパティ(メソッド)' );
ok( tama.parent.age == 7, 'オブジェクトのプロパティ' );

オブジェクトを使ってみよう(3)

var tama = {
  name : 'tama',
};
var prop = 'FIXME';
ok( tama[prop] == 'tama', 'プロパティは文字列でアクセスもできます' );

プロパティを列挙する

var tama = {
  age : 1,
  name : 'tama',
};

var keys = [];
var values = [];
for(var prop in FIXME){
}

ok( FIXME == 'age,name', 'プロパティ名を集めてみよう' );
ok( FIXME == '1,tama', 'プロパティの値を集めてみよう' );

thisを理解しよう

ok(this === 'FIXME', 'グローバルスコープのthis');

(function(){
  ok(this === 'FIXME', '関数の中のthisは変わるだろうか');
})()

var tama = {
  mew : function(){
    ok(this === 'FIXME', 'メソッドのthisは何だろう');
    ok(this.name == 'tama', 'メソッドの中からプロパティにアクセスしてみよう');
  },
}
tama.mew();

隕石をとばそう!! - クラスを使う

コンストラクタを使ってみよう

function Cat(name){
  ok(this.constructor == 'FIXME', '生成されたオブジェクトのconstructorプロパティってなんだろう');
}

var tama = new Cat('tama');
ok(tama.name == 'tama', 'コンストラクタの引数をプロパティにセットしよう');
ok(tama.mew() == 'tama: mew!', 'コンストラクタの中でメソッドを追加しよう');

prototypeを使ってみよう(1)

function Cat(){}
Cat.prototype = {
}

var tama = new Cat();
ok(tama.mew() == 'mew', 'prototypeにメソッドを追加してみよう');

prototypeを使ってみよう(2)

var hello = 'hello';

ok(hello.wrap() == '(hello)', '文字列に便利なメソッドを追加してみる');

var hi = 'hi';
ok(hi.wrap() == '(hi)', '後からつくった文字列にも追加されていることを確認');

変数のスコープを知る

var scope = 'GROBAL';
ok(scope == 'GROBAL', 'ここはグローバルスコープです');

(function(){
  ok(scope == 'FIMXE', 'ここではどんな値になるでしょう');
  
  var scope = 'LOCAL';
  ok(scope == 'FIMXE', 'ここはローカルスコープです');
})();

ok(scope == 'FIMXE', 'ここではどんな値になるでしょう');

setTimeout/setIntervalのthis

setTimeout(function(){
  ok(this == FIXME, 'setTimeoutのthisは誰だろう');
}, 200);

var tama = {
  name : 'tama',
  mew : function(){
    setTimeout(function(){
      ok(this.name == 'tama', 'thisが変わってしまって名前を参照できない');
    }, 400);
  },
};
tama.mew();