読者です 読者をやめる 読者になる 読者になる

JavaScript本格入門を読む・4

4日目です。ダレてくる頃です。ダレてます。イエーイ
でも4日目が三日坊主にならない境目な気もしてるよ!

5.大規模開発でも通用する書き方を身につける

5-1.JavaScriptにおけるオブジェクト指向の特徴

もっともシンプルなクラスを定義
コンストラクタで初期化する
var Member = function(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
this.getName = function(){
return this.lastName + ' ' +this.firstName;
}
};

var mem = new Member('ai', 'kaneko');
document.writeln(mem.getName());

これ、最初「愛」が「undefined」になって愛が・・・見つからない・・・って思った。

動的にメソッドを追加する
var Member = function(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
};

var mem = new Member('ai', 'kaneko');
mem.getName = function(){
return this.lastName + ' ' +this.firstName;
}
document.writeln(mem.getName());

同一のクラスをもとに生成されたインスタンスであっても、それぞれが持つメンバは同一であるとは限らない。

5-2.コンストラクタの問題点とプロトタイプ

メソッドはプロトタイプで宣言する
プロトタイプオブジェクトを利用することの2つの利点
var Member = function(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
};
var mem = new Member('niconico','太郎');
Member.prototype.getName =function(){
return this.lastName + ' ' +this.firstName;
};
document.writeln(mem.getName());

getNameメソッドどっちでもいけるのか。すてき

プロパティの設定
var Member = function(){};
Member.prototype.sex = '男';

var mem1 = new Member();
var mem2 = new Member();
document.writeln(mem1.sex + '|' + mem2.sex);
mem2.sex = '女';
document.writeln(mem1.sex + '|' + mem2.sex);

プロトタイプオブジェクトが利用されるのは「値の参照時だけ」
(1)静的プロパティは、基本的に読み取り専用
(2)静的メソッドの中では、thisキーワードは使えない

プロパティの削除
var Member = function(){};
Member.prototype.sex = '男';

var mem1 = new Member();
var mem2 = new Member();
document.writeln(mem1.sex + '|' + mem2.sex);
mem2.sex = '女';
document.writeln(mem1.sex + '|' + mem2.sex);
delete mem1.sex
delete mem2.sex
document.writeln(mem1.sex + '|' + mem2.sex);

えー
削除するのは、インスタンス上のsexプロパティっていうの難しい・・・

オブジェクトリテラルでプロトタイプを定着させる
var Member = function(firstName,lastName){
	this.firstName = firstName;
	this.lastName = lastName;
};
Member.prototype = {
	getName : function(){return this.lastName + ' ' +this.firstName;},
	toString : function(){return this.lastName + this.firstName;}
};
var mem = new Member('niconico','太郎');
document.writeln(mem.getName());
document.writeln(mem.toString());

確かにわかりやすくなって・・・のかな・・・・(ドキドキ)

5-3.オブジェクトの継承

継承とは
プロトタイプチェーンの基礎
var Animal = function(){}
Animal.prototype = {
 walk : function() { document.writeln('ポコポコ…'); }
};
var Dog =  function(){};
Dog.prototype = new Animal();

Dog.prototype.bark = function() { document.writeln('ワンワン! '); }

var d = new Dog();
d.walk();
d.bark();

いやー・・・まぁぶっちゃけさ、よくわからなくなってきたよね。

継承関係は動的に変更可能
var Animal = function(){}
Animal.prototype = {
 walk : function() { document.writeln('ポコポコ…'); }
};
var SuperAnimal = function(){}
SuperAnimal.prototype = {
walk : function(){ document.writeln('ダダダダダダ');}
};
var Dog = function(){};
Dog.prototype = new Animal();
var d1 = new Dog();
d1.walk();
Dog.prototype = new SuperAnimal();
var d2 = new Dog();
d2.walk();
d1.walk();

インスタンスが生成された時点で固定され、その後の変更にかかわらず保存される

書いてあることを読めるし、サンプルコードも書いて「お、おう・・・」って思うけど
「本当に理解してるの?」って言われたら「わからないです。。。」ってかんじなんだが!
書いていくうちに身につくのかなぁ・・・

5-4.本格的な開発に備えるために

初歩的なコーディングを行う上ではここまでの内容でも十分ですが

じゃあいいか・・・!
たぶんチャプター5全然理解してないけどオブジェクト指向文楽しくないな!(結論)

6.ブラウザを自在に操る〜ブラウザオブジェクト

やっとブラウザオブジェクトきたーーーーーー!!!

6-1.イベントが発生したら処理を行う

function btn_onclick(){
window.alert('ボタンをクリック');
}
(中略)
<input type="button" value="ダイアログ表示" onclick="btn_onclick()" />

はー動くって楽しい。

window.onload = function(){
document.getElementById('btn').onclick = function(){
window.alert(' ボタンがクリックされました。');
};
};
(中略)
<input id="btn" type='button' value="ダイアログ表示" />

getElementByIdちゃんキター!おひさ!

イベント標準の挙動をキャンセルする
<body oncontextmenu = "return false;">

ほうほう

6-2.ブラウザオブジェクトの基本をおさえる

6-3.ウインドウの操作からダイアログ/タイマーの制御まで

window.onload = function(){
var input = window.prompt('文字列を入力してください', 'redcat1113');
window.alert('入力値' + input);
};

promptメソッド使ったことなかったので書いてみた。
おもしろーい。断然面白くなってきた!
今日はここまでにしようかな。明日はopenメソッドからです。