Open Challenge
p.380
3개의 숫자가 모두 같으면 성공하는 겜블링 게임 웹 페이지를 작성하라. 처음에는 3개의 숫자 모두 0으로 출력되지만, 각 숫자를 클릭하면 0~2 사이의 랜덤 한 값으로 출력한다. 마지막 숫자를 클릭할 때 3개의 숫자를 검사하여 모두 같으면 성공한 것으로 한다.
파일명 : openChallenge.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>겜블링 게임</title>
<style>
#ndiv{
border: 1px solid violet;
font-size: 70px;
color: blue;
background-color: ivory;
font-style: italic;
width: 200px;
}
#result{
color:violet;
font-style: italic;
}
</style>
</head>
<body>
<h3>겜블링 게임</h3>
<br>
<p>각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다.모두 같은 수가 나오면 승리합니다.</p>
<hr>
<div id="ndiv">
<span id = first onclick="roll(this)">0</span>
<span id = second onclick="roll(this)">0</span>
<span id = third onclick="roll(this)">0</span>
</div>
<div id="result" onclick="restart()"></div>
<script>
var num1 = 0
var num2 = 0
var num3 = 0
function roll(obj){
if(obj == document.getElementById("first")){
var first = document.getElementById("first")
num1 = Math.floor(Math.random()*3)
first.innerHTML = num1
}
else if(obj == document.getElementById("second")){
var second = document.getElementById("second")
num2 = Math.floor(Math.random()*3)
second.innerHTML = num2
}
else if(obj == document.getElementById("third")){
var third = document.getElementById("third")
num3 = Math.floor(Math.random()*3)
third.innerHTML = num3
var result = document.getElementById("result")
if(num1 == num2 && num1 == num3){
result.innerHTML = "Success(click here to do again)"
}
else{
result.innerHTML = "fail(Click here to do again)"
}
}
}
function restart(){
num1 = 0
num2 = 0
num3 = 0
document.getElementById("first").innerHTML = 0
document.getElementById("second").innerHTML = 0
document.getElementById("third").innerHTML = 0
}
</script>
</body>
</html>
실습문제
1. 다음은 HTML 페이지와 브라우저의 출력 결과이다.
(2) </ol>와 </body> 태그 사이에 다음과 같이 자바스크립트 코드를 작성하여 모든 <li> 태그를 찾아 글자 색을 green으로 출력하라.
※ Hint
document.getElementsByTagName("li") 메서드를 이용할 것.
(3) 리스트가 출력된 공간 아무 곳이나 클릭하면 리스트 전체의 배경색을 yellowgreen으로 바꾸는 자바스크립트 코드를 작성하라.
※ Hint
<ol onclick="...">로 이벤트 리스너를 작성하면 된다.
파일명 : challenge1.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>라면을 끓이는 순서</title>
</head>
<body>
<h3>라면을 끓이는 순서</h3>
<hr>
<ol type="A" onclick="this.style.backgroundColor='yellowgreen'">
<li>물을 끓인다.</li>
<li>라면과 스프를 넣는다.</li>
<li>파를 썰어 넣는다.</li>
<li>5분 후 <strong>맛있게</strong> 먹는다.</li>
</ol>
</body>
<script>
var tag = document.getElementsByTagName("li")
for(let i =0; i<tag.length; i++){
tag[i].style.color = "green"
}
</script>
</html>
2. 다음은 HTML 페이지와 브라우저의 출력 결과이다.
(2) "border" 버튼을 클릭하면 다음과 같이 id="mySpan"인 <span> 태그에 2픽셀의 violet 색 점선 테두리가 생기도록 자바스크립트 코드를 작성하라.
※ Hint
2픽셀 violet 점선 테두리를 나타내는 CSS3 스타일은 "2px dotted violet"이다.
(3) "p" 버튼을 클릭하면 <p> 태그가 몇 개 있는지 alert()를 통해 다음과 같이 출력되도록 자바스크립트 코드를 삽입하여 HTML 페이지를 수정하라.
파일명 : challenge2.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>자바스크립트 연습</title>
<script>
function change(){
let d = document.getElementById("mySpan")
d.style.border="2px dotted violet"
}
function count(){
var text = "<p> 태그의 개수는 "
text += document.getElementsByTagName("p").length
alert(text)
}
</script>
</head>
<body>
<h3>
자바스크립트란?
<button onclick="change()">border</button>
<button onclick="count()">p</button>
</h3>
<hr>
<p>자바스크립트는 웹 프로그래밍 언어로서 웹 페이지를 동적 변경시킬 수 있다.</p>
<p><span id="mySpan">C 언어</span>를 아는 사용자는 빠르게 학습할 수 있다.</p>
<p>이벤트 등 GUI 프로그래밍에 필요한 요소들이 있어 학습에 약간의 어려움이 있다.</p>
</body>
</html>
3. 다음은 예제 5-7을 수정하여 출력한 결과이다. 예제에 버튼(show/hide)을 추가하고 자바스크립트 코드를 삽입하여 버튼을 클립 하면 답이 보이게 하고, 다시 클릭하면 숨기도록 구현하였다. 웹 페이지를 작성하라.
※ Hint
괄호 안은 모두 <span> 태그로 되어 있기 때문에, getElementsByTagName("span")으로 <span> 태그들을 찾고, CSS3의 visibility 프로퍼티의 값을 "hidden"이나 "visible"로 지정하면 된다.
파일명 : challenge3.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
<style>
span{
visibility: hidden;
color:blue;
}
</style>
<script>
function hide(){
let objArray = document.getElementsByTagName("span")
for(let i=0;i<objArray.length;i++){
let obj = objArray[i]
let style = window.getComputedStyle(obj) //객체의 CSS3 스타일 객체 가져옴
let view = style.getPropertyValue("visibility") //visibility 프로퍼티 값 가져옴
if(view == "visible")
obj.style.visibility = "hidden"
else
obj.style.visibility = "visible"
}
}
</script>
</head>
<body>
<h3>
다음 빈 곳에 숨은 단어?<button onclick="hide()">show/hide</button>
</h3>
<hr>
<ul>
<li>I (<span>love</span>) you.</li>
<li>CSS is Cascading (<span>Style</span>) Sheet.</li>
<li>응답하라 (<span>1988</span>).</li>
</ul>
</body>
</html>
4. 다음과 같이 계산식이 출력되고 '답'을 클릭하면 계산 결과를 출력하는 웹 페이지를 작성하고자 한다. HTML소스의 빈칸을 채우고 HTML 페이지를 완성하라.
※ Hint
빈칸은 모두 동일한 한 단어이다.
파일명 : challenge4.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>계산해봅시다</title>
</head>
<body>
<h3>계산해봅시다</h3>
<hr>
<p>2 + 4 = <span onclick="this.innerHTML=eval(2+4)">답</span></p>
<p>4 * 20 + 64 = <span onclick="this.innerHTML=eval(4*20+64)">답</span></p>
<p>20/5-8*2 = <span onclick="this.innerHTML=eval(20/5-8*2)">답</span></p>
</body>
</html>
5. 다음 HTML 페이지를 출력하면 동일한 크기의 카드 4개가 겹쳐 있어, 맨 위에 배치된 카드만 보인다(예제 5-6 참고). 이것은 각 카드 이미지의 z-index 스타일 프로퍼티 값을 다르게 설정하여 값이 클수록 위에 배치되도록 하였기 때문이다.
카드 이미지를 클릭하면 클릭된 카드가 맨 밑으로 들어가고 바로 밑의 카드가 나타나도록, 자바스크립트 코드를 작성하라.
※ Hint
getElementsByTagName("img")로 <img> 태그를 모두 알아내어 z-index 스타일 프로퍼티 값을 0부터 1씩 증가시키면서 지정하고, left, top 프로퍼티를 모두 같게 하면 겹쳐 출력된다. 그리고 모두 동일한 자바스크립트 코드를 onclick 리스너로 등록한다. onclick 리스너에서는 각 이미지의 z-index값을 수정하여 밑의 카드가 보이게 한다.
파일명 : challenge5.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>z-index 스타일 프로퍼티</title>
<style>
div {
position: absolute
}
img {
position: absolute
}
</style>
</head>
<body>
<h3>z-index 스타일 프로퍼티</h3>
<hr>
<div>
<img src="media/spade-A.png" width="100" height="140" alt="스페이드A" onclick="shuffle()">
<img src="media/spade-2.png" width="100" height="140" alt="스페이드2" onclick="shuffle()">
<img src="media/spade-3.png" width="100" height="140" alt="스페이드3" onclick="shuffle()">
<img src="media/spade-7.png" width="100" height="140" alt="스페이드7" onclick="shuffle()">
</div>
<script>
let objArray = document.getElementsByTagName("img")
for (let i = 0; i < objArray.length; i++) {
let obj = objArray[i]
obj.style.zIndex = i
obj.style.left = "10px"
obj.style.top = "10px"
}
function shuffle() {
for (let i = 0; i < objArray.length; i++) {
let obj = objArray[i]
obj.style.zIndex++
obj.style.zIndex %= objArray.length
}
}
</script>
</body>
</html>
6. DOM 객체의 innerHTML 프로퍼티를 다루는 연습을 해보자. 다음과 같이 <p></p> 태그로 출력된 텍스트에 마우스로 클릭하면, prompt() 창을 출력하고 사용자가 입력한 HTML 텍스트로 <p> 태그의 내용을 바꾸는 웹 페이지를 작성하라.
파일명 : challenge6.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
<script>
function change(){
let line = prompt("HTML 텍스트 혹은 그냥 텍스트를 입력하세요.")
let result = document.getElementById("line")
result.innerHTML = line
}
</script>
</head>
<body>
<h3>innerHTML</h3>
<hr>
<p id="line" onclick="change()">이번 여름에는 어디로 여행을 갈까요?</p>
</body>
</html>
7. 이미지를 마우스로 클릭하면 이미지를 90도 회전시키는 웹 페이지를 작성하라.
(1) 클릭하면 한 번만 90도 회전하기
(2) 클릭할 때마다 90도씩 계속 회전하기
※ Hint
5장 5절의 변환 CSS3 transform 프로퍼티를 참고하라. obj.style.transform="rotate(90deg)";는 obj를 90도 회전시킨 모양으로 출력한다.
파일명 : challenge7_1.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>
클릭하면 90도 회전합니다.
</h3>
<hr>
<img src="media/spongebob.png" onclick="this.style.transform='rotate(90deg)'">
</body>
</html>파일명 : challenge7_2.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>
클릭하면 90도 회전합니다.
</h3>
<hr>
<img src="media/spongebob.png" onclick="rotate(this)" width="220px" height="200px">
<script>
let rotation = 0
function rotate(obj){
rotation += 90
obj.style.transform = "rotate("+rotation+"deg)"
}
</script>
</body>
</html>
8. 이미지를 클릭할 때마다 옆으로 2, 3, 4배로 확대하여 출력하는 웹 페이지를 작성하라.
※ Hint
5장 5절의 변환 CSS3 transform 프로퍼티를 참고하라. obj.style.transform="scale(2,1)";은 obj를 옆으로 2배 확대시킨 모양으로 출력한다.
파일명 : challenge8.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>
클릭하면 2,3,4배로 옆으로 늘어납니다.
</h3>
<hr>
<img src="media/spongebob.png" onclick="scale(this)" width="220px" height="200px">
<script>
let size = 1
function scale(obj){
if(size<4){
size++
obj.style.transform = "scale("+size+",1)"
}
}
</script>
</body>
</html>
9. 다음은 HTML 페이지와 브라우저의 출력 결과이다.
yellowgreen 색으로 칠해진 영역은 <ol>이 출력된 영역이다. 이 영역에 마우스로 클릭하면 다음과 같이 prompt() 함수를 출력하고, 사용자로부터 입력받은 문자열로 라면을 끓이는 순서를 하나씩 삽입하는 자바스크립트 코드를 삽입하라.
파일명 : challenge9.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title></title>
</head>
<body>
<h3>라면을 끓이는 순서</h3>
<hr>
<ol type="A" style="background-color:yellowgreen" onclick="insert(this)">
<li>물을 끓인다.</li>
</ol>
<script>
function insert(obj){
let line = prompt("라면을 끓이는 순서를 입력하라")
let newLine = document.createElement("li")
newLine.innerHTML = line
obj.appendChild(newLine)
}
</script>
</body>
</html>
10. 다음 오른쪽 위 화면에서 답보기 버튼을 누르면 아래 화면과 같이 정답이 출력된다.
(1) 정답은 다음 코드에서 <p> 객체를 동적으로 생성하여 삽입한다. 코드를 완성하라.
(2) 문제 (1)의 코드를 수정하여 정답으로 출력된 '백설 공주'나 '둘다'를 클릭하면 정답이 다시 제거되게 하라.
파일명 : challenge10_1.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>DOM 객체 동적 삽입</title>
<script>
function addAnswer(obj,text){
let tmp = document.createElement("p")
tmp.innerHTML = text
obj.parentElement.appendChild(tmp)
}
</script>
</head>
<body>
<h3>정답의 동적 삽입</h3>
<hr>
<div><p>Q. 거울아 거울아 세상에서 누가 제일 예쁘니?</p>
<button onclick="addAnswer(this,'백설공주')">답보기</button></div>
<div><p>Q. 죽느냐 사느냐 어떤 것이 문제인가?</p>
<button onclick="addAnswer(this,'둘다')">답보기</button></div>
</body>
</html>파일명 : challenge10_2.html
<!DOCTYPE html>
<html lang='ko'>
<head>
<title>DOM 객체 동적 삽입</title>
<script>
function addAnswer(obj,text){
let tmp = document.createElement("p")
tmp.innerHTML = text
tmp.addEventListener("click",
function(){
obj.parentElement.removeChild(tmp)
})
obj.parentElement.appendChild(tmp)
}
</script>
</head>
<body>
<h3>정답의 동적 삽입</h3>
<hr>
<div><p>Q. 거울아 거울아 세상에서 누가 제일 예쁘니?</p>
<button onclick="addAnswer(this,'백설공주')">답보기</button></div>
<div><p>Q. 죽느냐 사느냐 어떤 것이 문제인가?</p>
<button onclick="addAnswer(this,'둘다')">답보기</button></div>
</body>
</html>