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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

確認テスト(2)

合計を求める繰り返し
  1. 1〜100までの合計をダイアログボックスに表示させなさい。
  2. 入力した数字までの合計を求めて表示させなさい。

※ボタンを押したら処理を実行させる

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>1~100までの合計を表示</title>
<script>
function total() {
  var ans=0;
  for (var i=1; i<=100; i++) {
    console.log( i );
    ans += i;
    console.log( ans );
  }
  alert( '1~100までの合計は、' + ans + 'です。' );
}
</script>
</head>
<body>
<h1>1~100までの合計を表示</h1>
<p><button onClick="total()">合計を表示</button></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力した数値までの合計を表示</title>
<script>
function total() {
  var ans=0;
  var num= parseInt(prompt('半角数字を入力してください',''));
  for (var i=1; i<=num; i++) {
    console.log( i );
    ans += i;
    console.log( ans );
  }
  alert( '1から入力された数字' + num + 'までの合計は、' + ans + 'です。' );
}
</script>
</head>
<body>
<h1>1から入力された数字までの合計を表示</h1>
<p><button onClick="total()">合計を表示</button></p>
</body>
</html>
カウントダウン
  • 10からのカウントダウンを、コンソールに表示させなさい。
<script>
for ( var i = 10; i >= 0; i--) {
  console.log( i );
}
</script>
サイコロ

     

  • 奇数の目だけを表示させなさい。
<script>
for (var i=1; i<=6; i++) {

if(i %2===1)
  document.write( '<img src="img/d' +i+ '.jpg" alt=" ">' );
}
</script>
九九表
  • 以下のような九九の表を表示させなさい。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
<style>
table {
     border-collapse: collapse;
}
td,th {
     width: 50px;
     text-align: center;
}
th {
     background-color: #CCC;
}
</style>
</head>
<body>
<h3>九九表</h3>
<table width="500" border="1">
<tr>
<th>&nbsp;</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
</tr>
<script>
for (i=1 ; i<=9 ; i++) {
     document.write('<tr>');
     document.write('<th>' + i + '</th>');

     for (j=1 ; j<=9 ; j++) {
          document.write('<td>' + i*j  + '</td>');
     }

     document.write('</tr>');
}
</script>
</table>
</body>
</html>