Download as PDF, PPTX
![変数の宣言
全部 ”button No. ${buttons.length}” と表示されてしまう！
なんか問題あんの？ 適当に書けて便利じゃん？
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener(
'click',
function () { console.log('button No.' + i); }
);
}](https://image.slidesharecdn.com/jsstudybygs-150122073700-conversion-gate01/85/JavaScript-11-320.jpg)
JavaScript基礎勉強会
- 1.
- 2. JavaScript道 1. 必須の基礎知識 2. モダンJavaScript初級編 3. JavaScript最新事情 4. 以後未定 ECMAScript 今日はここやります
- 3.
- 4.
- 5.
- 6. strict mode （厳格モード）とは？ "use strict";// global ! function() { "use strict"; // innner only }
- 7.
- 8.
- 9. 変数の巻き上げ 以下がどうなるかわかりますか？ (function () { console.log(a); vara = 'aaaa'; console.log(a); })(); undefined “aaaa” エラーにならない！
- 10. 変数の宣言 変数の巻き上げ どうしてエラーにならなかったの？ (function () { vara; console.log(a); var a = 'aaaa'; console.log(a); })(); こういう風に解釈されたから
- 11. 変数の宣言 全部 ”button No.${buttons.length}” と表示されてしまう！ なんか問題あんの？ 適当に書けて便利じゃん？ var buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener( 'click', function () { console.log('button No.' + i); } ); }
- 12.
- 13.
- 14. 関数宣言 関数式 // statement function hoge(){} ! // expression var hoge = function() {}; 何がちがうの…… わからん！
- 15.
- 16.
- 17. スコープ 二種類しかないよ var globar ='global desu'; ! function scope1() { var locar = 'local desu'; console.log(globar); // global desu function scope2() { var locarSecond = 'local mark2 desu'; console.log(locar); // local desu } console.log(locarSecond); // ReferenceError: locarSecond is not defined } console.log(locar); // ReferenceError: locar is not defined
- 18. スコープ 応用テクニック (function() { var locar= 'local desu'; window.globar = 'global desu'; })(); console.log(locar); // ReferenceError: locar is not defined console.log(globar); // global desu グローバル汚染を防ぐため、ほんとに最低限の作法。 モダンJSにおいてはモジュール化の手法を学ぶべし。
- 19.
- 20.
- 21.
- 22. 簡単な実装 var i =0; ! var inc = function() { i += 1; return i; }; ! inc(); // 1 inc(); // 2 inc(); // 3 いけてない……
- 23. var i =0; var h = 0; ! var inc1 = function() { i += 1; return i; }; ! var inc2 = function() { h += 1; return h; }; 何がダメか グローバル汚染、汎用性なし、拡張性なし……
- 24.
- 25. クロージャを使った解答 var incrementGenerator =function (start) { var inc = function () { start += 1; return start; } return inc; }; ! var inc1 = incrementGenerator(0); var inc2 = incrementGenerator(0); ! inc1(); // 1 inc2(); // 1 inc1(); // 2 inc2(); // 2
- 26.
- 27. 復習：スコープ var globar ='global desu'; ! function scope1() { var locar = 'local desu'; console.log(globar); // global desu function scope2() { var locarSecond = 'local mark2 desu'; console.log(locar); // local desu } console.log(locarSecond); // ReferenceError: locarSecond is not defined } console.log(locar); // ReferenceError: locar is not defined
- 28. 復習：スコープ var staticScope =(function () { var locar = 'local desu'; var innerEnvironment = function () { return locar; }; return innerEnvironment; })(); ! console.log(staticScope()); // local desu console.log(staticScope()); // local desu 参照した変数が生き続ける
- 29. レキシカルスコープ 理解のポイント • 上のスコープ（関数）の変数を参照（束縛）出来る • 束縛した環境は持ち運べる •実行ごとに新しい環境が作られる • 定義時の静的なスコープが参照範囲 それだけ
- 30. Q：何に使えるの？ 例えば • データと振る舞いの結合が出来る • プライベート変数、関数みたいなものを作れる •カリー化などの関数型テクニック • その他…… A：色んなところ
- 31.
- 32.
- 33.
- 34. case: プロトタイプ var Greeter= (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; })(); ! var greeter = new Greeter("world"); console.log(greeter.greet());
- 35. class Greeter { greeting:string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } ! var greeter = new Greeter("world"); console.log(greeter.greet()); case: クラス
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.