Eggs Sunny Side Up
본문 바로가기
Web/JavaScript

객체 실습

by guswn100059 2023. 4. 20.

예제) 입력값 적용 실습

<!DOCTYPE html>
<html lang="en">
<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>

    <input type="text" id="name">
    <button id="btn">변경</button>
    <br>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUi-vgxbSiIm0VBVgV5bE-ee0wIovVyWyJ2g&usqp=CAU" 
    width="250" id="imgid">

    <script>
        // 사진 1
        // https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUi-vgxbSiIm0VBVgV5bE-ee0wIovVyWyJ2g&usqp=CAU
        // 사진2
        // https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsPwjNBVs4mYjVj12VFTgpdBCOcm0dOGhi2ho_wiKBVv-MeB2q2qHTsmgK5i-FCPOMlUA&usqp=CAU

        // step 1
        // 1-1) 변경! 이라는 버튼을 눌렀을 때
        // 1-2) 사용자가 input태그에 입력한 값을 찾는다.
        // 1-3) 2번 값을 콘솔에 출력

        let inputTag = document.getElementById("name");

        document.getElementById("btn").addEventListener("click", () => {
             
            console.log(inputTag.value);
        });

        // step 2. 조건에 맞게 사진을 배치
        // 2-1) 만약 사진1 값이 들어오면 사진의 속성을 사진1으로 변경
        // 2-2) 만약 사진2 값이 들어오면 사진의 속성을 사진2로 변경
        // 2-3) 둘 다 아니라면, '잘못 입력하셨습니다.'라는 알림창
        // 2-4) 사용자가 입력 후에 버튼을 누름과 동시에 input입력창을 초기화
        
        let imgid = document.getElementById("imgid");

        document.getElementById("btn").addEventListener("click", () => {
            if(inputTag.value=="고기1") {
                imgid.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUi-vgxbSiIm0VBVgV5bE-ee0wIovVyWyJ2g&usqp=CAU';
                inputTag.value = "";
            }else if(inputTag.value=='고기2') {
                imgid.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsPwjNBVs4mYjVj12VFTgpdBCOcm0dOGhi2ho_wiKBVv-MeB2q2qHTsmgK5i-FCPOMlUA&usqp=CAU';
                inputTag.value = "";
            }else {
                alert("잘못 입력하셨습니다.");
            }
            
            // 2-5) 자동포커싱 제공 : focus()
            document.getElementById('inputTag').focus();

        });

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

종합)

<!DOCTYPE html>
<html lang="en">
<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>
    <input type="text" id="name">
    <button id="btn">변경</button>
    <br>
    width="250" id="imgid">

    <script>
        // 사진 1
        // 사진2

        let name = document.getElementById("name");
        let imgid = document.getElementById("imgid");

        document.getElementById("btn").addEventListener("click", () => {
            else alert("잘못 입력하셨습니다.");

            name.value = "";

            // 자동포커싱 제공 : focus()
            document.getElementById("name").focus();
       
        });



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

예제) 스타일 변경 실습

<!DOCTYPE html>
<html lang="en">
<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>

    <h1 id="h1Tag">양고기 리무진</h1>
    <button id="btn">스타일 변경</button>
    
    <script>
        // 버튼을 클릭하면,h1태그의 디자인을 수정
        document.getElementById('btn').addEventListener("click", () => {
            // 1. 스타일을 바꿔줄 요소를 가져오기
            let h1Tag = document.getElementById('h1Tag');

            // 1-1. 내가 가져온 요소가 어떤 스타일을 가지고 있지?
            console.log(h1Tag.style);

            // 1-2. 색깔 속성만 보고싶으면
            console.log(h1Tag.style.color);
            h1Tag.style.color = 'yellow';
            h1Tag.style.background = 'pink';
        });



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

 

종합)

