1학년/명품 HTML+CSS+JS
10. 윈도우와 브라우저 관련 객체 실습문제 정답
피까츄
2023. 12. 8. 00:56
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>
<body onload = "openWin()">
<h3>HTML5</h3>
<hr>
<p>
HTML5을 학습하는 사이트입니다.
여기서 HTML5,CSS3, 자바스크립트를
배울 수 있습니다.
</p>
<script>
let win;
function openWin() {
win = window.open("","_blank","width=200,height=80");
win.document.write("접속 감사합니다!");
}
</script>
</body>
</html>
2. (1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>사이트 접속</title>
</head>
<body>
<h3>옵션 선택으로 사이트 접속</h3>
<p>옵션 선택 마다 새 윈도우에 접속합니다.</p>
<hr>
<p>접속할 사이트</p>
<form>
<select id="site" onchange="openWin()">
<option value="http://www.naver.com">네이버</option>
<option value="http://google.com">구글</option>
<option value="https://www.oracle.com/kr/">오라클</option>
</select>
</form>
<script>
function openWin(){
let site = document.getElementById("site");
let win;
let src = site.options[site.selectedIndex].value;
win = window.open(src,"_blank");
}
</script>
</body>
</html>(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>사이트 접속</title>
</head>
<body>
<h3>옵션 선택으로 사이트 접속</h3>
<p>옵션 선택 마다 새 윈도우에 접속합니다.</p>
<hr>
<p>접속할 사이트</p>
<form>
<select id="site" onchange="openWin()">
<option value="http://www.naver.com">네이버</option>
<option value="http://google.com">구글</option>
<option value="https://www.oracle.com/kr/">오라클</option>
</select>
</form>
<script>
function openWin(){
let site = document.getElementById("site");
let win;
let src = site.options[site.selectedIndex].value;
win = window.open(src,"_blank");
}
</script>
</body>
</html>
3. (1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>사이트 접속</title>
</head>
<body>
<h3>옵션 선택으로 사이트 접속</h3>
<p>옵션 선택 마다 새 윈도우에 접속합니다.</p>
<hr>
<p>접속할 사이트</p>
<form>
<select id="site" onchange="openWin()">
<option value="http://www.naver.com">네이버</option>
<option value="http://google.com">구글</option>
<option value="http://www.oracle.com">오라클</option>
</select>
</form>
<script>
function openWin(){
let site = document.getElementById("site");
let src = site.options[site.selectedIndex].value;
window.open(src,"","left=500,top=400,width=500,height=400");
}
</script>
</body>
</html>
(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>사이트 접속</title>
</head>
<body>
<h3>옵션 선택으로 사이트 접속</h3>
<p>옵션 선택 마다 새 윈도우에 접속합니다.</p>
<hr>
<p>접속할 사이트</p>
<form>
<select id="site" onchange="openWin()">
<option value="http://www.naver.com">네이버</option>
<option value="http://google.com">구글</option>
<option value="http://www.oracle.com">오라클</option>
</select>
</form>
<script>
function openWin(){
let site = document.getElementById("site");
let src = site.options[site.selectedIndex].value;
window.open(src,"myWin","left=500,top=400,width=500,height=400");
}
</script>
</body>
</html>
4.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>
<body onload="check()">
<h3>구글 Chrome 브라우저 감별</h3>
<p>웹 브라우저에 따라 지원되는 자바스크립크들
이 다를 수도 있습니다. DOM의 기능은 표준
화되어있어 동일하지만, BOM 객체들을 많이
다릅니다. 얼른 모두 표준화되엇으면 하지만
독창적인 기능으로 승부하고자 하여 쉽지는
않은 것 같습니다.
</p>
<hr>
<script>
function check(){
let agent = navigator.userAgent;
let index = agent.indexOf("Chrome");
if (navigator.vendor == "Google Inc." && index!=-1 ){
alert("구글 Chrome 브라우저입니다.");
}
}
</script>
</body>
</html>
5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>setTimeout()/clearTimeout()</title>
<style>
div {
background-color:aliceblue;
border : 1px solid gray;
width : 7em;
}
</style>
</head>
<body onload="clock()">
<h3>div 태그에 시계 만들기</h3>
<hr>
<div id="div"></div>
<script>
function clock(){
let div = document.getElementById("div");
let time = new Date();
div.innerHTML = time.toLocaleTimeString();
let timer = setTimeout(clock,1000)
}
</script>
</body>
</html>
6.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>setTimeout()/clearTimeout()</title>
<style>
div {
background-color: aliceblue;
border: 1px solid gray;
width: 7em;
}
</style>
</head>
<body onload="clock()">
<h3>div 태그에 시계 만들기</h3>
<p>시계를 클릭하면 시계가 멈추고 다시 클릭하면 가기 시작한다.</p>
<hr>
<div id="div" onclick="stopStart()"></div>
<script>
let div = document.getElementById("div");
let timer;
function clock() {
timer = setInterval(count, 1000);
}
function count() {
let time = new Date();
div.innerHTML = time.toLocaleTimeString();
}
function stopStart() {
if (timer !== null) {
clearInterval(timer);
timer = null;
div.style.color = "gray";
} else {
div.style.color = "black";
clock();
}
}
</script>
</body>
</html>
7. (1) 기본 기능 구현
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>산수를 풀어봅시다.</title>
<style>
td {
padding-left : 10px;
padding-right : 10px;
}
</style>
</head>
<body>
<h3>산수 문제를 풀어 봅시다.</h3>
<p>수식을 계산하여 답을 입력하고 채점 버튼을 누르세요</p>
<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>
</form>
<script>
let quest = document.getElementsByClassName("question");
let ans = document.getElementsByClassName("answer");
let span = document.getElementById("score");
let score = 0;
function calc(){
for (let i=0; i<quest.length; i++){
if (eval(quest[i].innerHTML) == ans[i].value) score++;
else quest[i].style.textDecoration = "line-through";
}
span.innerHTML = score;
}
</script>
</body>
</html>
(2)
(3)
9.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>screen 객체 활용</title>
</head>
<body onload="screenCheck()">
<h3>screen 객체 활용</h3>
<hr>
<p>스크린의 해상도가 1280x1024 보다 작은 경우
웹 페이지가 정상적으로 출력되지 않을 수
있음을 알려주는 경고창을 출력한다.
</p>
<script>
function screenCheck(){
if (screen.width < 1280 || screen.height <1024){
alert("스크린 해상도가 낮습니다!");
}
}
</script>
</body>
</html>