関数の引数
イベントハンドラから関数を呼び出す際に、数値や文字を関数へ引き渡す事も可能です。これを関数の引数といいます。ステップ07では、関数の引数を利用する方法を学習します。
7.1 関数の引数とは…？
ステップ03では、イベントハンドラの値に"関数名（）"を記述すると、その関数で定義されているJavaScriptを実行できることを学習しました。この際に引数を指定し、数値や文字を関数へ引き渡す事も可能です。
まずは、引数を指定した関数の呼び出しについて、その仕組みを解説していきましょう。たとえば、以下の例の場合、5という数値が関数「abc( )」に引き渡されます。続いて、引き渡された5が自動的に変数「s」に代入され、関数内の処理に利用されます。関数「abc( )」には「var a=s*3」という処理（変数の宣言）がありますが、変数「s」の値は5（引数）であるため、「a=s*3」の演算結果は15、すなわち「a」に15が代入されます。
7.2 引数の指定方法
先ほどの例でも示したように、引数を指定して関数を呼び出す場合は、関数名のカッコ内に数値または文字を記述します。数値を引数として渡す場合は、カッコ内に数値をそのまま記述します。一方、文字を引数として渡す場合は「'」（シングルクォーテーション）で挟んで文字を記述する必要があります。
・数値を引き渡す場合
・文字を引き渡す場合
もちろん、関数を定義する際に引数を受け取る変数を指定しておく必要もあります。この変数は、function文で関数名のカッコ内に変数名を記述すると指定できます。
7.3 引数を利用して関数を汎用化する
ここまでの解説で引数の概要は理解できたと思います。しかし、「なぜ引数が必要なのか？」という疑問は残っているでしょう。そこで、引数を便利に活用した例を次ページに示しておきましょう。
たとえば、JavaScriptで消費税（5%）を計算プログラムを作成するとします。これを引数を利用しないで作成すると、「Sample7_1.html」のように商品ごとに関数を作成しなければいけません。一方、商品価格を引数として関数に渡した場合、関数での処理は、①（商品価格）×1.05を計算、②演算結果を表示、という処理に統一できます。つまり、関数を汎用化できるわけです。
▼Sample7_1.html（ボタンごとに関数を用意した場合）
▼Sample7_2.html（関数を汎用化した場合）
※「Sample7_1.html」と「Sample7_2.html」の実行結果は全く同じです。「Sample7_2.html」の方がJavaScriptの記述が簡単になり、商品数の増加や価格変更にも容易に対応できます。
7.4 複数の引数を指定する場合
JavaScriptでは、複数の引数を関数に渡すことも可能です。複数の引数を指定する場合は、各引数を「，」（カンマ）で区切って記述します。もちろん、function文で関数を定義する際に、引数と同じ数だけ変数を用意しておく必要もあります。なお、関数へ引き渡された引数は、左から順に変数に代入されます。
▼Sample7_3html（商品名、価格を引数とした場合）
演習
（１）引数を活用し、ステップ06の演習（１）で作成したホームページを、1つの関数「kakezan()」だけで処理できるように改良してみましょう。
配列の演算
| 添字 | a | b | a×bを計算 |
|---|---|---|---|
| 0 | 5 | 33 | |
| 1 | 12 | 14 | |
| 2 | 18 | 65 |
※「kakezan0()」「kakezan1()」「kakezan2()」を1つの関数「kakezan()」に汎用化します。
※各イベントハンドラでは、配列の添字を引数として関数「kakezan()」に渡します。
※関数「kakezan()」では、引数を変数「i」で受け取ります。
※掛け算の演算では、配列「a」「b」の[ ]内に変数[ i ]を記述し、配列の添字を指定します。
※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)
→STEP06へ
→STEP08へ