Webデザインのこと、いろいろ

Webデザインにまつわることを自分用にメモしています。

JavaScript習熟度テスト:1〜5問目

【問1】サムネール(5個)にマウスを乗せたとき、メイン画像が変化するように記述しなさい。
習得度確認試験_1問目

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>習得度確認試験_1問目</title>
<link rel="stylesheet" href="style_q01.css">
</head>

<body>
<div class="imgBox">
<h1>【問1】</h1>
<div class="thumbnail">
<!--実際はインラインで表記-->
<img src="img/img01_s.jpg" alt="#" onMouseOver="swap.src='img/img01.jpg'" onMouseOut="swap.src='img/img00.jpg'">
<img src="img/img02_s.jpg" alt="#" onMouseOver="swap.src='img/img02.jpg'" 
onMouseOut="swap.src='img/img00.jpg'">
<img src="img/img03_s.jpg" alt="#" onMouseOver="swap.src='img/img03.jpg'" 
onMouseOut="swap.src='img/img00.jpg'">
<img src="img/img04_s.jpg" alt="#" onMouseOver="swap.src='img/img04.jpg'" 
onMouseOut="swap.src='img/img00.jpg'">
<img src="img/img05_s.jpg" alt="#" onMouseOver="swap.src='img/img05.jpg'" 
onMouseOut="swap.src='img/img00.jpg'">
</div><!--.thumbnail-->
<div class="mainImg">
<img src="img/img01.jpg" alt="#" name="swap">
</div><!--.mainImg-->
</div><!--.imgBox-->
</body>
</html>

【問2】1~45までの合計を、DOMの記述を使ってボタンを押したときに表示させなさい。
習得度確認試験_2問目

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>習得度確認試験_2問目</title>
</head>

<body>
<h1>ボタンを押すと、1~45までの合計を表示します。</h1>
<p><button onClick="total()">答え</button></p>
<p id="answer"></p>
<script>
var ans = 0;

function total(){
	for(var i=1; i<=45; i++){
		console.log( i + '回目' );
		ans += i;
		console.log( ans );
	}
document.getElementById( 'answer' ).innerHTML = '1~45までの合計は、' + ans + 'です。';
}
</script>
</body>
</html>

【問3】入力された値が7の倍数かどうかを判別する記述を、write()メソッドの記述を使ってボタンを押した時に表示させなさい。
習得度確認試験_3問目

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>習得度確認試験_3問目</title>
</head>

<body>
<h1>入力された値が7の倍数かどうかを判別します。</h1>
<p>以下のボタンをクリックすると、
入力された値が7の倍数かどうかを判別します。</p>
<p><button onClick="judge()">数字を入力する</button></p>
<script>
var num;
num = parseInt( num ); 

function judge() {
	num = prompt( '半角数字を入力して下さい。','' );
	if( num%7 === 0 ){
		document.write( '<h2>入力した数字' + num + 'は、7の倍数です。</h2>' );
} else {
	document.write( '<h2>入力した数字' + num + 'は、7の倍数ではありません。</h2>' );
	}
}
</script>
</body>
</html>

【問4】1~入力された値までの合計を、write()メソッドの記述を使って、ボタンを押した時に表示させなさい。
習得度確認試験_4問目

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>習得度確認試験_4問目</title>
</head>

<body>
<h1>1~入力された値までの合計を表示します。</h1>
<p>以下のボタンをクリックすると、<br>
入力した数字までの合計を求めて表示します。</p>
<p><button onClick="total()">数字を入力する</button></p>
<script>
function total(){
	var ans = 0;
	var maxNum;
	
maxNum = prompt('半角数字を入力して下さい','');
maxNum = parseInt( maxNum );

for(var i=1; i<=maxNum; i++){
	ans += i;
}
document.write( '1~' + maxNum + 'の合計は、' + ans + 'です。' )
}
</script>
</body>
</html>

【問5】今日の西暦年月日曜日(~年~月~日~曜日)を表示させなさい。
習得度確認試験_5問目

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>習得度確認試験_5問目</title>
</head>

<body>
<script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var day = now.getDay();
var w = [ '日','月','火','水','木','金','土' ];

day = w[ day ];
console.log( day );

document.write( '<h3>今日は' + ' ' + year + '年' + ' ' + month + '月' + ' ' + date + '日' + ' ' + ' ' + day + '曜日です。</h3>' );
</script>
</body>
</html>