今回は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に置き換えるところで条件を満たしてしまうのでその先の処理は行わないからです。