こんにちは。
星の出力練習を通してJavaScriptの書き方を練習しています。
現在、以下のような星の羅列をしたいのですが、書き方に行き詰まったので質問いたしました。
★☆★☆★
☆★☆★☆
★☆★☆★
☆★☆★☆
★☆★☆★
上記の形に寄せるため、以下のようなコードを書きました。
<script>
for(var i=1; i<6; i++){
for(var a=1; a<6; a++){
if(a % 2 == 1)
{document.write("★");}
else{document.write("☆")};
};
document.write("<br>");
};
</script>
これだと、下記のようになります。
★☆★☆★
★☆★☆★
★☆★☆★
★☆★☆★
★☆★☆★
そこで、変数i=2,4(または偶数指定)のときに、変数a=奇数のときの処理を書けばいいのかな?
と思ってfor文とif文のネストを試行錯誤しましたが、エラーがでました。
条件式の間違いも含めて、アドバイスをいただけますと幸いです。
よろしくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答6件
0
1つのfor文でやってみるのはいかがでしょうか。
・1行につき5つの星を表示するので、iの値が5で割れる場合に改行する。
・iの値が偶数か奇数か判定する。
投稿2019/12/08 07:31
総合スコア239
0
XNXSXMXRさんの回答でコーディングしてみました。
js
1for(var i=1; i<=25; i++){ 2 if(i % 2 == 1) { 3 document.write("★"); 4 } else { 5 document.write("☆") 6 }; 7 if(i % 5 == 0) { 8 document.write("<br>") 9 }; 10};
同じ考え方ですが、三項演算子を使うと下記のようによりシンプルに記述できます。
js
1for(var i=1; i<=25; i++){ 2 document.write( 3 (i % 2 ? "★" : "☆") 4 + (i % 5 == 0 ? "<br>" : "") 5 ); 6};
投稿2019/12/08 08:09
編集2019/12/08 17:12総合スコア34073
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
ベストアンサー
こんにちは
全部で25個ある星印に以下のような順番を付けます。
- 1行目の一番左の星:
0
番目 - その右の星:
1
番目
・・・
- 1行目の一番右の星:
4
番目 - 2行目の一番左の星:
5
番目
・・・
- 5行目の一番右の星:
24
番目
そうすると、 j (0≦ j ≦ 24)番目の星について
- j が奇数ならば ☆
- j が偶数ならば ★
を出力すればよいことになります。
j が奇数である if条件は
javascript
1if (j % 2 === 1) { // i が奇数の場合
ですが、j % 2
の値は 0か1しかないので、上記の === 1
は省略できて
javascript
1if (j % 2) { // i が奇数の場合
と書けます。
以下は上記の考え方を元にしたコードです。
javascript
1for (var i = 0; i < 5; i++) { 2 for (var a = 0; a < 5; a++) { 3 const j = i * 5 + a; 4 if (j % 2) { 5 document.write("☆"); 6 } else { 7 document.write("★") 8 }; 9 }; 10 document.write("<br>"); 11};
- 動作確認用CodePen: https://codepen.io/jun68ykt/pen/GRgpeyO?editors=1010
追記
上記の回答に記載した、
- 星に
0
以上24
以下の番号を付け、その番号の変数をj
とする。
という考え方を使うと以下のようにも書けます。
javascript
1const NUM_LINES = 5, // 行の数 2 NUM_PER_LINE = 5, // 一行に含まれる星の数 3 NUM_ALL = NUM_LINES * NUM_PER_LINE; // 全ての星の数 4 5 6[...Array(NUM_ALL)].forEach((_, j) => { 7 document.write(`${j % 2 ? '☆':'★'}${(j+1) % NUM_PER_LINE ? '' : '<br />'}`); 8});
- 動作確認用CodePen: https://codepen.io/jun68ykt/pen/PowPLaR?editors=1010
追記2
上記に書いた、
- 1行目一番左の星から、最後の行の一番右の星まで、
0
から始まる通し番号を付け、その番号の奇偶で☆と★とを出し分ける。
という考え方だと、一行に含まれる星の数を1個増やして 6 にすると(どの行も★始まりになって、)意図した結果にならなくなります。一行の星の数が任意の個数でも対応できるようにするには、上記のような全ての星の通し番号で判定するのではなく、i
と a
を使って、以下のようにします。
javascript
1 const NUM_PER_LINE = 5; // 一行に含まれる星の数 2 3 for(var i = 0; i < 5; i++) { 4 for(var a = 0; a < NUM_PER_LINE; a++) { 5 if(i % 2 === a % 2) { 6 document.write("☆"); 7 } 8 else { 9 document.write("★") 10 }; 11 }; 12 document.write("<br>"); 13 };
- 動作確認用CodePen: https://codepen.io/jun68ykt/pen/JjoYVjN?editors=1010
上記で、 NUM_PER_LINE
を 6
に変えても望ましい結果が得られます。
追記3
考え方の違う案をもう一つ挙げます。
一行に星を5個出力する場合であれば、まず初めに、2つの文字列、"★☆★☆★"
と "☆★☆★☆"
とを作っておいて、これらの2つを交互に出力すれば望む結果が得られます。
以下、そのサンプルです。
- 動作確認用CodePen: https://codepen.io/jun68ykt/pen/VwYvNzd?editors=1010
参考になれば幸いです。
投稿2019/12/08 07:45
編集2019/12/08 13:40総合スコア9058
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/08 09:07
2019/12/08 12:03
2019/12/08 12:07
0
星用のカウンターを付けます。
javascript
1var counter = 0; 2 3for(var i=1; i<6; i++){ 4 for(var a=1; a<6; a++){ 5 if(counter % 2 == 1) { 6 document.write("★"); 7 } else { 8 document.write("☆") 9 }; 10 counter++; 11 }; 12 document.write("<br>"); 13};
投稿2019/12/08 07:32
総合スコア1857
0
投稿2019/12/08 16:56
総合スコア22324
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/08 11:51