解説・結果

ヨッシーの”ホームページを作ろう(JavaScript編)”Vol.7

サンプル1

<SCRIPT language="JavaScript">
document.write("HELLO!");
</SCRIPT>

《結果》


《解説》


<SCRIPT language="JavaScript">     ←JavaScriptの始まり
document.write("HELLO!");          ←画面に"HELLO!"と表示する
</SCRIPT>                     ←JavaScriptの終わり


JavaScriptの書き方を思い出そうね。
JavaScriptのはじめは
<SCRIPT language="JavaScript">、おわりは</SCRIPT>のように書くんだったね。
画面に文字を表示するときはdocument.write("表示したい文字列")だよ。

 

サンプル2

<SCRIPT language="JavaScript">
alert("HELLO!");
</SCRIPT>

《結果》

こちら


《解説》


<SCRIPT language="JavaScript">
alert("HELLO!");                ←警告ウィンドウ(alert)に"HELLO!"という表示をする
</SCRIPT>


警告ウィンドウを出してそこに文字を表示する命令はalert("表示したい文字列")だね。

 

サンプル3

<SCRIPT language="JavaScript">
myname='ヨッシー';
document.write("私の名前は"+myname+"です。");
</SCRIPT>

《結果》


《解説》


<SCRIPT language="JavaScript">
myname='ヨッシー';                                             ←mynameという変数に'ヨッシー'という文字列を入れた
document.write("私の名前は"+myname+"です。");←mynameは""でくくられていないので変数展開される(ヨッシーになる)。
</SCRIPT>


まずmynameにはヨッシーというものが入れられてるね。
つぎにdocument.writeで文字を表示するんだけどそこで普通に文字を表示する方法と変数(myname)を表示する方法の2つを組み合わせて使っているね。
文字列の結合(並べる場合)は”+”の記号を使ってくっつけてやるんだ。
つまり表示する文字列は、
”私の名前は
mynameです。”→”私の名前はヨッシーです。”
のようになるね。

 

サンプル4

<SCRIPT language="JavaScript">
for(i=10;i>0;i--){
document.write("爆発"+ i +"秒前!<br>");
}
document.write("ボカーン!");
</SCRIPT>

《結果》


《解説》


<SCRIPT language="JavaScript">
for(i=10;i>0;i--){                ←for文を思い出そう。i=10から始まって i >0 (0は入らない)まで減っていく。
document.write("爆発"+ i +"秒前!<br>");←さっきの単語の結合だよ。i にはfor文によって10から1まで減っていく。
}
document.write("ボカーン!");          ←”ボカーン”と画面に表示する。
</SCRIPT>


たったこれだけの命令で上の結果のように11行も表示できるプログラムだよ。
まずfor文を思い出そう。
for(i=10;i>0;i--);
というのははじめに i =10 としておいて、i >0 (0 は含まない)つまり i = 1 まで i を減らして(i--)繰り返すという命令だね。
つまり
1回目: i = 10  2回目: i = 9  3回目: i = 8
4回目: i = 7    5回目: i = 6  6回目: i = 5
7回目: i = 4  8回目: i = 3  9回目: i = 2

10回目: i = 1  11回目: i = 0(これはダメ)
つまり10回実行されることになるね。
次に
for文の中にあるdocument.write("爆発"+ i +"秒前!<br>");という命令。
この中に
i という変数があるのはわかるかな?
つまり、1回目のループは
i = 10 だね。(上の緑のところを見よう!)
だから1回目の命令では
"爆発 i 秒前!"→"爆発10秒前!"っていうふうに表示されるよね。
続いて2回目のループでは
i = 9 になっている(上の緑のところを見よう!)ので、
"爆発 i 秒前!"→"爆発9秒前!"
となるね。
このようにして
i = 10 から i = 1 まで順番にループされて最後にループから出たときに、
document.write("ボカーン!");
で画面に"ボカーン!"と表示されるんだね。