JavaScript入門

1,649 views
1,543 views

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,649
On SlideShare
0
From Embeds
0
Number of Embeds
63
Actions
Shares
0
Downloads
8
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

JavaScript入門

  1. 1. JavaScript入門 2011/10/24 h13i32maru@Twitter maruyama-r@KLab
  2. 2. 自己紹介• 丸山 亮(h13i32maru) 最近はJSを触ってます• KLab株式会社所属32 http://blog.h13i32maru.jp http://twitter.com/h13i32maru https://www.facebook.com/ryo.maruyama https://github.com/h13i32maru
  3. 3. JavaScript面白いよ(´ω`)
  4. 4. でも良く分からないとはまっちゃう(´・ω・`)
  5. 5. 今日は他の言語とは少し違うところのお話
  6. 6. JavaScriptとは• プロトタイプベースのオブジェクト指向言語• 関数言語の性質もあり• シングルスレッド• 全てパブリック
  7. 7. “関数”超重要
  8. 8. オブジェクト指向• JavaScriptはプロトタイプベース - JavaやPHPはクラスベース• あるオブジェクト(プロトタイプ)をカスタマイズ
  9. 9. var MyConstructor = function(){ this.print = function(){ console.log("this is MyClass"); };}var a = new MyConstructor();a.print();
  10. 10. 継承• あるオブジェクトを継承したオブジェクトを作る - Object#prototype• MyConstructorを継承してChildConstructor作る
  11. 11. var MyConstructor = function(){ this.print = function(){ console.log("this is MyConstructor"); };}var ChildConstructor = function(){ this.childPrint = function(){ console.log("this is ChildConstructor"); }}ChildConstructor.prototype = new MyConstructor();var b = new ChildConstructor();b.print(); //this is MyConstructorb.childPrint(); //this is ChildConstructor
  12. 12. スコープ• グローバルスコープと関数スコープのみ • ブロックスコープは無し• var hogeで関数スコープになる• 変数宣言はスコープ先頭になる
  13. 13. function func(){ var x = 20; for(var i = 0; i < 100; i++){ var x = i; } console.log(x);}func(); //99
  14. 14. x = 10;y = -10;function func(){ x = 20; var y = -20;}func();console.log(x); //20console.log(y); //-10
  15. 15. function func(){ console.log(x); //undefined var x = 10; console.log(y); //error}func();
  16. 16. x = 10;function func(){ console.log(x); var x = 20;}func(); //undefined
  17. 17. 実行時コンテキスト• 関数は実行時にコンテキスト(this)が決定される - JavaやC++などではコンテキストは不変• あるオブジェクトのメソッドを別のオブジェクトのメ ソッドとして実行できる
  18. 18. var obj = { hoge: 100, func: function(){ console.log(this.hoge); }}//case 1: “this”はobjコンテキストobj.func(); //100//case 2: “this”はグローバルコンテキストvar foo = obj.func;foo(); //undefined//case 3: “this”はfugaコンテキストvar fuga = {hoge: -10};fuga.piyo = obj.func;fuga.piyo(); //-10
  19. 19. var obj = { hoge: 100, func: function(){ console.log(this.hoge); }}function piyo(func){ func();}function fuga(func, context){ func.apply(context);}piyo(obj.func); //undefinedfuga(obj.func, obj); //100
  20. 20. クロージャ• 関数外の変数を関数内に内包(クロージング)する• 関数実行時のスコープ解決に関数生成時のスコープを使 用する
  21. 21. function hoge(){ var x = 10; var func = function(){ console.log(x); } foo(func);}function foo(func){ var x = 100; func();}hoge(); //10
  22. 22. func = null;function hoge(){ var x = 10; func = function(){ console.log(x); x++; }}hoge();func(); //10func(); //11func(); //12
  23. 23. a = [];for(var i = 0; i < 10; i++){ a[i] = function(){ console.log(i); }}a[0]();a[2]();a[4]();
  24. 24. a = [];for(var i = 0; i < 10; i++){ a[i] = function(){ console.log(i); }}a[0](); //10a[2](); //10a[4](); //10
  25. 25. a = [];for(var i = 0; i < 10; i++){ a[i] = makeFunc(i);}function makeFunc(index){ return function(){ console.log(index); }}a[0](); //0a[2](); //2a[4](); //4
  26. 26. a = [];for(var i = 0; i < 10; i++){ a[i] = function(index){ return function(){ console.log(index); } }(i);}a[0](); //0a[2](); //2a[4](); //4
  27. 27. プライベート変数• クロージャを使ってプライベート変数やメソッドを作る ことができる
  28. 28. var init = function(){ this.x = 10; this.print = function(){ console.log(this.x); }; this.inc = function(){ this.x++; }};var obj = new init();obj.print(); //10obj.inc();obj.print(); //11console.log(obj.x); //11
  29. 29. var init = function(){ var x = 10; this.print = function(){ console.log(x); }; this.inc = function(){ x++; }};var obj = new init();obj.print(); //10obj.inc();obj.print(); //11console.log(obj.x); //undefinedvar obj2 = new init();obj2.print(); //10
  30. 30. コーディングスタイル• Google JavaScript Style Guide • http://cou929.nu/data/google_javascript_style_guide/#id8• JavaScript? Coding Guidelines for Mac OS X • http://developer.apple.com/jp/documentation/ScriptingAutomation/Conceptual/ JSCodingGuide/• Felixs Node.js Style Guide • http://popkirby.github.com/contents/nodeguide/style.html• JavaScript? style guide • https://developer.mozilla.org/ja/JavaScript_style_guide
  31. 31. おわり

×