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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

DOM - 演習

演習

ダイアログボックスに入力された数値の値が、偶数か奇数かを判別してブラウザに表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>偶数・奇数を判別</title>
<script>
function oddEven() {
  var num = prompt( '半角数字で入力して下さい', '' );
  num = parseInt( num );
  if(num%2 === 0) {
    document.getElementById( 'judge' ).textContent = '入力された数字' + num + 'は、偶数です。' ;
  } else {
    document.getElementById( 'judge' ).textContent = '入力された数字' + num + 'は、奇数です。' ;
  }
}
</script>
</head>
<body>
<h1>偶数・奇数を判別</h1>
<p><button onClick="oddEven()">判別する</button></p>
<p id="judge"></p>
</body>
</html>
「現在の時刻は、〜時〜分です。」と表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>現在の時刻を表示</title>
<script>
window.onload = function getNowTime() {
  var today = new Date();
  var nowTime = '現在の時刻は、' + today.getHours() + '時' + today.getMinutes() + '分です。';
  document.getElementById( 'now' ).textContent = nowTime;
}
</script>
</head>
<body>
<h1>現在の時刻を表示</h1>
<p id="now"></p>
</body>
</html>
「今年は、西暦〜〜年です。」と表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>今年を西暦で表示</title>
<script>
window.onload = function() {
var today = new Date();
var nowYear = '今年は、西暦' + today.getFullYear() + '年です。';
document.getElementById( 'now' ).textContent = nowYear;
}
</script>
</head>
<body>
<h1>今年を西暦で表示</h1>
<p id="now"></p>
</body>
</html>
「今日は、西暦〜〜年〜月〜日です。」と表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>今日の年月日を西暦で表示</title>
<script>
window.onload = function() {
var today = new Date();
var nowToday = '今日は、西暦' + today.getFullYear() + '年' + (today.getMonth()+1) + '月' + today.getDate() + '日です。';
document.getElementById( 'now' ).textContent = nowToday;
}
</script>
</head>
<body>
<h1>今日の年月日を西暦で表示</h1>
<p id="now"></p>
</body>
</html>
平日には「営業中」、土曜日・日曜日には「定休日」と表示する
  • if文の場合
  • switch文の場合

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>曜日で判別して表示</title>
<script>
window.onload = function() {
  var d = new Date();
  var day = d.getDay();
  var holiday = '今日は定休日です。';
  var weekday = '今日は営業しています。';
  if( day === 0 || day === 6 ) {
     document.getElementById( 'hday' ).textContent = holiday;
  } else {
     document.getElementById( 'hday' ).textContent = weekday;
  }
}
</script>
</head>
<body>
<h1>曜日で判別して表示</h1>
<p id="hday"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>曜日で判別して表示</title>
<script>
window.onload = function() {
  var d = new Date();
  var day = d.getDay();
  var holiday = '今日は定休日です。';
  var weekday = '今日は営業しています。';
  switch(day) {
     case 0:
     case 6: 
     document.getElementById( 'hday' ).textContent = holiday;
        break;
     default:
     document.getElementById( 'hday' ).textContent = weekday;
  }
}
</script>
</head>
<body>
<h1>曜日で判別して表示</h1>
<p id="hday"></p>
</body>
</html>
入力された点数の数値を「100が満点」「80点以上が合格」「80点未満が不合格」と表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>点数判別をして表示</title>
<script>
var score;  //点数
var refValue = 80;  //基準値
var compValue = 100;  //満点

window.onload = function() {
  score = prompt('点数を半角数字で入力してください。', '');
  score = parseInt( score );

if (score >= refValue) {

  if (score === compValue) {
    document.getElementById( 'good' ).textContent = '百点満点!';
    document.getElementById( 'points' ).textContent = 'よくがんばりました。';
  } else {
    document.getElementById( 'good' ).textContent = '合格です。';
    document.getElementById( 'points' ).textContent = 'よくがんばりました。';
  }

} else {
  document.getElementById( 'good' ).textContent = '不合格です。';
  document.getElementById( 'points' ).textContent = 'もう少しがんばりましょう。';
}

}
</script>
</head>
<body>
<h1 id="good">点数判別をして表示</h1>
<p id="points"></p>
</body>
</html>
月の数値を入力すると「春です」「夏です」「秋です」「冬です」と表示する
  • if文の場合
  • switch文の場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>月数で季節を判別して表示</title>
