JavaScript勉強会

JavaScript 再入門 2008/05/20 matsukaz [http://d.hatena.ne.jp/matsukaz/]

アジェンダ 1. JavaScript概要 2. JavaScriptのオブジェクト 3. 連想配列 4. プロトタイプ 5. 継承 6. クロージャ 7. 参考サイト

1. JavaScript概要 • JavaScriptとは • JavaScriptとECMAScript • ECMAScript実装 • ECMAScript関係図

JavaScript概要 1. JavaScript概要 JavaScriptとは • プロトタイプベースのオブジェクト指向なスクリプト言語 • Netscapeによって開発された • 開発当初はLiveScriptだったが、Javaの話題性に便乗してJavaScriptという名称に – 言語仕様は似ているがJavaとは関係ない • Microsoftの実装はJavaScriptに自社技術を追加して拡張したJScript

JavaScript概要 1. JavaScript概要 JavaScriptとECMAScript • Ecma Internationalによって策定 • 互換性の低かったJavaScriptとJScriptの標準化を目的に作られたスクリプト言語 – 式や構文、基本オブジェクトなどの仕様を決めている – ブラウザ固有の機能は含められていない

JavaScript概要 1. JavaScript概要ブラウザ別ECMAScript実装ブラウザ名称説明 IE6-7 JScript 5 ECMAScript 3/Javascript 1.5に等価 IE8 JScript 6 ECMAScript 3/Javascript 1.5に等価（JScript 5のバグFix） Firefox 1.0 JavaScript 1.5 ECMAScript 3に等価 Firefox 1.5 JavaScript 1.6 JavaScript 1.5に機能追加 Firefox 2.0 JavaScript 1.7 JavaScript 1.6に機能追加 Firefox 3.0 JavaScript 1.8 JavaScript 1.7に機能追加 Firefox (次 JavaScript 1.9 JavaScript 1.8に機能追加予定バージョン) Opera 9 - ECMAScript 3に機能追加 Safari - ECMAScript 3に機能追加 - JavaScript 2.0 ECMAScript 4に等価出展元：Versions of Javascript（http://ejohn.org/blog/versions-of-javascript/）（）マイコミジャーナルの記事（http://journal.mycom.co.jp/news/2008/04/25/021/）マイコミジャーナルの記事（）

JavaScript概要 1. JavaScript概要 ECMAScript関係図 ECMAScript関係図出展元：The World of ECMAScript （http://ejohn.org/blog/the-world-of-ecmascript/））

2. JavaScriptのオブジェクト • オブジェクトの構成 • 関数 • 高階関数 • コンストラクタ関数

JavaScriptのオブジェクト 2. JavaScriptのオブジェクトオブジェクトの構成 • JavaScriptのオブジェクトはプロパティのみを持つ • プロパティにセットできる値もオブジェクト • 各オブジェクトには自由にプロパティを追加／削除できる var hogeObj ==new Object(); var hogeObj new Object(); var fugaObj ==new Object(); var fugaObj new Object(); fugaObj.foo =='fooVal'; fugaObj.foo 'fooVal'; ////foo プロパティに 'fooVal' をセット foo プロパティに 'fooVal' をセット hogeObj.fuga ==fugaObj; hogeObj.fuga fugaObj; ////fuga プロパティに fugaObj をセット fuga プロパティに fugaObj をセット alert(hogeObj.fuga.foo); alert(hogeObj.fuga.foo); ////'fooVal' と表示 'fooVal' と表示

JavaScriptのオブジェクト 2. JavaScriptのオブジェクト関数 • JavaScriptでは関数もオブジェクト – プロパティに関数をセットしたものがメソッドとなる var hogeObj ==new Object(); var hogeObj new Object(); var fugaFunc ==function(val){ ////関数を変数として定義 var fugaFunc function(val){ 関数を変数として定義 alert(val); alert(val); }} hogeObj.fuga ==fugaFunc; hogeObj.fuga fugaFunc; ////fuga プロパティに関数をセット fuga プロパティに関数をセット hogeObj.fuga('fugaVal'); hogeObj.fuga('fugaVal'); ////'fugaVal' と表示 'fugaVal' と表示

JavaScriptのオブジェクト 2. JavaScriptのオブジェクト高階関数 • 引数に関数を受け取る関数 function hoge(val){ function hoge(val){ ////関数を定義関数を定義 alert('hello, ' '++val); alert('hello, val); }} function fuga(array, fn) {{ function fuga(array, fn) ////高階関数高階関数 for (var i i==0;i <<array.length; i++) {{ for (var 0;i array.length; i++) fn(array[i]); fn(array[i]); }} }} var array ==['foo', 'bar']; var array ['foo', 'bar']; ////配列を定義配列を定義 fuga(array, hoge); fuga(array, hoge); ////'hello, foo' 、'hello, bar' と表示 'hello, foo' 、'hello, bar' と表示

JavaScriptのオブジェクト 2. JavaScriptのオブジェクトコンストラクタ関数 • コンストラクタ関数でオブジェクトの種類を定義 – 全ての関数はコンストラクタ関数となりえる function Hoge(val){ function Hoge(val){ ////コンストラクタ関数コンストラクタ関数 this.val ==val; this.val val; ////this はこれから生成されるオブジェクト this はこれから生成されるオブジェクト this.message ==function(){ this.message function(){ ////無名関数無名関数 alert(this.val); alert(this.val); }} }} var hogeObj ==new Hoge('fugaVal'); var hogeObj new Hoge('fugaVal'); ////new で Hoge オブジェクトを生成 new で Hoge オブジェクトを生成 hogeObj.message(); hogeObj.message(); ////'fugaVal' と表示 'fugaVal' と表示

3. 連想配列 • 連想配列とは • オブジェクトと連想配列

3. 連想配列連想配列とは • 配列 – 添え字に整数を利用 var array ==['hogeVal', 'fugaVal']; var array ['hogeVal', 'fugaVal']; alert(array[0]); alert(array[0]); ////'hogeVal' と表示 'hogeVal' と表示 alert(array[1]); alert(array[1]); ////'fugaVal' と表示 'fugaVal' と表示 • 連想配列 – 添え字に文字列を利用 • JavaにおけるHashtableと同じ var hash =={'hogeKey' : :'hogeVal', 'fugaKey' : :'fugaVal'}; var hash {'hogeKey' 'hogeVal', 'fugaKey' 'fugaVal'}; alert(hash['hogeKey']); alert(hash['hogeKey']); ////'hogeVal' と表示 'hogeVal' と表示 alert(hash['fugaKey']); alert(hash['fugaKey']); ////'fugaVal' と表示 'fugaVal' と表示

3. 連想配列オブジェクトと連想配列 • 全てのオブジェクトは連想配列 – 下記オブジェクトは全て同じプロパティを持つ var obj1 ==new Object(); var obj1 new Object(); obj1.hogeKey =='hogeVal'; obj1.hogeKey 'hogeVal'; ////空オブジェクトにプロパティを追加空オブジェクトにプロパティを追加 var obj2 =={'hogeKey' : :'hogeVal'}; ////連想配列を定義 var obj2 {'hogeKey' 'hogeVal'}; 連想配列を定義 var obj3 =={hogeKey : :'hogeVal'}; var obj3 {hogeKey 'hogeVal'}; ////連想配列を定義（キーは ''''で囲まなくても良い）連想配列を定義（キーはで囲まなくても良い） var obj4 =={}; var obj4 {}; obj4['hogeKey'] =='hogeVal'; obj4['hogeKey'] 'hogeVal'; ////空の連想配列にキーを追加空の連想配列にキーを追加 – こんな指定も可能 var val1 ==document.location.protocol; var val1 document.location.protocol; var val2 ==document['location']['protocol']; ////プロパティを連想配列のキーで指定 var val2 document['location']['protocol']; プロパティを連想配列のキーで指定 • 呼び出すプロパティを動的変更できるということ

4. プロトタイプ • prototypeオブジェクト • 暗黙の参照 • プロトタイプチェーン • 定義済みオブジェクトの拡張

4. プロトタイプ prototypeプロパティ • 全ての関数オブジェクトは、prototypeプロパティを保持している function Hoge(){} function Hoge(){} alert(Hoge.prototype != undefined); ////trueと表示 alert(Hoge.prototype != undefined); trueと表示 • prototypeプロパティのデフォルトの参照先は空のオブジェクト Hoge.prototype.fuga =='FugaVal'; ////prototypeプロパティの参照先のオブジェクトに Hoge.prototype.fuga 'FugaVal'; prototypeプロパティの参照先のオブジェクトに ////プロパティを設定可能プロパティを設定可能

4. プロトタイプ暗黙の参照 • オブジェクトが指定したプロパティを持たない場合、そのオブジェクトは生成元のコンストラクタ関数のprototypeプロパティへ暗黙の参照を持つ function Hoge(){} function Hoge(){} Hoge Hoge.prototype.fuga =10; Hoge.prototype.fuga =10; fuga = 10 hogeObj1 hogeObj2 fuga = 20 var hogeObj1 ==new Hoge(); var hogeObj1 new Hoge(); var hogeObj2 ==new Hoge(); var hogeObj2 new Hoge(); hogeObj1.fuga ==20; hogeObj1.fuga 20; alert(hogeObj1.fuga); alert(hogeObj1.fuga); ////20 と表示 20 と表示 alert(hogeObj2.fuga); alert(hogeObj2.fuga); ////10 と表示 10 と表示

4. プロトタイププロトタイプチェーン • プロトタイプを連鎖させることもできる function Hoge(){} function Hoge(){} Hoge.prototype.fuga ==10; Hoge.prototype.fuga 10; Hoge fuga = 10 var hogeObj ==new Hoge(); var hogeObj new Hoge(); hogeObj function Foo(){} function Foo(){} Foo Foo.prototype.hoge ==hogeObj; Foo.prototype.hoge hogeObj; hoge = hogeObj fooObj var fooObj ==new Foo(); var fooObj new Foo(); alert(fooObj.hoge.fuga); alert(fooObj.hoge.fuga); ////10 と表示 10 と表示

4. プロトタイプ定義済みオブジェクトの拡張 • 定義済みオブジェクトを拡張することもできる Object.prototype.hoge =='hogeVal'; Object.prototype.hoge 'hogeVal'; var obj ==new Object(); var obj new Object(); alert(obj.hoge); alert(obj.hoge); ////'hogeVal' と表示 'hogeVal' と表示 Date.prototype.toJPString ==function(){ Date.prototype.toJPString function(){ return this.getFullYear() ++'年' ++(this.getMonth() ++1) return this.getFullYear() '年' (this.getMonth() 1) ++'月' ++this.getDate() ++'日'; '月' this.getDate() '日'; }} var date ==new Date(); var date new Date(); alert(date.toJPString()); alert(date.toJPString()); ////'2008年5月20日' と表示 '2008年5月20日' と表示

5. 継承 • 継承とは • 継承の実装方法 • constructorプロパティ

5. 継承継承とは • 継承元で定義された機能を受け継いで、自分自身の機能を追加可能とする仕組み var person ==new Person(); var person new Person(); Person person.getName(); ////Person の関数 person.getName(); Person の関数 getName() var emp ==new Employee(); var emp new Employee(); Employee emp.getName(); ////Person の関数 emp.getName(); Person の関数 getDept() emp.getDept(); ////Employee の関数 emp.getDept(); Employee の関数

5. 継承継承の実装方法 • JavaScriptとして継承という機能は提供されていない – JavaScript 2.0（ECMAScript 4）でサポート予定 • プロトタイプチェーンを繋いでいくことで継承らしき実装を実現 – さまざまなパターンの実装方法が存在 • オブジェクトの代入 • プロパティのコピー • prototypeの代入

5. 継承継承の実装方法（オブジェクトの代入） • 継承元のオブジェクトを継承先のprototype に代入する function Person(name){this.name ==name;} function Person(name){this.name name;} Person Person.prototype.getName ==function(){return this.name;} Person.prototype.getName function(){return this.name;} getName() function Employee(name, dept){ function Employee(name, dept){ Person.call(this, name); ////親のコンストラクタ関数呼び出し Person.call(this, name); 親のコンストラクタ関数呼び出し this.dept ==dept; this.dept dept; }} Employee Employee.prototype ==new Person; ////継承元のオブジェクトを Employee.prototype new Person; 継承元のオブジェクトを ////prototype プロパティに代入 prototype プロパティに代入 getDept() Employee.prototype.getDept ==function(){return this.dept;} Employee.prototype.getDept function(){return this.dept;} Mozillaやオライリーではこの方法を紹介している。 Mozillaやオライリーではこの方法を紹介している。でもオブジェクトを作る目的以外でnewするってどうなの？引数が必須の場合は何を渡でもオブジェクトを作る目的以外でnewするってどうなの？引数が必須の場合は何を渡す？コンストラクタ関数内で何らかの処理をしていたら？す？コンストラクタ関数内で何らかの処理をしていたら？いろいろ問題が・・・いろいろ問題が・・・

5. 継承継承の実装方法（オブジェクトの代入） • 概念図 new Person 無名 prototype オブジェクト暗黙の参照参照 new Employee emp prototype 暗黙の参照

5. 継承継承の実装方法（プロパティのコピー） • 継承元のprototypeのプロパティを継承先にコピーする ////継承元の prototype プロパティを継承先にコピーする関数継承元の prototype プロパティを継承先にコピーする関数 Person Function.prototype.inherit ==function(superClass){ Function.prototype.inherit function(superClass){ getName() for(var prop in superClass.prototype){ for(var prop in superClass.prototype){ this.prototype[prop] ==superClass.prototype[prop]; this.prototype[prop] superClass.prototype[prop]; }} }} function Employee(name, dept){ function Employee(name, dept){ Employee Person.call(this, name); ////親のコンストラクタ関数呼び出し Person.call(this, name); 親のコンストラクタ関数呼び出し getDept() this.dept ==dept; this.dept dept; }} Employee.inherit(Person); Employee.inherit(Person); Employee.prototype.getDept ==function(){return this.dept;} Employee.prototype.getDept function(){return this.dept;} 個別にプロパティをセットしているので、あとから継承元のprototypeにプロパティを追加個別にプロパティをセットしているので、あとから継承元のprototypeにプロパティを追加しても反映されない・・・しても反映されない・・・

5. 継承継承の実装方法（プロパティのコピー） • 概念図 Person prototype プロパティのコピー new Employee emp prototype 暗黙の参照

5. 継承継承の実装方法（プロトタイプの代入） • 継承元のprototypeをオブジェクト化して継承先のprototypeに代入する ////継承元の prototype プロパティを継承先の prototype に代入継承元の prototype プロパティを継承先の prototype に代入 Person Function.prototype.inherit(superClass){ Function.prototype.inherit(superClass){ getName() function Temp(){} function Temp(){} Temp.prototype ==superClass.prototype; Temp.prototype superClass.prototype; this.prototype ==new Temp; this.prototype new Temp; }} Employee function Employee(name, dept){ function Employee(name, dept){ Person.call(this, name); ////親のコンストラクタ関数呼び出し Person.call(this, name); 親のコンストラクタ関数呼び出し getDept() this.dept ==dept; this.dept dept; }} Employee.inherit(Person); Employee.inherit(Person); Employee.prototype.getDept ==function(){return this.dept;} Employee.prototype.getDept function(){return this.dept;} 一番継承っぽい。一番継承っぽい。あとから継承元のprototypeにプロパティを追加しても反映される。あとから継承元のprototypeにプロパティを追加しても反映される。

5. 継承継承の実装方法（プロトタイプの代入） • 概念図 Person Temp 参照 prototype prototype new 暗黙の参照 Employee 無名 prototype オブジェクト参照

5. 継承 constructorプロパティ • オブジェクト名.constructor – 生成元コンストラクタ関数を参照 function Person(name){this.name ==name;} function Person(name){this.name name;} var hoge ==new Person('hoge'); var hoge new Person('hoge'); alert(hoge.constructor); alert(hoge.constructor); ////Person関数の内容を表示 Person関数の内容を表示 alert(hoge.constructor.name); alert(hoge.constructor.name); ////Personと表示 Personと表示 ※ constructorのnameプロパティにはIEからはアクセスできない • 継承の実装次第では、生成元コンストラクタ関数が異なってしまう – 明示的にconstructorプロパティを設定する Employee.prototype.constructor ==Employee; Employee.prototype.constructor Employee;

6. クロージャ • クロージャとは • クロージャの特徴 • クロージャの利用例 • クロージャ利用時の注意点

6. クロージャクロージャとは • 関数の中で定義された関数 function Hoge(){ function Hoge(){ this.fuga ==function(msg){ this.fuga function(msg){ ////クロージャクロージャ alert(msg); alert(msg); }} }} var hogeObj ==new Hoge(); var hogeObj new Hoge(); hogeObj.fuga('hogeVal'); hogeObj.fuga('hogeVal'); ////'hogeVal' と表示 'hogeVal' と表示 function hoge(){ function hoge(){ function fuga(msg){ function fuga(msg){ ////クロージャクロージャ alert(msg); alert(msg); }} return fuga; return fuga; }} var fugaFunc ==hoge(); var fugaFunc hoge(); fugaFunc('fugaVal'); fugaFunc('fugaVal'); ////'fugaVal' と表示 'fugaVal' と表示

6. クロージャクロージャの特徴 • 関数と、その関数が作られた環境が一体となった特殊なオブジェクト • 関数の外側で宣言された変数に対する参照を持つ function Hoge(msg){ function Hoge(msg){ var count ==1; var count 1; this.fuga ==function(){ this.fuga function(){ ////クロージャクロージャ alert(count ++',',' '++msg); alert(count msg); ////count や msg に対する参照を持つ count や msg に対する参照を持つ count++; count++; }} }} var hogeObj ==new Hoge('hogeVal'); var hogeObj new Hoge('hogeVal'); hogeObj.fuga(); hogeObj.fuga(); ////'1, hogeVal' と表示 '1, hogeVal' と表示 hogeObj.fuga(); hogeObj.fuga(); ////'2, hogeVal' と表示 '2, hogeVal' と表示

6. クロージャクロージャの利用例① • プライベート関数 – 特定のスコープのみで実行可能な関数 • オブジェクト毎に関数オブジェクトが生成されるので、リソースには注意が必要 function Hoge(){ function Hoge(){ this.fuga ==function(){ this.fuga function(){ foo(); foo(); }} function foo(){ function foo(){ ////クロージャ（プライベート関数）クロージャ（プライベート関数） alert('foo'); alert('foo'); }} }} var hoge ==new Hoge(); var hoge new Hoge(); hoge.fuga(); hoge.fuga(); ////'foo' と表示 'foo' と表示

6. クロージャクロージャの利用例② • イベント登録 – 各ボタン用のイベントを生成 <form name=quot;form1quot;> <form name=quot;form1quot;> <input type=quot;textquot; name=quot;text1quot;> <input type=quot;textquot; name=quot;text1quot;> <input type=quot;buttonquot; name=quot;button1quot; value=quot;button1quot;><br> <input type=quot;buttonquot; name=quot;button1quot; value=quot;button1quot;><br> <input type=quot;textquot; name=quot;text2quot;> <input type=quot;textquot; name=quot;text2quot;> <input type=quot;buttonquot; name=quot;button2quot; value=quot;button2quot;> <input type=quot;buttonquot; name=quot;button2quot; value=quot;button2quot;> </form> </form> 選択した値：<span id=quot;dispquot;></span> 選択した値：<span id=quot;dispquot;></span> document.form1.button1.onclick ==dispValue('text1'); document.form1.button1.onclick dispValue('text1'); document.form1.button2.onclick ==dispValue('text2'); document.form1.button2.onclick dispValue('text2'); function dispValue(target){ function dispValue(target){ return function(){ return function(){ ////各ボタン用のクロージャを作成各ボタン用のクロージャを作成 disp.innerHTML ==document.form1[target].value; disp.innerHTML document.form1[target].value; }} }}

6. クロージャクロージャ利用時の注意点 • ループ内でクロージャを作成 – ループ内のクロージャは、関数としては異なるが同じ環境を共有しているため、keyは同じ値になってしまう。 var map =={{ var map 'button1' : :'text1', 'button1' 'text1', 'button2' : :'text2' 'button2' 'text2' }; }; for(var key in map){ for(var key in map){ document.form1[key].onclick ==function(){ document.form1[key].onclick function(){ ////ループ内のクロージャループ内のクロージャ disp.innerHTML ==document.form1[map[key]].value; ////keyの値に注意が必要 disp.innerHTML document.form1[map[key]].value; keyの値に注意が必要 }} }} ポイントはどうやって共有する環境を切り離すか

6. クロージャクロージャ利用時の注意点 • 解決策①（イベント登録を関数で切り離す） for(var key in map){ for(var key in map){ (function(n){ (function(n){ ////無名関数内でイベント登録を行う無名関数内でイベント登録を行う document.form1[key].onclick ==function(){ document.form1[key].onclick function(){ disp.innerHTML ==document.form1[n].value; disp.innerHTML document.form1[n].value; }; }; })(map[key]); })(map[key]); }} • 解決策②（イベント処理を関数で切り離す） for(var key in map){ for(var key in map){ document.form1[key].onclick ==(function(n){ ////無名関数内でイベント処理を行う document.form1[key].onclick (function(n){ 無名関数内でイベント処理を行う return function(){ return function(){ disp.innerHTML ==document.form1[n].value; disp.innerHTML document.form1[n].value; }} })(map[key]); })(map[key]); }}

6. クロージャクロージャ利用時の注意点 • 解決策③（外部関数化する） for(var key in map){ for(var key in map){ document.form1[key].onclick ==dispValue(map[key]); document.form1[key].onclick dispValue(map[key]); }} ////外部関数で生成した無名関数内でイベント処理を行う外部関数で生成した無名関数内でイベント処理を行う function dispValue(target){ function dispValue(target){ return function(){ return function(){ ////各ボタン用のクロージャを作成各ボタン用のクロージャを作成 disp.innerHTML ==document.form1[target].value; disp.innerHTML document.form1[target].value; }} }}

7. 参考サイト • Mozilla Developer Center – http://developer.mozilla.org/ja/docs/JavaScr ipt • ECMAScript – http://www.ecmascript.org/ • JavaScript Shell 1.4 – http://www.squarefree.com/shell/shell.html • CodeZineの記事 – http://codezine.jp/a/article/aid/220.aspx • 檜山正幸のキマイラ飼育記 – http://d.hatena.ne.jp/m-hiyama/

べつやくメソッド的に言うと・・・べつやくメソッド用円グラフ作成君（http://818nc.jp/circle/）円グラフ作成君（）

http://ma.ruyama.net	20
http://www.slideshare.net	9
http://www.nitinlakhanpal.blogspot.com	3
http://nitinlakhanpal.blogspot.com	1
http://webcache.googleusercontent.com	1

JavaScript勉強会

by Masakazu Matsushita on May 21, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 34

Statistics

JavaScript勉強会 — Presentation Transcript