crossline

▼JavaScript-for文-

font-size:12px;line-height: 150%;

 

 

 

■ for文 ■

 

◉指定した回数だけ処理を繰り返す

◉変数『i』の初期値(「i」=index)

◉処理を一回実行するたびに、変数「i」の値をどのように変更するか

 

for( 変数の初期値;繰り返しの条件;変数の変更  ) {

      実行される処理

}

 

 

↓ブラウザ上の表示

f:id:ishuko:20140530001309p:plain

 

<script>

var i;

for( i=0; i<10; i++ ){

  document.write('<p>じゃばすくりぷと</p>');

}

</script>

 

<script></script>最近では<body></body>の終了タグの上に書くのが主流。

 

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

<body>
<p>年齢を選択してください。</p>
<form>
<select>
<script>
var i;
for(i=20; 1<=70; i++){
    document.write('<option value="'+i+'">'+i+'年</option>');
}
</script>
</select>
</form>

</body>

 

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

f:id:ishuko:20140530003414p:plain

 

<body>
<table>
<tr><th>平成</th><th>西暦</th></tr>
<script>
var i;
for(i=1; i<=25; i++){
    document.write('<tr><td>'+i+'</td>');
    document.write('<td>'+(i+1988)+'</td></tr>');
}
</script>
</table>
</body>

 

 

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

f:id:ishuko:20140530004602p:plain

f:id:ishuko:20140530004608p:plain

 

<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>

 

■入力した数字までの合計をダイアログボックスに表示

 

f:id:ishuko:20140530005122p:plain

f:id:ishuko:20140530005127p:plain

<h3>合計</h3>
<p>以下のボタンをクリックすると、<br>
入力した数字までの合計を求めて表示します。</p>
<p><button onclick="total()">数字を入力する</button></p>
<script>
function total(){
  var ans = 0;
  var maxNum;
    
maxNum = prompt('数字を入力してください。', '半角数字');
  for (i=1 ; i<=maxNum ; i++){
    ans = ans + i;
  }
  alert('1~' + maxNum + 'の合計は' + ans+ 'です');
}
</script>