あーりーです。
前回はJavaScriptの「while文」について書きました。
その記事がこちらです。
さ～て。今回は…
その「while文」を使って、ちょっと遊んでみようと思います。
冒険の旅
あなたはファンタジーの世界の「勇者」です。
悪者にさらわれたお姫様を助けるため、冒険の旅をしています。
これまでにJavaScriptを使って伝説の剣を手に入れたり、町の人から情報を得たりしてきました。
レストラン
旅はつづきます。
途中、あなたはレストランに立ち寄りました。
食事を終えると、あなたの席にシェフがやってきました。
星いくつ？
シェフは言いました。
「うちの店、おいしいでしょ？ 星いくつですか？」
さて。
あなたは星いくつあげますか？
JavaScriptで星の数を表現する
今回はJavaScriptで星の数を表現してみたいと思います。
たとえば、こうです。
入力ダイアログに「2」と入力して「OK」をクリックすると、以下のように表示される。
☆☆ 星2つ
入力ダイアログに「3」と入力して「OK」をクリックすると、以下のように表示される。
☆☆☆ 星3つ
というように…
入力した数字に応じて、画面の表示が変わるようにしてみます。
while文を使う
これを実現するために、前回の記事で書いた「while文」を使います。
星の表示を繰り返す
「while文」は反復処理を行うためのもです。
反復処理とは、繰り返しのことです。
今回は、入力された数字のぶんだけ「☆」マークの表示を繰り返す、という形で「while文」を使ってみます。
つまりこうです。
入力された数字が「1」なら、星は1回だけ表示され「☆」となります。
入力された数字が「2」なら、星は2回表示され「☆☆」となります。
入力された数字が「3」なら、星は3回表示され「☆☆☆」となります。
………
（以下略）
スクリプト
そのスクリプトがこちらです。
<html>
<head>
</head>
<body>
<script>
var s;
s=prompt("星の数は？","");
var x=1;
while(x<=s){
document.write("☆");
x++;
}
document.write("<br>星"+s+"つ");
</script>
</body>
</html>
緑色の部分がJavaScriptです。
実行すると？
上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…
「星の数は？」という質問とともに入力ダイアログが出てきます。
入力ダイアログの入力欄に、数字を半角で入れて「OK」をクリックします。
すると、入力した数字の数だけ「☆」マークが表示されます。
こんな感じです。
☆☆ 星2つ
解説
では、どんな仕組みでそうなるのか、じっくり見ていきましょう～。
変数「s」を準備する
まずこちら。
var s;
変数「s」を使う宣言をしています。
これによって変数「s」が使えるようになります。
この変数「s」は、何に使うかというと…
つぎの行で、星の数を代入するのに使います。
変数「s」に星の数を代入する
つぎの行です。
s=prompt("星の数は？","");
「prompt」で、入力ダイアログを表示します。
「prompt」には2組のダブルクォートがあります。
左側のダブルクォートには、入力ダイアログに表示される説明文を入れます。
今回は「星の数は？」と表示したいので、それを入れています。
右側のダブルクォートには、あらかじめ入力欄に入れておきたい文字を入れます。
今回は空欄なので、ここには何も入れていません。
「半角で入力してください」などと入れてもいいかも知れませんね。
入力ダイアログに入力された数字は、変数「s」に代入されます。
余談ですが、変数名の「s」は、星（スター）の頭文字から取りました。
変数「x」を準備する
つぎの行がこちらです。
var x=1;
ここで新しい変数が登場します。
「x」です。
「x」には、「1」が代入されていますね。
この変数は何に使うかというと…
反復処理を何回繰り返すかをコントロールするのに使います。
詳しくは、このあとの処理で。
while文の条件式
つぎの行です。
while(x<=s){
ここで「while文」が登場します。
条件式は「x<=s」です。
この条件式の意味は、
変数「x」が変数「s」以下であるうちは、処理を繰り返す
です。
たとえば星の数が「2」だとすると…
たとえば…
星の数（入力ダイアログに入力した数字）が「2」だとします。
変数「s」には「2」が代入されます。
一方…
変数「x」は現時点では「1」です。
これを条件式「x<=s」に当てはめると…
「1<=2」となります。
「1」は「2」以下、という意味です。
あってますね。
つまり、条件式が成り立ちます。
成り立つので、このあとの処理（「☆」マークを表示する処理）が行われます。
星を表示する
条件式が成立する場合に行われる処理のひとつ目がこちらです。
document.write("☆");
「document.write」によって「☆」マークが表示されます。
変数「x」に1を加算する
条件式が成立する場合に行われる処理の2つ目がこちらです。
x++;
複合代入演算子によって、変数「x」に「1」が加算されます。
「x」は今現在「1」ですから、これに「1」が加算されると、「2」になります。
もう一度while文の先頭へ
一連の処理が終わりました。
もう一度「while文」の先頭へ戻ります。
先頭はここですね。
while(x<=s){
ここでもう一度、条件式「x<=s」が成立するかどうか、判定します。
変数「x」は、さっき「1」が加算されて「2」になりました。
変数「s」はあいかわらず「2」です。
これを条件式にあてはめると…
「2<=2」
となります。
成立します。
2つ目の星を表示する
成立するので、再度「☆」を表示する処理が行われます。
そして、さっきと同じく「x」に「1」が加算されます。
これで「x」は「3」になりました。
またまたwhile文の先頭へ
一連の処理が終わったので、またまた「while文」の先頭へ戻ります。
ここです。
while(x<=s){
今回も、条件式「x<=s」が成立するかどうか判定します。
現在、変数「x」は「3」です。
変数「s」はあいかわらず「2」です。
これを条件式にあてはめると…
「3<=2」
となります。
「3」は「2」以下、という意味です。
そんなわけありません。
変です！
この条件式は成り立ちません。
while文から脱出
成り立たないので「while文」による繰り返しはこれで終了です。
「while文」から脱出します。
脱出したあとは…
「while文」から脱出した後は、こちらです。
document.write("<br>星"+s+"つ");
「document.write」によって文字を表示しています。
今回の例では、変数「s」は「2」なので、画面には「星2つ」と表示されます。
最終的な画面表示
というわけで…
最終的には、こんなふうに画面に表示されます。
☆☆ 星2つ
以上が「while文」でレストランに星をつける処理でした～。
むむっ。
お姫様を助ける冒険の旅という設定は、今回まったく関係ない気もしますが…
まあ、いいか。
最後までお付き合いありがとうございました。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
