JavaScript よくわかる「while文」の基本

シェアする

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

あーりーです。

JavaScriptで遊んでいます。

ここ最近は、JavaScriptの「分岐処理」について記事を書いてきました。

お姫様を助ける冒険の旅に出て、伝説の剣を手に入れたり町の人から情報をもらったりと、楽しみながら勉強しています。

さてさて。

今回のテーマはJavaScriptの「反復処理」です。

スポンサーリンク

反復処理とは

反復処理とは、プログラム上の同じ場所をグルグルと行ったり来たりして、処理を繰り返すことです。

while(ホワイル)

反復処理のひとつに「while文」があります。

スポンサーリンク

構造

「while文」の構造は、こちらです。

while(条件式){
条件式が成立するときの処理
}

最初に「条件式」があります。

その「条件式」が成立する間は、ずっと「条件式が成立するときの処理」が繰り返されます。

と、言われても…

言葉があいまいすぎてピンと来ませんよね。

具体的に見ていきますね。

具体例

以下が「while文」を使った反復処理の具体例です。

<html>
<head>
</head>
<body>

<script>
var x=1;
while(x<=3){
document.write(x);
x++;
}
</script>

</body>
</html>

HTMLの中に直接JavaScriptを組み込む形式で書いています。

緑色の部分がJavaScriptです。

HTMLの部分は、話のメインではないので、できるだけあっさりと書いています。

実行のしかた

上の内容を実行する方法は、こうです。

まず、上の内容をメモ帳などのエディタにコピペします。

それをHTML形式で保存します。

あとは、そのファイルを開くだけです。

実行結果

上の内容を実行すると(ファイルを開くと)ブラウザにこんなふうに表示されます。

123

これのどこが反復処理なの?

これのどこが反復処理かというと…

1回目に「1」という数字が表示され、

2回目に「2」という数字が表示され、

3回目に「3」という数字が表示されています。

そういう反復処理が行われています。

解説

では、どういう仕組みなのか、詳しく見ていきましょ~。

解説のため、JavaScriptの部分を切り取りますね。

こちらです。

var x=1;
while(x<=3){
document.write(x);
x++;
}

変数「x」

まず、この赤い部分をご覧ください。

var x=1;
while(x<=3){
document.write(x);
x++;
}

変数「x」に数字の「1」を代入しています。

while文の条件式

つぎに…

この赤い部分をご覧ください。

var x=1;
while(x<=3){
document.write(x);
x++;
}

ここで「while文」が登場します。

条件式は「x<=3」です。

この意味は、

変数「x」は「3」以下

です。

この条件式が成立するあいだは、それ以降の処理が繰り返されます。

※変数「x」の中身はこの後どんどん変わるので、いつか成立しなくなります。

条件式が成立するときの処理

では…

条件式が成立するあいだは、どんな処理が行われるでしょう。

それがこの赤い部分です

var x=1;
while(x<=3){
document.write(x);
x++;
}

まず…

document.write(x);」によって、変数「x」が画面に表示されます。

変数「x」は「1」ですから、画面には「1」と表示されます。

つぎに「x++;」です。

これは複合代入演算子です。

意味は、

変数「x」に「1」を加算する

です。

これによって、変数「x」の中身は「2」になります。

1周目が終了

はい。

これで1周目の処理が終わりました。

2週目に突入

「while文」の2週目に突入するため、またこの赤い部分に戻ります。

var x=1;
while(x<=3){
document.write(x);
x++;
}

ここでまた条件式が成立するかどうか、判定されます。

現在、変数「x」は「2」になっています。

条件式は、

変数「x」は「3」以下

です。

まだ成立します。

いけます!

というわけで…

今回も1周目と同じように「document.write(x);」によって、変数「x」が画面に表示されます。

現在、変数「x」は「2」なので、画面には「2」と表示されます。

さらに…

これも1周目と同じように「x++;」によって、変数「x」に「1」が加算されます。

変数「x」は「3」になります。

あとはこの繰り返し

これを繰り返すことで、画面には「1」「2」「3」が順番に表示されます。

いつか条件式が成立しなくなる

変数「x」が「4」になったとき…

x<=3」という条件式が成立しなくなります。

終了

条件式が成立しなくなったら、「while文」は終了です。

もう、処理が行われることはありません。

だから、「4」が画面に表示されることもありません。

こうして、画面の表示結果は

123

となります。

以上が、「while文」を使った反復処理でした~。

今回はこれでおしまいです。

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。

A8 JavaScript

おまけ

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

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

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

とても感謝しています。

関連記事コンテンツ



シェアする

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

フォローする

自己紹介

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

ブログ村

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