第４回 JavaScript ゼミ

第４回 JavaScript ゼミセクション２－８発表者直江　宗紀

prototype オブジェクト prototype オブジェクトとは

既存のオブジェクトへ・・・ユーザ定義のプロパティの追加ユーザ定義のメソッドの追加オブジェクトの継承

特殊なオブジェクト( オブジェクトから見ればプロパティに相当 )

プロパティ、メソッドの追加プロパティ追加の書式

オブジェクト名 .prototype. プロパティ名 = プロパティ値オブジェクト名はインスタンス名では無いプロパティ名は追加したいプロパティのことプロパティ値は追加したいプロパティの初期値

メソッド追加の書式オブジェクト名 .prototype. メソッド名 = 追加したいメソッド名

基本的な形はプロパティ追加と同じ追加したいメソッドは function キーワードで定義可能

プロパティ追加プログラム例（１）- 前略 -// Date オブジェクトに note を追加Date.prototype.note = null ;

// インスタンスの作成var today = new Date() ;today.note = " 今日はいい天気 " ;var birthday = new Date(1959,6,3) ;birthday.note = " 私の誕生日 " ;

// ２つのインスタンスを表示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>

プログラム例 ( １ ) 結果

プロパティの追加プログラム例（２）- 前略 -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(“ 引数１” ,” 引数２” , ・・・ ,”return 戻り値” ) ;(“Function” と先頭が大文字になっていることに注意 )

特徴：変数にはオブジェクトが格納されているただし、関数自身は無い

具体例

sum=new Function(“x”,”y”,”return x+y”) ;function sum(x,y){

return (x+y) ;}

・通常の宣言との違い

変数にオブジェクトを格納。sum はオブジェクトとなる。 “sum” という関数を定義。

sum は関数 ( メソッド ) となる。

Object オブジェクト Object オブジェクトの特徴

全てのオブジェクトの基コンストラクタの定義が不要メソッド、プロパティを持たない空のオブジェクトメソッド、プロパティの追加が容易

Object オブジェクトの使用例インスタンスの生成例 (me インスタンス )

var me = new Object() ; プロパティの追加

me.name=“ 直江” ;me.year=21 ;

メソッドの追加 (hello メソッドの追加 )function hello(){ document.write(“Hello!”) ; }me.hello=hello ;

Object 使用サンプルサンプルプログラム（３）- 前略 -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 タグ ) により表示せよ。形式は問わないものとする。

付録１ HTML タグ

タグの一つ一つはオブジェクト ( エレメント ) として存在 <h1> ・・・ ( 中略 ) ・・・ </h1> 　← h1 タグエレメント

入れ子形式記述である必要性 <div> ・・・ ( 中略 ) ・・・ <font> ・・・ </font></div>

font タグは「 div タグに属するエレメント」と認識される→ <div> ・・・ ( 中略 ) ・・・ <font> ・・・ </div></font> は原則不可

基本はタグを入れたら閉じるタグも記述 br タグ ,img タグなどのように閉じる必要が無い物があるが

基本的には < タグ > ～ </ タグ > という書式である

付録２ 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>

table タグの表示結果

第４回 JavaScript ゼミ

Documents

Transcript of 第４回 JavaScript ゼミ