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

HTML+CSS+JavaScript

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

stonesy 2021. 11. 25. 02:26

728x90

1.다음과 같은 웹 페이지가 있다. 이 웹 페이지가 로드될 때, '접속 감사합니다!'라는 문장을 담은 200*80크기의 새 윈도우를 별도로 출력하도록 웹 페이지를 수정하라.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>HTML5</title>
</head>
<body onload="load()">
	<h3>HTML5</h3>
	<hr>
	<p>
		HTML5를 학습하는 사이트입니다.
		여기서 HTML5, CSS3, 자바스크립트를 배울 수 있습니다.
	</p>
	<script>
		function load(){
			win=window.open("","_blank","");
			win.document.write("접속 감사합니다!");
		}
	</script>
</body>
</html>

2.문제1의 코드를 수정하여보자.

(1)새 윈도우가 스크린 장치를 기준으로 (500,400)에 출력되게 하라.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>HTML5</title>
</head>
<body onload="load()">
	<h3>HTML5</h3>
	<hr>
	<p>
		HTML5를 학습하는 사이트입니다.
		여기서 HTML5, CSS3, 자바스크립트를 배울 수 있습니다.
	</p>
	<script>
		function load(){
			win=window.open("","_blank","left=500,top=400");
			win.document.write("접속 감사합니다!");
		}
	</script>
</body>
</html>

(2)새 윈도우의 타이틀을 '환영'으로, 바탕색을 yellowgreen으로 출력되게 하라.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>HTML5</title>
</head>
<body onload="load()">
	<h3>HTML5</h3>
	<hr>
	<p>
		HTML5를 학습하는 사이트입니다.
		여기서 HTML5, CSS3, 자바스크립트를 배울 수 있습니다.
	</p>
	<script>
		function load(){
			win=window.open("","_blank","left=500,top=400");
			win.document.write("접속 감사합니다!");
			win.document.title="환영";
			win.document.body.style.backgroundColor='yellowgreen';
		}
	</script>
</body>
</html>

3.옵션을 선택하면 옵션에 주어진 사이트에 접속하는 웹 페이지를 작성하고자 한다.

(1)옵션은 선택될 때마다 새 윈도우를 하나씩 열고 사이트를 접속하는 웹 페이지를 작성하라.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>옵션 선택으로 사이트 접속</title>
	<script>
	function load(){
		var sel = document.getElementById("sel");
		var index = sel.selectedIndex; //선택된 옵션 인덱스
		win=window.open(sel.options[index].value,"_blank");
	}
</script>
</head>
<body>
	<h3>옵션 선택으로 사이트 접속</h3>
	옵션 선택 마다 새 윈도우에 접속합니다.
	<hr>
	접속할 사이트<br>
	<form>
		<select id="sel" onchange="load()">
			<option name="sites" value="https://www.naver.com/">네이버</option>
			<option name="sites" value="http://www.google.com">구글</option>
			<option name="sites" value="https://www.oracle.com/kr/index.html">오라클</option>
		</select>
	</form>
</body>
</html>

(2)새 윈도우는 한 개만 열고, 옵션 선택 시 이 윈도우를 공유하도록 웹 페이지를 작성하라.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>옵션 선택으로 사이트 접속</title>
	<script>
	function load(){
		var sel = document.getElementById("sel");
		var index = sel.selectedIndex; //선택된 옵션 인덱스
		win=window.open(sel.options[index].value,"myWin","_blank");
	}
</script>
</head>
<body>
	<h3>옵션 선택으로 사이트 접속</h3>
	옵션 선택 마다 새 윈도우에 접속합니다.
	<hr>
	접속할 사이트<br>
	<form>
		<select id="sel" onchange="load()">
			<option name="sites" value="https://www.naver.com/">네이버</option>
			<option name="sites" value="http://www.google.com">구글</option>
			<option name="sites" value="https://www.oracle.com/kr/index.html">오라클</option>
		</select>
	</form>
</body>
</html>

