あーりーです。
JavaScriptのことをマイペースで書いています。
前回は、変数に情報（数字や文字）を代入する方法を見てきました。
きょうも変数のことを少し。
変数の中身は上書きされる
おなじ変数に次々と情報を代入していくと、どんどん上書きされます。
さんざん上書きしたあとに変数の中身を画面に表示すると、上書きされた最新のものが表示されます。
上書き前の状態
たとえば、こんなサンプルがあるとします。
これはまだ上書きをしていない、ふつう（？）の状態のものです。
上書きをしていないっていうのは、つまり、変数の代入が1回だけっていうことです。
sample.html
<html> <head> </head> <body> <script> var xxx; // 変数xxxを使う宣言 xxx="あいうえお"; // 変数xxxに「あいうえお」を代入 document.write(xxx); // 変数xxxを画面に表示 </script> </body> </html>
緑色の部分がJavaScriptです。
赤い部分がコメント（説明文）です。コメントの書き方はこちらをご覧ください。
表示結果
これをメモ帳などのエディタにコピペして、HTML形式で保存し、そのファイルを開くと…
こんな表示結果になります。
表示結果
あいうえお
実験１ 変数を上書きしてみよう
では、実験です。
変数を上書きしてみます。
変数xxxに、「あいうえお」「かきくけこ」「さしすせそ」を次々と代入してみますね。
それが、こちら。
↓
sample2.html
<html> <head> </head> <body> <script> var xxx; // 変数xxxを使う宣言 xxx="あいうえお"; // 変数xxxに「あいうえお」を代入 xxx="かきくけこ"; // 変数xxxに「かきくけこ」を代入 xxx="さしすせそ"; // 変数xxxに「さしすせそ」を代入 document.write(xxx); // 変数xxxを画面に表示 </script> </body> </html>
表示結果
これをメモ帳などのエディタにコピペして、HTML形式で保存して、ファイルを開くと…
こうなります。
表示結果
さしすせそ
最後に代入された「さしすせそ」が表示されます。
ここからわかるのは、おなじ変数（この場合はxxxx）に情報を次々と代入すると、上書きされるっていうことです。
実験２ 上書きするたびに表示してみよう
もうちょっと実験してみます。
さっきは、上書きして上書きして、最後の最後に表示しました。
すると、最後に代入した情報が表示されました。
今度は、上書きするたびに表示してみます。
これです。
↓
sample3.html
<html> <head> </head> <body> <script> var xxx; // 変数xxxを使う宣言 xxx="あいうえお"; // 変数xxxに「あいうえお」を代入 document.write(xxx); // 変数xxxを画面に表示 xxx="かきくけこ"; // 変数xxxに「かきくけこ」を代入 document.write(xxx); // 変数xxxを画面に表示 xxx="さしすせそ"; // 変数xxxに「さしすせそ」を代入 document.write(xxx); // 変数xxxを画面に表示 </script> </body> </html>
変数xxxに情報を代入するたびに、1回1回表示しています。
表示結果
これをメモ帳などのエディタにコピペして、HTML形式で保存して、ファイルを開くと…
こうなります。
じゃーん。
表示結果
あいうえおかきくけこさしすせそ
というわけで。
「xxx」という1つの変数だけで、「あいうえお」「かきくけこ」「さしすせそ」という3つの情報が表示されました。
おまけ 改行するには
上の表示結果は、ずらーっと1行で表示されました。
1行ごとに改行して表示したいときは、<br>タグを使います。
赤い部分が、今回追加した<br>タグです。
sample4.html
<html> <head> </head> <body> <script> var xxx; // 変数xxxを使う宣言 xxx="あいうえお<br>"; // 変数xxxに「あいうえお」を代入 document.write(xxx); // 変数xxxを画面に表示 xxx="かきくけこ<br>"; // 変数xxxに「かきくけこ」を代入 document.write(xxx); // 変数xxxを画面に表示 xxx="さしすせそ<br>"; // 変数xxxに「さしすせそ」を代入 document.write(xxx); // 変数xxxを画面に表示 </script> </body> </html>
表示結果
上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、ファイルを開くと…
こうなります。
表示結果
あいうえお かきくけこ さしすせそ
改行されました！
以上、JavaScriptの変数は上書きされる、という話でした。
今回はこれでおしまい。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
