JS(Vanilla)

배울 내용

비동기함수 조작

전체코드 1

<!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>
        .text{
            color: red;
        }
    </style>
</head>

<body>
    <div class = "one two three">테스트</div>
    <button id = 'one'>add</button>
    <button id = 'two'>remove</button>
    <button id = 'three'>toggle</button>
    <script type="text/javascript">
        console.log(document.querySelector('div').classList);

        var div = document.querySelector('div');
        var add = document.querySelector('#one');
        var remove = document.querySelector('#two');
        var toggle = document.querySelector('#three');

        add.addEventListener('click', function(){
            div.classList.add("text");
        })
        remove.addEventListener('click', function(){
            div.classList.remove("text");
        })
        toggle.addEventListener('click', function(){
            div.classList.toggle("text");
        })
    </script>
</body>

</html>

JS 부분 1

console.log(document.querySelector('div').classList);

var div = document.querySelector('div');
var add = document.querySelector('#one');
var remove = document.querySelector('#two');
var toggle = document.querySelector('#three');

add.addEventListener('click', function(){
    div.classList.add("text");
})
remove.addEventListener('click', function(){
    div.classList.remove("text");
})
toggle.addEventListener('click', function(){
    div.classList.toggle("text");
})

classList

해당 DOM 요소의 클래스 목록으로, 값을 추가하거나 삭제, 토글할 수 있도록 한다.

전체코드 2

<!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>
    <div>램덤 숫자 맞추기(0~9)</div>
    <input type="text" id = 'texter'>
    <button id = "clicker">버튼 클릭</button><br>
    <div id='result'></div>
    <hr>
    <div>5초간 마우스 올리기</div>
    <img src="./google.png" id = 'google' onmouseover="st(1)" onmouseout="st(0)">

    <script type='text/javascript'>
        const rand = Math.floor(Math.random() * 10);

        console.log(rand);
        var a= document.querySelector('#clicker');
        
        a.addEventListener('click', function(){
            var a = document.getElementById('texter').value;
            if (a == rand) {
                document.getElementById("result").innerText = "맞음";
            }
            else{
                document.getElementById("result").innerText = "틀림";
            }
        })

        function st(a) {
            if (a==1){
                time = setTimeout(() => {
                    window.open("<http://google.com>");
                }, 5000)
            }
            else{
                clearTimeout(time)
            }
            
        };
        
    </script>
</body>
</html>

배울 내용

전체코드 1

JS 부분 1

classList

전체코드 2

JS 부분 2