4.웹 페이지를 로드하자마다 크롬 브라우저인지를 판단하여 다음과 같이 alert()로 출력하는 웹 페이지를 작성하라.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>구글 Chrome 브라우저 감별</title>
	<script>
		function load(){
			if(navigator.userAgent.indexOf("Chrome")){
				alert("구글 Chorme 브라우저입니다.");
			}	
		}
	</script>
</head>
<body onload="load()">
	<h3>구글 Chrome 브라우저 감별</h3>
	<hr>
	웹 브라우저에 따라 지원되는 자바스크립트들이 다를 수도 있습니다. DOM의 기능은 표준화되어 있어 동일하지만, BOM 객체들은 많이 다릅니다. 얼른 모두 표준화되었으면 하지만 독창적인 기능으로 승부하고자 하여 쉽지 않을 것 같습니다.
</body>
</html>

5.setTimeout()과 clearTimeout()을 이용하여 <div> 태그에 시계를 구현하라. 웹 페이지가 로드되면 즉각 현재 시각에서부터 시계가 가기 시작한다. 현재 시각 값은 new Date()로 얻으면 된다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>div 태그에 시계 만들기</title>
	<script>

function startClock() {
	var div = document.getElementById("myDiv");
	timeout(div);
}

function timeout(obj) {
	var current = new Date();
	obj.innerHTML = current.toLocaleTimeString();
	setTimeout("timeout(myDiv)", 1000); //setTimeout("timeout(document.getElementById('myDiv'))", 1000); 
}

	</script>
</head>
<body onload="startClock()">
	<h3>div 태그에 시계 만들기</h3>
	<hr>
	<div id="myDiv" style="background-color: aliceblue; border: 1px solid gray; width: 120px;height: 20px"></div>
</body>
</html>

6.setInterval()과 clearInterval()을 이용하여 <div>태그에 시계를 구현하라. 시계 위를 클릭하면 시계가 멈추고 클릭하면 현재 시간부터 시계가 다시 가도록 하라.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>div 태그에 시계 만들기</title>
	<script>
	var flag=0;//현재 상태를 나타내는 플래그, 0:시계가 멈춘상태, 1:시계가 작동하는 상태
	var timerID;

	function setClock() {
		var div = document.getElementById("myDiv");
		var current = new Date();
		div.innerHTML = current.toLocaleTimeString();
	}

	function clock() {
		var div = document.getElementById("myDiv");
		if(flag==0){
			flag=1;
			div.style.color="black";
			timerID = setInterval("setClock()",1000);
		}else if(flag==1){
			flag=0;
			div.style.color="gray";
			clearInterval(timerID);
		}
	}

	</script>
</head>
<body onload="startClock()">
	<h3>div 태그에 시계 만들기</h3>
	시계를 클릭하면 시계가 멈추고 다시 클릭하면 가기 시작한다.
	<hr>
	<div id="myDiv" style="background-color: aliceblue; border: 1px solid gray; width: 120px;height: 20px" onclick="clock()"></div>
</body>
</html>

7.수식을 출력하고 사용자로부터 답을 받아 채점하는 웹 페이지를 만들고자 한다.

(1)다음과 같이 정해진 수식을 주고 사용자가 입력 창에 입력하고 채점 버튼을 클릭하면 맞은 개수를 출력한다. 답이 틀리면 문제 위에 줄을 긋는다. 수식은 웹 페이지 내에 HTML 태그로 작성한 수식이다.

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>산수를 풀어 봅시다</title>
<style>
td {
	padding-left : 10px;
	padding-right : 10px;
}
</style>
<script>
function calc() {
	var total = 0;
	var qArray = document.getElementsByClassName("question");
	var aArray = document.getElementsByClassName("answer");
	for(i=0; i<qArray.length; i++) {
		var question = qArray[i].innerHTML;
		var correctAnswer = eval(question);
		var userAnswer = aArray[i].value;
		if(userAnswer=="" || isNaN(userAnswer)) {// 답이 없거나 문자가 입력된 경우
			total += 0;
			qArray[i].style.textDecoration = "line-through";
		}
		else if(parseInt(userAnswer) == correctAnswer) { // 답이 맞는 경우
			total += 1;
			qArray[i].style.textDecoration = "none"; // 혹시 이전에 틀린 문제에 다시 답을 하고 채점버튼을 누르는 경우를 위해
		}
		else {// 답이 틀린 경우
			total += 0;
			qArray[i].style.textDecoration = "line-through";
		}
	}
	document.getElementById("score").innerHTML = total;
}
</script>
</head>
<body>
<h3>산수 문제를 풀어 봅시다.</h3>
수식을 계산하여 답을 입력하고 채점 버튼을 누르세요.
<hr>
<form>
<table>
<tr><td class="question">5*6</td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td class="question">7+5*3</td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td class="question">23*2</td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td class="question">35-7</td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td><button type="button" onclick="calc()">채점</button></td>
	<td><span id="score">0</span></td></tr>
