VS code-html/css/javascript

최성현·2023년 7월 20일

JavaScript 복습문제 class container innerText onmouseover/onmouseout - javascript option prompt selected 사진 키우기/줄이기

JavaScript

목록 보기

3/4

복습문제1

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/buttonStyle.css">
    <title>Document</title>
    <style>
        #out{
            position: absolute;
            top: 150px;
            width: 400px;
            height: 350px;
            left: 450px;
            border: 1px solid gray;
            background-color: cadetblue;
            border-radius: 15px;
        }

        #result{
            position: absolute;
            top: 150px;
            width: 400px;
            height: 350px;
            left: 15px;
            border: 1px solid gray;
            background-color: cadetblue;
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <!-- 문제1. 버튼 2개에 하나는 food, 하나는 연예인이라고 쓰고
    css는 우리가 만든 buttonStyle 적용

    food 버튼을 클릭하면 음식사진을 div에 출력하고
    연예인을 클릭하면 연예인 한명을 출력한다
    (단 2번 모두 음식을 출력할까요? 라고 물어보고 예를 클릭시에만 이미지 출력)-->

    <input type="button" class="btn btn-cadetblue" onclick="Food()" value="food">&nbsp;
    <input type="button" class="btn btn-black" onclick="Talent()" value="연예인">&nbsp;
    <div id="out"></div>
    <script>
        function Food(){
            
            if(confirm("음식을 출력할까요?"))
            {
                out.innerHTML="<img src='../Food/1.jpg'>"
            }
            else
            {
                out.innerHTML="출력안하겠습니다";
            }
        }

        // function Talent(){
            
        //     if(confirm("연예인을 출력할까요?"))
        //     {
        //         out.innerHTML="<img src='../연예인사진/1.jpg'>"
        //     }
        //     else
        //     {
        //         out.innerHTML="출력하지 안겠습니다";
        //     }
        // }

    </script>

    <hr><hr>
    <!-- 문제2. 이미지출력이라는 버튼을 만들고
        클릭시 prompt로 "출력할 이미지의 index번호를 입력해주세요" 라고 출력
        prompt 창에 0번을 입력하면 0번 이미지 출력되게끔
        총 5개의 다양한 폴더의 이미지를 imgArr이라는 배열에 넣기
        (단, 배열인덱스에 없는 값 입력시 div에 "해당 번호는 없습니다" 출력하기)-->

    <div id="result"></div>
    <input type="button" class="btn btn-orange" onclick="writePromptImage()" value="출력">

    <script>
        var imgArr=["../연예인사진/1.jpg","../연예인사진/10.jpg","../연예인사진/5.jpg","../연예인사진/9.jpg","../연예인사진/11.jpg"]

        function writePromptImage(){

            var idx=prompt("출력할 이미지의 인덱스 번호를 입력해주세요");

            if(idx<0||idx>4)
                result.innerHTML="해당번호는 없습니다";
            else
                result.innerHTML="<img src='"+imgArr[idx]+"'>";
        }

    // <script> 다른방법
    //     var imgArr=new Array();
        
    //     imgArr.push("../html_img/cheese2.png");
    //     imgArr.push("../logoImg/acc02.png");
    //     imgArr.push("../만화이미지/06.png");
    //     imgArr.push("../연예인사진/4.jpg");
    //     imgArr.push("../jquery_img/06.png");

    //     var result=document.getElementById("out");

    //     function Talent(){
    //         var idx=prompt("출력할 이미지의 인덱스 번호를 입력해주세요");

    //         if(idx<0|| idx>4){
    //             result.innerHTML="해당번호는 없습니다.";
    //         } else {
    //             result.innerHTML="<img src='"+imgArr[idx]+"'>";
    //         }
    //     }
    </script>
</body>
</html>

복습 문제 2

사진 키우기/줄이기

document.getElementById("myimg").getAttribute("width")
-> 타입은 string/string 인에 - * 는 숫자로 계산됨(+만 안됨)

