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.

JavaScript 勉強会 ― 変数・演算子・文

493 views

Published on

JavaScript 勉強会、「JavaScript 第6版」の 3 章「型、値、変数」の変数、4 章「式と演算子」、5 章「文」のスライド。

Published in: Technology
  • Login to see the comments

  • Be the first to like this

JavaScript 勉強会 ― 変数・演算子・文

  1. 1. 変数・演算子・文 開発部 てるー
  2. 2. アジェンダ 1. 変数 2. +演算子 3. 関数定義式と関数宣言文
  3. 3. アジェンダ 1. 変数 2. +演算子 3. 関数定義式と関数宣言文
  4. 4. 変数の宣言 var x; var i, sum; var message = ‘hello’; var a = 0, b = 0, c = 0;
  5. 5. グローバル変数とローカル変数 ● グローバル変数 ○ 変数の有効範囲はプログラム全体 ● ローカル変数 ○ 変数の有効範囲は変数が宣言された関数の中に限定
  6. 6. グローバル変数とローカル変数 var g1 = ‘global’; // グローバル変数 var checkscope = function() { var local = ‘local’; // ローカル変数 g2 = ‘global’; // グローバル変数 }; checkscope();
  7. 7. 同じ名前があった場合はローカルを優先 var scope = ‘global’; var checkscope = function() { var scope = ‘local’; return scope; }; checkscope(); // local
  8. 8. JavaScript にはブロックスコープがない var test = function() { for (var k = 0; k < 10; k++) { console.log(k); // 0 から 9 が出力される } console.log(k); // 10 が出力される } test();
  9. 9. JavaScript にはブロックスコープがない function test(obj) { if (typeof obj === ‘object’) { var j = 0; } console.log(j); // 0 or undefined が出力される }
  10. 10. 問題 var scope = ‘global’; var f = function() { console.log(scope); // (1) var scope = ‘local’; console.log(scope); // (2) } f(); ● (1) で出力されるのは? a. global b. local c. 上記以外 ● (2) で出力されるのは? a. global b. local c. 上記以外
  11. 11. 問題 (答え) var scope = ‘global’; var f = function() { console.log(scope); // (1) var scope = ‘local’; console.log(scope); // (2) } f(); ● (1) で出力されるのは? a. global b. local c. 上記以外 ● (2) で出力されるのは? a. global b. local c. 上記以外
  12. 12. 巻き上げ var scope = ‘global’; var f = function() { console.log(scope); // undefined var scope = ‘local’; console.log(scope); // local } f(); var scope = ‘global’; var f = function() { var scope; console.log(scope); // undefined scope = ‘local’; console.log(scope); // local } f(); =
  13. 13. アジェンダ 1. 変数 2. +演算子 3. 関数定義式と関数宣言文
  14. 14. 「+」演算子は2つの可能性がある ● 加算 ● 文字列の連結
  15. 15. 「加算」 or 「文字列の連結」の判定方法 1. オペランドのどちらかがオブジェクトの場合、以下の方法で 基本型値に変換する ○ Dateオブジェクトの場合は、toString()で変換 ○ それ以外は、valueOf()で変換を試みて、基本型値を返さなかった場合には toString()で変換 2. オペランドの一方が文字列の場合、もう一方のオペランドを 文字列に変換し、連結処理をする 3. それ以外の場合は、両方のオペランドを数値にして加算処 理をする
  16. 16. 例 1 + 2 // 3 '1' + '2' // '12' '1' + 2 // '12' 1 + {} // '1[object Object]' true + true // 2 2 + null // 2 2 + undefined // NaN
  17. 17. アジェンダ 1. 変数 2. +演算子 3. 関数の定義
  18. 18. 関数の定義方法は3つある var f = function(x) { return x * x; }; console.log(f(2)); // 4 function square(x) { return x * x; } console.log(square(2)); // 4 関数定義式 (無名) 関数宣言文 関数定義式 (名前付き) var f = function square(x) { return x * x; }; console.log(f(2)); // 4 console.log(square(2)); // エラー
  19. 19. 3 つの差異がある ● スタックトレース ● if や while の中での定義 ● 巻き上げ
  20. 20. スタックトレース(1 / 2) var f = function() { throw new Error(); }; f(); function test() { throw new Error(); } test(); 関数定義式 (無名) 関数宣言文 関数定義式 (名前付き) var f = function test() { throw new Error(); }; f();
  21. 21. スタックトレース(2 / 2) Error at f (/Users/teloo/test.js:2:9) at Object.<anonymous> (/Users/teloo/test.js:5:1) at Module._compile (module.js:456:26) ... Error at test (/Users/teloo/test.js:2:9) at Object.<anonymous> (/Users/teloo/test.js:5:1) at Module._compile (module.js:456:26) ...
  22. 22. if や while の中での定義 if (true) { var f = function(x) { return x * x; }; console.log(f(2)); // 4 } if (true) { function square(x) { return x * x; } console.log(square(2)); // 4 } // IE11, Firefox, Chrome, Node.js で確認したところ動作した // 仕様的にはしてはいけないらしい 関数定義式 (無名) 関数宣言文 関数定義式 (名前付き) if (true) { var f = function square(x) { return x * x; }; console.log(f(2)); // 4 }
  23. 23. 巻き上げ (1 / 2) // TypeError: undefined is not a function console.log(f(2)); var f = function(x) { return x * x; }; console.log(square(2)); // 4 function square(x) { return x * x; } 関数定義式 (無名) 関数宣言文 関数定義式 (名前付き) // TypeError: undefined is not a function console.log(f(2)); var f = function square(x) { return x * x; };
  24. 24. 巻き上げ (2 / 2) var f; // TypeError: undefined is not a function console.log(f(2)); f = function(x) { return x * x; }; function square(x) { return x * x; } console.log(square(2)); // 4 関数定義式 (無名) 関数宣言文 関数定義式 (名前付き) var f; // TypeError: undefined is not a function console.log(f(2)); f = function square(x) { return x * x; };
  25. 25. お わ り
  26. 26. 宿題 (1 / 4) 引数またはオプションに入力された文字列を、なんらかの形で ファイルに書き込んでいくコマンドを作成せよ。 ● 1行ずつファイルに書き込む形式でもいいし、CSV 形式でも いい ● 各成果物によって仕様が異なるので、README を添付する こと
  27. 27. 宿題 (2 / 4) 例 > addtext hoge -f C:/Users/teloo/data.txt > addtext --file C:/Users/teloo/data.txt piyo あああ > data.txt hoge piyo あああ
  28. 28. 宿題 (3 / 4) ● 目的 ○ Node.js でのファイル操作のやり方を学ぶ ○ Node.js での外部ライブラリの使用方法を学ぶ
  29. 29. 宿題 (4 / 4) ● Node.js v0.10.26 Manual & Documentation ○ Node.js の公式のAPIドキュメント ● commander ○ コマンドラインのプログラムを簡単に作成するためのライ ブラリ ● 宿題置き場にサンプルプログラムを置きました

×