[명품 HTML5+CSS3+Javascript 웹 프로그래밍-개정판] 9장 실습문제 + Open Challenge 정답

Open Challenge

p.430

파일명 : openChallenge.html

이번 오픈챌린지는 이미지 객체를 삭제하는 방법도 있지만 문제에서 제공한 힌트에서 <img src ="">를 삽입하여 이미지가 소스가 없게 하도록 되어있어서 제시한 대로 해결하였다.

이미지 객체를 삭제하는 방법은 querySelector로 td 태그에 있는 이미지 객체를 가져와서 이미지 객체가 존재한다면

removeChild로 객체를 삭제하고 그다음 랜덤 포인트에 다시 이미지 객체를 appendChild로 넣도록 하였다.

<!DOCTYPE html>
<html lang='ko'>
<head>
    <title>마우스 클릭 연습</title>
    <style>
        td{
            width:50px;
            height:50px;
            border:1px solid blue;
        }
    </style>
    <script>

        let img = new Image()
        img.src = "media/spongebob.png"
        let select = 0
        

        function start(){
            
            for(let i=0;i<100;i++){
                //click 리스너 
                document.images[i].onclick = changeImage;
            }
            select = Math.floor(Math.random()*100)
            changeImage()
        }

        //랜덤 인덱스에 이미지 설정
        function changeImage(){
            document.images[select].src = ""
            document.images[select].width = 0
            document.images[select].height = 0
            select = Math.floor(Math.random()*100)
            document.images[select].src = img.src;
            document.images[select].width = 45
            document.images[select].height = 45
        }


        
    </script>
</head>
<body onload="start()">
    <h3>마우스 클릭 연습</h3>
    <hr>
    <table>
        <tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
        <tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
        <tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
        <tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
        <tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
        <tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
        <tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
        <tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
        <tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
        <tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
    </table>
</body>
</html>

실습문제

파일명 : challenge1.html

<!DOCTYPE html>
<html lang='ko'>
<head>
    <title></title>
    <script>
        
        window.onfocus = function(){
            document.body.style.background = "white"
        } 
        window.onblur = function(){
            document.body.style.background = "lightgray"
        }
    
    </script>
</head>
<body>
    <h3>포커스와 onblur,onfocus</h3>
    <hr>
    <p>브라우저 바깥에 마우스를 클릭하면 window 객체에 blur 이벤트가 발생하고 다시 마우스를 클릭하면 window 객체에 focus 이벤트가 발생한다.</p>
</body>
</html>

파일명 : challenge2.html

<!DOCTYPE html>
<html lang='ko'>
<head>
    <title>라디오 버튼과 이미지 출력</title>
    <script>
        function drawImage(){


            let found = null;
            let fruits = document.getElementsByName("fruit")

            for(let i=0;i<fruits.length;i++){
                if(fruits[i].checked == true){
                    found = fruits[i].value
                }
            }
            
            document.getElementById("fruitImg").src = "media/"+ found + ".png"
            
            
        }
    </script>
</head>
<body>
    <h3>라디오 버튼을 클릭하면 이미지를 출력합니다.</h3>
    <hr>
    <form onchange="drawImage()">
        <input type="radio" name="fruit" value="banana">바나나
        <input type="radio" name="fruit" value = "mango">망고
        <input type="radio" name="fruit" value = "apple">사과
    </form>
    <img id="fruitImg" src="">
</body>
</html>

파일명 : challenge3.html

<!DOCTYPE html>
<html lang='ko'>
<head>
    <title>onkeydown</title>
    <script>
        function keyDown(e){
            if(e.key == "Enter"){
                let exp = document.getElementById("exp").value
                document.getElementById("result").value = eval(exp)
            }
        }
    </script>
</head>
<body>
    <h3>계산기 만들기</h3>
    <hr>
    <p>수식을 입력하고 &lt;Enter&gt;를 입력하세요.</p>
    식<input type="text" id="exp" onkeydown="keyDown(event)"><br>
    값<input type="text" id="result">
</body>
</html>

파일명 : challenge4.html

<!DOCTYPE html>
<html lang='ko'>
<head>
    <title></title>
    <style>
        div{
            display:inline-block;
            position: absolute;
        }
        img{
            width:30px;
            height:30px;
        }
    </style>
    <script>
        document.onmousemove = function (e){
            let div = document.getElementById("cur")
            div.style.left = e.x + "px"
            div.style.top = e.y + "px"
        }
    </script>
