HTML+CSS+JavaScript

[HTML5+CSS3+Javascript 웹프로그래밍]13장 실습문제

stonesy 2021. 12. 2. 19:48
728x90

1.자바스크립트로 비디오 재생, 일시 중지, 음량 제어, 음소거 제어 등 기능을 갖춘 웹 페이지를 작성하라.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>자바스크립트로 비디오 제어</title>
</head>
<body>
	<h3>자바스크립트로 비디오 제어</h3>
	<hr>
	<video id="video" src="./media/bear.mp4"></video>
	<div id="msg">동영상을 재생중입니다.</div>
	<form>
		<input type="button" value="play" onclick="play()">
		<input type="button" value="pause" onclick="pause()">
		<input type="button" value="replay" onclick="replay()">
		<input type="button" value="vol-" onclick="volumeDown()">
		<input type="button" value="vol+" onclick="volumeUp()">
		<input type="button" value="mute on/off" onclick="mute()">
	</form>
<script>
	var video = document.getElementById("video");
	var msg = document.getElementById("msg");
	function play(){
		msg.innerHTML=video.src+"를 재생중입니다.";
		video.play();
	}
	function pause(){
		msg.innerHTML=video.src+"를 중지합니다.";
		video.pause();
	}
	function replay(){
		msg.innerHTML=video.src+"를 다시 재생합니다.";
		video.load();
		video.play();
	}
	function volumeUp(){
		video.volume+=0.1;
	}
	function volumeDown() {
		video.volume-=0.1;
	}
	function mute() {
		if(video.muted==true)
			video.muted=false;
		else
			video.muted=true;
	}
</script>
</body>
</html>

 

2.<table>태그로 곡목을 출력하고 재생 버튼과 중지 버튼으로 연주를 제어할 수 있는 웹 페이지를 작성하라(할 수 있으면 재생 중인 곡 제목에 색을 입혀보라.)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>오디오 재생</title>
	<style>
		td{
			width: 20px;
		}
		th{
			width: 150px;
			border-bottom: 1px solid gray;
		}
		.num{
			border: 1px solid yellowgreen;
		}
	</style>
</head>
<body>
	<h3>오디오 재생</h3>
	<hr>
	<audio id="audio" src="./media/Aegukga.mp3" autoplay controls></audio>
	<table>
		<tr>
			<td class="num">1</td><th>애국가</th><td><input type="button" name="./media/Aegukga.mp3" value="재생" onclick="play(this)"></td><td><input type="button" value="중지" onclick="pause()"></td>
		</tr>
		<tr>
			<td class="num">2</td><th>bad</th><td><input type="button" name="./media/bad.mp3" value="재생" onclick="play(this)"></td><td><input type="button" value="중지" onclick="pause()"></td>
		</tr>
		<tr>
			<td class="num">3</td><th>clock</th><td><input type="button" name="./media/clock.mp3" value="재생" onclick="play(this)"></td><td><input type="button" value="중지" onclick="pause()"></td>
		</tr>
	</table>
<script>
	var audio = document.getElementById("audio");
	
	function play(obj){
		audio.src = obj.name;
		audio.play();
	}

	function pause(){
		audio.pause();
	}
</script>
</body>
</html>

 

3.오디오 연주가 끝나면, confirm() 메소드를 이용하여 '다시할까요'를 묻고 사용자의 선택에 따라 다시 연주하는 웹 페이지를 작성하라.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>애국가 연주</title>
</head>
<body>
	<h3>애국가 연주</h3>
	<hr>
	<audio id="audio" src="./media/Aegukga.mp3" autoplay controls></audio>
<script>
	var audio = document.getElementById("audio");
	audio.onended = function(e){
		var ret = confirm("다시할까요?");
		if(ret==true){
			audio.load();
			audio.play();
		}
	}
</script>
</body>
</html>

 

4.체크 박스에 표시된 오디오를 자동으로 연속 연주하는 웹 페이지를 작성하라.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>오디오 재생</title>
</head>
<body>
	<h3>오디오 재생</h3>
	듣고 싶은 곡은 선택하고 시작 버튼을 누르면 연속하여 자동 연주합니다.
	<hr>
	<audio id="audio" src="" autoplay controls></audio>
	<form>
		<input type="checkbox" value="./media/Aegukga.mp3" onclick="addMusic(this)">애국가<br>
		<input type="checkbox" value="./media/EmbraceableYou.mp3" onclick="addMusic(this)">EmbraceableYou<br>
		<input type="checkbox" value="./media/bad.mp3" onclick="addMusic(this)">bad<br>
		<input type="checkbox" value="./media/clock.mp3" onclick="addMusic(this)">clock<br>
		<input type="button" value="연주시작" onclick="play()">
	</form>
<script>
	var audio = document.getElementById("audio");
	var musicArr = new Array();

	function addMusic(obj){
		if(obj.checked){
			musicArr[musicArr.length]=obj.value;
		}
	}

	function play(){
		for(var i=0;i<musicArr.length;i++){
			audio.src=musicArr[i];
			audio.play();
		}
	}
</script>
</body>
</html>

 

5.워커 태스크를 활용하는 문제이다. 웹 페이지에서는 0에서 100까지의 점수를 입력받아 워커 태스크로 넘겨준다. 워커 태스크는 점수를 기반으로 90~100 사이는 "A", 80~89사이는 "B", 70~79사이는 "C", 60~69사이는 "D", 0~59사이는 "F"값을 워커 객체로 전송한다. 워커 객체는 워커 태스크로부터 전달받은 학점 문자열을 출력한다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>학점 매기기</title>
</head>
<body>
	<h3>학점 매기기</h3>
	<hr>
	<input type="button" value="점수입력" onclick="getScore()"><br>
	<div id="msg"></div>
<script>
	var msg = document.getElementById("msg");
	var worker = new Worker("getResult.js");

	worker.onmessage = function(e){
		var text = msg.innerHTML+e.data;
		msg.innerHTML = text;
	}

	function getScore(){
		var score = parseInt(prompt("점수를 숫자로 입력하세요"));
		msg.innerHTML = score+"=";
		worker.postMessage(score);
	}
</script>
</body>
</html>
onmessage = function(e){
	var score = e.data;
	var ret;
	if((score>=90)|(score<=100)){
		ret = "A";
	}else if((score>=80)|(score<90)){
		ret = "B";
	}else if((score>=70)|(score<80)){
		ret = "C";
	}else if((score>=60)|(score<70)){
		ret = "D"
	}else{
		ret = "F";
	}

	postMessage(ret);
}
728x90

'HTML+CSS+JavaScript' 카테고리의 다른 글

[HTML5+CSS3+Javascript 웹프로그래밍]13장 이론문제  (0) 2021.12.02
[HTML5+CSS3+Javascript 웹프로그래밍]12장 실습문제  (0) 2021.11.26
[HTML5+CSS3+Javascript 웹프로그래밍]12장 연습문제  (0) 2021.11.26
[HTML5+CSS3+Javascript 웹프로그래밍]11장 실습문제  (0) 2021.11.26
[HTML5+CSS3+Javascript 웹프로그래밍]10장 실습문제  (0) 2021.11.25

'HTML+CSS+JavaScript'의 다른글

  • 현재글[HTML5+CSS3+Javascript 웹프로그래밍]13장 실습문제

관련글

댓글

티스토리툴바