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

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

JavaScript演習課題

演習課題

  • 写真はすべて適宜
  • アップロード後のデータを採点
  • 「URL/1121/」に各課題のリンクを作って提出
【課題01】
  • 写真をクリックするとキャプションが表示されるようにしなさい
  • 非表示の状態からクリックすると表示する

f:id:web-0818:20161120213405p:plain

【課題02】
  • ボタンをクリックするとその写真が表示されるようにしなさい

f:id:web-0818:20161120214354p:plain

【課題03】
  • 購入金額(消費税別)の合計が1万円を超えると8%割引される消費税込みの支払い金額を表示させなさい
【課題04】
  • 現在の年月日・曜日・時刻を秒まで表示させなさい
【課題05】
  • 1から入力された数字までの合計を正確に表示させなさい(0や全角数字が入力された場合は計算不能)
【課題06】
  • 10枚の写真をランダムに表示させなさい
  • キャプションは「1枚目の画像」というふうに表示させなさい




解答例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>クリックイベントでキャプションを表示</title>
<style>
body {
  text-align: center;
}
img {
  cursor: pointer;
}
</style>
<script>
function capText() {
  var str =  document.getElementById( 'caption' );
  str.textContent = '北海道の風景写真です!';
}
</script>
</head>
<body>
<h1>美しい風景</h1>
<img src="ph01.jpg" alt="" onClick="capText()">
<p id="caption"></p>
</body>
</html>



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボタンをクリックで画像変更</title>
</head>
<style>
body { text-align: center; }
img{ border:10px solid #FFF; box-shadow: 0 0 6px #AAA; }
button { padding: 5px 9px; }
</style>
<body>
<h1>美しい風景</h1>
<p><img src="img/ph01.jpg" name="main"></p>
<button onClick="main.src='img/ph01.jpg'">写真1</button>  
<button onClick="main.src='img/ph02.jpg'">写真2</button>  
<button onClick="main.src='img/ph03.jpg'">写真3</button>  
<button onClick="main.src='img/ph04.jpg'">写真4</button>
</body>
</html>



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>計算結果を表示するプログラム</title>
<script>
var taxRate = 0.08;

function total(){
var price = prompt( '購入金額を半角数字で入力してください', '' );
price = parseInt( price );
var num = prompt( '購入数を半角数字で入力してください', '' );
num = parseInt( num );
var priceTotal = price * num;
var tax = priceTotal * 0.08;
tax = parseInt( tax );
var totalPrice = priceTotal + tax;

var str = document.getElementById( 'ans' );
if( priceTotal >= 10000 ) {
  str.textContent = '購入金額が1万円を超えたので、8%割引で、お支払金額は、'+ priceTotal +'円となります。';
}
else {
  str.textContent = 'お支払金額は、'+ totalPrice +'円となります。';
}
}
</script>
</head>
<body>
<h1>購入金額(消費税別)が1万円を超えると8%割引されるプログラム<br>
</h1>
<button onClick="total()">消費税込みの支払い金額</button>
<h2 id="ans"></h2>
</body>
</html>



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>現在の年月日・曜日・時刻を秒まで表示</title>
<script>
function nowDate() {
var now = new Date;
var week = new Array( '日', '月', '火', '水', '木', '金', '土' );

var year = now.getFullYear();
var month = now.getMonth()+1;
var ndate = now.getDate();
var day = now.getDay();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();

var str = document.getElementById( 'nowTime' );
str.textContent = '現在、' + year + '年 ' + month + '月 ' + ndate + '日 ' + week[day] + '曜日 ' + hour + '時 ' + minute + '分' + second + '秒です。';
}
</script>
</head>
<body onload="nowDate()">
<h1 id="nowTime"></h1>
</body>
</html>



<br><br>
>|html|
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1から入力された数字までの合計を求める</title>
<script>
function sum() {
var num = prompt( '1以上の半角数字を入力してください', '' );
num = parseInt( num );

var str = document.getElementById( 'ans' );
if( isNaN( num ) ) {
  str.textContent = '入力された値は、半角数字ではありません。もう一度入力してください。';
}
else {
  var total = 0;
  for( var i = 1; i <= num; i++ ) {
    total += i;
  }
  str.textContent = '1から入力された数字「' + num + '」までの合計は、' + total + 'です。';
}
}
</script>
</head>
<body>
<h1>1から入力された数字までの合計を求める</h1>
<p><button onClick="sum()">求める</button></p>
<h2 id="ans"></h2>
</body>
</html>




<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像をランダムに表示</title>
<style>
body { text-align: center; }
</style>
<script>
var imgNum = 10;
function change() {
var rnd = Math.floor( Math.random()*imgNum +1);
var str = document.getElementById( 'viewImg' );
str.innerHTML = '<p><img src="img/' + rnd + '.png" alt=""></p><p>' + rnd + '枚目の画像</p>' ;
}
</script>
</head>
<body>
<h1>画像をランダムに表示</h1>
<p><button onClick="change()">ランダムに表示</button></p>
<div id="viewImg"><p><img src="img/1.png" alt=""></p></div>
</body>
</html>
広告を非表示にする