느낀점
무언가 수업을 들으며 내가 스스로 해낸 것에 대한 기록이 부족한 것 같아 이제부터는 스스로 완성하지 못한 결과물이 있으면 그날 강의를 마친 뒤 직접 해결하고 여기에 남겨두려고 한다. 오늘은 자바스크립트를 활용한 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 |
