35日目　JavaScript演習 - WEB、始めました

入力された数値の偶数・奇数を判別

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・偶数奇数判別</title>
<script>
function guki() {
var num;
var htmlstr='';

num = prompt('半角数字を入力してください', 2 );
num = parseInt( num);

if( num%2===0 ) {
  htmlstr = '入力された数字' + num + 'は偶数です。'
  document.getElementById( 'ans' ).innerHTML = htmlstr;
} else {
  htmlstr = '入力された数字' + num + 'は奇数です。'
  document.getElementById( 'ans' ).innerHTML = htmlstr;
}
}
</script>
</head>

<body>
<h1>入力された数学の偶数・奇数を判別</h1>
<p><button onClick="guki()">判別する</button></p>
<div id="ans"></div>
</body>
</html>

現在の時刻を表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・時刻表示</title>
<script>
function time() {

var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var htmlstr;

htmlstr = '現在の時刻は、' + h + '時' + m + '分です。'
document.getElementById( 'ans' ).innerHTML = htmlstr;

}
</script>
</head>

<body>
<h1>現在の時刻を表示</h1>
<p><button onClick="time()">表示する</button></p>
<div id="ans"></div>
</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文

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・営業定休表示if</title>
<script>
function yobi() {

var today = new Date();
var day = today.getDay();
var htmlstr;

if( day===0 || day===6 ) {
htmlstr = '定休日'
document.getElementById( 'ans' ).innerHTML = htmlstr;
} else {
htmlstr = '営業中'
document.getElementById( 'ans' ).innerHTML = htmlstr;

}
}
</script>
</head>

<body onLoad="yobi()">
<h1>今日は営業日か定休日か表示</h1>
<p id="ans"></p>
</body>
</html>

Switch文

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・営業定休表示switch</title>
<script>
function yobi() {

var today = new Date();
var day = today.getDay();
var htmlstr;

switch(day) {
  case 0:
  case 6:
htmlstr = '定休日'
document.getElementById( 'ans' ).innerHTML = htmlstr;
  break;
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
htmlstr = '営業中'
document.getElementById( 'ans' ).innerHTML = htmlstr;
break;
}
}
</script>
</head>

<body onLoad="yobi()">
<h1>今日は営業日か定休日か表示</h1>
<p id="ans"></p>
</body>
</html>

入力された点数の数値を｢100が満点｣｢80点以上が合格｣｢80点未満が不合格｣と表示する
合否判断

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・合否表示if</title>
<script>
function tensu() {
var score;
var refValue = 80;
var compValue = 100;
var htmlstr;

score = prompt('点数を半角で入力して下さい','');
score = parseInt( score );

if(score >= refValue) {

  if(score === compValue) {
    htmlstr = '満点です';
    document.getElementById( 'ans' ).innerHTML = htmlstr;
  } else {
    htmlstr = '合格です';
    document.getElementById( 'ans' ).innerHTML = htmlstr;
  }
}
else {
  htmlstr = '不合格です';
  document.getElementById( 'ans' ).innerHTML = htmlstr;
}

}

</script>

</head>

<body>
<h1>合否判定します。</h1>
<p><button onClick="tensu()">判定する</button></p>
<div id="ans"></div>
</body>
</html>

入力された数字（月）で四季を判別
for文

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演習・四季判別if</title>
<script>
var month;
var htmlstr;

function siki() {

month = prompt('月を半角数字で入力して下さい','');
month = parseInt( month );

if(month>=3 && month<=5) {
  htmlstr='春です';
  document.getElementById('ans').innerHTML = htmlstr;
} else if(month>=6 && month<=8) {
  htmlstr='夏です';
  document.getElementById('ans').innerHTML = htmlstr;
} else if(month>=9 && month<=11) {
  htmlstr='秋です';
  document.getElementById('ans').innerHTML = htmlstr;
} else{
  htmlstr='冬です';
  document.getElementById('ans').innerHTML = htmlstr;
}

}

</script>

</head>

<body>
<h1>四季判別します。</h1>
<p><button onClick="siki()">判別する</button></p>
<div id="ans"></div>
</body>
</html>

switch文

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演習・四季判別</title>
<script>
var month;
var htmlstr;

function siki() {

month = prompt('月を半角数字で入力して下さい','');
month = parseInt( month );

switch(month){
  case 3:
  case 4:
  case 5:
  htmlstr='春です';
  document.getElementById('ans').innerHTML = htmlstr;
  break;
	
  case 6:
  case 7:
  case 8:
  htmlstr='夏です';
  document.getElementById('ans').innerHTML = htmlstr;
  break;

  case 9:
  case 10:
  case 11:
  htmlstr='秋です';
  document.getElementById('ans').innerHTML = htmlstr;
  break;

  case 12:
  case 1:
  case 2:
  htmlstr='冬です';
  document.getElementById('ans').innerHTML = htmlstr;
  break;
}
}

</script>

</head>

<body>
<h1>四季判別します。</h1>
<p><button onClick="siki()">判別する</button></p>
<div id="ans"></div>
</body>
</html>

｢JavaScriptの勉強｣という文字を5回繰り返し表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・繰り返し文字表示for</title>
<script>
function forStr() {

  for(var i= 1; i<=5; i++) {
  var htmlstr = '<p>JavaScriptの勉強</p>'
  document.getElementById('ans').innerHTML += htmlstr;
//計算を5回繰り返すのではなく文字表示（出力）を5回している
  }
}
</script>
</head>

<body>
<h1>繰り返し文字を表示する：for文</h1>
<p><button onClick="forStr()">表示する</button></p>
<div id="ans"></div>
</body>
</html>

1～100までの合計をﾌﾞﾗｳｻﾞに表示に表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・1~100まで表示for</title>
<script>
function kai() {
var ans = 0;
for(var i=1; i<=100; i++) {
  ans += i;
  document.getElementById('sumNum').innerHTML = '<p>1～100までの合計は、'+ ans +'です。</p>';
}
}
</script>
</head>

<body>
<h1>1～100までの合計をブラウザに表示</h1>
<p><button onClick="kai()">表示する</button></p>
<div id="sumNum"></div>
</body>
</html>

入力された数字までの合計をﾌﾞﾗｳｻﾞに表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>演習・入力された数字まで表示for</title>
<script>
function kai() {
var x;
var ans = 0;

x = prompt('半角数字を入力して下さい','');
x = parseInt( x );

for(var i=1; i<=x; i++) {
  ans += i;
  document.getElementById('sumNum').innerHTML = '<p>1～100までの合計は、'+ ans +'です。</p>';
}
}
</script>
</head>

<body>
<h1>入力された数字までの合計をブラウザに表示</h1>
<p><button onClick="kai()">表示する</button></p>
<div id="sumNum"></div>
</body>
</html>

サイコロの目を奇数のみ表示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演習・サイコロ奇数</title>
<script>
function throwDice() {

  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><button onClick="throwDice()">サイコロをふる</button></p>
<div id="dice"></div>
</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>
function fList() { 
var list = new Array('みかん','りんご','いちご','もも','なし','かき');

for(var i = 0; i<list.length; i++) {
var htmlstr = '<li>' + list[i] + '</li>';

document.getElementById('ans').innerHTML += htmlstr;
}
}
</script>
</head>

<body onLoad="fList()">
<h1>「みかん」「りんご」「いちご」「もも」「なし」「かき」をリストで表示する</h1>
<ul id="ans"></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>