数値計算(その５)
前回はこちら。
今回はそもそも関数とは？というところから攻めてみようと思います。
まず関数の定義ですが、以前ここで説明したとおり、「特定の処理に名前を付けたモノ」です。今まで使用してきた関数はこんな感じです。
<script type="text/javascript"> function Add() { frm1.txt3.value = (parseInt(frm1.txt1.value) + parseInt(frm1.txt2.value)); } </script>
ではこの処理を日本語に置き換えてみます。
関数Add()は、フレーム(frm1)の中にあるテキストボックス(txt3)に、同じくフレーム(frm1)の中にあるテキストボックス(txt1)とテキストボックス(txt2)の中の値を足した結果を表示する
では突然ですが、ここで一つ新しい関数を導入してみます。
<script type="text/javascript"> function Add_New(a,b,c) { c.value = (parseInt(a) + parseInt(b)); } </script>
これを日本語にしてみるとこんな感じになります。
関数Add_New(a,b,c)は、cのvalueに、aとbを足した結果を代入する
Add()とAdd_New(a,b,c)の違いは一目瞭然でして、()の中に文字が入っているかどうかです。関数Add_New(a,b,c)の括弧の中の文字(aとbとc)は引数(ひきすう)といいます。関数に初期値として与える情報の事です。
Add()とAdd_New(a,b,c)はどちらも同じように足し算をする関数なのですが、汎用的に使えるのはAdd_New(a,b,c)です。
理由は
-
- テキストボックスやフレームの名前が変わっても関数を修正する必要がない
- 引数に適当な情報を入れることで様々な足し算を実行できる
の２つです。早速具体例を挙げる前に、まずはテスト用のHTMLを作りましょう。
※テスト用のHTMLを作成します
(1) まずはメモ帳を開いて以下のテキストを入力してください(コピペ可)
<html> <head> <title>関数の確認</title> </head> <script type="text/javascript"> function Add() { frm1.txt3.value = (parseInt(frm1.txt1.value) + parseInt(frm1.txt2.value)); } function Minus() { frm2.txt3.value = (parseInt(frm2.txt1.value) - parseInt(frm2.txt2.value)); } </script> <body> <form name="frm1"> <input type="text" name="txt1" size="15" value=10>＋ <input type="text" name="txt2" size="15" value=20>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Add()" value="計算実行"> </form> <form name="frm2"> <input type="text" name="txt1" size="15" value=30>− <input type="text" name="txt2" size="15" value=14>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Minus()" value="計算実行"> </form> </body> </html>
(2) デスクトップにfunc1.htmlという名前で保存します
(3) デスクトップに作成されたfunc1.htmlを実行してください
(4) ためしに計算してみてください
10+20と30-14を実行した結果です
(5) 次に再度メモ帳を開いて以下のテキストを入力してください(コピペ可)
<html> <head> <title>関数の確認[引数]</title> </head> <script type="text/javascript"> function Add(a,b,c) { c.value = (parseInt(a) + parseInt(b)); } function Minus(a,b,c) { c.value = (parseInt(a) - parseInt(b)); } </script> <body> <form name="frm1"> <input type="text" name="txt1" size="15" value=10>＋ <input type="text" name="txt2" size="15" value=20>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Add(txt1.value,txt2.value,txt3)" value="計算実行"> </form> <form name="frm2"> <input type="text" name="txt1" size="15" value=30>− <input type="text" name="txt2" size="15" value=14>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Minus(txt1.value,txt2.value,txt3)" value="計算実行"> </form> </body> </html>
(6) デスクトップにfunc2.htmlという名前で保存します
(7) デスクトップに作成されたfunc2.htmlを実行してください
(8) ためしに計算してみてください
10+20と30-14を実行した結果です
これで事前準備は完了です。これからはこのfunc1.htmlとfunc2.htmlを使って関数に引数がある場合と無い場合で、どのような影響があるのか見て行きます。
1. テキストボックスやフレームの名前が変わっても関数を修正する必要がない
テキストボックスの名前が気に入らないという事で名前を変えましょうとなった場合にfunc1.htmlとfunc2.htmlそれぞれにどういった修正が必要となるのか試して見ましょう。
(1) func1.html(引数なしのソース)の場合
<html> <head> <title>関数の確認</title> </head> <script type="text/javascript">
ここから修正
function Add()
{
frm1_new.txt3.value = (parseInt(frm1_new.txt1.value) + parseInt(frm1_new.txt2.value));
}
function Minus()
{
frm2_new.txt3.value = (parseInt(frm2_new.txt1.value) - parseInt(frm2_new.txt2.value));
}
</script>
<body>
ここまで修正
ここから修正
<form name="frm1"> <input type="text" name="txt1_new" size="15" value=10>＋ <input type="text" name="txt2_new" size="15" value=20>＝ <input type="text" name="txt3_new" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Add()" value="計算実行"> </form> <form name="frm2"> <input type="text" name="txt1_new" size="15" value=30>− <input type="text" name="txt2_new" size="15" value=14>＝ <input type="text" name="txt3_new" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Minus()" value="計算実行"> </form>
ここまで修正
</body> </html>
変更がテキストボックスの部分からJavaScriptの関数にまで及んでます。変更規模は大きめ。
(2) func2.html(引数ありのソース)の場合
<html> <head> <title>関数の確認[引数]</title> </head> <script type="text/javascript"> function Add(a,b,c) { c.value = (parseInt(a) + parseInt(b)); } function Minus(a,b,c) { c.value = (parseInt(a) - parseInt(b)); } </script> <body>
ここまでは修正無し
ここから修正
<form name="frm1"> <input type="text" name="txt1_new" size="15" value=10>＋ <input type="text" name="txt2_new" size="15" value=20>＝ <input type="text" name="txt3_new" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Add(txt1_new.value,txt2_new.value,txt3_new)" value="計算実行"> </form> <form name="frm2"> <input type="text" name="txt1_new" size="15" value=30>− <input type="text" name="txt2_new" size="15" value=14>＝ <input type="text" name="txt3_new" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Minus(txt1_new.value,txt2_new.value,txt3_new)" value="計算実行"> </form>
ここまで修正
</body> </html>
引数つきの関数を利用している場合には関数自体の修正をする必要がありません。なぜなら、引数として渡ってくるのはあくまでデータとしての値であって、テキストボックスではありません。その為、テキストボックスの名前が変わろうが、関数の中でやる事は変わりません。
[まとめ]
引数がある関数の方が、修正時の影響範囲は小さくなる。
2. 引数に適当な情報を入れることで様々な足し算を実行できる
さらに同じような処理を追加しないといけなくなった場合にfunc1.htmlとfunc2.htmlそれぞれにどういった修正が必要となるのか試して見ましょう。
では、足し算と引き算をするためのテキストボックスをもう１セット作りましょう。
(1) func1.html(引数なしのソース)の場合
<html> <head> <title>関数の確認</title> </head> <script type="text/javascript"> function Add() { frm1.txt3.value = (parseInt(frm1.txt1.value) + parseInt(frm1.txt2.value)); } function Minus() { frm2.txt3.value = (parseInt(frm2.txt1.value) - parseInt(frm2.txt2.value)); }
ここまで修正無し
ここから追加
function Add2()
{
frm3.txt3.value = (parseInt(frm3.txt1.value) + parseInt(frm3.txt2.value));
}
function Minus2()
{
frm4.txt3.value = (parseInt(frm4.txt1.value) - parseInt(frm4.txt2.value));
}
ここまで追加
</script> <body> <form name="frm1"> <input type="text" name="txt1" size="15" value=10>＋ <input type="text" name="txt2" size="15" value=20>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Add()" value="計算実行"> </form> <form name="frm2"> <input type="text" name="txt1" size="15" value=30>− <input type="text" name="txt2" size="15" value=14>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Minus()" value="計算実行"> </form>
ここまで修正無し
ここから追加
<form name="frm3"> <input type="text" name="txt1" size="15" value=10>＋ <input type="text" name="txt2" size="15" value=20>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Add2()" value="計算実行"> </form> <form name="frm4"> <input type="text" name="txt1" size="15" value=30>− <input type="text" name="txt2" size="15" value=14>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Minus2()" value="計算実行"> </form>
ここまで追加
</body> </html>
変更がテキストボックスの部分からJavaScriptの関数にまで及んでます。テキストボックスの修正同様、変更規模は大きめ。
(2) func2.html(引数ありのソース)の場合
<html> <head> <title>関数の確認[引数]</title> </head> <script type="text/javascript"> function Add(a,b,c) { c.value = (parseInt(a) + parseInt(b)); } function Minus(a,b,c) { c.value = (parseInt(a) - parseInt(b)); } </script> <body> <form name="frm1"> <input type="text" name="txt1" size="15" value=10>＋ <input type="text" name="txt2" size="15" value=20>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Add(txt1.value,txt2.value,txt3)" value="計算実行"> </form> <form name="frm2"> <input type="text" name="txt1" size="15" value=30>− <input type="text" name="txt2" size="15" value=14>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Minus(txt1.value,txt2.value,txt3)" value="計算実行"> </form>
ここまで修正無し
ここから追加
<form name="frm3"> <input type="text" name="txt1" size="15" value=10>＋ <input type="text" name="txt2" size="15" value=20>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Add(txt1.value,txt2.value,txt3)" value="計算実行"> </form> <form name="frm4"> <input type="text" name="txt1" size="15" value=30>− <input type="text" name="txt2" size="15" value=14>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Minus(txt1.value,txt2.value,txt3)" value="計算実行"> </form>
ここまで追加
</body> </html>
テキストボックスやボタンを追加しただけで関数は追加していません。関数は元からあるものを流用しています。
[まとめ]
関数が流用出来るので追加後に新たに関数を追加する必要が無い。
関数に引数を付けるという事はそれだけ処理を抽象的にするということになります。そのおかげで様々な処理をすることが可能となり、似たような処理を既に実装している場合には新たに作る必要がなくなります。
またそうする事で仮にその処理に修正があった場合には一箇所を直すだけで全体が修正されます。
なんてメリットはそのうち分かるとして、まずは関数は引数を取れるという事だけ覚えて置いてください。
