指定した回数だけ処理を繰り返す - for文
for文
- 指定した回数だけ処理を繰り返す
- 変数「i」の初期値(「i」は、indexの意)
- 処理を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>' + ' ' ); } else { document.write( i + ' ' ); } } </script> </p> </body> </html>
《演習問題 1》
- 1~100までの合計をダイアログボックスに表示させなさい
- 入力した数字までの合計をダイアログで表示させなさい
《演習問題 2》
- 以下のような九九の対数表を表示させなさい
出力のポイント
- document.write('引数1', 変数 , '引数2'); というふうに「カンマ区切り」で記述します(並べる)
- alert('引数1' + 変数 + '引数2'); というふうに「+」でつないで記述します(文字列の演算)