<script>
window.onload = function() {
  var now = new Date();
  var mt = now.getMonth() + 1;
  var winter = '季節は、冬です。';
  var spring = '季節は、春です。';
  var summer = '季節は、夏です。';
  var fall = '季節は、秋です。';
  if( mt === 12 || mt === 1 || mt === 2 ) {
     document.getElementById( 'season' ).textContent = winter;
  } else if( mt<=5 ) {
     document.getElementById( 'season' ).textContent = spring;
  } else if( mt<=8 ) {
     document.getElementById( 'season' ).textContent = summer;
  } else {
    document.getElementById( 'season' ).textContent = fall;
  }
}
</script>
</head>
<body>
<h1>月数で季節を判別して表示</h1>
<p id="season"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>月数で季節を判別して表示</title>
<script>
window.onload = function() {
  var now = new Date();
  var mt = now.getMonth() + 1;
  var winter = '季節は、冬です。';
  var spring = '季節は、春です。';
  var summer = '季節は、夏です。';
  var fall = '季節は、秋です。';
  switch(mt) {
     case 12:
     case 1:
     case 2:
     document.getElementById( 'season' ).textContent = winter;
        break;
     case 3:
     case 4:
     case 5:
     document.getElementById( 'season' ).textContent = spring;
        break;
     case 6:
     case 7:
     case 8:
     document.getElementById( 'season' ).textContent = summer;
        break;
     default:
     document.getElementById( 'hday' ).textContent = fall;
  }
}
</script>
</head>
<body>
<h1>月数で季節を判別して表示</h1>
<p id="season"></p>
</body>
</html>
JavaScriptの勉強」という文字を5回繰り返し表示する
  • for文の場合
  • while文の場合


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>文字を繰り返し表示:for文</title>
<script>
function forStr() {
  for(var i=1; i<=5; i++) {
    var str = '<p>JavaScriptの勉強</p>';
    document.getElementById( 'htmlStr' ).innerHTML += str;
  }
}
</script>
</head>
<body>
<h1>文字を繰り返し表示:for文</h1>
<p><button onclick="forStr()">表示する</button></p>
<div id="htmlStr"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>文字を繰り返し表示:while文</title>
<script>
window.onload = function() {
  var i=1;
  while( i<=5 ) {
    var str = '<p>JavaScriptの勉強</p>';
    document.getElementById( 'htmlStr' ).innerHTML += str;
    i++
  }
}
</script>
</head>
<body>
<h1>文字を繰り返し表示:while文</h1>
<div id="htmlStr"></div>
</body>
</html>
和暦(平成)と西暦を並べて表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>和暦(平成)西暦早見表</title>
<style>
table {
  border: 1px solid #AAA;
  border-collapse: collapse;
}
th,td {
  width: 100px;
  border: 1px solid #AAA;
  text-align: center;
  padding: 4px 8px;
}
th {
  background: #E0E0E0;
}
</style>
<script>
window.onload = function() {
  var entry = '<tr><th>和暦(平成)</th><th>西暦</th></tr>';
  document.getElementById( 'heisei' ).innerHTML = entry
  for (var i = 1; i <= 28; i++) {
    var tbl = '<tr><td>' + i + '</td><td>' + (i + 1988) + '</td></tr>';
    document.getElementById( 'heisei' ).innerHTML += tbl
  }
}
</script>
</head>
<body>
<h1>和暦(平成)西暦早見表</h1>
<table>
<tbody id="heisei">
</tbody>
</table>
</body>
</html>
〜100までの合計をブラウザに表示に表示する


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1~100までの合計</title>
<script>
var ans=0;
function sum() {
  for(var i=1; i<=100; i++) {
    ans += i;
  }
  var total = '1から100までの合計は、' + ans + 'です。';
  document.getElementById( 'sumNum' ).textContent = total;
}
</script>
</head>
<body>
<h1>1~100までの合計</h1>
<p><button onclick="sum()">合計を求める</button></p>
<p id="sumNum"></p>
</body>
</html>
入力された数字までの合計をブラウザに表示する
  • for文の場合
  • while文の場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>入力された数字までの合計</title>