</head>
<body>
    <h3>이미지 커서 만들기</h3>
    <hr>
    마우스를 움직이면 이미지로 만든 커서가 마우스를 따라 다닙니다.
    <div id="cur"><img src="media/spongebob.png"></div>
</body>
</html>

파일명 : challenge5.html

<!DOCTYPE html>
<html lang='ko'>
<head>
    <title></title>
    <script>
        document.ondblclick = function(e){
            let r = Math.floor(Math.random()*256)
            let g = Math.floor(Math.random()*256)
            let b = Math.floor(Math.random()*256)
            document.body.style.backgroundColor = `rgb(${r},${g},${b})`;
            
        }
        
    </script>
</head>
<body>
    <h3>바탕 아무 곳에나 더블 클릭</h3>
    <hr>
    바탕 아무 곳이나 더블클릭하면 배경색이 랜덤하게 변합니다.
</body>
</html>

파일명 : challenge6.html

<!DOCTYPE html>
<html lang='ko'>
<head>
    <title></title>
    <script>

        function wheel(e,obj){
            if(e.wheelDelta <0){
                obj.width -= obj.width*0.05
                obj.height -= obj.height*0.05
            }
            else{
                obj.width += obj.width*0.05
                obj.height += obj.height*0.05
            }
        }
    </script>
</head>
<body>
    <h3>마우스 휠을 이용한 이미지 확대/축소</h3>
    <hr>
    <p>이미지 위에 휠을 위로 굴리면 이미지가 축소되고 아래로 굴리면 이미지가 확대됩니다.</p>
    <img src="/media/tulips.png" onmousewheel="wheel(event,this)">

</body>
</html>

파일명 : challenge7.html

<!DOCTYPE html>
<html lang='ko'>
<head>
    <title>이벤트 객체의 target</title>
    <script>
        window.onmouseover = function(e){
            if(e.target.tagName == "SPAN"){
                e.target.style.textDecoration = "underline"
            }
        }
        window.onmouseout = function(e){
            if(e.target.tagName == "SPAN"){
                e.target.style.textDecoration =  "none"
            }
        }
    </script>
</head>
<body>
    <h3>span 태그에만 onmouseover/onmouseout</h3>
    <hr>
    <p>span 태그에 대해서만 <span>마우스</span>가 올라올 때 밑줄이 그어지고 <span>마우스</span>가 내려갈 때 밑줄이 사라지도록 <span>자바스크립트 코드</span>를 작성한다.
</body>
</html>

파일명 : challenge8.html

<!DOCTYPE html>
<html lang='ko'>

<head>
    <title>이벤트 객체의 target</title>
    <script>
        let tm = document.getElementsByTagName("li")

        function init() {
            for (let i = 0; i < tm.length; i++) {
                tm[i].onclick = sizeUp
            }
        }

        function resetSize(){
            for(let i = 0;i<tm.length;i++){
                tm[i].style.fontSize = "1em"
            }
        }

        function sizeUp(e){
            resetSize()
            e.target.style.fontSize = "1.3em"
        }


    </script>
</head>

<body onload = "init()">
    <h3>아이템을 클릭하면 1.3배 크기로</h3>
    <hr>
    <p>여름 방학 때 하고 싶은 것들</p>
    <ul>
        <li>자전거로 대한민국 일주</li>
        <li>책 100권 읽기</li>
        <li>철인 3종 경기 준비</li>
        <li>자바스크립트 정복</li>
    </ul>
</body>

</html>

파일명 : challenge9.html

<!DOCTYPE html>
<html lang='ko'>

