My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

3/26 [JavaScript] For文

f:id:sntkk3:20140228225012g:plain

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>


f:id:sntkk3:20140228213536p:plain この演習でのポイント:

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

画面に出力される結果は、
f:id:sntkk3:20140327172603j:plain
となってしまいます。

その理由は、For文内の実行文章の連結の仕方にあります。


f:id:sntkk3:20140228213532p:plainミスを防ぐポイント

カンマ(,)で連結するか、プラス(+)で連結するか、
変わる出力結果

f:id:sntkk3:20140216111431p:plain プラス(+)で連結した場合:
JavaScriptには、テキスト型、数値型という型指定がない。
そのため、Cパターンのように記述すると、
直前の項の影響からiはテキスト扱いとなり、
文字「1」+「1988」の連結結果 → 「11988」 となります。

f:id:sntkk3:20140216111431p:plain カンマ(,)で連結した場合:
一方、カンマで連結した場合(パターンA あるいは、Bの場合)、
「1 + 1988」は、前項の影響を受けず、
1 + 1988 = 1989 となります。

【まとめ】
f:id:sntkk3:20140216111431p:plain カンマで連結:

テキスト, テキスト, テキスト, i + 1988, 

↑ カンマごとに独立した値をつないでいるだけ
(前項テキストの影響を受けず、iが数値と見なされれば計算される)

f:id:sntkk3:20140216111431p:plain プラス(+)で連結

前項(?) + i + 1988 +  

↑ 前項の影響を受け i の型が確定(文字は連結、数値は計算)

【演習】九九表

プログラムで九九表を作成してみます

まず、
f:id:sntkk3:20140327182039j:plain
の部分を作ります。
それには、htmlで以下のように記述します。

<table border="1" widht="500">
<tr>
<th>&nbsp;</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>

すると、予定通り九九表が作成されます。