->parseInt(document.getElementById("myimg").getAttribute("width"))하면 string 값이 int로 바뀌어서 +연산 가능

		function photosmall(){

            var p=document.getElementById("myimg");
            var w=p.getAttribute("width");
            console.log(typeof(w)); // w의 타입은 string/string 인에 - * 는 숫자로 계산됨(+만 안됨)
            w-=10;
            p.setAttribute("width",w);
        }

        function photolarge(){
            
            var p=document.getElementById("myimg");
            var w=p.getAttribute("width");
            w=parseInt(w);
            console.log(typeof(w));
            w+=10;
            p.setAttribute("width",w);
        }

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one{
            margin-left: 30px;
            margin-bottom: 20px;
        }
    </style>
    <script>
        function photosmall(){

            var p=document.getElementById("myimg");
            var w=p.getAttribute("width");
            console.log(typeof(w)); // w의 타입은 string/string 인에 - * 는 숫자로 계산됨(+만 안됨)
            w-=10;
            p.setAttribute("width",w);
        }

        function photolarge(){
            
            var p=document.getElementById("myimg");
            var w=p.getAttribute("width");
            w=parseInt(w);
            console.log(typeof(w));
            w+=10;
            p.setAttribute("width",w);
        }
    </script>
</head>
<body>
    <div>
        <button type="button" onclick="photosmall()">점점작게</button>
        <button type="button" onclick="photolarge()">점점크게</button>
    </div>
    <img src="../Food/1.jpg" width="200" id="myimg">
</body>
</html>

innerText

innerText와 innerHTML의 차이

innerText : text를 넣는다(태그 노출 / ""안의 글을 전부 text 그 자체로 받아서 그대로 배출)
innerHTML : html을 넣는다(태그 적용)

prompt - 이미지 너비 바꾸기

		document.getElementById("btn1").onclick=function(){
                // 사진의 현재 width값
                var width=photo.getAttribute("width");
                // 프롬프트 창에 이미지너비를 입력해주세요
                // 입력하면 그것이 포토의 너비에 적용..취소시 이미지 변경 안할래요 경고창

                var pw=prompt("이미지 너비를 입력해주세요");
                
                if(pw==null)
                alert("이미지 변경 안할래요");
                else
                photo.setAttribute("width",pw);
            }

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/buttonStyle.css">
    <title>Document</title>
    <style>
        #result{
            width: 500px;
            height: 150px;
            line-height: 150px;
            font-size: 22px;
            text-align: center;
            border: 2px solid gray;
            margin-top: 20px;
            background: url("../flower_ani/f15.png") no-repeat right bottom;
            background-size: 50px 60px;
        }

        #imga{
            border: 5px inset tomato;
            margin: 30px 150px;
        }
    </style>
    <script>
        window.onload=function(){

            //div요소값
            var r=document.getElementById("result");

            //img요소값
            var photo=document.getElementById("imga");

            //버튼1이벤트
            document.getElementById("btn1").onclick=function(){
                // 사진의 현재 width값
                var width=photo.getAttribute("width");
                // 프롬프트 창에 이미지너비를 입력해주세요
                // 입력하면 그것이 포토의 너비에 적용..취소시 이미지 변경 안할래요 경고창

                var pw=prompt("이미지 너비를 입력해주세요");
                
                if(pw==null)
                alert("이미지 변경 안할래요");
                else
                photo.setAttribute("width",pw);
            }

            // 이벤트 2버튼을 누르면 prompt창에 1~20 사이의 연예인 사진 번호를 입력해주세요
            // 취소시 경고창에 지금 사진이 좋아요 안바꿀래요
            // 21번을 누르면 1~20까지 밖에 없다구요..함수 종료(return (false))
            // 1이라고 하면 현재 사진이 1로 바뀐다

            document.getElementById("btn2").onclick=function(){

                var num=prompt("사진 번호를 입력해주세요");

                if(num==null)
                    alert("지금 사진이 좋아요 안바꿀래요");
                else if(num<1 || num>20)
                {
                    alert("1~20까지 밖에 없다구요");
                    return;
                }
                else
                    photo.setAttribute("src", "../연예인사진/"+num+".jpg");
            }

            //버튼3
            document.getElementById("btn3").onclick=function(){

                // innerText와 innerHTML의 차이
                // innerText : text를 넣는다(태그 노출 / ""안의 글을 전부 text 그 자체로 받아서 그대로 배출)
                // innerHTML : html을 넣는다(태그 적용)

                var name=prompt("당신의 이름은?");

                if(name==null)
                document.getElementById("result").innerText="<u>취소를 눌렀네요!!!</u>";
                else
                r.innerHTML="<u>당신의 이름은 "+name+"이군요</u>";
            }

        }
    </script>
</head>
<body>
    <button type="button" class="btn btn-cadetblue" id="btn1">이벤트#1</button>
    <button type="button" class="btn btn-cadetblue" id="btn2">이벤트#2</button>
    <button type="button" class="btn btn-cadetblue" id="btn3">이벤트#3</button>
    <div id="result">테스트</div>
    <img src="../연예인사진/17.jpg" width="250" id="imga">