</table>
</form>
</body>
</html>

(2)문제(1)을 보완하여 처음부터 사칙 연산 문제를 랜덤하게 생성하고, 다시 버튼을 누를 때마다 문제가 만들어지도록 웹 페이지를 작성하라.

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>산수를 풀어 봅시다</title>
<style>
td {
	padding-left : 10px;
	padding-right : 10px;
}
</style>
<script>
function calc() {
	var total = 0;
	var qArray = document.getElementsByClassName("question");
	var aArray = document.getElementsByClassName("answer");
	for(i=0; i<qArray.length; i++) {
		var question = qArray[i].innerHTML;
		var correctAnswer = eval(question);
		var userAnswer = aArray[i].value;
		if(userAnswer=="" || isNaN(userAnswer)) {// 답이 없거나 문자가 입력된 경우
			total += 0;
			qArray[i].style.textDecoration = "line-through";
		}
		else if(parseInt(userAnswer) == correctAnswer) { // 답이 맞는 경우
			total += 1;
			qArray[i].style.textDecoration = "none"; // 혹시 이전에 틀린 문제에 다시 답을 하고 채점버튼을 누르는 경우를 위해
		}
		else {// 답이 틀린 경우
			total += 0;
			qArray[i].style.textDecoration = "line-through";
		}
	}
	document.getElementById("score").innerHTML = total;
}
function makeExpression() {
	var qArray = document.getElementsByClassName("question");
	var aArray = document.getElementsByClassName("answer");
	for(i=0; i<qArray.length; i++) {
		var number1 = Math.floor(Math.random()*20)+1;
		var number2 = Math.floor(Math.random()*20)+1; // 결코 0이 될 수 없음
		var op = Math.floor(Math.random()*4);
		var operator="+"; // 디폴트
		switch(op) {
			case 0 : operator = "+"; break;
			case 1 : operator = "-"; break;
			case 2 : operator = "*"; break;
			case 3 : operator = "/"; break;
		}
		qArray[i].innerHTML = number1 + operator + number2;
		qArray[i].style.textDecoration = "none";
		
		aArray[i].value=""; // 답 입력 난 지우기
		document.getElementById("score").innerHTML = 0; // 맞은 문항 수 지우기
	}
}
</script>
</head>
<body>
<h3>산수 문제를 풀어 봅시다.</h3>
수식을 계산하여 답을 입력하고 채점 버튼을 누르세요.
<hr>
<form>
<table>
<tr><td class="question">5*6</td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td class="question">7+5*3</td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td class="question">23*2</td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td class="question">35-7</td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td><button type="button" onclick="calc()">채점</button></td>
	<td><span id="score">0</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<button type="button" onclick="makeExpression()">다시</button>
	</td>
</tr>
</table>
</form>
</body>
</html>

