JavaScript 入門 基礎編 06 – 処理を繰り返してみよう 01(for)

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

もう一つ繰り返し処理のサンプルを作ってみましょう.

DEMO

今回制作するデモはこちら.

VIDEO

チュートリアルムービー

CODE

デモのソースコード

<pre>
<script>

/**
 * JavaScript Tutorial - for 2
 */

// ★を段々に書いてみる
for (var i=0; i<16; ++i) {
    for (var j=0; j<i; ++j) {
        document.write('★');    // ★を描画
    }
    document.write('\n');   // 改行
}

// 奇数行は☆, 偶数行は★にしてみる
var star = '';
for (var i=0; i<16; ++i) {
    star = (i%2) ? '☆' : '★';
    for (var j=0; j<i; ++j) {
        document.write(star);
    }
    document.write('\n');
}

</script>
</pre>

TIPS

三項演算子

条件式 ? true時の式 : false時の式; という形で条件分岐処理を書くことができます.

今回のサンプルでは star = (i%2) ? '☆' : '★';とすることで 奇数時は'☆', 偶数時は '★'を表示するために使っています.

わかりにくいということで敬遠されがちですが, ちょっとした分岐だったら一行で書けて慣れてればむしろ読みやすいので私は好きです.

JavaScript だと他の言語よりも使われる頻度が高いので読み慣れておくと良いかもしれません.

 

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。