3/26 [JavaScript] For文
JavaScript
For文の練習
For文とは、プログラムで指定した回数分だけ繰り返し処理を実行させるための構文です。
For文の書き方
For文は以下の基本構文に従って書きます。
for ( 変数の初期値； 繰り返し条件； 変数の変更 ) {
実行される処理
}
参照： http://d.hatena.ne.jp/web-0127/20140419/p1
【演習】和暦（平成）と西暦を並べて表示
平成以降の和暦年を西暦年表示に変換してみます
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文の練習</title>
<style>
table {
border: 1px solid #333;
border-collapse: collapse;
}
th, td {
width: 60px;
border: 1px solid #333;
padding: 5px;
text-align: center;
}
th {
background-color: #CCC;
}
</style>
</head>
<body>
<table>
<tr><th>和暦<br>（平成）</th><th>西暦</th></tr>
<script>
var i;
for (i=1; i <=26; i=i+1) {
document.write('<tr><td>' + i + '</td>' + '<td>' + (i + 1988) + '</td></tr>');
}
</script>
</table>
</body>
</html>
この演習でのポイント：
For文の中のこちらの書き方
document.write('<tr><td>' + i + '</td>' + '<td>' + (i + 1988) + '</td></tr>'); //パターンA 出力される西暦年が正しく計算されるためには、
変数iの値を数値として扱われ、後に続く「1988」と合計される必要がありますよね。
そして、そのためには、上記のような書き方、あるいは以下のように書く必要があります。
document.write('<tr><td>' + i + '</td>' + '<td>' , i + 1988, '</td></tr>'); //パターンBというのは、
例えば、以下のように書いた場合、
document.write('<tr><td>' + i + '</td>' + '<td>' + i + 1988 + '</td></tr>');//パターンC画面に出力される結果は、
となってしまいます。
その理由は、For文内の実行文章の連結の仕方にあります。
ミスを防ぐポイント
カンマ(,)で連結するか、プラス(+)で連結するか、
変わる出力結果
プラス(+)で連結した場合：JavaScriptには、テキスト型、数値型という型指定がない。
そのため、Cパターンのように記述すると、
直前の項の影響からiはテキスト扱いとなり、
文字「1」+「1988」の連結結果 → 「11988」 となります。
カンマ(,)で連結した場合：
一方、カンマで連結した場合（パターンA あるいは、Bの場合）、
「1 + 1988」は、前項の影響を受けず、
1 + 1988 = 1989 となります。
【まとめ】
カンマで連結：
テキスト, テキスト, テキスト, i + 1988,
↑ カンマごとに独立した値をつないでいるだけ
（前項テキストの影響を受けず、iが数値と見なされれば計算される）
プラス(+)で連結
前項（？） + i + 1988 +
↑ 前項の影響を受け i の型が確定（文字は連結、数値は計算）
【演習】九九表
プログラムで九九表を作成してみます
まず、
の部分を作ります。
それには、htmlで以下のように記述します。
<table border="1" widht="500"> <tr> <th> </th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th> </tr>
そしてテーブルデータの作成において、いよいよJavaScirptによる記述です。
<script>
var i; //縦の数
var j; //横の数
for (i=1; i <=9; i++) {
//document.write('<tr><th>' + i + '</th></tr>');
//上記を2行に分解し、i の値がセルに収まるようにする
document.write('<tr><th>' + i + '</th>');
for (j=1; j<=9; j++) {
document.write('<td>' + (i * j ) + '</td>');
}
document.write('</tr>');
}
</script>
</table>すると、予定通り九九表が作成されます。
