変数+=式; の表現で、変数の内容を、式の演算結果だけ増やす変更できます。
(例 a += 10 - 3 * 2;で式の演算結果の4だけ変数aを増やします。)
ここで、変数を式の中に使うと、変数の変更前の値で演算したデータに変更できます。
例えば、a = 5;の後で、
a += 2;を実行すると、aは2増えて7になります。
（この表現は、a = a + 2;と全く同じです。）
なお、文字列の変数であれば+は連結演算になります。例えば、a = "5";の後で、
a += 2;を実行すると、aは2が連結されて"52"となります。
（この表現は、a = a + 2;と全く同じです。）
下記の部分は、変数を使ってテキストフィールドを変化させる例です。
<script type="text/javascript"><!--
var b="1";
function btn_click1(){
b += 2;
document.form1.text1.value=b;
}
--></script>
<form name="form1">
<input type="text" value="1" size="10"name="text1"><br>
<input type="button" value="2を連結する" onclick="btn_click1()">
</form>
下記の部分は、変数を使ってテキストフィールドを増やす例です。
<script type="text/javascript"><!--
var c=1;
function btn_click2(){
c += 2;
document.form2.text2.value=c;
}
--></script>
<form name="form2">
<input type="text" value="1" size="10"name="text2"><br>
<input type="button" value="2増やす" onclick="btn_click2()">
</form>
変数+=式; で +=は、+と-を複合させた演算なので、複合演算子と
よばれます。そして、 +と=を連続した時に一つのまとまった機能として取り扱われます。
このような複合演算子は、+=以外に
-= *= /= %= などたくさん存在します。
+=は、文字列に対して使うと連結演算でしたが、
-= *= /= %= は、数値演算が行われます。
つまり左の変数の記憶内容が文字列であっても、
数値として判断できる場合は、算術演算の結果になります。
各表現の動作を例を使って 表としてまとめます。
| 複合演算の表現 | 説明 |
|---|---|
| a-=3 | a=a-3と同じで、aに記憶される数値を3減らした値に変更する。 |
| a*=3 | a=a*3と同じで、aに記憶される数値を3倍した値に変更する。 |
| a/=3 | a=a/3と同じで、aに記憶される数値を3で割った値に変更する。 |
| a%=3 | a=a%3と同じで、aに記憶される数値を3で割った余りの値に変更する。 |
C言語やJavaなどのプログラム言語では、
整数同士の演算結果が 少数点以下の切り捨てられた整数になる規則があります。
それに慣れていると違和感があるかもしれませんが、
そのような規則はありません。
例えば、 10 / 3は、3.333・・と近似値を示す不動小数点の実数と
呼ばれる演算結果が得られます。
例→
ここで、近似値でなく少数点以下の切り捨てられた整数の値が欲しい場合は、
Math.floor関数を利用します。
例→
下記の部分は、変数を使ってテキストフィールドを2で割った値へ変化させる例です。
<script type="text/javascript"><!--
var b="2";
function btn_click3(){
b /= 2;
document.form3.text1.value=b;
}
--></script>
<form name="form3">
<input type="text" value="2" size="10"name="text1"><br>
<input type="button" value="2で割った値へ変更する" onclick="btn_click3()">
</form>
「変更」のボタンクリックで、変数xxx
の変数を、
+= -= *= /= %= のいずれかを使ってxxxの値で変更し、
それでテキストフィールドの内容を変更します。
変更対象のテキストフィールドの名前はxxxとして、
この処理関数名はxxxとします。
フォームの名前は、xxxにしてdivの中に配置してください。
そして inputタグの属性は、 type value name size="5" onclick
としてこの順番にして、必要ないものは省略してください。