211203_TIL:Today I Learned

sooonlog 2021. 12. 3. 22:35

2021. 12. 3. 22:35

느낀점

무언가 수업을 들으며 내가 스스로 해낸 것에 대한 기록이 부족한 것 같아 이제부터는 스스로 완성하지 못한 결과물이 있으면 그날 강의를 마친 뒤 직접 해결하고 여기에 남겨두려고 한다. 오늘은 자바스크립트를 활용한 Lotto 코드 작성, 블록의 배경색을 바꿔주는 버튼 만들기 실습을 진행했다. 기초적인 예제였지만, 사용해본 적 없었던 Set 객체를 활용해서 중복처리까지 하는 과정이 쉽지 않았다. 아무래도 Set에 대한 개념이 아직 부족해서 처음에 length와 push를 썼다가 왜 안되는거야하기도 했다🤦‍♀️ 스스로 구현해보는 시간을 가진 뒤 강사님의 코드를 보며 아 이건 안되는거구나, size와 add를 사용해야하는거구나라고 깨닫기도 했다. 백문이 불여일타다닥이라고 역시 직접 코드를 짜면서 안되는 상황에 부딪혀봐야 진정한 깨달음을 얻을 수 있다는 사실도 덩달아 깨우치게 됐다😉 하루를 돌아보니 비록 오늘 아침에 눈떴다가 다시 잠들어서 운동은 못다녀왔지만, 오늘의 나보다 내일의 내가 더 나아질 수 있을거라는 믿음 + 작지만 쉬지않고 변화하는 행동을 통해 내일의 나와 다음달의 나는 더 성장해나갈 것이다! 나는 능히 할수있다! 너 나 믿지?🔥

오늘 한 것

js this
js scope
js closure
js Math.random
lotto 번호 생성기

function randomNum(min, max) {
    return Math.floor(Math.random()*(max-min)+min);
}
function lotto(){
    //중복제거
    const setNum = new Set();
    while(setNum.size<6){
        setNum.add(randomNum(1,46));
    }
    console.log(setNum);
}

js DOM (addEventListener, querySelector, getElementById, ... )

<!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>change bg</title>
    <link rel="stylesheet" href="../reset.css">
    <style>
        div {
            width: 300px;
            height: 300px;
            background: black;
            transition: all .3s;
        }
        button {
            display: inline;
        }
        .red {
            background: red;
        }
        .yellow {
            background: yellow;
        }
        .green {
            background: green;
        }
    </style>
</head>
<body>
    <div></div>
    <button class="btn1">red</button>
    <button class="btn2">yello</button>
    <button class="btn3">green</button>

    <script>
        const btnRed = document.querySelector('.btn1');
        const btnYellow = document.querySelector('.btn2');
        const btnGreen = document.querySelector('.btn3');
        const bg = document.querySelector('div');

        btnRed.addEventListener ('click', function(){
            bg.classList.remove('yellow', 'green');
            bg.classList.add('red');
        })
        btnYellow.addEventListener ('click', function(){
            bg.classList.remove('red', 'green');
            bg.classList.add('yellow');
        })
        btnGreen.addEventListener ('click', function(){
            bg.classList.remove('red', 'yellow');
            bg.classList.add('green');
        })
        
    </script>
</body>
</html>

내일 할 것

js 벼락치기 복습
모던 자바스크립트 딥다이브 스터디💖

'TIL 記 + 회고' 카테고리의 다른 글

211205_TIL:Today I Learned (2)	2021.12.05
211204_TIL:Today I Learned (4)	2021.12.04
211202_TIL:Today I Learned (6)	2021.12.02
211201_TIL:Today I Learned (4)	2021.12.01
211123_TIL:Today I Learned (6)	2021.11.23

sooonlog