数値計算(その６)
前回の続きです。
さて。前回は関数には引数というものがあって、これを利用する事で似たような処理をまとめる事が出来る事を説明しました。
ここで、前回の内容を使ってその４の最後に出てきたAdd.html内の関数Add()とAdd2()をひとつにまとめてみましょう。
※まずはAdd.htmlの確認(↓これです)
<html> <head> <title>引数のテスト</title> </head> <script type="text/javascript"> function Add() { frm1.txt3.value = (parseInt(frm1.txt1.value) + parseInt(frm1.txt2.value)); } // 関数名をAdd2としました // function Add2() { // Addの内容をコピーしてfrm1をfrm2に変えただけです // frm2.txt3.value = (parseInt(frm2.txt1.value) + parseInt(frm2.txt2.value)); } </script> <body> <form name="frm1"> <input type="text" name="txt1" size="15" value=0>＋ <input type="text" name="txt2" size="15" value=0>＝ <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=0>＋ <input type="text" name="txt2" size="15" value=0>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Add2()" value="計算実行"> </form> </body> </html>
ではこのAdd()とAdd2()をまとめてみます。基本的には前回のソースそのままに近いです。
[答え]
<html> <head> <title>引数のテスト</title> </head> <script type="text/javascript"> function Add(a,b,c) { c.value = (parseInt(a) + parseInt(b)); } </script> <body> <form name="frm1"> <input type="text" name="txt1" size="15" value=0>＋ <input type="text" name="txt2" size="15" value=0>＝ <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=0>＋ <input type="text" name="txt2" size="15" value=0>＝ <input type="text" name="txt3" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Add(txt1.value,txt2.value,txt3)" value="計算実行"> </form> </body> </html>
詳しくは前回の解説を読んでください。
# 分からなければコメントへGO!!
さてさて。今回は最後に課題を出します。暇な時にやってみてください。
[課題]
以下を引数付きの関数を使って書き換えてください。
<html> <head> <title>四則演算</title> </head> <script type="text/javascript"> function Multiply() { frm1.result.value = (frm1.firstValue.value * frm1.secondValue.value); } function Add() { frm2.result.value = (parseInt(frm2.firstValue.value) + parseInt(frm2.secondValue.value)); } function Minus() { frm3.result.value = (frm3.firstValue.value - frm3.secondValue.value); } function Divide() { frm4.result.value = (frm4.firstValue.value / frm4.secondValue.value); } </script> <body> ★掛け算 <form name="frm1"> <input type="text" name="firstValue" size="15" value=0>× <input type="text" name="secondValue" size="15" value=0>＝ <input type="text" name="result" size="15" value=0> <INPUT type="button" name="buttoncalc" onClick="Multiply()" value="計算実行"> </form> <br> ★足し算 <form name="frm2"> <input type="text" name="firstValue" size="15" value=0>＋ <input type="text" name="secondValue" size="15" value=0>＝ <input type="text" name="result" size="15" value=0> <INPUT type="button" name="buttonadd" onClick="Add()" value="計算実行"> </form> <br> ★引き算 <form name="frm3"> <input type="text" name="firstValue" size="15" value=0>− <input type="text" name="secondValue" size="15" value=0>＝ <input type="text" name="result" size="15" value=0> <INPUT type="button" name="buttonminus" onClick="Minus()" value="計算実行"> </form> <br> ★割り算 <form name="frm4"> <input type="text" name="firstValue" size="15" value=0>÷ <input type="text" name="secondValue" size="15" value=0>＝ <input type="text" name="result" size="15" value=0> <INPUT type="button" name="buttondivide" onClick="Divide()" value="計算実行"> </form> <br> </body> </html>
答えは次回で。
★参考サイト
[HTML/JavaScript]
