Open Challenge
p.469
파일명 : openChallenge.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
<style>
body {
background-image: url("media/snowhouse3.jpg");
background-size: 400px 300px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<script>
function makeSnow() {
let div = document.createElement('div');
let img = document.createElement('img');
img.src = "media/snow.png"
img.style.width = "10px"
img.style.height = "10px"
div.style.position = "absolute"
div.appendChild(img)
div.style.left = Math.floor(Math.random() * 390) + "px"
div.style.top = Math.floor(Math.random() * 10) + "px"
document.body.appendChild(div);
//무한 반복 실행 타이머 설정 , 자연스럽도록 눈의 속도를 랜덤하게 하였다.
let tm = setInterval(function () {
dropSnow(div, tm);
}, Math.floor(Math.random() * 500) + 700);
}
function dropSnow(ep, tm) {
let y = parseInt(ep.style.top)
if (y < 270) {
y += 7;
ep.style.top = y + "px";
}
else {
//새로 눈덩이를 만들고 바닥에 닿은 눈동이는 삭제함
makeSnow()
document.body.removeChild(ep)
clearInterval(tm)
}
}
let i = 0
//자연스럽게 떨어지도록 1초에 한 번씩 눈을 생성함
function init() {
if (i < 30) {
makeSnow()
setTimeout(function () {
init()
}, 1000)
i++
}
}
init()
</script>
</body>
</html>
실습문제
1.
파일명 : challenge1.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>HTML5</title>
<script>
function welcome() {
let win = window.open("", "new", "width=200px , height = 80px")
win.document.write("접속 감사합니다!")
}
</script>
</head>
<body onload="welcome()">
<h3>HTML5</h3>
<hr>
<p>
HTML5를 학습하는 사이트입니다.
여기서 HTML5, CSS3, 자바스크립트를
배울 수 있습니다.</p>
</body>
</html>
2.
파일명 : challenge2.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>HTML5</title>
<script>
function welcome() {
//(1) 새 윈도우가 (500,400)에 출력 되도록 설정
let win = window.open("", "new", "left=500,top=400,width=200px , height = 80px")
win.document.write("접속 감사합니다!<br>")
win.document.write("열심히 하세요!")
win.document.title = "환영" //타이틀 설정
win.document.body.style.backgroundColor = "yellowgreen" //배경색 설정
}
</script>
</head>
<body onload="welcome()">
<h3>HTML5</h3>
<hr>
<p>
HTML5를 학습하는 사이트입니다.
여기서 HTML5, CSS3, 자바스크립트를
배울 수 있습니다.</p>
</body>
</html>
3.
(1)
파일명 : challenge3_1.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>옵션 선택으로 사이트 접속</h3>
옵션 선택 마다 새 윈도우에 접속합니다.
<hr>
<p>접속할 사이트</p>
<select onchange="load(this)">
<option value="https://www.naver.com/">네이버</option>
<option value="https://www.google.com/">구글</option>
<option value="https://www.oracle.com/kr/">오라클</option>
</select>
<script>
function load(select) {
let index = select.selectedIndex
let site = select.options[index].value
window.open(site, "", "left=500,top=400,width=1000,height=800")
}
</script>
</body>
</html>
(2) 방식은 맞는 듯하나 , 구글 페이지에서 다른 페이지로 넘어갈 때 새로운 윈도가 열린다.
책이 제공하는 정답을 확인해 보았으나 정답은 맞은 것으로 보인다.
파일명 : challenge3_2.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>옵션 선택으로 사이트 접속</h3>
옵션 선택 마다 새 윈도우에 접속합니다.
<hr>
<p>접속할 사이트</p>
<select onchange="load(this)">
<option value="https://www.naver.com">네이버</option>
<option value="https://www.google.com">구글</option>
<option value="https://www.oracle.com/kr">오라클</option>
</select>
<script>
function load(select) {
let index = select.selectedIndex
let site = select.options[index].value
window.open(site, "anyname", "left=500,top=400,width=1000,height=800")
}
</script>
</body>
</html>
4.
microsoft edge에서 확인 결과 제대로 작동하지 않는다.
이유는 크롬 기반 웹 브라우저에서도 navigator.userAgent에 Chrome문자열이 포함되어 있고 navigator.vendor에도 Google Inc가 출력된다. 하지만 책에서 제공한 힌트를 토대로 간단하게 작성해 보았다.
파일명 : challenge4.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
<script>
function check() {
let tmp = navigator.userAgent
if (tmp.includes("Chrome")) {
alert("구글 Chrome 브라우저입니다.")
}
else
alert("구글 Chrome 브라우저가 아닙니다.")
}
</script>
</head>
<body onload="check()">
<h3>구글 Chrome 브라우저 감별</h3>
<hr>
<p>웹 브라우저에 따라 지원되는 자바스크립트들이 다를 수도 있습니다.
DOM의 기능은 표준화되어 있어 동일하지만, BOM 객체들을 많이 다릅니다.
얼른 모두 표준화되었으면 하지만 독창적인 기능으로 승부하고자 하여 쉽지는 않을 것 같습니다.
</p>
</body>
</html>
5.
파일명 : challenge5.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
<style>
div{
display: inline-block;
background-color: azure;
border: 1px solid green;
}
</style>
</head>
<body onload="timeset()">
<h3>div 태그에 시계 만들기</h3>
<hr>
<div id = "clock"></div>
<script>
let clock = document.getElementById("clock")
function timeset(){
timerun(clock)
}
function timerun(obj){
let timer = new Date()
obj.innerHTML = timer.toLocaleTimeString()
setTimeout("timerun(clock)",1000)
}
</script>
</body>
</html>
6.
파일명 : challenge6.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
<style>
div{
display: inline-block;
background-color: azure;
border: 1px solid green;
}
</style>
</head>
<body onload="timeset()">
<h3>div 태그에 시계 만들기</h3>
<p>시계를 클릭하면 시계가 멈추고 다시 클릭하면 가기 시작한다.</p>
<hr>
<div id="clock" onclick="timeon()"></div>
<script>
let clock = document.getElementById("clock")
let flag = true //눌린 상태를 저장
let interId =null
function timeset() {
timeon()
}
function timeon(){
if(flag == false){ //정지
clearInterval(interId)
clock.style.color = "gray"
flag = true
}
else{ //시작 true->false
interId = setInterval("timerun(clock)",1000)
flag = false
}
}
function timerun(obj) {
let timer = new Date()
obj.innerHTML = timer.toLocaleTimeString()
clock.style.color = "black"
}
</script>
</body>
</html>
7.
(1)
파일명 : challenge7_1.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
<style>
td{
width: 100px;
}
</style>
</head>
<body>
<h3>산수 문제를 풀어 봅시다.</h3>
<p>수식을 계산하여 답을 입력하고 채점 버튼을 누르세요.</p>
<hr>
<table>
<tbody>
<tr>
<td class="question">5*6</td>
<td><input type="number"></td>
</tr>
<tr>
<td class="question">7+5*3</td>
<td><input type="number"></td>
</tr>
<tr>
<td class="question">23*2</td>
<td><input type="number"></td>
</tr>
<tr>
<td class="question">35-7</td>
<td><input type="number"></td>
</tr>
<tr>
<td><button onclick="calculate()">채점</button></td>
<td id="result">0</td>
</tr>
</tbody>
</table>
<script>
let inputNum = document.getElementsByTagName("input")
let correctNum = document.getElementsByClassName("question")
function calculate(){
let result = 0
for(let i=0;i<correctNum.length;i++){
let userAnswer = parseInt(inputNum[i].value)
let correctAnswer = eval(correctNum[i].innerHTML)
if(userAnswer == correctAnswer){
result++
correctNum[i].style.textDecoration = "none"
}
else if(inputNum[i] == ""){//입력하지 않은 경우
correctNum[i].style.textDecoration = "line-through"
}
else{ //틀린경우
correctNum[i].style.textDecoration = "line-through"
}
}
document.getElementById("result").innerHTML = result
}
</script>
</body>
</html>
(2)
파일명 : challenge7_2.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
<style>
td{
width: 100px;
}
</style>
</head>
<body>
<h3>산수 문제를 풀어 봅시다.</h3>
<p>수식을 계산하여 답을 입력하고 채점 버튼을 누르세요.</p>
<hr>
<table>
<tbody>
<tr>
<td class="question">5*6</td>
<td><input type="number"></td>
</tr>
<tr>
<td class="question">7+5*3</td>
<td><input type="number"></td>
</tr>
<tr>
<td class="question">23*2</td>
<td><input type="number"></td>
</tr>
<tr>
<td class="question">35-7</td>
<td><input type="number"></td>
</tr>
<tr>
<td><button onclick="calculate()">채점</button></td>
<td id="result">0</td>
<td><button onclick="reset()">다시</button></td>
</tr>
</tbody>
</table>
<script>
function calculate(){
let inputNum = document.getElementsByTagName("input")
let correctNum = document.getElementsByClassName("question")
let result = 0
for(let i=0;i<correctNum.length;i++){
let userAnswer = parseInt(inputNum[i].value)
let correctAnswer = eval(correctNum[i].innerHTML)
if(userAnswer == correctAnswer){
result++
correctNum[i].style.textDecoration = "none"
}
else if(inputNum[i] == ""){
correctNum[i].style.textDecoration = "line-through"
}
else{
correctNum[i].style.textDecoration = "line-through"
}
}
document.getElementById("result").innerHTML = result
}
function reset(){
let inputNum = document.getElementsByTagName("input")
let correctNum = document.getElementsByClassName("question")
document.getElementById("result").innerHTML = 0
for(let i=0;i<correctNum.length;i++){
inputNum[i].value = ""
correctNum[i].style.textDecoration = "none"
}
randomNum()
}
function randomNum(){
let correctNum = document.getElementsByClassName("question")
for(let i=0;i<correctNum.length;i++){
let num1 = Math.floor(Math.random()*20)+1
let num2 = Math.floor(Math.random()*20)+1
let oper = "+"
switch(Math.floor(Math.random()*4)+1){
case 1:
oper = "+"
break
case 2:
oper = "-"
break
case 3:
oper = "*"
break
case 4:
oper = "/"
break
}
correctNum[i].innerHTML = num1+oper+num2
}
}
</script>
</body>
</html>
8.
파일명 : challenge8.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body onload="autograde()">
<h3>산수 문제를 풀어 봅시다.</h3>
<p>문제는 자동으로 생성되며, 10초가 지나면 자동 채점됩니다.</p>
<p id="remain">남은 시간</p>
<hr>
<table>
<tbody>
<tr>
<td class="question">5*6</td>
<td><input type="number"></td>
</tr>
<tr>
<td class="question">7+5*3</td>
<td><input type="number"></td>
</tr>
<tr>
<td class="question">23*2</td>
<td><input type="number"></td>
</tr>
<tr>
<td class="question">35-7</td>
<td><input type="number"></td>
</tr>
<tr>
<td id="result">0</td>
<td><button onclick="reset()">다시</button></td>
</tr>
</tbody>
</table>
<script>
let intervalId = null
function calculate(){
let inputNum = document.getElementsByTagName("input")
let correctNum = document.getElementsByClassName("question")
let result = 0
for(let i=0;i<correctNum.length;i++){
let userAnswer = parseInt(inputNum[i].value)
let correctAnswer = eval(correctNum[i].innerHTML)
if(userAnswer == correctAnswer){
result++
correctNum[i].style.textDecoration = "none"
}
else if(inputNum[i] == ""){
correctNum[i].style.textDecoration = "line-through"
}
else{
correctNum[i].style.textDecoration = "line-through"
}
}
document.getElementById("result").innerHTML = result
}
function reset(){
let inputNum = document.getElementsByTagName("input")
let correctNum = document.getElementsByClassName("question")
document.getElementById("result").innerHTML = 0
for(let i=0;i<correctNum.length;i++){
inputNum[i].value = ""
correctNum[i].style.textDecoration = "none"
}
randomNum()
autograde()
}
function randomNum(){
let correctNum = document.getElementsByClassName("question")
for(let i=0;i<correctNum.length;i++){
let num1 = Math.floor(Math.random()*20)+1
let num2 = Math.floor(Math.random()*20)+1
let oper = "+"
switch(Math.floor(Math.random()*4)+1){
case 1:
oper = "+"
break
case 2:
oper = "-"
break
case 3:
oper = "*"
break
case 4:
oper = "/"
break
}
correctNum[i].innerHTML = num1+oper+num2
}
}
function autograde(){
let remaintime = 10
let remain = document.getElementById("remain")
intervalId = setInterval(function (){
if(remaintime<=0){
remaintime=10
calculate()
clearInterval(intervalId)
}
else{
remain.innerHTML = "남은 시간 " + (--remaintime)
}
},1000)
}
</script>
</body>
</html>
9.
파일명 : challenge9.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
<script>
function check(){
if(screen.width<1280 || screen.height <1024){
alert("스크린 해상도가 낮습니다!")
}
}
</script>
</head>
<body onload="check()">
<h3>screen 객체 활용</h3>
<hr>
<p>스크린의 해상도가 1280x1024 보다 작은 경우 웹 페이지가 정상적으로 출력되지 않을 수
있음을 알리고 창을 출력한다.
</p>
</body>
</html>
반응형