<script>
var ans=0;
function totalAll() {
  num = prompt('半角数字で入力してください。', '');
  num = parseInt( num );
  for(var i=1; i<=num; i++) {
    ans += i;
  }
  var ansTotal = '1から入力された数字「' + num + '」までの合計は、' + ans + 'です。';
  document.getElementById( 'total' ).textContent = ansTotal;
}
</script>
</head>
<body>
<h1>入力された数字までの合計</h1>
<p><button onclick="totalAll()">合計を求める</button></p>
<p id="total"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>入力された数字までの合計</title>
<script>
var ans=0;
function totalAll() {
  num = prompt('半角数字で入力してください。', '');
  num = parseInt( num );
  var i=1;
  while( i<=num) {
    ans += i;
    i++
  }
  var ansTotal = '1から入力された数字「' + num + '」までの合計は、' + ans + 'です。';
  document.getElementById( 'total' ).textContent = ansTotal;
}
</script>
</head>
<body>
<h1>入力された数字までの合計</h1>
<p><button onclick="totalAll()">合計を求める</button></p>
<p id="total"></p>
</body>
</html>
サイコロの目を奇数のみ表示する

     

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイコロの目を奇数のみ表示</title>
<script>
window.onload = function() {
  for(var i=1; i<=6; i++) {
    var img = '<img src="img/d' + i + '.jpg" alt="">';
    if(i%2 === 1) {
      document.getElementById( 'dice' ).innerHTML += img;
    }
  }
}
</script>
</head>
<body>
<h1>サイコロの目を奇数のみ表示</h1>
<p id="dice"></p>
</body>
</html>
サイコロの目を偶数のみ表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイコロの目を偶数のみ表示</title>
<script>
window.onload = function() {
  for(var i=1; i<=6; i++) {
    var img = '<img src="img/d' + i + '.jpg" alt="">';
    if(i%2 === 0) {
      document.getElementById( 'dice' ).innerHTML += img;
    }
  }
}
</script>
</head>
<body>
<h1>サイコロの目を偶数のみ表示</h1>
<p id="dice"></p>
</body>
</html>
imgフォルダー内にある画像(5枚)をすべて表示する
  • 画像名が数字の場合
  • 画像名が固有の場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>imgフォルダー内にある画像(5枚)をすべて表示</title>