8.문제7을 수정해보자. 10초의 시간이 지나면 자동으로 채점하도록 웹 페이지를 작성하라. 다시 버튼을 누르면 새 문제가 주어진다.

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>산수를 풀어 봅시다</title>
<style>
td {
	padding-left : 10px;
	padding-right : 10px;
}
</style>
<script>
function calc() {
	var total = 0;
	var qArray = document.getElementsByClassName("question");
	var aArray = document.getElementsByClassName("answer");
	for(i=0; i<qArray.length; i++) {
		var question = qArray[i].innerHTML;
		var correctAnswer = eval(question);
		var userAnswer = aArray[i].value;
		if(userAnswer=="" || isNaN(userAnswer)) {// 답이 없거나 문자가 입력된 경우
			total += 0;
			qArray[i].style.textDecoration = "line-through";
		}
		else if(parseInt(userAnswer) == correctAnswer) { // 답이 맞는 경우
			total += 1;
			qArray[i].style.textDecoration = "none"; // 혹시 이전에 틀린 문제에 다시 답을 하고 채점버튼을 누르는 경우를 위해
		}
		else {// 답이 틀린 경우
			total += 0;
			qArray[i].style.textDecoration = "line-through";
		}
	}
	document.getElementById("score").innerHTML = total;
}
function makeExpression() {
	var countTime = 10;
	var span = document.getElementById("time");
	span.innerHTML=10;
	var qArray = document.getElementsByClassName("question");
	var aArray = document.getElementsByClassName("answer");
	for(i=0; i<qArray.length; i++) {
		var number1 = Math.floor(Math.random()*20)+1;
		var number2 = Math.floor(Math.random()*20)+1; // 결코 0이 될 수 없음
		var op = Math.floor(Math.random()*4);
		var operator="+"; // 디폴트
		switch(op) {
			case 0 : operator = "+"; break;
			case 1 : operator = "-"; break;
			case 2 : operator = "*"; break;
			case 3 : operator = "/"; break;
		}
		qArray[i].innerHTML = number1 + operator + number2;
		qArray[i].style.textDecoration = "none";
		
		aArray[i].value=""; // 답 입력 난 지우기
		document.getElementById("score").innerHTML = 0; // 맞은 문항 수 지우기
	}
}
function startClock() {
	var time = document.getElementById("time");
	timeout(time);
}

function timeout(obj) {
	var count = obj.innerHTML;
	if(count>0){
		obj.innerHTML = count-1;
		setTimeout("timeout(time)", 1000); //setTimeout("timeout(document.getElementById('myDiv'))", 1000); 
	}else if(count==0){
		calc();
	}
}

</script>
</head>
<body onload="startClock(),makeExpression()">
<h3>산수 문제를 풀어 봅시다.</h3>
문제는 자동으로 생성되며, 10초가 지나면 자동 채점됩니다.<br>
남은시간 <span id="time">10</span>
<hr>
<form>
<table>
<tr><td class="question">5*6</td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td class="question">7+5*3</td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td class="question">23*2</td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td class="question">35-7</td><td><input class="answer" type="text" size="8"></td></tr>
<tr><td><button type="button" onclick="makeExpression()">다시</button>
		<span id="score">0</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	</td>
</tr>
</table>
</form>
</body>
</html>

9.스크린의 해상도가 1280*1024보다 작은 경우, 웹 페이지가 로드되자마자 "스크린 해상도가 낮습니다!"라고 경고 창을 출력하는 웹 페이지를 작성하라.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>screen 객체 활용</title>
	<script>
		function load{
			if((screen.width<1280)&(screen.height<1024)){
				alert("스크린 해상도가 낮습니디!");
			}
		}
	</script>
</head>
<body onload="load()">
	<h3>screen 객체 활용</h3>
	<hr>
	스크린의 해상도가 1280*1024보다 작은 경우 웹 페이지가 정상적으로 출력되지 않을 수 있음을 알리고 경고창을 출력한다.
</body>
</html>

728x90

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

[HTML5+CSS3+Javascript 웹프로그래밍]12장 연습문제 (0)	2021.11.26
[HTML5+CSS3+Javascript 웹프로그래밍]11장 실습문제 (0)	2021.11.26
[HTML5+CSS3+Javascript 웹프로그래밍]12장 OpenChallenge (0)	2021.11.21
[HTML5+CSS3+Javascript 웹프로그래밍]11장 연습문제 (0)	2021.11.21
[HTML5+CSS3+Javascript 웹프로그래밍]10장 연습문제 (0)	2021.11.21

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

https://github.com/seoyoung927

250x250

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

stonesy