今回はみんな大好き繰り返し処理を試します。
1 while 文とは
ある処理を while 文で繰り返すことができます。ループ処理といいます。
書式
while(条件式){ 行わせたい処理 }
書式は上記のようになります。
条件式 が満たされる場合に、行わせたい処理が実行されます。
if 文とは異なり、while 文では条件が満たされるときに処理が実行され続けます。
HTML(コード入力)
<!DOCTYPE html> <html> <head> <title>繰り返し</title> <meta charset="UTF-8"> </head> <body> <p> <script> let a = 0; while(a < 3){ document.write("whileで繰り返し_"); a++; } </script> </p> </body> </html>
ブラウザ(実行結果)
「whileで繰り返し_」が3回出力されました。なお、今回は <p> タグをループの外に置いていますので、同じ行で3回出力されています。また、繰り返しの回数を数えやすいように「 _ 」を含めています。
この例ではなぜ3回も出力されたのでしょうか?
動作を分解してみましょう。
HTML(コード入力)の一部
let a = 0; 1回目 2回目 3回目 4回目 while(a < 3){ ① a = 0 a = 1 a = 2 a = 3 document.write("whileで繰り返し_");② 実行 実行 実行 a++; ③ a = 1 a = 2 a = 3 }
まず、最初に変数 a に数値「0」が代入されます。
次に、while ループに入ります。
まず条件式が判定されます。つまり、a < 3 であるかどうかです。現時点では ① 変数 a の値は「0」であり条件を満たしているため、② write メソッドが実行され、③ で 変数 a に「1」が加算されて a の値は「1」となります。これが1回目です。
ループですので、また条件式の判定に戻ります。① a の値は「1」ですので、a < 3 が成立するため2回目の処理 ②・処理 ③ が実行されます。この時点で a の値は「2」です。
さらに条件式の判定に戻ります。① a の値は「2」ですので、a < 3 が成立するため3回目の処理 ②・処理 ③ が実行されます。この時点で a の値は「3」です。
そして、4回目の判定では、① a の値は「3」のため、a < 3 とならず条件を満たしません。したがって、この時点でループ処理が終了することになります。
結果的に ② の write メソッドが実行されたのは、合計3回ということになります。
2 回数をわかりやすくしてみる
動作は理解しましたが、イマイチ回数がわからないので次のような工夫をしてみます。
HTML(コード入力)の一部
let b = 0; while(b < 3){ document.write("くりかえし" + b + "_"); b++; }
ブラウザ(実行結果)
変数の値を表示されるようにしてみました。
しかし0回目というのはおかしいので、1回目というふうに表示されるようにしてみます。つまり、表示よりも先に変数をカウントアップしてみます。
HTML(コード入力)の一部
let c = 0; while(c < 3){ c++; document.write("くりかえし" + c + "_"); }
ブラウザ(実行結果)
変数の値を1から表示されるようにしてみました。
なお、ループ内にある2つの処理を逆にしただけなので、判定には影響ありません。
3 for 文とは
ループ処理には for 文も使えます。
書式
for(初期化処理; 条件式; 増分処理){ 行わせたい処理 }
書式は上記のようになります。
条件式 が満たされる場合に、行わせたい処理が繰り返し実行されます。
while 文とは異なり、書式に変数の初期化処理と増分処理が含まれています。
while 文では初期化の処理、条件式及び増分の処理でそれぞれ1行ずつ必要だったのが、for 文ではそれが1行にまとめられています。
HTML(コード入力)の一部
for(let d = 0; d < 3; d++){ document.write("forで繰り返し_"); }
ブラウザ(実行結果)
こちらの例でも write メソッドが3回実行されました。
HTML(コード入力)の一部
① ② ④ for(let d = 0; d < 3; d++){ document.write("forで繰り返し_"); ③ }
まず、ループ処理の1回目。
① が一度だけ実行されます。次に ② 条件式の判定が行われ、③ 行わせたい処理の実行、そして最後に ④ 増分の処理がされます。この時点で変数 d は「1」です。
2回目は ② 条件式の判定、③ 行わせたい処理、④ 増分の処理が実行されます。この時点で変数 d は「2」です。
3回目は ② 条件式の判定、③ 行わせたい処理、④ 増分の処理が実行されます。この時点で変数 d は「3」です。
4回目は ② 条件式の判定において条件に合致しません(dは「3」)ので、このループ処理から抜けることになります。
結果的に ③ の write メソッドが実行されたのは、合計3回ということになります。
① の初期化処理は最初の1回目だけ行われることに注意です。
4 回数をわかりやすくしてみる
これも変数の値を表示するようにしてみましょう。
HTML(コード入力)の一部
for(let e = 0; e < 3; e++){ document.write("forで繰り返し" + e + "_"); }
ブラウザ(実行結果)
変数の値を表示されるようにしてみました。
なお、変数を「1」から始めた場合は、条件式を「<4」と変えれば同じ回数だけ処理することになります。
HTML(コード入力)の一部
for(let f = 1; f < 4; f++){ document.write("forで繰り返し" + f + "_"); }
ブラウザ(実行結果)
5 次回
さて次回は、繰り返し処理においてそのループの流れを変える処理を試してみましょう。
カテゴリー
更新記事
- 『日本経済新聞』を読む25(モルドバ、スマートロック、バリ、二重価格、ニッチ)
- 『日本経済新聞』を読む24(FTS、焼酎、化粧水、防災ビジネス、一太郎)
- 『日本経済新聞』を読む23(人工芝、睡眠市場、東海道新幹線、地雷、酸化ガリウム)
- 『日本経済新聞』を読む22(ポータブル電源、ズワイガニ、モルディブ、リチウム、ロブスター)
- 『日本経済新聞』を読む21(高速船、駄菓子、レンタル自習室、PFAS、戻りガツオ)
- 『日本経済新聞』を読む20(書店、コネクテッドカー、アゼルバイジャン、アルメニア、服薬)
- 『日本経済新聞』を読む 19(アボカド、飼料、ビレット、電動キックボード、フレア)
- テーマ株投資(9か月)
- 『日本経済新聞』を読む 18(背徳、デフリ、シアヌークビル港、デジタルノマド、企業博物館)
- 『日本経済新聞』を読む 17(在庫、字幕、梅田、エクセル職人、耐震シェルター)
- 『日本経済新聞』を読む 16(初任給、ウイスキー、スリランカ、クジラ肉、宇宙ごみ)
- 『日本経済新聞』を読む 15(配当貴族、スマートウォッチ、底引き網、ねこ住宅、電池の冷却)
- 『日本経済新聞』を読む 14(サービス収支、つながらない、租税回避地、電池寿命、置き社食)
- 『日本経済新聞』を読む 13(鉄鉱石、内需株、画像診断、ハブ空港、LCC)
- 『日本経済新聞』を読む 12(アンチモニー、おもちゃショー、スタートアップ、燃料電池、送電)
- 『日本経済新聞』を読む 11(にがり、おせち、ダチョウ、災害ドローン、ビジネスホテル)
- 『日本経済新聞』を読む 10(航空エンジン、金型、国際会議、PCE、ゲーム機)
- 『日本経済新聞』を読む 9(家計金融資産、車載半導体、ホタテ、コンテナ、GPU)
- 『日本経済新聞』を読む 8(北陸新幹線、車中泊、ジョブ型、GPIF、メタンハイドレート)
- 『日本経済新聞』を読む 7(紙、ラストワンマイル、リユース市場、カード審査、ボルダリング)
- 『日本経済新聞』を読む 6(iPS細胞、騰落レシオ、短期プラ、REIT、フードテック)
- 『日本経済新聞』を読む 5(ナフサ、ビール、輸入牛肉、悪玉コレステロール、核融合)
- 『日本経済新聞』を読む 4(ダビンチ・サージカル・システム、ゼロエミッション船、クッキー、LBO、洋上風力発電)
- 『日本経済新聞』を読む 3(変動金利、HSP、スリープテック、双腕ロボット、物流パレット)
- 『日本経済新聞』を読む 2(DAC、株主優待、オピオイド、ベトナム車市場、離れ小島)
- 『日本経済新聞』を読む 1(リバースメンタリング、CBT、EBPM、地方創生DAO、IBD)
- テーマ株投資(7か月)
- 『会社四季報 2024年 3集 夏号』を読む 20(RPF、DtoC、ToF、駅ナカ、CX)
- 『会社四季報 2024年 3集 夏号』を読む 19(ATC、プローブカード、ニューデリー、商品CFD、SUV、FPC、IFRS)
- 『会社四季報 2024年 3集 夏号』を読む 18(シャリ玉ロボット、YAGレーザー、シナジー、SaaS、クルーズ、DFBレーザー)
- 『会社四季報 2024年 3集 夏号』を読む 17(DSP、サーメタル、自動小銃、ダイカストマシン、FPSO、サーボモーター、水晶振動子)
- 『会社四季報 2024年 3集 夏号』を読む 16(クロスセル、eVTOL、CFCC、RFID、配当性向、事業承継)
- 『会社四季報 2024年 3集 夏号』を読む 15(SiC半導体、NAS電池、フェロニッケル、フェライト粉、スポンジチタン)
- 『会社四季報 2024年 3集 夏号』を読む 14(AI警備システム、プロダクトアウト、ホットメルト接着剤、放熱ゲル、パイル、カソード)
- 『会社四季報 2024年 3集 夏号』を読む 13(PLM、ファクタリング、BCP、グリシン、メタクリル樹脂、アクティブシニア)
- テーマ株投資(6か月)
- 『会社四季報 2024年 3集 夏号』を読む 12(カプロラクタム、ゼロトラスト、RAG、ERP、シリカ)
- 『会社四季報 2024年 3集 夏号』を読む 11(オリゴマー、エッジAI、MLCC、ジルコニウム、アセチレンガス、ファインケミカル)
- 『会社四季報 2024年 3集 夏号』を読む 10(フラッシュハンドル、自動配膳ロボット、R-SUD、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証)
- 『会社四季報 2024年 3集 夏号』を読む 9(ペロブスカイト太陽電池、プロテイン、銀だこ、尿素SCR、エクソソーム)
- 『会社四季報 2024年 3集 夏号』を読む 8(ドミナント、EBITDA、SAF、消防車、キャンプ用品、GIGAスクール、ボウリング場)
- 『会社四季報 2024年 3集 夏号』を読む 7(MD、パーム椰子、GMS、EC、デジタルサイネージ、ハラール認証、ヴィーガンコスメ)
- 『会社四季報 2024年 3集 夏号』を読む 6(BIM、CMS、つけまつげ、CDMO、BNPL、EDI、CRM)
- 『会社四季報 2024年 3集 夏号』を読む 5(アグリゲーション、EMS、BPO、のれん、カカオ豆、オーツミルク)
- 『会社四季報 2024年 3集 夏号』を読む 4(SEP、社内起業、ZEP、VPP、DOE、バイオセンサー、PBX)
- 『会社四季報 2024年 3集 夏号』を読む 3(海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電)
- テーマ株投資(5か月)
- 『会社四季報 2024年 3集 夏号』を読む 2
- 『会社四季報 2024年 3集 夏号』を読む 1
- JavaScript でDOM 2
- JavaScript でDOM 1
- JavaScript でオブジェクト 5
- JavaScript でオブジェクト 4
- JavaScript でオブジェクト 3
- JavaScript でオブジェクト 2
- JavaScript でオブジェクト 1
- JavaScript で関数 3
- JavaScript で関数 2
- JavaScript で関数 1
- JavaScript で配列 6
- JavaScript で配列 5
- JavaScript で配列 4
- テーマ株投資(3カ月目)
- JavaScript で配列 3
- JavaScript で配列 2
- JavaScript で配列 1
- JavaScript で「繰り返し」2
- 『チーズはどこへ消えた?』を読む 2
- 『チーズはどこへ消えた?』を読む 1
- JavaScript で「繰り返し」1
- JavaScript で「もし」3
- テーマ株投資(2カ月目)
- JavaScript で「もし」2
- 「記憶」本 5冊を読む 3
- 「記憶」本 5冊を読む 2
- 「記憶」本 5冊を読む 1
- テーマ株投資(1カ月半)
- 「睡眠」本 6冊を読む3(夜間・朝の行動)
- 「睡眠」本 6冊を読む2(昼間の行動)
- テーマ株投資(1か月目)
- JavaScript で「もし」1
- JavaScript で変数3
- 「睡眠」本 6冊を読む1(理論)
- JavaScript で変数2
- テーマ株投資(第3週目)
- JavaScript でヘンな数
- 「メモ」本 6冊を読む2(メモの方法)
- テーマ株投資(第2週目)
- JavaScript で足し算
- 「メモ」本 6冊を読む1(メモの意義)
- テーマ株投資(第1週目)
- JavaScript で「こんにちは世界」
- 「コーチング」本 6冊を読む
- はじめてのテーマ株投資
- JavaScript とは
- 「怒り」「アンガーマネジメント」本 7冊を読む
- JavaScript を始めてみる
- 初めての自動給水器
- 「ブランディング」本 6冊を読む
タグ
break (1) class (3) collection (6) continue (1) CSS (2) DOM (2) for (1) function (3) HTML (8) if (2) JavaScript (28) object (5) pop (1) push (1) shift (1) switch (1) unshift (1) VBA (1) while (2) ことば (25) アンガーマネジメント (1) インソース (1) ココナラ (12) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (4) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) リンクアンドモチベーション (3) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 新聞 (2) 株式 (30) 用語 (16) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (12) IGS (12) Kラーニング (1)