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); });}](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjsstudybygs-150122073700-conversion-gate01%2f75%2fJavaScript-11-2048.jpg&f=jpg&w=240)
Recommended
More Related Content
What's hot
Similar to JavaScript基礎勉強会
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.関数宣言関数式// statementfunction hoge(){}!// expressionvar hoge = function() {};何がちがうの……わからん！
- 15.
- 16.
- 17.スコープ二種類しかないよvar globar ='global desu';!function scope1() {var locar = 'local desu';console.log(globar); // global desufunction scope2() {var locarSecond = 'local mark2 desu';console.log(locar); // local desu}console.log(locarSecond); // ReferenceError: locarSecondis not defined}console.log(locar); // ReferenceError: locar is notdefined
- 18.スコープ応用テクニック(function() {var locar= 'local desu';window.globar = 'global desu';})();console.log(locar); // ReferenceError: locar is notdefinedconsole.log(globar); // global desuグローバル汚染を防ぐため、ほんとに最低限の作法。モダンJSにおいてはモジュール化の手法を学ぶべし。
- 19.
- 20.
- 21.
- 22.簡単な実装var i =0;!var inc = function() {i += 1;return i;};!inc(); // 1inc(); // 2inc(); // 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(); // 1inc2(); // 1inc1(); // 2inc2(); // 2
- 26.
- 27.復習：スコープvar globar ='global desu';!function scope1() {var locar = 'local desu';console.log(globar); // global desufunction 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 notdefined
- 28.復習：スコープvar staticScope =(function () {var locar = 'local desu';var innerEnvironment = function () {return locar;};return innerEnvironment;})();!console.log(staticScope()); // local desuconsole.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.