第４回 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を利用する

具体的な継承例 GoldCustomerオブジェクト Customerオブジェクト theNameプロパティ theNumプロパティ theDateプロパティ displayInfo()メソッド theNameプロパティ theNumプロパティ theDateプロパティ displayInfo()メソッド継承 goldPointプロパティ

継承の実装と使用 // ---------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”と先頭が大文字になっていることに注意) • 特徴： • 変数にはオブジェクトが格納されている • ただし、関数自身は無い

具体例 ・通常の宣言との違い function sum(x,y){ return (x+y) ; } sum=new Function(“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 ゼミ