<!DOCTYPE html>
<html lang="en">
<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>
    <h1 id="h1Tag">양고기 리무진</h1>
    <button id="btn">스타일 변경</button>

    <script>
        document.getElementById("btn").addEventListener("click", () => {
            let h1Tag = document.getElementById("h1Tag");

            h1Tag.style.color = 'yellow'
            h1Tag.style.background = 'pink';
        });


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

예제) 실행위치.html 과 외부파일.js

html

<!DOCTYPE html>
<html lang="en">
<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>
    <!--
        1. 인라인 방식
         => 태그 안에 JS 문법을 명시하는 방법
         장점 : 단순 로직 처리에 용이
         단점 : 재사용성이 아주아주 낮다. 코드가 노출된다.
    --> 
     <button onclick="alert('알림!');">버튼</button>


    <script>
        // 2. 내부 방식
        // HTML 코드 안에 script 태그를 이용해서 내부에 직접 작성하는 방법
        // 장점 : 빠르게 타이핑 가능, 전체 코드를 한 번에 볼 수 있다.
        // 단점 : 코드가 노출, 재사용성이 낮다.
    </script>

    <!--
        3. 외부방식
        - 외부 js 파일을 불러와서 동작하는 방법
        - script 태그에 src를 통해서 연결
    -->

    <script src="./ex30_외부파일.js">


    </script>

</body>
</html>

js

console.log("외부파일 불러오기 성공");

예제) 업다운 게임

<!DOCTYPE html>
<html lang="en">
<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>
        body{
            background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxRfp6909QcuNO0QFiNke8PfhBBCH1vjaESw&usqp=CAU");
            background-repeat: no-repeat;
            background-size: cover;
        }

        .container{
            /*rgba(0~255, 0~255, 0~255, 0~1)
              a : 1에 가까워질수록 색깔이 선명해진다. */
            background-color: rgba(255, 255, 255, 0.4);
            width: 400px;
            padding: 50px;
            border-radius: 50px;

            /*div요소 가운데 정렬*/
            position: absolute;
            left: 35%;
            top: 35%;
            transform: translate(-50%, -50%);

            /*내부 텍스트 가운데로 정렬*/
            text-align: center;
        }

        .container>h1 {
            margin-top: 0;
        }

        #user{
            width: 200px;
            height: 30px;
            border: 0;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        #check{
            background-color: rgb(115, 235, 135);
        }

        #reset{
            background-color: rgb(235, 209, 96);
        }


    </style>
</head>
<body>
    <div class="container">
        <h1>UPDOWN GAME</h1>

        <div id="result">결과값이 나오는 공간</div>
        <div id="chance">남은 찬스 : 5번</div>

        <input type="text" id="user">

        <div class="button">
            <button id="check">확인</button>
            <button id="reset">초기화</button>

        </div>

    </div>

    <script>
        // 랜덤숫자 만들기(1, 100)
        let num = parseInt(Math.random()*100)+1;
        console.log(num);

        let result = document.getElementById("result");
        let chance = document.getElementById("chance");
        let user = document.getElementById("user");
        let check = document.getElementById("check");
        let reset = document.getElementById("reset");

        let total = 5;

        function game() {

            console.log("입력한 숫자 : ", user.value);
            total -= 1;
            chance.textContent = `남은 찬스 : ${total}번`;

            if(Number(user.value)>num) {
                console.log("더 낮은 숫자를 입력하세요.");
            }else if(Number(user.value)<num) {
                console.log("더 높은 숫자를 입력하세요.");
            }else {
                console.log("정답입니다.");
            }

            if(total == 0) {
                result.textContent = "모든 기회를 소진했습니다.";
                check.disabled = true;
            }
        };


        check.addEventListener("click", game);
            
        reset.addEventListener("click", () => {
            user.value = "";
        });
        
    </script>
</body>
</html>

'Web > JavaScript' 카테고리의 다른 글

스타일변경(객체이용)  (0) 2023.04.24
jQuery  (0) 2023.04.24
객체  (0) 2023.04.19
함수  (0) 2023.04.18
랜덤배열, 점수출력 예제  (0) 2023.04.17

관련글

댓글

티스토리툴바