</body>
</html>

복습 문제3

select 이름/사진 맞춰주기

			// selected는 이름만 기본설정하고 기본 이미지는 밑 div에 사진이기 때문에
            // 위 헤드에 var init_img로 초기 이미지와 이름을 맞춰주기 위해 설정

            //alert(selimage.value); value값 확인
            //이 코드 넣은 이유:select이름과 사진을 동일하게 하기 위해서
            var init_img=selimage.value;

            //현재사진의 src속성을 변경한다 -> 초기이미지를 selected된 이름과 맞춰준다
            photo.setAttribute("src",init_img);

			//select 이벤트 onclick말고 onchange 사용
            selimage.onchange=function(){
                
                //모든 이벤트 함수에는 이벤트 발생 객체에 대한 this라는
                //변수가 기본적으로 존재한다
                console.log(this.value);

                //사진의 src에 this.value를 적용
                photo.setAttribute("src",this.value);
            }

<!-- selected는 이름만 기본설정하고 기본 이미지는 밑 div에 사진이기 때문에
위 헤드에 var init_img로 초기 이미지와 이름을 맞춰주기 위해 설정 -->
<option value="../연예인사진/12.jpg" selected>박보영</option>

option에 src말고 value준 이유

<!-- option태그에서는 src를 못가져와서 value값에 사진경로를 넣어줌 -->
<option value="../연예인사진/11.jpg">고준희</option>

class container

<!-- 감싸고 있는 것들을 주로 container라고 지음 -->
    <div class="container">

본문

<!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>
        .container div img{
            border: 10px groove gray;
            margin-top: 20px;
            margin-left: 20px;
        }
    </style>
    <script>
        window.onload=function(){
            
            var photo1=document.getElementById("img1");
            
            document.getElementById("btn1").onclick=function(){
                photo1.setAttribute("src","../연예인사진/13.jpg");
            }

            document.getElementById("btn2").onclick=function(){
                photo1.setAttribute("src","../연예인사진/20.jpg");
            }

            document.getElementById("btn3").onclick=function(){
                photo1.setAttribute("src","../연예인사진/17.jpg");
            }

            document.getElementById("btn4").onclick=function(){
                var w=photo1.getAttribute("width");
                w=parseInt(w);
                w+=10;
                photo1.setAttribute("width",w)
            }

            document.getElementById("btn5").onclick=function(){
                var w=photo1.getAttribute("width");
                w=parseInt(w);
                w-=10;
                photo1.setAttribute("width",w)
            }




            //아래문제
            var selimage=document.getElementById("selimage");
            var photo=document.getElementById("photo");





            // selected는 이름만 기본설정하고 기본 이미지는 밑 div에 사진이기 때문에
            // 위 헤드에 var init_img로 초기 이미지와 이름을 맞춰주기 위해 설정

            //alert(selimage.value);
            //이 코드 넣은 이유:select이름과 사진을 동일하게 하기 위해서
            var init_img=selimage.value;

            //현재사진의 src속성을 변경한다 -> 초기이미지를 selected된 이름과 맞춰준다
            photo.setAttribute("src",init_img);





            //select 이벤트 onclick말고 onchange 사용
            selimage.onchange=function(){
                
                //모든 이벤트 함수에는 이벤트 발생 객체에 대한 this라는
                //변수가 기본적으로 존재한다
                console.log(this.value);

                //사진의 src에 this.value를 적용
                photo.setAttribute("src",this.value);
            }

        }
    </script>
</head>
<body>
    <h3>이미지변경 및 크기</h3>
    <button type="button" id="btn1">박신혜</button>
    <button type="button" id="btn2">유아인</button>
    <button type="button" id="btn3">신민아</button><br><br>
    <button type="button" id="btn4">점점 크게</button>
    <button type="button" id="btn5">점점 작게</button>
    <hr>
    <img src="../연예인사진/10.jpg" width="300" id="img1" border="1">

    <hr>
    <!-- 감싸고 있는 것들을 주로 container라고 지음 -->
    <div class="container">
        <div>
            <button type="button" id="btnsmall">점점작게</button>
            <button type="button" id="btnlarge">점점크게</button>
            <b style="margin-left: 20px;">사진선택</b>
            <select id="selimage">
                <!-- option태그에서는 src를 못가져와서 value값에 사진경로를 넣어줌 -->
                <option value="../연예인사진/11.jpg">고준희</option>
                <!-- selected는 이름만 기본설정하고 기본 이미지는 밑 div에 사진이기 때문에
                    위 헤드에 var init_img로 초기 이미지와 이름을 맞춰주기 위해 설정 -->
                <option value="../연예인사진/12.jpg" selected>박보영</option>
                <option value="../연예인사진/13.jpg">박신혜</option>
                <option value="../연예인사진/15.jpg">장지연</option>
            </select>
        </div>
    </div>

    <div>
        <img src="../연예인사진/17.jpg" id="photo" width="300">
    </div>
