勉強部屋‎ > ‎HTML5‎ > ‎

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>セミナー演習3(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>セミナー演習3(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を呼び出す.