Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript3

1,415 views

Published on

  • Be the first to comment

Javascript3

  1. 1. JavaScript オブジェクト指向<br /> @cev_cs<br />
  2. 2. 本日の予定<br />前回の確認<br />基本用語解説 <br />クラスベースとプロトタイプベース <br />オブジェクトの定義 <br />JSON と JSONP<br />
  3. 3. 前回の確認<br />関数も「オブジェクト」である <br />JavaScript の大きな特徴の1つ <br />オブジェクトは全て連想配列 から出来ている<br />連想配列とはキーと要素の集合<br />配列名[‘キー’] = 配列名.キー<br />
  4. 4. 用語の確認<br />
  5. 5. クラスベースとプロトタイプベース<br />今まで習ってきた言語: クラスベース<br />プロトタイプ <br />-> あるオブジェクトの元となるオブジェクト<br />  より縛りの弱いクラスのようなもの<br />
  6. 6. プロトタイプベースの利点・欠点<br />利点<br /><ul><li>メモリ使用量が小さくなる</li></ul>欠点<br /><ul><li>クラスが存在しない</li></ul>->JSが遅い原因の一つ<br /><ul><li>最初はややこしい</li></li></ul><li>縛りの弱いクラスのようなものである<br />「プロトタイプ」を <br />便宜的に<br />「クラス」<br />と書かせて頂きます。<br />
  7. 7. オブジェクトの定義<br />最もシンプルな定義方法<br /> var Member = function() {} ; //コンストラクタ<br /> var mem = new Member(); //インスタンス生成<br /> mem.name = 'agu_it_study';<br /> mem.myfunc = function(){ .... };<br /> ※ インスタンスには動的にメソッドを追加可能<br /> mem はMember オブジェクト <br /> 補足資料 -> http://bit.ly/9IIWNf<br />
  8. 8. オブジェクトの定義<br />コンストラクタに中身を挿入<br /> var Member = function (name){<br /> this.name = name;<br /> this.printName = function (){<br /> document.write(this.name);<br /> };<br /> };<br />thisは生成されたインスタンスを指す<br />
  9. 9. コンストラクタの問題点<br />メソッドの数に比例して余分にメモリを消費する<br />
  10. 10. prototype プロパティ<br />関数は元のクラスを参照するようにする<br />
  11. 11. コードで書くと<br /> var Member = function (name){ <br /> this.name = name; <br /> };<br /> Member.prototype.printName = function (){<br /> document.write(this.name); <br /> };<br /> var mem1 = new Member ('Homma');<br /> var mem2 = new Member ('Matsue');<br />実行サンプル http://jsdo.it/cev/huKj<br />
  12. 12. JSON(JavaScript Object Notation)<br />オブジェクト表記方法を<br />そのまま通信データの形式に用いる手法<br />サーバ側にあるデータをJavaScriptだけで利用できる -> マッシュアップ<br />
  13. 13. JSON(JavaScript Object Notation)<br />サーバから以下の「文字列」が返ってくる<br /> {<br /> ‘age’ : 21,<br /> ‘department’ : ‘Information Technology’<br /> } <br />まさに前回行った「オブジェクト (連想配列) 」!<br />
  14. 14. JSONP (JSON with padding)<br />callback 関数を定義<br />引数に JSON を指定して callback を実行<br />クロスドメイン制約<br />通常は外部のソースにアクセスできない<br />
  15. 15. まとめ<br />JavaScript はプロトタイプベース<br />prototype によってメモリ節約 <br />JSON はオブジェクトの受け渡し<br />JSONP で外部のデータを読み込める<br />
  16. 16. 終わりに<br />文法はこれにて終了です。 <br />次週からいよいよ<br />ブラウザを用いた内容となります。 <br />参加型の内容を考え中です!<br />
  17. 17. 参考文献<br />JavaScript マスターブック 山田祥寛(著)<br />JavaScriptのイロハ<br />http://builder.japan.zdnet.com/sp/javascript-kickstart-2007/?p=1<br />

×