代入演算子を使って計算をする
JavaScript における演算子についてご紹介します。ホームページやブログなどのウェブサイトで、JavaScript を使って演算を行うことができます。 算術演算子と同様に代表的なのが この代入演算子で、下表のようなものがあります。
| = | 代入 | 値を変数に代入します。 |
| += | 加算 | 指定された値を加算します。a+=10 は a=a+10 と同じです。 |
| －= | 減算 | 指定された値を減算します。a-=10 は a=a-10 と同じです。 |
| *= | 乗算 | 指定された値を乗算します。a*=10 は a=a*10 と同じです。 |
| /= | 除算 | 指定された値を除算します。a/=10 は a=a/10 と同じです。 |
| %= | 余剰 | 指定された値で除算し、余りを求めます。a%=10 は a=a%10 と同じです。 |
サンプルです。
<SCRIPT LANGUAGE="JavaScript">
<!--
a = 16 ; document.write("a = 16 で代入すると、a は ", a ,"です。<br>");
a = 16 ; document.write("a += 5 は、 ", a += 5 ," です。<br>" );
a = 16 ; document.write("a -= 5 は、 ", a -= 5 ," です。<br>" );
a = 16 ; document.write("a *= 5 は、 ", a *= 5 ," です。<br>" );
a = 16 ; document.write("a /= 5 は、 ", a /= 5 ," です。<br>" );
a = 16 ; document.write("a %= 5 は、 ", a %= 5 ," です。" );
//-->
</SCRIPT>
<!--
a = 16 ; document.write("a = 16 で代入すると、a は ", a ,"です。<br>");
a = 16 ; document.write("a += 5 は、 ", a += 5 ," です。<br>" );
a = 16 ; document.write("a -= 5 は、 ", a -= 5 ," です。<br>" );
a = 16 ; document.write("a *= 5 は、 ", a *= 5 ," です。<br>" );
a = 16 ; document.write("a /= 5 は、 ", a /= 5 ," です。<br>" );
a = 16 ; document.write("a %= 5 は、 ", a %= 5 ," です。" );
//-->
</SCRIPT>
このソースを表示させると、次のようになります。
上記のようなサンプルは、１度表示したらそれっきりですので わざわざ JavaScript を用いて表示するまでもないような内容です。一般的には、フォームなどを使って入力された数値の計算などに用いられます。
演算子のラジオボタンにチェックを付けてみてください。一番右側のテキストボックスに計算結果が表示されます。
このサンプルのソースは、次のようになっています。
<SCRIPT LANGUAGE="JavaScript">
<!--
function CalcA(EnzanA) {
</SCRIPT>
<form name="SanjutuA">
<!--
function CalcA(EnzanA) {
Text1 = document.SanjutuA.text1.value;
Text2 = document.SanjutuA.text2.value;
if ( EnzanA == "+=" ) { Text1 += Text2 ; }
if ( EnzanA == "-=" ) { Text1 -= Text2 ; }
if ( EnzanA == "*=" ) { Text1 *= Text2 ; }
if ( EnzanA == "/=" ) { Text1 /= Text2 ; }
if ( EnzanA == "%=" ) { Text1 %= Text2 ; }
document.SanjutuA.ans.value = Text1 ;
}
//-->Text2 = document.SanjutuA.text2.value;
if ( EnzanA == "+=" ) { Text1 += Text2 ; }
if ( EnzanA == "-=" ) { Text1 -= Text2 ; }
if ( EnzanA == "*=" ) { Text1 *= Text2 ; }
if ( EnzanA == "/=" ) { Text1 /= Text2 ; }
if ( EnzanA == "%=" ) { Text1 %= Text2 ; }
document.SanjutuA.ans.value = Text1 ;
}
</SCRIPT>
<form name="SanjutuA">
<input type="text" name="text1" size="4" value="16">
<input type="radio" name="EnzanA" onClick="CalcA('+=')">+=
<input type="radio" name="EnzanA" onClick="CalcA('-=')">-=
<input type="radio" name="EnzanA" onClick="CalcA('*=')">*=
<input type="radio" name="EnzanA" onClick="CalcA('/=')">/=
<input type="radio" name="EnzanA" onClick="CalcA('%=')">%=
<input type="text" name="text2" size="4" value="5">→
<input type="text" name="ans" size="8">
</form>
<input type="radio" name="EnzanA" onClick="CalcA('+=')">+=
<input type="radio" name="EnzanA" onClick="CalcA('-=')">-=
<input type="radio" name="EnzanA" onClick="CalcA('*=')">*=
<input type="radio" name="EnzanA" onClick="CalcA('/=')">/=
<input type="radio" name="EnzanA" onClick="CalcA('%=')">%=
<input type="text" name="text2" size="4" value="5">→
<input type="text" name="ans" size="8">
『 = 』以外の加算、減算などの代入演算子は、算術演算子で代用できますが、この代入演算子を使うと、余分な変数を指定しないで済んだり、ソースを短く、すっきりと記述することができます。
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス