JavaScript/5. 윈도우와 브라우저 관련 객체
Day 49 : Exercise
pancakemaker
2021. 12. 24. 09:35
[실습문제]
1. 다음과 같은 웹 페이지가 있다. 이 웹 페이지가 로드될 때, '접속 감사합니다!' 라는 문구를 담은 200x80 크기의 새 윈도우를 별도로 출력하도록 웹 페이지를 수정하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
<script>
function load() {
var newWin = window.open("", "myWin", "width=200, height=80")
newWin.document.write("접속 감사합니다!")
}
</script>
</head>
<body onload="load()">
<h3>HTML5</h3>
<hr>
<p>
HTML5를 학습하는 사이트입니다.
여기서 HTML5, CSS3, 자바스크립트를
배울 수 있습니다.
</p>
</body>
</html>
2. 문제 1의 코드를 수정해보자.
(1) 새 윈도우가 스크린 장치를 기준으로 (500, 400)에 출력되게 하라.
(2) 새 윈도우의 타이틀을 '환영'으로, 바탕색을 yellowgreen으로 출력되도록 하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
<script>
function load() {
var newWin = window.open("", "myWin", "width=200, height=80, top=400, left=500")
newWin.document.write("접속 감사합니다! <br> 열심히 하세요!")
newWin.document.title = "환영";
newWin.document.body.style.backgroundColor="yellowgreen";
}
</script>
</head>
<body onload="load()">
<h3>HTML5</h3>
<hr>
<p>
HTML5를 학습하는 사이트입니다.
여기서 HTML5, CSS3, 자바스크립트를
배울 수 있습니다.
</p>
</body>
</html>
3. 옵션을 선택하면 옵션에 주어진 사이트에 접속하는 웹 페이지를 작성하고자 한다.
(1) 옵션이 선택될 때마다 새 윈도우를 하나씩 열고 사이트를 접속하는 웹 페이지를 작성하라.
(2) 새 윈도우는 한 개만 열고, 옵션 선택 시 이 윈도우를 공유하도록 웹 페이지를 작성하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이트 접속</title>
<script>
function openWindow() {
var select = document.getElementById("site");
var newWin = window.open("", "myWin", "width=1000, height=700");
newWin.location = select.options[select.selectedIndex].value;
}
</script>
</head>
<body>
<h3>옵션 선택으로 사이트 접속</h3>
옵션 선택 마다 새 윈도우에 접속합니다.
<hr>
접속할 사이트 <p>
<select name="site" id="site" onchange="openWindow()">
<option value="http://www.naver.com" selected>네이버</option>
<option value="http://www.google.com">구글</option>
<option value="http://www.oracle.com">오라클</option>
</select>
</body>
</html>
4. 웹 페이지를 로드하자마자 크롬 브라우저인지를 판단하여 다음과 같이 alert() 로 출력하는 웹 페이지를 작성하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
<script>
function isGoogle() {
var str = navigator.userAgent
if(str.indexOf("Chrome") !== -1) {
alert("구글 Chrome 브라우저입니다.");
} else {
alert("구글 Chrome 브라우저가 아닙니다. \n"
+ "navigator.userAgent: \n" + str)
}
}
</script>
</head>
<body onload="isGoogle()">
<h3>구글 Chrome 브라우저 감별</h3>
<hr>
<p>웹 브라우저에 따라 지원되는 자바스크립트들이 다를 수도 있습니다. DOM의 기능은 표준화되어 있어 동일하지만, BOM 객체들은 많이 다릅니다. 얼른 모두 표준화되었으면 하지만 독창적인 기능으로 승부하고자 하여 쉽지는 않을 것 같습니다.</p>
</body>
</html><Chrome으로 실행 시>
<Internet Explorer로 실행 시>
5. setTimer()와 clearTimer()를 이용하여 <div> 태그에 시계를 구현하라. 웹 페이지가 로드되면 즉각 현재 시각에서부터 시계가 가기 시작한다. 현재 시각 값은 new Date()로 얻으면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: aliceblue;
border: 1px solid black;
width: 100px;
height: 20px;
}
</style>
</head>
<body onload="startClock()">
<h3>div 태그에 시계 만들기</h3>
<hr>
<div id="div"></div>
<script>
function startClock() {
var div = document.getElementById("div");
showTime();
}
function showTime() {
var now = new Date();
div.innerHTML = now.toLocaleTimeString();
setTimeout("showTime()", 1000); //1초 후 showTime() 함수 재호출
}
</script>
</body>
</html>
6. setInterval()과 clearInterval()을 이용하여 <div> 태그에 시계를 구현하라. 시계 위를 클릭하면 시계가 멈추고 클릭하면 현재 시각부터 시계가 다시 가도록 하라. (클릭 상태 확인 변수 생성이 관건)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setInterval() 활용</title>
<style>
div {
background-color: aliceblue;
border: 1px solid black;
width: 100px;
height: 20px;
}
</style>
</head>
<body onload="div.onclick">
<h3>div 태그에 시계 만들기</h3>
시계를 클릭하면 시계가 멈추고 다시 클릭하면 가기 시작한다.
<hr>
<div id="div"></div>
<script>
var div = null;
var tog = 0; //클릭 상태 확인 변수. 초기값(클릭 안했을 때 즉, 시계 작동 시) = 0
div = document.getElementById("div");
var timerID = setInterval("showTime()", 200);
div.onclick = function() {
if(tog == 1) { //시계 작동 중지 시 클릭하면
div.style.color = "black"; //검은색으로 변하고
timerID = setInterval("showTime()", 200); //시계 작동 시작
tog = 0; //초기값으로 돌아감 (클릭 되지 않은 상태 = 0)
} else if(tog == 0) { //시계 작동 시 클릭하면
div.style.color = "gray"; //회색으로 변하고
clearInterval(timerID); //타이머 작동 중지 (시계 작동 중지)
tog = 1; //클릭이 된 상태는 1로 줌
}
}
function showTime() {
var now = new Date();
div.innerHTML = now.toLocaleTimeString();
}
</script>
</body>
</html>
7. 수식을 출력하고 사용자로부터 답을 받아 채점하는 웹 페이지를 만들고자 한다.
(1) 다음과 같이 정해진 수식을 주고 사용자가 입력 창에 입력하고 채점 버튼을 클릭하면 맞은 개수를 출력한다. 답이 틀리면 문제 위에 줄을 긋는다. 수식은 웹 페이지내에 HTML 태그로 작성한 수식이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>산수 문제를 풀어 봅시다.</title>
<style>
</style>
<script>
function calculate() {
var count = 0;
var math1 = document.getElementById("math1");
var div1 = document.getElementById("div1");
var math2 = document.getElementById("math2");
var div2 = document.getElementById("div2");
var math3 = document.getElementById("math3");
var div3 = document.getElementById("div3");
var math4 = document.getElementById("math4");
var div4 = document.getElementById("div4");
if(math1.value == eval(div1.innerHTML)) {
count++;
} else {
div1.style.textDecoration = "line-through";
}
if(math2.value == eval(div2.innerHTML)) {
count++;
} else {
div2.style.textDecoration = "line-through";
}
if(math3.value == eval(div3.innerHTML)) {
count++;
} else {
div3.style.textDecoration = "line-through";
}
if(math4.value == eval(div4.innerHTML)) {
count++;
} else {
div4.style.textDecoration = "line-through";
}
var p = document.getElementById("pp");
p.innerHTML = count;
}
</script>
</head>
<body>
<h3>산수 문제를 풀어 봅시다.</h3>
수식을 계산하여 답을 입력하고 채점 버튼을 누르세요.
<hr>
<table>
<tr><td><div id="div1">5*6</div></td><td><input type="text" style="width: 100px; margin-left: 20px;" id="math1"></td></tr>
<tr><td><div id="div2">7+5*3</div></td><td><input type="text" style="width: 100px; margin-left: 20px;" id="math2"></td></tr>
<tr><td><div id="div3">23*2</div></td><td><input type="text" style="width: 100px; margin-left: 20px;" id="math3"></td></tr>
<tr><td><div id="div4">35-7</div></td><td><input type="text" style="width: 100px; margin-left: 20px;" id="math4"></td></tr>
<tr><td><input type="button" value="채점" onclick="calculate()"></td><td><p style="width: 100px; margin-left: 20px;" id="pp">0</p></td></tr>
</table>
</body>
</html>
(2) 문제 1을 보완하여 처음부터 사칙 연산 문제를 랜덤하게 생성하고, 다시 버튼을 누를 때마다 문제가 만들어지도록 웹 페이지를 작성하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>산수 문제를 풀어 봅시다.</title>
<style>
</style>
<script>
function calculate() {
var count = 0;
var math1 = document.getElementById("math1");
var div1 = document.getElementById("div1");
var math2 = document.getElementById("math2");
var div2 = document.getElementById("div2");
var math3 = document.getElementById("math3");
var div3 = document.getElementById("div3");
var math4 = document.getElementById("math4");
var div4 = document.getElementById("div4");
if(math1.value == eval(div1.innerHTML)) {
count++;
} else {
div1.style.textDecoration = "line-through";
}
if(math2.value == eval(div2.innerHTML)) {
count++;
} else {
div2.style.textDecoration = "line-through";
}
if(math3.value == eval(div3.innerHTML)) {
count++;
} else {
div3.style.textDecoration = "line-through";
}
if(math4.value == eval(div4.innerHTML)) {
count++;
} else {
div4.style.textDecoration = "line-through";
}
var p = document.getElementById("pp");
p.innerHTML = count;
}
function makeQuestion() {
var math1 = document.getElementById("math1");
var div1 = document.getElementById("div1");
var math2 = document.getElementById("math2");
var div2 = document.getElementById("div2");
var math3 = document.getElementById("math3");
var div3 = document.getElementById("div3");
var math4 = document.getElementById("math4");
var div4 = document.getElementById("div4");
var question1 = Math.round(Math.random()*29) + 1;
var question2 = Math.round(Math.random()*29) + 1;
var cal = Math.round(Math.random()*2) + 1;
switch(cal) {
case 1 : cal = "+";
break;
case 2 : cal = "-";
break;
case 3 : cal = "*";
break;
}
div1.innerHTML = question1 + cal + question2;
var question1 = Math.round(Math.random()*29) + 1;
var question2 = Math.round(Math.random()*29) + 1;
var cal = Math.round(Math.random()*2) + 1;
switch(cal) {
case 1 : cal = "+";
break;
case 2 : cal = "-";
break;
case 3 : cal = "*";
break;
}
div2.innerHTML = question1 + cal + question2;
var question1 = Math.round(Math.random()*29) + 1;
var question2 = Math.round(Math.random()*29) + 1;
var cal = Math.round(Math.random()*2) + 1;
switch(cal) {
case 1 : cal = "+";
break;
case 2 : cal = "-";
break;
case 3 : cal = "*";
break;
}
div3.innerHTML = question1 + cal + question2;
var question1 = Math.round(Math.random()*29) + 1;
var question2 = Math.round(Math.random()*29) + 1;
var cal = Math.round(Math.random()*2) + 1;
switch(cal) {
case 1 : cal = "+";
break;
case 2 : cal = "-";
break;
case 3 : cal = "*";
break;
}
div4.innerHTML = question1 + cal + question2;
}
</script>
</head>
<body onload="makeQuestion()">
<h3>산수 문제를 풀어 봅시다.</h3>
수식을 계산하여 답을 입력하고 채점 버튼을 누르세요.
<hr>
<table>
<tr><td><div id="div1">5*6</div></td><td><input type="text" style="width: 100px; margin-left: 20px;" id="math1"></td></tr>
<tr><td><div id="div2">7+5*3</div></td><td><input type="text" style="width: 100px; margin-left: 20px;" id="math2"></td></tr>
<tr><td><div id="div3">23*2</div></td><td><input type="text" style="width: 100px; margin-left: 20px;" id="math3"></td></tr>
<tr><td><div id="div4">35-7</div></td><td><input type="text" style="width: 100px; margin-left: 20px;" id="math4"></td></tr>
<tr><td><input type="button" value="채점" onclick="calculate()"></td><td><p style="width: 100px; margin-left: 20px;" id="pp">0</p></td>
<td><input type="button" value="다시" onclick="makeQuestion()"></td></tr>
</table>
</body>
</html>
8. 문제 7을 수정해보자. 10초의 시간이 지나면 자동으로 채점하도록 웹 페이지를 작성하라. 다시 버튼을 누르면 새 문제가 주어진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>산수 문제를 풀어 봅시다.</title>
<style>
</style>
<script>
function calculate() {
var count = 0;
var math1 = document.getElementById("math1");
var div1 = document.getElementById("div1");
var math2 = document.getElementById("math2");
var div2 = document.getElementById("div2");
var math3 = document.getElementById("math3");
var div3 = document.getElementById("div3");
var math4 = document.getElementById("math4");
var div4 = document.getElementById("div4");
if(math1.value == eval(div1.innerHTML)) {
count++;
} else {
div1.style.textDecoration = "line-through";
}
if(math2.value == eval(div2.innerHTML)) {
count++;
} else {
div2.style.textDecoration = "line-through";
}
if(math3.value == eval(div3.innerHTML)) {
count++;
} else {
div3.style.textDecoration = "line-through";
}
if(math4.value == eval(div4.innerHTML)) {
count++;
} else {
div4.style.textDecoration = "line-through";
}
var p = document.getElementById("pp");
p.innerHTML = count;
}
function makeQuestion() {
var math1 = document.getElementById("math1");
var div1 = document.getElementById("div1");
var math2 = document.getElementById("math2");
var div2 = document.getElementById("div2");
var math3 = document.getElementById("math3");
var div3 = document.getElementById("div3");
var math4 = document.getElementById("math4");
var div4 = document.getElementById("div4");
var question1 = Math.round(Math.random()*29) + 1;
var question2 = Math.round(Math.random()*29) + 1;
var cal = Math.round(Math.random()*2) + 1;
switch(cal) {
case 1 : cal = "+";
break;
case 2 : cal = "-";
break;
case 3 : cal = "*";
break;
}
div1.innerHTML = question1 + cal + question2;
var question1 = Math.round(Math.random()*29) + 1;
var question2 = Math.round(Math.random()*29) + 1;
var cal = Math.round(Math.random()*2) + 1;
switch(cal) {
case 1 : cal = "+";
break;
case 2 : cal = "-";
break;
case 3 : cal = "*";
break;
}
div2.innerHTML = question1 + cal + question2;
var question1 = Math.round(Math.random()*29) + 1;
var question2 = Math.round(Math.random()*29) + 1;
var cal = Math.round(Math.random()*2) + 1;
switch(cal) {
case 1 : cal = "+";
break;
case 2 : cal = "-";
break;
case 3 : cal = "*";
break;
}
div3.innerHTML = question1 + cal + question2;
var question1 = Math.round(Math.random()*29) + 1;
var question2 = Math.round(Math.random()*29) + 1;
var cal = Math.round(Math.random()*2) + 1;
switch(cal) {
case 1 : cal = "+";
break;
case 2 : cal = "-";
break;
case 3 : cal = "*";
break;
}
div4.innerHTML = question1 + cal + question2;
setTimeout("calculate()", 10000);
}
</script>
</head>
<body onload="makeQuestion()">
<h3>산수 문제를 풀어 봅시다.</h3>
문제는 자동으로 생성되며, 10초가 지나면 자동 채점됩니다.
<hr>
<table>
<tr><td><div id="div1">5*6</div></td><td><input type="text" style="width: 100px; margin-left: 20px;" id="math1"></td></tr>
<tr><td><div id="div2">7+5*3</div></td><td><input type="text" style="width: 100px; margin-left: 20px;" id="math2"></td></tr>
<tr><td><div id="div3">23*2</div></td><td><input type="text" style="width: 100px; margin-left: 20px;" id="math3"></td></tr>
<tr><td><div id="div4">35-7</div></td><td><input type="text" style="width: 100px; margin-left: 20px;" id="math4"></td></tr>
<tr><td><input type="button" value="다시" onclick="makeQuestion()"></td><td><p style="width: 100px; margin-left: 20px;" id="pp">0</p></td></tr>
</table>
</body>
</html>
9. 스크린의 해상도가 1280x1024보다 작은 경우, 웹 페이지가 로드되자마자 "스크린 해상도가 낮습니다." 라고 경고 창을 출력하는 웹 페이지를 작성하라.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>screen 객체 활용</title>
<script>
function init() {
if(screen.width < 1280 || screen.height < 1024) {
alert("스크린의 해상도가 낮습니다.")
}
var p = document.getElementById("p");
p.innerHTML = "해상도 : " + screen.width + "x" + screen.height;
}
</script>
</head>
<body onload="init()">
<p id="p"></p>
<h3>screen 객체 활용</h3>
<hr>
스크린의 해상도가 1280x1024 보다 작은 경우 웹 페이지가 정상적으로 출력되지 않을 수 있음을 알리는 경고창을 출력한다.
</body>
</html>
