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

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

演習 - DOMで出力

DOMの記述のアセットを作る

  • 閲覧者が実行ボタンを押したときに、はじめて実行される
  • その実行命令が、セレクタ(id名)に対して行われる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMの操作</title>
<script>
function action(){
  
}
</script>
</head>
<body>
<p><button onClick="action()">ボタンを押すと実行</button></p>
<div id="ans">ここに表示する</div>
</body>
</html>
ブラウザにページが読み込まれた時点で表示
  • ボタンで関数を呼び出すことはない
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>今日の年月日</title>
<script>
function action(){
  var today = new Date();
  var year = today.getFullYear();
  var month = today.getMonth() + 1;
  var date = today.getDate();
  
  var str = document.getElementById( 'ans' );
  str.innerHTML = '<h2>西暦' + year + '年'+ month + '月' + date + '日' + '</h2>';
}
</script>
</head>
<body onLoad="action()">
<div id="ans">ここに表示する</div>
</body>
</html>
1〜10までの偶数のみの合計
  • 最小と最大の変数を設定する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>1から10までの合計</title>
<script>
function action(){
  var minNum = 1;
  var maxNum = 10;
}
</script>
</head>
<body>
<p><button onClick="action()">ボタンを押すと実行</button></p>
<div id="ans">ここに表示する</div>
</body>
</html>


合計とは加算を繰り返すこと

  • 加算するための変数「total」を準備します
<script>
function action(){
  var minNum = 1;
  var maxNum = 10;
  var total = 0;
}
</script>


繰り返す条件が決まっている場合

  • 1から10まで繰り返すので、for文を使います
<script>
function action(){
  var minNum = 1;
  var maxNum = 10;
  var total = 0;
  
  for( var i=minNum; i<=maxNum; i++ ){
    console.log( i + '回目の加算' );
    total += i; //i回目の数値を加算に利用する
    console.log( total );
  }
}
</script>
ブラウザに出力
  • 結果が閲覧者が見て、何の値なのかを表示する
  • id名の部分に表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>1から10までの合計</title>
<script>
function action(){
  var minNum = 1;
  var maxNum = 10;
  var total = 0;
  
  for( var i=minNum; i<=maxNum; i++ ){
    console.log( i + '回目の加算' );
    total += i; //i回目の数値を加算に利用する
    console.log( total );
  }
  
  var str = document.getElementById( 'ans' );
  str.textContent = '1から10までの合計は「' + total + '」です。';
}
</script>
</head>
<body>
<p><button onClick="action()">ボタンを押すと実行</button></p>
<div id="ans">ここに表示する</div>
</body>
</html>



応用

  • いろいろな事例を実践してみましょう
2から10までの偶数のみを加算する
  • 2から10までの偶数をどう表現するか
<script>
function action(){
  var minNum = 2;
  var maxNum = 10;
  var total = 0;
  
  for( var i=minNum; i<=maxNum; i++ ){
    if( i%2===0 ){
    total += i; 
    }
  }
  
  var str = document.getElementById( 'ans' );
  str.textContent = '1から10までの偶数の合計は「' + total + '」です。';
}
</script>
1〜入力された値までの合計を求める
  • 入力された値を「文字列」から「数値」に変換する
<script>
function action(){
  var minNum = 1;
  var maxNum = prompt( '1以上の半角数字を整数で入力してください。' );
  maxNum = parseInt( maxNum );
  var total = 0;
  
  for( var i=minNum; i<=maxNum; i++ ){
    total += i; 
    }
  
  var str = document.getElementById( 'ans' );
  str.textContent = '1から10までの偶数の合計は「' + total + '」です。';
}
</script>


不正な入力は実行しない

  • 「全角」が入力された場合計算できない
  • 「0」が入力された場合も計算する意味がない
  • isNaN()は、非数であった場合(数値でなかった場合)
<script>
function action(){
  var minNum = 1;
  var maxNum = prompt( '1以上の半角数字を整数で入力してください。' );
  maxNum = parseInt( maxNum );
  var total = 0;
  var str = document.getElementById( 'ans' );
  
  if( isNaN(maxNum) || maxNum===0 ){
    str.textContent = '入力された値は計算できません。もう一度入力してください。';
  }
  else {
    for( var i=minNum; i<=maxNum; i++ ){
      total += i; 
    }
    str.textContent = '1から10までの偶数の合計は「' + total + '」です。';
  }
}
</script>
入力された値が「7の倍数」かどうかを判別する
  • 入力された値が、7で割った余りが0の場合は、7の倍数
<script>
function action(){
  var num = prompt( '1以上の半角数字を整数で入力してください。' );
  num = parseInt( num );
  var str = document.getElementById( 'ans' );
  
  if( isNaN(num) || num===0 ){
    str.textContent = '入力された値は判別できません。もう一度入力してください。';
  }
  else if( num%7===0 ) {
    str.textContent = '入力された値「' + num + '」は、7の倍数です。';
  }
  else {
    str.textContent = '入力された値「' + num + '」は、7の倍数ではありません。';
  }
}
</script>
9×9の一覧表をfor文を使って作成
  • table要素で記述する
  • tr要素で1行を表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>九九一覧表</title>
<style>
table, th, td {
  border: 1px solid #AAA;
  padding:5px 10px;
  text-align: center;
}
th, td {
  width: 30px;
}
table {
  border-collapse: collapse;
}
th {
  background-color: #E9E6E6;
}
</style>
</head>
<body onLoad="action()">
<div  id="ans"></div>
<script>
function action(){
  var minNum = 0
  var maxNum = 9;
  var str = document.getElementById( 'ans' );
  var tbl = '<table>';

  //1行目
  for( var i = 0; i<=9; i++ ){
    if(i === 0) {
      tbl += '<tr><th></th>';
    }
    else {
      tbl += '<th>' + i +'</th>';
    }
  }
  tbl += '</tr>';

  //ここに2行目以降が入る

  str.innerHTML= tbl + '</table>';
}
</script>
</body>
</html>


行と列の変数で作る

  //2行目以降
  for(var i = 1; i<=9; i++) {
    for(var j = 0; j <= 9; j++) {
      if(j === 0) {
        tbl += '<tr><th>' + i + '</th>';
      } else {
        tbl += '<td>' + i*j + '</td>';
      }
    }
    tbl += '</tr>';
  }
広告を非表示にする