<head>
    <title>이벤트 객체의 target</title>
    <script>
        
        let explainDiv
        let text=["1번 자전거","2번 책","3번 철인 3종","4번 자바스크립트"]

        function init(){

            let tm = document.getElementsByTagName("li")
            explainDiv = document.getElementById("explain")

            for(let i=0;i<tm.length;i++){
                tm[i].addEventListener("mouseover",msOver)
                tm[i].addEventListener("mouseout",msOut)

            }
        }

        function initDiv(e,text){
            explainDiv.innerHTML = text
            explainDiv.style.background = "skyblue"
            explainDiv.style.border = "1px solid green"
            explainDiv.style.width = "200px"
            explainDiv.style.height = "100px"
            explainDiv.style.visibility = "visible"

            explainDiv.style.top = e.clientY + "px"
            explainDiv.style.left = e.clientX +"px"

        }
        

        function msOver(e){
            let n = 0
            let tmp = e.target.id
            if(tmp == "1") n=0;
            else if(tmp == "2") n=1;
            else if(tmp == "3") n =2;
            else if(tmp == "4") n = 3;
            
            initDiv(e,text[n])
        }
        function msOut(e){
            explainDiv.style.visibility = "hidden"
        }


    </script>
</head>

<body onload = "init()">
    <h3>아이템에 마우스를 올리면 설명 출력</h3>
    <hr>
    <p>여름 방학 때 하고 싶은 것들</p>
    <ul>
        <li id="1">자전거로 대한민국 일주</li>
        <li id="2">책 100권 읽기</li>
        <li id="3">철인 3종 경기 준비</li>
        <li id ="4">자바스크립트 정복</li>
    </ul>
    <div id="explain" style = "position:absolute"></div>
</body>

</html>

10.

파일명 : challenge10.html

<!DOCTYPE html>
<html lang='ko'>
<head>
    <title></title>
    <style>
        td{
            width: 75px;
            height: 30px;
        }
        input{
            width: 70px;
            height: 25px;
        }
    </style>
    <script>
        let expression = ""

        function getCh(n){
            
            expression += n
            document.getElementById("ip").value = expression
        }
        function calculate(){
            document.getElementById("ip").value = eval(expression)
        }
        function resetNum(){
            expression = ""
            document.getElementById("ip").value = "0"
        }
        function eraseNum(){
            let t = document.getElementById("ip").value
            if(t.length > 0){
                expression = t.substring(0,t.length-1)
                
                document.getElementById("ip").value = expression
            }
        }
    </script>
</head>
<body>
    <h3>계산기 만들기</h3>
    <hr>
    <input type="text" style="width: 300px;" id="ip" value="0">
    <table>
        <tr><td><input type="button" value="BACK" onclick = "eraseNum()"></td><td><input type="button" value="CE" onclick="resetNum()"></td><td><input type="button" value="C" onclick="resetNum()"></td><td><input type="button" value="=" onclick="calculate()"></td></tr>
        <tr><td><input type="button" value="7" onclick="getCh('7')"></td><td><input type="button" value="8" onclick="getCh('8')"></td><td><input type="button" value="9" onclick="getCh('9')"></td><td><input type="button" value="/" onclick="getCh('/')"></td></tr>
        <tr><td><input type="button" value="4" onclick="getCh('4')"></td><td><input type="button" value="5" onclick="getCh('5')"></td><td><input type="button" value="6" onclick="getCh('6')"></td><td><input type="button" value="*" onclick="getCh('*')"></td></tr>
        <tr><td><input type="button" value="1" onclick="getCh('1')"></td><td><input type="button" value="2" onclick="getCh('2')"></td><td><input type="button" value="3" onclick="getCh('3')"></td><td><input type="button" value="-" onclick="getCh('-')"></td></tr>
        <tr><td><input type="button" value="0" onclick="getCh('0')"></td><td><input type="button" value="+" onclick="getCh('+')"></td><td><input type="button" value="NONE"></td><td><input type="button" value="NONE"></td></tr>
    </table>
</body>
</html>

'Teck Stack > HTML' 카테고리의 다른 글

[명품 HTML5+CSS3+Javascript 웹 프로그래밍-개정판] 10장 실습문제 + Open Challenge 정답 (0)	2023.10.24
[명품 HTML5+CSS3+Javascript 웹 프로그래밍-개정판] 8장 실습문제 + Open Challenge 정답 (0)	2023.10.09
[명품 HTML5+CSS3+Javascript 웹 프로그래밍-개정판] 7장 실습문제 + Open Challenge 정답 (2)	2023.09.25
[명품 HTML5+CSS3+Javascript 웹 프로그래밍-개정판] 6장 실습문제 + Open Challenge 정답 (1)	2023.09.14

Open Challenge

실습문제

'Teck Stack > HTML' 카테고리의 다른 글

티스토리툴바