webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

for文の使い方

for文もwhile文と同じ繰り返し(ループ)処理ですが、記述方法が変わるので、違いをしっかりと覚えましょう。

for ( 変数iの初期値 ;  繰り返し条件  ;  変数の変更  ) {
 処理の結果
}


記述例

<script>
  for (var i = 1 ; i <= 100 ; i++) {
    console.log( i );
  }
  
/* for ( 変数の初期値; 繰り返し条件; 変数の変更(最後は;がいらない) ) {
  実行される処理
}*/
</script>

インクリメント

演算の中でも数値を1つだけ増加することや1つだけ減少させる処理は比較的多く使用されます。そのような時のために用意された演算子がインクリメント演算子(++)とデクリメント演算子(--)です。次のようなものが用意されています。

f:id:yachin29:20160829005852j:plain

なお「変数++」と記述する代わりに「++変数」と記述する使い方もできます。この二つは似ていますが使い方は異なります。



インクリメント演算子とデクリメント演算子にはそれぞれ前置と後置の二種類が用意されています。
インクリメント演算子の前置きと後置きは次のようになります。

前置:  ++変数
後置:  変数++


前置であっても後置であってもインクリメント演算子は対象の変数の値を1だけ増加させ、デクリメント演算子の場合は対象の変数の値を1だけ減少させることに違いはありませんが、使い方によって得られる値が変わる事があります。




このような使い方の場合、インクリメントが前置であっても後置であっても同じ結果となります。

前置の場合

var a = 10;

++a;

document.write(a); 

後置の場合

var a = 10;

a++;

document.write(a); 



しかし、このような使い方の場合、インクリメントが前置であるか、後置であるかで異なる結果となります。

前置の場合

var a = 10;

b = ++a;

document.write(b);

後置の場合

var a = 10;

b = a++;

document.write(b); 

前置の場合、aの値がbに代入される前にインクリメントが適用される為、bの値は「b = a + 1 」になります。
後置の場合、aの値がbに代入された後にインクリメントが適用される為、bの値は「b = a 」になります。




練習
selectタグを使い、生年月日を選べるプルダウンメニューを作ってみましょう。

<p>生年月日を選択してください。</p>
<select>
<script>
for (i=1945; i<=2000; i++) {
	document.write('<option value=" i ">' + i + '年</option>');
}
</script>
</select>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>formの練習</title>
<style>
html,body,form,dl,dt,dd {
  margin:0;
  padding:0;
  line-height:1.0;
}
#container {
  width:800px;
  margin: 50px auto 0;
}
dt {
  width:200px;
  float:left;
}
dt,dd {
  margin-bottom:20px;
}
select {
  margin-right:10px;
}
</style>
</head>
<body>
<div id="container">
<form>
<dl>
<dt>お名前</dt><dd><input type="text" placeholder="山田 太郎"></dd>
<dt>メールアドレス</dt><dd><input type="email"></dd>
<dt>血液型</dt>
<dd>
<input type="radio" name="blood" checked id="a">
<label for="a">A型</label>
<input type="radio" name="blood" id="b"><label for="b">B型</label>
<input type="radio" name="blood" id="ab"><label for="ab">AB型</label>
<input type="radio" name="blood" id="o"><label for="o">O型</label>
</dd>
<dt>好きな食べ物</dt><dd>
<input type="checkbox">お寿司
<input type="checkbox">うな重
<input type="checkbox">焼肉
<input type="checkbox">蕎麦
</dd>
<dt>生年月日</dt>
<dd>
<script>
document.write('<select>');
for (var i=1945;  i <= 2000; ++i ) {
	document.write('<option>' + i + '年</option>');
}
document.write('</select>');
document.write('<select>');
for (var i=1;  i <= 12; ++i ) {
	document.write('<option>' + i + '月</option>');
}
document.write('</select>');
document.write('<select>');
for (var i=1;  i <= 31; ++i ) {
	document.write('<option>' + i + '日</option>');
}
document.write('</select>');
</script>
</dd>
<dt>お問い合わせ内容</dt><dd><textarea rows="5" cols="40"></textarea></dd>
</dl>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>
</div>
</body>
</html>