</body>
</html>

복습 문제 4

onmouseover/onmouseout JavaScript

css에서 style로 주던걸 JavaScript로 주기

var imagine=document.getElementById("img1");

imagine.onmouseover=function(){
     imagine.setAttribute("src","../Food/3.jpg");
}

imagine.onmouseout=function(){
     imagine.setAttribute("src","../Food/1.jpg");
}

3번 문제 에러 - 코드 위치

코드는 항상 위에서 아래로 순새대로 읽기 때문에
img/div를 위에
script를 아래로 줘야 제대로 작동됨

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1. 만화이미지 01.png~10.png까지 출력하세요 (for문) -->
    <script>
        for(var i=1;i<=10;i++)
        {
            if(i<10)
            document.write("<img src='../만화이미지/0"+i+".png' width='100' height='100'>");
            else
            document.write("<img src='../만화이미지/"+i+".png' width='100' height='100'>");

            if(i%5==0)
            document.write("<br>");
        }
    </script>

<hr>
    <!-- 2. 음식사진 1.jpg를 img태그로 나타낸 후 id를 img1으로 주고
            그 아이디로 이벤트 추가합니다
            사진에 마우스를 올리면 3.jpg로 바뀌고 클릭하면 5.jpg로 바뀌며
            마우스를 벗어나면 다시 원래 사진으로 돌아가게 이벤트 주기-->

    <script>
        var imagine=document.getElementById("img1");

        imagine.onmouseover=function(){
            imagine.setAttribute("src","../Food/3.jpg");
        }

        imagine.onclick=function(){
            imagine.setAttribute("src","../Food/5.jpg");
        }

        imagine.onmouseout=function(){
            imagine.setAttribute("src","../Food/1.jpg");
        }
    </script>
    <div>
        <img src="../Food/1.jpg" id="img1" width="300">
    </div>

    <hr>
    <!-- 3. img로 width=200 height=100 으로 사진(아무거나) body에 넣은 후
            이미지를 클릭하면 아래 div태그 안에 각종 정보(src,width,height)를 얻어서
            출력하시오(getAttribute, innerHTML 사용)-->
    <style>
        #out{
            width: 200px;
            height: 100px;
            border: 1px solid gray;
        }
    </style>
    <img id="img2" src="../연예인사진/15.jpg" width="200" height="100">
    
    <div id="out"></div>

    <script>
        var img=document.getElementById("img2");
        var out=document.getElementById("out");
        
        img.onclick=function(){
            var s=img.getAttribute("src");
            var w=img.getAttribute("width");
            var h=img.getAttribute("height");
    
            out.innerHTML="src: "+s+"<br>";
            out.innerHTML+="width: "+w+"<br>";
            out.innerHTML+="height: "+h;
        }
        </script>

    <hr>
    <!-- 4. 버튼을 하나 만든 후 클릭하면 prompt창에 이름을 입력받아서 div태그 안에
            "내 이름은 *** 입니다" 라고 출력하세요
            (div에 class="bts" 라고 준 후 css로 예쁘게 스타일 적용할 것!!!)-->
    <style>
        .bts{
            width: 200px;
            height: 100px;
            background-color: cadetblue;
            border: 1px solid gray;
            border-radius: 15px;
            text-align: center;
            line-height: 100px;
        }
    </style>
    
    <script>
        function clicker(){
            var p=prompt("이름을 입력해주세요");
            if(p)
            bts2.innerHTML="내 이름은 "+p+"입니다<br>";
            else
            bts2.innerHTML="이름이 없어요";
        }
    </script>

    <button type="button" onclick="clicker()" id="bts3">이름 입력</button>

    <div class="bts" id="bts2"></div>
</body>
</html>

최성현

백엔드 개발자로서 성장해 나가는 성현이의 블로그~

이전 포스트

VS code-html/css/javascript

다음 포스트

VS code-html/css/javascript

1개의 댓글

happy

2023년 7월 20일

정말 좋은 글 감사합니다!

답글 달기