for文 演習課題
演習課題
- 変数を入れてconsoleに表示
- 入力された値を取得して、ブラウザに表示
和暦(平成)と西暦の変換表
- 平成1年は、西暦1989年
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>和暦・西暦の変換表</title> <style> table { width: 200px; margin: 50px auto; border: 1px solid #AAA; border-collapse: collapse; } th, td { border: 1px solid #AAA; padding: 5px; text-align: center; } th { background-color: #EBEBEB; } span { font-size: 0.8em; } </style> </head> <body> <table> <tr> <th>和暦<span>(平成)</span></th><th>西暦</th> </tr> <script> var num = 28; for(var i = 1; i<=num; i++) { document.write( '<tr>' ); document.write( '<td>' + i + '</td>' ); document.write( '<td>' + ( i+1988 ) + '</td>' ); document.write( '</tr>' ); } </script> </table> </body> </html>
1から10までの合計を求めて、DOMで表示する
- scriptは、id名のあとに記述する
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>1から10までの合計を求めて、DOMで表示する</title> </head> <body> <h1>1から10までの合計を求めて、DOMで表示する</h1> <p id="total"></p> <script> var ans = 0; for( var i = 1; i <= 10; i++ ) { ans += i; var str = document.getElementById( 'total' ); str.textContent = '1から10までの合計は、' + ans + 'です。'; } </script> </body> </html>
50までの偶数の合計を求めるプログラム
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>50までの偶数の合計を求めるプログラム</title> <script> function evenTotal() { var ans = 0; for(var i = 2; i<=50; i+=2){ ans += i; } var str = document.getElementById( 'total' ); str.innerHTML = '<h2>1から50までの偶数の合計は、' + ans + 'です。</h2>'; } </script> </head> <body> <h1>50までの偶数の合計を求めるプログラム</h1> <p><button onclick="evenTotal()">求める</button></p> <div id="total"></div> </body> </html>
九九表
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>九九表</title> </head> <body> <h1>for文を使って九九表を作成</h1> <table border="1"> <script> document.write( '<tr>' ); document.write( '<th></th>' ); for( var i = 1; i <= 9; i++ ) { document.write( '<th>' + i + '</th>' ); } document.write( '</tr>' ); for( var i = 1; i <= 9; i++ ) { document.write( '<tr>' ); document.write( '<th>' + i + '</th>' ); for( var j = 1; j <= 9; j++ ) { document.write( '<td>' +i* j + '</td>' ); } document.write( '</tr>' ); } </script> </table> </body> </html>