読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

指定した回数だけ処理を繰り返す - for文

JavaScript

for文

  1. 指定した回数だけ処理を繰り返す
  2. 変数「i」の初期値(「i」は、indexの意)
  3. 処理を1回実行するたびに、変数「i」の値をどのように変更するか

for ( 変数の初期値; 繰り返し条件; 変数の変更 ) {
  実行される処理
}

変数の値を1ずつ増やす演算子
  • 「++」
  • 「i++」は、「i = i + 1;」と同じ


同じ文章を繰り返し表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for文の練習(1)</title>
</head>
<body>
<script>
var i;
for ( i = 0; i < 10; i++ ) {
	document.write( '<p>JavaScript</p>' );
}
</script>
</body>
</html>

※「for (i = 1; i <= 10; i++)」としても同じ


年齢の選択肢をドロップダウンに表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for文の練習(2)</title>
</head>
<body>
<p>年齢を選択してください。</p>
<form>
<select>
<script>
var i;
for ( i=20; i<=70; i++ ) {
	document.write( '<option value=" i ">' + i + '歳</option>' );
}
</script>
</select>
</form>
</body>
</html>


和暦(平成)と西暦を並べて表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for文の練習(3)</title>
</head>
<body>
<table>
<tr><th>和暦(平成)</th><th>西暦</th></tr>
<script>
var i;
for ( i = 1; i <= 25; i = i +1 ) {
	document.write('<tr><td>', i, '</td>');
	document.write('<td>', i + 1988,  '</td></tr>');
}
</script>
</table>
</body>
</html>

2の倍数を合計してダイアログで表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
</head>
<body>
<h3>偶数の合計</h3>
<p>以下のボタンをクリックすると、<br>
2、4、6、8、…、100を全て合計した結果を表示できます。</p>
<p><button onclick="total()">計算結果</button></p>
<script>
function total(){
  var ans = 0;
  for ( i=2 ; i<=100 ; i=i+2 ){
    ans = ans + i;
  }
  alert( '2、4、6、8、…、100の合計は' + ans+ 'です' );
}
</script>
</body>
</html>

3の倍数を強調表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>3の倍数を強調表示</title>
<style>
.mulOfThree {
  font-size: 250%;
  color:red;
}
</style>
</head>
<body>
<h1>3の倍数を強調表示</h1>
<p>
<script>
var Max = 15;	
for ( var i = 1; i <= Max; i++ ) {	
  if ( i % 3 == 0 ) {
    document.write( '<span class="mulOfThree">' + i + '</span>' + '&nbsp;' );
  } else {
    document.write( i + '&nbsp;' );
  }
}
</script>
</p>
</body>
</html>

《演習問題 1》

  1. 1~100までの合計をダイアログボックスに表示させなさい
  2. 入力した数字までの合計をダイアログで表示させなさい


《演習問題 2》

  • 以下のような九九の対数表を表示させなさい


出力のポイント

  • document.write('引数1', 変数 , '引数2'); というふうに「カンマ区切り」で記述します(並べる)
  • alert('引数1' + 変数 + '引数2'); というふうに「+」でつないで記述します(文字列の演算)

まとめ

  • 処理を繰り返すには、for文を使用する
  • 制御変数は、ループのカウンタとして使用する変数
  • 変数の値を1増やすのは「++」演算子、1減らすのは「--」演算子