JavaScript勉強会
Upcoming SlideShare
Loading in...5
×
 

JavaScript勉強会

on

  • 11,672 views

社内で行ったJavaScript勉強会の資料。

社内で行ったJavaScript勉強会の資料。

Statistics

Views

Total Views
11,672
Views on SlideShare
11,610
Embed Views
62

Actions

Likes
16
Downloads
75
Comments
0

6 Embeds 62

http://ma.ruyama.net 39
http://www.slideshare.net 9
http://blog.dp.condenast.jp 9
http://www.nitinlakhanpal.blogspot.com 3
http://nitinlakhanpal.blogspot.com 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScript勉強会 JavaScript勉強会 Presentation Transcript

  • 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/) 円グラフ作成君( )