<script>
window.onload = function() {
  for(var i=1; i<=5; i++) {
  var allImg = '<img src="img/s0' + i +'.jpg" alt="">';
  document.getElementById( 'image' ).innerHTML += allImg;
  }
}
</script>
</head>
<body>
<h1>imgフォルダー内にある画像(5枚)をすべて表示</h1>
<p id="image"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>imgフォルダー内にある画像(5枚)をすべて表示</title>
<script>
var diceNum = new Array( 'one', 'two', 'three', 'four', 'five' );
window.onload = function() {
  for(var i=0; i<diceNum.length; i++) {
  var allImg = '<img src="img/s' + diceNum[i] +'.jpg" alt="">';
  document.getElementById( 'image' ).innerHTML += allImg;
  }
}
</script>
</head>
<body>
<h1>imgフォルダー内にある画像(5枚)をすべて表示</h1>
<p id="image"></p>
</body>
</html>
「みかん」「りんご」「いちご」「もも」「なし」「かき」をリストで表示する


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>配列の値をリストに表示</title>
<script>
var fruits = new Array( 'みかん', 'りんご', 'いちご', 'もも', 'なし', 'かき' );
window.onload = function() {
    for(var i=0; i<fruits.length; i++) {
    var list = '<li>' + fruits[i] + '</li>';
    document.getElementById( 'fruitsList' ).innerHTML += list;
  }
}
</script>
</head>
<body>
<h1>配列の値をリストに表示</h1>
<ul id="fruitsList">
</ul>
</body>
</html>
表示している画像をクリックしたら「ようこそ!」とダイアログボックスに表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ダイアログボックスに表示</title>
<script>
function welcome() {
  var str = 'ようこそ!';
  alert( str );
}
</script>
</head>
<body>
<h1>ダイアログボックスに表示</h1>
<p><img src="img/hello.jpg" alt="" onclick="welcome()"></p>
</body>
</html>
ボタンが押される度にサイコロの目がランダムに表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイコロの目をランダムに表示</title>
<script>
var diceNum = new Array( 'one', 'two', 'three', 'four', 'five', 'six' );
function throwDice() {
  var rdm = Math.floor(Math.random()*diceNum.length);
  var diceImg = '<img src="img/' + diceNum[rdm] +'.jpg" alt="">';
  document.getElementById( 'dice' ).innerHTML = diceImg;
}
</script>
</head>
<body>
<h1>サイコロの目をランダムに表示</h1>
<p><button onclick="throwDice()">サイコロをふる</button></p>
<p id="dice"><img src="img/d1.jpg" alt=""></p>
</body>
</html>
ボタンが押される度に画像がランダムに表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンをクリックする度に画像がランダムに表示</title>
<script>
function change() {
  var rdm = Math.floor(Math.random()*5+1);
  var changeImg = '<img src="img/0' + rdm +'.jpg" alt="">';
  document.getElementById( 'image' ).innerHTML = changeImg;
}
</script>
</head>
<body>
<h1>クリックする度に画像がランダムに表示</h1>
<p><button onclick="change()">変更ボタン</button></p>
<p id="image"><img src="img/00.jpg" alt=""></p>
</body>
</html>
画像をクリックする度に画像がランダムに表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クリックする度に画像がランダムに表示</title>
<style>
img {
  cursor: pointer;
}
</style>
<script>
function change() {
  var rdm = Math.floor(Math.random()*5+1);
  var changeImg = '<img src="img/0' + rdm +'.jpg" alt="" onclick="change()">';
  document.getElementById( 'image' ).innerHTML = changeImg;
}
</script>
</head>
<body>
<h1>クリックする度に画像がランダムに表示</h1>
<p id="image"><img src="img/00.jpg" alt="" onclick="change()"></p>
</body>
</html>
再表示(更新)する度に見出しの文字がランダムに表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>再表示(更新)する度に見出しの文字がランダムに表示</title>
<script>
var hstr = new Array( 'こんにちは', 'Hello', 'Bonjour', 'Hola', '&#20320;好' );
window.onload = function() {
  var rdm = Math.floor(Math.random()*hstr.length);
  var str = hstr[rdm];
  document.getElementById( 'changeStr' ).textContent = str
}
</script>
</head>
<body>
<h1>再表示(更新)する度に見出しの文字がランダムに表示</h1>
<h2 id="changeStr"></h2>
</body>
</html>
1〜100までの数字の内、2の倍数を合計して結果を、ボタンを押したらブラウザに表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1~100までの合計</title>
<script>
var ans=0;
function sum() {
  for(var i=1; i<=100; i++) {
    if( i%2 === 0) {
    ans += i;
    }
  }
  var total = '1〜100までの数字の内 2の倍数を合計すると、' + ans + 'になります。';
  document.getElementById( 'sumNum' ).textContent = total;
}
</script>
</head>
<body>
<h1>1~100までの合計</h1>
<p><button onClick="sum()">合計を求める</button></p>
<p id="sumNum"></p>
</body>
</html>
消費税が、8%のときと10%のときの結果を、問題の下に表示させる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>消費税計算、8%と10%の税込価格</title>
<script>
var tax = [0.08, 0.1];
var peyPrice;
var price;
function nowTax(){
  price = parseInt(prompt('価格を半角数字を入力してください',''));
  peyPrice = price * tax[0] + price;
  var txtArea = document.getElementById ('result1');
  txtArea.textContent = '税込み価格は、' + peyPrice + '円です。';
}
function newTax(){
  price = parseInt(prompt('価格を半角数字を入力してください',''));
  peyPrice = price * tax[1] + price;
  var txtArea = document.getElementById ('result2');
  txtArea.textContent = '税込み価格は、' + peyPrice + '円です。';
}
</script>
</head>
<body>
<h1>消費税計算、8%と10%の税込価格</h1>
<h2>消費税が8%の場合</h2>
<p><button onClick="nowTax()">計算してみる</button></p>
<p id="result1"></p>
<h2>消費税が10%の場合</h2>
<p><button onClick="newTax()">計算してみる</button></p>
<p id="result2"></p>
</body>
</html>

広告を非表示にする