JavaScript(1)

演習3-1

  • 整数nを引数にとり，n+1を返す関数plusOne(n)，n*2を返す関数double(n)，n^2を返す関数square(n)を宣言せよ．
  • 整数nと関数fを引数に取り，f(n)の結果をアラートする関数calc(n,f)を宣言せよ．
  • calc(1,plusOne), calc(2,double), calc(3,square)を実行するスクリプトを書いて実行せよ．
  • calcを4と匿名関数を引数として実行するスクリプトを書いて実行せよ．匿名関数は整数nを引数にとり，-nを返す関数とする．

解答例

  • 別ウィンドウで表示
    • ダイアログボックスに，2,4,9,-4と順に表示します．4回「OK」ボタンを押してください．
    • メインのウィンドウには何も表示されません．

ソース

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <title>セミナー演習３(1)</title>
  7. <script type="text/javascript">
  8. "use strict";
  9. function plusOne(n) {
  10. return n + 1;
  11. }
  12. function double(n) {
  13. return 2 * n;
  14. }
  15. function square(n) {
  16. return n * n;
  17. }
  18. var calc = function (n, f) {
  19. alert(f(n));
  20. };
  21. calc(1, plusOne);
  22. calc(2, double);
  23. calc(3, square);
  24. calc(4, function (n) {
  25. return -n;
  26. });
  27. </script>
  28. </head>
  29. <body>
  30. </body>
  31. </html>

解説

  • 8行目
    • "use strict" (Use Strict Directive)によって，strictモードを宣言している．
    • これによって，宣言なにし変数を使うなどの，strictモードでない場合には受け入れられていた構文がエラーとなる．
    • https://developer.mozilla.org/ja/docs/JavaScript/Strict_mode
  • 9行目から11行目，13行目から15行目，17行目から19行目，21行目から23行目
    • 関数の定義は次の形をしている．
      • function <関数名>(仮引数のリスト) {関数の本体}
      • 例： function square(n) { return n * n;} // 17行目から19行目の関数定義
      • square(3); などのように呼び出す．
    • JavaScriptでは関数もデータ型のひとつであり，定義した関数は値として扱うことが出来る．すなわち，変数に代入したり，関数の実引数として渡したりすることが出来る．
    • 関数リテラル（関数型の値を直接表記したもの）は次の形をしている．
      • function <関数名>(仮引数のリスト) {関数の本体}
        • 上記の関数の定義と同じ形
        • ただし，関数リテラルの関数名は省略することが出来る．
        • 省略した場合，その関数は匿名関数（無名関数）となる．
    • 関数は関数リテラルを使って定義することもできる．
      • var <変数名> = function (仮引数のリスト) {関数の本体};
      • 例 var square = function (n) {return n * n;}; // 上記の関数定義の例と同じこと
        • square(3); などのように呼び出す．
      • 例 var calc = function(n, f) { alert(f(n));}; // 21行目から23行目の関数定義
        • calc(3, square); などのように呼び出す．
    • なお，リテラルは，ソースコード内に値を直接表記したものである．
      • 1や2，-500は整数リテラル
      • "これは文字列です"や'たなてつラボ'は文字列リテラル
      • {x:10, y:20, z:5}はオブジェクトリテラル
      • function (msg) {alert(msg);} は関数リテラル
  • 10行目，14行目，18行目
    • 関数で値を返すには
      • return 式;
    • 式の値が関数の戻り値となる
  • 22行目
    • アラートは
      • alert (式);
      • で，式の値がアラートダイアログボックスに表示される．
  • 25行目から31行目
    • 関数の実行は次の形．
      • <関数名>(実引数のリスト);
    • 関数もオブジェクトなので，別の関数の実引数として渡すことが出来る．
      • 25行目，26行目，27行目では，それぞれplusOne，double，squareという関数をcalcという関数の第2引数として渡している．
      • 29行目から31行目では，関数リテラル function (n) { return -n;} をcalcの第2引数として渡している．
      • 関数calcの中では，calcの第1引数nを第2引数の関数fの引数としてf(n)を実行し，その結果をalert()でダイアログボックスに表示している．

演習3-2

  • helloとsayHelloという二つのプロパティをもつオブジェクトを作成せよ．ただし，helloは”こんにちは．”という値で初期化し，sayHelloはhelloの値をアラートする関数で初期化せよ．これによりsayHelloはメソッドになる．
  • そのオブジェクトのメソッドsayHelloを呼び出すスクリプトを書いて実行せよ．

解答例

  • 別ウィンドウで表示
    • ダイアログボックスに「こんにちは．」と表示します．OKボタンを押してください．
    • メインのウィンドウには何も表示されません．

ソース

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <title>セミナー演習３(2)</title>
  7. <script type="text/javascript">
  8. "use strict";
  9. var obj = {
  10. hello : "こんにちは．",
  11. sayHello : function () {
  12. alert(this.hello);
  13. }
  14. };
  15. obj.sayHello();
  16. </script>
  17. </head>
  18. <body>
  19. </body>
  20. </html>

解説

  • オブジェクトはプロパティのリストであり，プロパティは名前と値の組である．
    • すなわち，オブジェクトは名前と値のリストである．
  • オブジェクトリテラルは，名前と値のリストを中括弧{と}で囲ったものである．
    • 例： {x:10, y:20, width:20, height:30}
  • 10行目から15行目
    • objという変数を宣言して，オブジェクトリテラルで初期化している．
    • このオブジェクトリテラルは次のプロパティを持つ．
      • helloという名前で，"こんにちは．"という文字列を値とするプロパティ
      • sayHelloという名前で，function() { alert(this.hello);}という関数リテラルを値とするプロパティ
    • 関数をプロパティとすると，その関数はそのオブジェクトのメソッドとなる．
      • sayHelloはobjのメソッドとなる．
  • 16行目
    • <オブジェクト>.<メソッド名>(引数のリスト)で，<オブジェクト>のメソッドを呼び出す．
      • obj.sayHello()でobjのメソッドsayHelloを呼び出す．