今回はFizzBuzz問題をHTMLのscriptタグ内に書きました。

FizzBuzz問題とは？

1から30まで順に数えて出力して行き、3で割り切れる数は「Fizz」5で割り切れる数は「Buzz」両方で割り切れる数は「FizzBuzz」と出力する、ようにプログラムを書く問題です。

これが書けるか書けないかでプログラマー志願者を仕分けられるようになったようです。実際今でも使われていますから押さえておいて損はないと思います。FizzBuzz詳細

私が書いたコード

sample.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset=UTF-8>
        <title>loop</title>
    </head>
    <body>
        <script>

                var i = 0;
                for (i = 1; i <=100; i++) {
                if (i % 15 === 0 ) {
                        document.write("<p>" + "FizzBuzz" + "</p>");

                    } else if(i % 3 === 0) {
                        document.write("<p>" + "Fizz" + "</p>");

                    } else   if(i % 5 === 0 ) {
                        document.write("<p>" + "Buzz" + "</p>");
                    } else 
                    document.write("<p>" + i + "</p>");
            }
        </script>
    </body>
</html>

書く順番

ifは条件が厳しいものから順番に書いていった方が良いです。今回の問題だと"Fizz"や"Buzz"を表示させるifを先に書いてしまうと3と5の倍数の数字がif文を通過するとき、3の倍数をFizzに置き換えるところで条件を満たしてしまうのでその先の処理は行わないからです。

【初心者向け】【Javascrript】FizzBuzz問題

FizzBuzz問題とは？

私が書いたコード

書く順番