JavaScriptのwhile文でレストランに星を付ける

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

あーりーです。

前回はJavaScriptの「while文」について書きました。

その記事がこちらです。

よくわかる「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入門」にまとめてあります。よろしければご覧ください。

A8 JavaScript

おまけ

JavaScriptを一人で勉強していてわからないことがあれば、teratailで質問することをおすすめします。

プログラミングに特化したYahoo!知恵袋のようなサイトです。

超・初心者のぼくにも優しく教えてくれました。

とても感謝しています。

関連記事コンテンツ



シェアする

  • このエントリーをはてなブックマークに追加

フォローする

自己紹介

あーりーと申します。アクセスありがとうございます。布団でぬくぬくしながら本を読んだりスマホでテレビを見たり、のんびり過ごすのが好きです。

ブログ村

ブログランキング・にほんブログ村へ