あーりーです。
ここ最近は、変数の話をつづけてきました。
今回は、変数をつかって足し算をやってみます。
数字を足すのはもちろん、文字列を足す（合体させる）こともできます。
たとえば、こんなことができます
↓
数字の「100」と「300」を足して「400」にする。
文字列の「びしょ濡れ」と「ハンバーガー」を足して（合体させて）、「びしょ濡れハンバーガー」にする。
数字を足す
まず、数字の足し算をやってみます。
これです。
↓
<html> <head> </head> <body> <script> var a; // 変数aを使う宣言 a=100; // 変数aに100を代入 var b; // 変数bを使う宣言 b=300; // 変数bに300を代入 document.write(a+b); // a+bを表示 </script> </body> </html>
※少しでもわかりやすいように、JavaScriptのところは丁寧に、HTMLの部分は究極にあっさりと書いています。
緑色の部分がJavaScriptです。
解説
上の内容は、こうです。
まず、変数aを使う宣言をし、そこに数字の100を代入しています。
つぎに、変数bを使う宣言をし、そこに数字の300を代入しています。
最後に、a+bを表示しています。
表示結果
上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…
こんなふうに表示されます。
↓
表示結果
400
100+300は400ですから、400と表示されます。
これが数字の足し算です。
ダブルクォートで囲むと結果が変わる
いまは、数字として「100」と「300」を足しました。
だから、結果が「400」になりました。
数字としてではなく、文字列として足す（合体させる）と、「100300」になります。
文字列としてあつかうには、ダブルクォート（またはシングルクォート）で囲みます。
こんなふうに
↓
赤い部分がダブルクォートです。
<html> <head> </head> <body> <script> var a; // 変数aを使う宣言 a="100"; // 変数aに100を代入 var b; // 変数bを使う宣言 b="300"; // 変数bに300を代入 document.write(a+b); // a+bを表示 </script> </body> </html>
こうすると、「100」や「300」は数字ではなく文字列になります。
だから、足すと計算結果ではなく、単純に合体して「100300」と表示されます。
表示結果
100300
ダブルクォートで囲めば、文字列として合体させられることがわかりました。
では、実際に言葉を合体させてみましょう～。
文字列を足す（合体させる）
文字列をあつかう場合は、ダブルクォート（またはシングルクォート）で囲みます。
では、「びしょ濡れ」と「ハンバーガー」を足して（合体させて）「びしょ濡れハンバーガー」にしてみましょう。
<html> <head> </head> <body> <script> var a; // 変数aを使う宣言 a="びしょ濡れ"; // 変数aに代入 var b; // 変数bを使う宣言 b="ハンバーガー"; // 変数bに代入 document.write(a+b); // a+bを表示 </script> </body> </html>
緑色の部分がJavaScriptです。
「びしょ濡れ」や「ハンバーガー」という文字は、ダブルクォートで囲ってあります。
解説
上の内容は、こうです。
まず、変数aを使う宣言をし、そこに「びしょ濡れ」という文字列を代入しています。
つぎに、変数bを使う宣言をし、そこに「ハンバーガー」という文字列を代入しています。
最後に、a+bを表示しています。
a+bとはつまり、「びしょ濡れ」+「ハンバーガー」です。
表示結果
上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…
こんなふうに表示されます。
↓
表示結果
びしょ濡れハンバーガー
文字列が合体しました！
おまけ
ここからは余談です。
「びしょ濡れハンバーガー」は、a+b の順番で合体させました。
この部分です。
↓
document.write(a+b);
これを逆の b+a にしてみます。
つまり、こうです。
↓
document.write(b+a);
すると文字列の合体の順番も逆になって、こんなふうに表示されます。
表示結果
ハンバーガーびしょ濡れ
逆になりました。
さらに…
変数aの数を増やしてみます。
3回足してみましょう。
document.write(b+a+a+a);
すると、表示結果は「ハンバーガーびしょ濡れびしょ濡れびしょ濡れ」となります。
何が言いたいかというと、変数を入れ替えたり、足す数を変えたりすることで、いろんな表示ができるようになる、っていうことです。
以上、数字や文字列の足し算についてでした～。
今回はこれでおしまい。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
