javascript

二重ループをjavascriptでする方法

投稿日:2019年1月29日 更新日:

Pocket

 

うも、チャーさん(@chaa___san)です。

 

あなたはjavascriptで二重ループを

するにはどう書けばいいのか、

と思っていませんか?

 

この記事では二重ループについて

お話してまして、サンプルコード、

 

javascriptでの二重ループの書き方を書いてます。

 

 

なのでjavascriptでの二重ループを、

知りたい場合下にスクロールして読んでください。

 

 

スポンサードサーチ

二重ループとは?

 

二重ループとは、ループ文にループ文を

いれることで、繰り返しの中で繰り返し処理を

できるものです。

 

といっても言葉じゃわかりづらいと思うので、

実際例を見ていきましょう。

 

二重ループの具体例

 

ではさっそく二重ループの具体例を出します。

例えばこちらのコードですが、

(for文を例にします。)

 

<script>

for(var n=1;n<10;n++){
document.write(“ループ”+n+”回目<br>”);

  for(var n2=1;n2<10;n2++){
  document.write(n2+” “);
  }

document.write(“<br>”);
}

</script>

 

実行するとこんな風に表示されます。

 

二重ループのサンプルコード

 

画像を見ていただいた通り、

 

1回目のループの中で、

もう一つのループ処理が9回分行われてますね。

(回目の下に並んでる数字の部分です。)

 

 

そしてそれを1かたまりとして、

全部でそれを9回繰り返してくれます。

 

こんな風に、javascriptの二重ループは簡単で、

ループの中にループを入れると、

簡単にできるのです。

 

スポンサードサーチ

二重ループをjavascriptで作る方法

 

で、二重ループの作り方も説明しますと、

ループの中にループを入れましょう。

 

まず普通のループがこれですね。

 

for(条件文){

処理

}

 

で二重ループの場合は、

この通常のループに加えて、

もう一個ループを加えましょう。

 

 

具体的には、

 

for(条件文){

処理

 for(条件文){

    処理

       }

}

 

という感じです。

 

 

で、このようにすることで、

 

最初のループの処理の部分に書いた内容が

まず実行されて、

 

その次に中のループに入って、

ループ処理が条件文回数繰り返される。

 

 

そして中のループ処理が終わったら、

また最初のループに戻って来て、

また中のループを繰り返す。

 

という動き方をします。

 

 

まぁとはいえ文章だけでは、

わかりにくいと思いますので、

 

一度あなた自身で二重ループを書いてみましょう。

 

そして実際に実行すると何が表示されるか。

これを目で見て、こういう動き方をするんだな。

 

とあなた自身で確認するようにして見てください。

 

 

で、あなたが実際に自分でコードを書いて、

練習する場合は、1から書いてもいいですが、

慣れてない場合は、以下のをコピペして使うといいですよ。

 

<script>

for(var n=1;n<10;n++){
document.write(“ループ”+n+”回目<br>”);
for(var n2=1;n2<10;n2++){
document.write(n2+” “);
}
document.write(“<br>”);
}

</script>

 

で、処理にあたるdocument.writeの部分や、

条件文の数字を色々変えて、

どういう表示になるか確かめてみてください。

 

そうすれば二重ループが体感的にわかるようになります。

 

 

スポンサードサーチ

まとめ

 

javascriptで二重ループをする場合は、

以下のようにループの中にループを重ねましょう。

 

for(条件文){

処理

 for(条件文){

    処理

       }

}

 

で具体例はこんな感じです。

 

二重ループは実際にコード書いてみて、

動かすとよくわかるので、

ぜひエディターを開いて今書いてみてください。

 

それでは読んでもらって、ありがとうございました。

 

 

チャーさん(@chaa___san)

-javascript


スポンサードサーチ

関連記事

no image

htmlの中にjavascriptを書いて使う方法

どうも、チャーさんです。   あなたはhtmlの中にjavascriptを書いて、 使いたいと思っていませんか?   この記事では、htmlの中にjavascriptを 書いて、j …

no image

getElementByIdの意味や使い方をわかりやすく紹介します。

  どうも、チャーさんです。   あなたはgetElementByIdの意味はなんだろう? と思ってませんか?   この記事では、getElementByIdの意味や、 …

no image

javascriptをコンソールで実行する方法

どうも、チャーさんです。   あなたはjavascriptを今すぐに実行できる、 そんな方法を探していますか?   コンソールという機能を使えばそれは、 可能でして、この記事ではコ …

no image

javascriptでランダムに画像を表示する方法「コードコピペOKです」

どうも、チャーさんです。   あなたはjavascriptでランダムに画像を、 表示させたいですか?     この記事ではjavascriptでランダムに画像を、 表示さ …

no image

javascriptでボタンを押したら色が変更できる方法「コード例つき」

どうも、チャーさんです。   あなたはjavascriptで、ボタンを押したら、 色が変更できる方法を探していませんか?   この記事では、ボタンクリックで、 色を変更する方法、コ …

no image

javascriptでボタンをクリックしたらアラートが表示されるコード

どうも、チャーさんです。   あなたはjavascriptでボタンをクリックしたら、 アラートが表示される方法とコードを、 探していますか?     この記事では、ボタン …

no image

javascriptでcssを操作する手順と方法

どうも、チャーさんです。   あなたはjavascriptでcssを操作したい。 そう思っていませんか?   この記事では、javascriptを使って、 cssを操作する方法を書 …

no image

javascriptでalert(アラート)を表示させる方法

どうも、チャーさんです。   あなたは、javascriptでalert(アラート)を、 表示させたいと思っていませんか?   この記事では、javascriptを使って、 ale …

no image

javascriptでランダムな整数を表示するコードと仕組み解説「コピペOK」

どうも、チャーさんです。   あなたはjavascriptでランダムな整数を、 表示したいですか?   この記事では、javascriptでランダムな整数を、 表示するコードと、そ …

no image

javascriptのエラーの確認方法「3秒で確認できます」

どうも、チャーさんです。   あなたはjavascriptのエラーの確認方法を、 知りたいと思っていませんか?     この記事では、javascriptのエラーを、 確 …

no image

javascriptをhtml内で使う方法「完全初心者向け」

どうもチャーさん(@chaa___san)です。   あなたはjavascriptをhtmlで使えないのか? と疑問に思っていませんか?   結論からいうと使えます。   …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。