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

for文 演習課題

演習課題

  1. 変数を入れてconsoleに表示
  2. 入力された値を取得して、ブラウザに表示
和暦(平成)と西暦の変換表
  • 平成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>