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」ボタンを押してください．
- メインのウィンドウには何も表示されません．

ソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>セミナー演習３(1)</title>
<script type="text/javascript">
"use strict";
function plusOne(n) {
return n + 1;
}
function double(n) {
return 2 * n;
}
function square(n) {
return n * n;
}
var calc = function (n, f) {
alert(f(n));
};
calc(1, plusOne);
calc(2, double);
calc(3, square);
calc(4, function (n) {
return -n;
});
</script>
</head>
<body>
</body>
</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ボタンを押してください．
- メインのウィンドウには何も表示されません．

ソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>セミナー演習３(2)</title>
<script type="text/javascript">
"use strict";
var obj = {
hello : "こんにちは．",
sayHello : function () {
alert(this.hello);
}
};
obj.sayHello();
</script>
</head>
<body>
</body>
</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を呼び出す．

Google Sites

Report abuse