라라리라

2023.09.06 / Step 3 [DOM_이벤트] - 코딩 46 일차 본문

코딩/2023 JavaScript DOM

2023.09.06 / Step 3 [DOM_이벤트] - 코딩 46 일차

헤실 2023. 9. 6. 20:24

_0310_종합예제1.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sub {
            width: 100px;
            height: 100px;
            cursor: pointer;
        }
        .second {
            align-self: center;
            text-align: center;
            background-color: lightpink;
        }
        .table {
            align-self: center;
            text-align: center;
            align-items: center;
            border: 1px solid lightblue
        }
        #heading {
            text-align: center;
        }
       

    </style>
</head>
<body>
    <h1 id="heading">간식 종류</h1>
    <table class="table" align="center">
        <tr>
            <td rowspan="5">
                <img src="images/snack1.jpg" id="main" width="300px" height="300px">
            </td>
            <td class="second">상품명 : 삼립 미니꿀약과</td>
        </tr>
        <tr>
            <td class="second">판매가 : 20,000원</td>
        </tr>
        <tr>
            <td class="second">배송비 : 3,000원</td>
        </tr>
        <tr>
            <td class="second">
                수량 : <input type="number" value="1" min="1" max="5">
            </td>
        </tr>
        <tr>
            <td class="second"><button>장바구니 담기</button></td>
        </tr>
        <tr>
            <td colspan="2">
                <img src="images/snack1.jpg" class="sub">
                <img src="images/snack2.jpg" class="sub">
                <img src="images/snack3.jpg" class="sub">
            </td>
        </tr>
    </table>

    <script>
        // 메인 상품 이미지 가져오기
        let mainImg = document.querySelector("#main");
        // 작은 상품 이미지 가져오기
        let subImgs = document.querySelectorAll(".sub");

        // 이벤트 적용하기
        for(let i=0; i<subImgs.length; i++) {
            subImgs[i].addEventListener("click", changeImg);
        }
       
        function changeImg() {
            let clickImg = this.src;
            console.log(this);

            // 아래 두 줄의 코드는 동일한 기능이다.
            mainImg.src = clickImg;
            // mainImg.setAttribute("src", clickImg);
        }
    </script>

</body>
</html>

 

Document

간식 종류

상품명 : 삼립 미니꿀약과
판매가 : 20,000원
배송비 : 3,000원
수량 :

 

_0311_종합예제2.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="images/light_off.jpg" id="light" width="300px">

    <script>
        let lig = document.querySelector("#light");
        console.log(light);

        light.addEventListener("mouseover", changeOn);
        light.addEventListener("mouseout", changeOff);

        function changeOn() {
            lig.src = "images/light_on.jpg";
        }
       
        function changeOff() {
            lig.src = "images/light_off.jpg";
        }
       
    </script>
</body>
</html>

 

Document

 

_0312_종합예제3.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #menu {
            display: none;
        }
    </style>
</head>
<body>

    <a href="#" id="list">목차 보기</a>

    <hr>

    <ul id="menu">
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
        <li>메뉴4</li>
    </ul>

    <script>
        let isShow = false;
        function displayList() {
            if(isShow == false) {
                document.querySelector("#menu").style.display = "block";            // 노출 처리
                list.innerHTML = "목차 닫기";  
                // isShow = true;
            } else {
                document.querySelector("#menu").style.display = "none";             // 숨김 처리
                list.innerHTML = "목차 보기";  
                // isShow = false;
            }
            isShow = !isShow;
        }

        let list = document.querySelector("#list");
        list.addEventListener("click", displayList);
    </script>
   
</body>
</html>

 

Document 목차 보기

 

_0313_종합예제4.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn {
            width: 150px;
            height: 50px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <button id="btn">GAME START</button>

    <script>
        let btn = document.querySelector("#btn");

        btn.addEventListener("mouseover", btnMouseOver);
        btn.addEventListener("mouseout", btnMouseOut);
       
        function btnMouseOver() {
            btn.style.background = "gray";
        }
        function btnMouseOut() {
            btn.style.background = "tomato";
        }

    </script>
</body>
</html>

 

Document

 

_0314_종합예제5.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="msg">This is a paragraph.</p>
    <input type="button" onclick="changeStyle()" value="눌러보세요">

    <script>

        function changeStyle() {
            let msg = document.getElementById("msg");
            msg.style.color = "red";
            msg.style.fontFamily = "Century Schoolbook"; //fontFamily 폰트변경
            msg.style.fontStyle = "italic";
        }
    </script>

</body>
</html>

 

Document

This is a paragraph.

 

_0315_종합예제6.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="target">

    <label>
        <input type="radio" name="color" onclick="changeColor('lightblue')">파랑색
    </label>
    <label>
        <input type="radio" name="color" onclick="changeColor('lightgreen')">녹색
    </label>

    <script>
        function changeColor(color) {
            document.getElementById("target").style.backgroundColor = color;
        }
    </script>

</body>
</html>

 

Document

 

_0316_종합예제7.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="images/close.jpg" alt="close" id="cat" onclick="changeImage()"> <!-- alt = 상태?-->
    <script>
        function changeImage() {
            let cat = document.getElementById("cat");
            if(cat.alt == "close") {
                cat.src = "images/open.jpg";
                cat.alt = "open";
            } else {
                cat.src = "images/close.jpg";
                cat.alt = "close";
            }
        }
    </script>

</body>
</html>

 

Document close

 

_0317_종합예제8.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="target">
    <button onclick="changeColor()">배경색 바꾸기</button>

    <script>
        let colorList = ["yellow", "aqua", "purple", "white"];

        let i = 0;
        function changeColor() {
            let target = document.getElementById("target");
            target.style.backgroundColor = colorList[i];
            i += 1;
            if(i >= colorList.length) {
                i = 0;
            }
        }
    </script>

</body>
</html>

 

Document

 

_0318_종합예제9.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    HTML<input type="checkbox" class="subject" value="html">

    CSS<input type="checkbox" class="subject" value="css">
   
    JavaScript<input type="checkbox" class="subject" value="javascript">

    <button onclick="checkSub()">제출</button>

    <p id="result"></p>

    <script>
        function checkSub() {
            let list = document.querySelectorAll(".subject");
            let result = document.querySelector("#result");

            result.innerHTML = "선택한 과목은 : ";
            for(let i=0; i<list.length; i++) {
                if(list[i].checked) {
                    result.innerHTML += list[i].value + " ";
                }
            }
        }
    </script>

</body>
</html>

 

Document HTML CSS JavaScript

 

저작자표시

'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글

2023.09.08 / Step 4 [DOM_태그생성] - 코딩 48 일차  (0) 2023.09.08
2023.09.07 / Step 3 [DOM_이벤트] - 코딩 47 일차  (0) 2023.09.07
2023.09.05 / Step 3 [DOM_이벤트] - 코딩 45 일차  (0) 2023.09.05
2023.09.04 / Step 2 [DOM_속성변경] - 코딩 44 일차  (0) 2023.09.04
2023.08.31 / Step 1 [DOM_태그선택3] - 코딩 43 일차  (0) 2023.08.31
'코딩/2023 JavaScript DOM' Related Articles more