Download - 第4回 JavaScript ゼミ
prototype オブジェクト prototype オブジェクトとは
既存のオブジェクトへ・・・ ユーザ定義のプロパティの追加 ユーザ定義のメソッドの追加 オブジェクトの継承
特殊なオブジェクト( オブジェクトから見ればプロパティに相当 )
プロパティ、メソッドの追加 プロパティ追加の書式
オブジェクト名 .prototype. プロパティ名 = プロパティ値 オブジェクト名はインスタンス名では無い プロパティ名は追加したいプロパティのこと プロパティ値は追加したいプロパティの初期値
メソッド追加の書式オブジェクト名 .prototype. メソッド名 = 追加したいメソッド名
基本的な形はプロパティ追加と同じ 追加したいメソッドは function キーワードで定義可能
プロパティ追加プログラム例(1)- 前略 -// Date オブジェクトに note を追加Date.prototype.note = null ;
// インスタンスの作成var today = new Date() ;today.note = " 今日はいい天気 " ;var birthday = new Date(1959,6,3) ;birthday.note = " 私の誕生日 " ;
// 2つのインスタンスを表示document.write(today.note,"<br>") ;document.write(birthday.note,"<br>") ;- 後略 -
補足:以降、以下のことを省略する- 前略 - の内容<html><head><meta http-equiv="Content-Script-Type“content="text/javascript"></head><body bgcolor="#ffffff"><script language="JavaScript" type="text/javascript">
- 後略 - の内容</script></body></html>
プロパティの追加プログラム例(2)- 前略 -function _getDayOfWeek(){
var dayOfWeek=new Array(" 日 "," 月 "," 火 "," 水 "," 木 "," 金 "," 土 ") ;return dayOfWeek[this.getDay()] ;
}Date.prototype.getDayOfWeek=_getDayOfWeek ;
var today=new Date() ;document.write("<center><h2>") ;document.write(" 今日は平成 ") ;document.write(today.getFullYear()-1988," 年 ") ;document.write(today.getMonth()+1," 月 ") ;document.write(today.getDate()," 日 (") ;document.write(today.getDayOfWeek()," 曜日 ) です ") ;document.write("</h2></center>") ;- 後略 -
オブジェクトの継承 継承
継承元オブジェクトに新たにメソッドを加えた新しいオブジェクトを作る JavaScript では「継承に近い」機能を持つ
( 継承自体と同一ではない ) 実装には prototype を利用する
具体的な継承例
theName プロパティtheNum プロパティtheDate プロパティ
displayInfo() メソッド
theName プロパティtheNum プロパティtheDate プロパティ
displayInfo() メソッド
goldPoint プロパティ
継承
Customer オブジェクト GoldCustomer オブジェクト
継承の実装と使用// ---------Customer->GoldCustomer の実装function GoldCustomer(name,num,theDate,goldPoint){
this.base=Customer ;this.base(name,num,theDate) ;this.goldPoint=goldPoint ;
}GoldCustomer.prototype=new Customer ;
// --------- 利用例var customer1=new GoldCustomer(“ 直江” ,100,new Date(),100) ;customer1.displayInfo() ;document.write(customer1.goldPoint()) ;
Function オブジェクト 無名関数
Function を用いることにより無名関数を生成できる 書式:
変数 =new Function(“ 引数1” ,” 引数2” , ・・・ ,”return 戻り値” ) ;(“Function” と先頭が大文字になっていることに注意 )
特徴: 変数にはオブジェクトが格納されている ただし、関数自身は無い
具体例
sum=new Function(“x”,”y”,”return x+y”) ;function sum(x,y){
return (x+y) ;}
・通常の宣言との違い
変数にオブジェクトを格納。sum はオブジェクトとなる。 “sum” という関数を定義。
sum は関数 ( メソッド ) となる。
Object オブジェクトの使用例 インスタンスの生成例 (me インスタンス )
var me = new Object() ; プロパティの追加
me.name=“ 直江” ;me.year=21 ;
メソッドの追加 (hello メソッドの追加 )function hello(){ document.write(“Hello!”) ; }me.hello=hello ;
Object 使用サンプルサンプルプログラム(3)- 前略 -var me=new Object() ;me.name=" 直江 " ;me.year=21 ;
function hello(){document.write("My Name:"+this.name+"<br>") ;document.write("Year:"+this.year+"<br>") ;
}
me.sayHello=hello ;
me.sayHello() ;- 後略 -
演習問題 四則演算それぞれがメソッドとなっている与えられた二つの値を計算するオブジェクトがあったとする。そのオブジェクトを継承によりビット演算にも対応させよ。さらに、 prototype によりビットシフト演算機能も追加せよ。コンストラクタへ渡す引数の値
( 計算させる値 ) は任意とする。結果表示に関して、引数と結果の表 (table タグ ) により表示せよ。形式は問わないものとする。
付録1 HTML タグ
タグの一つ一つはオブジェクト ( エレメント ) として存在 <h1> ・・・ ( 中略 ) ・・・ </h1> ← h1 タグエレメント
入れ子形式記述である必要性 <div> ・・・ ( 中略 ) ・・・ <font> ・・・ </font></div>
font タグは「 div タグに属するエレメント」と認識される→ <div> ・・・ ( 中略 ) ・・・ <font> ・・・ </div></font> は原則不可
基本はタグを入れたら閉じるタグも記述 br タグ ,img タグなどのように閉じる必要が無い物があるが
基本的には < タグ > ~ </ タグ > という書式である
付録2 table タグ
表を作成するためのタグ ( 入れ子形式のタグ ) tr タグ ,td タグ ,th タグを利用し表を形成
tr タグ TableRow の略で、行を作成する
th タグ TableHeader の略で、項目題等を提示するのに利
用 td タグ
TableData の略で、セルを作成するのに利用
table タグのサンプル<html lang=“ja”><head><title>Sample:TableElement</title></head><body><table border=1>
<tr><th>Head1</th> <th>Head2</th>
</tr><tr>
<td>Data1</td> <td>Data2</td></tr>
</table></body></html>