공부 정리/jsChallenge29 js challenge 30 Whack A Mole! Code 배운 점 & 느낀 점 js challenge 마지막 과제였습니다. 두더지게임 만들기였습니다. 크게5가지 함수가 필요했는데, 1. 게임시간 정하는 정하는 함수 2. 랜덤으로 두더지 나오게 하는 함수 3. 랜덤으로 나올 두더지 정하는 함수 4. 게임 시작 함수 5. 유저가 두더지 클릭했을 때 점수 올리는 함수. 2023. 3. 7. js challenge day 29 Timer Code let countdown; const timerDisplay = document.querySelector(".display__time-left"); const endTime = document.querySelector(".display__end-time"); const buttons = document.querySelectorAll("[data-time]"); const timer = (seconds) => { clearInterval(countdown); const now = Date.now(); const then = now + seconds * 1000; displayTimeLeft(seconds); displayEndTime(then); countdown = setInterva.. 2023. 3. 6. js challenge day 28 Video Speed Scrubber Code 배운 점 & 느낀 점 동영상에서 바를 이용해서 동영상 속도를 조절하는 과제였습니다. 바의 크기를 이용하여 위치정보를 알아낸 다음, 클릭으로 0.4배속에서 4.0배속까지 동영상 속도를 조절할 수 있었습니다. 언젠간 이용할 가치가 있을 것 같다는 생각이 듭니다. 2023. 3. 3. js challenge day 27 Click and Drag Code 배운 점 & 느낀 점 이 과제는 가로로 스클롤링 하는 이벤트를 다루는 것이었습니다. mousedown, mouseleave, mouseup, mousemove의 차이점에 대해서 알아야 했는데, mousedown => 요소를 클릭했을 때 mouseleave => 마우스가 요소를 떠날 때 mouseup => 요소를 클릭한 후 땔 때 mousemove => 요소위에서 마우스를 움직 일 때 이를 활용해서 마우스를 클릭했을때, isDown으로 상태를 관리한 다음에, isDown이 true일때 mousemove를 하면 가로로 스크롤링할 수 있게 하였습니다. 2023. 3. 1. js challenge day 26 Follow Along Nav Code 배운 점 & 느낀 점 특정 블록에 마우스를 올리면 다른 블록을 띄워주는 간단한 과제였습니다. 2023. 2. 28. js challenge day 25 Event Capture, Propagation, Bubbling and Once Code 배운 점 & 느낀 점 이벤트 캡처링, 이벤트 버블링, 이벤트 위임에 대해서 다시 한번 복습하는 시간을 가졌습니다. once라는 옵션은 처음 봤는데, 해당 이벤트를 한번 발생시키고 싶을 때 쓰는 옵션이었습니다. once 옵션을 쓰니까 좀 더 이해가 잘되었던 것 같습니다. 이벤트 캡처링은 이벤트가 발생한 요소로 들어가는 과정, 이벤트 버블링은 이벤트가 발생한 요소에서 빠져나가는 과정 캡처링은 default가 false이기 때문에, 캡처링 과정에서 이벤트를 발생 시키고 싶으면 설정을 해줘야합니다. 이벤트위임은, 모든 노드에 이벤트를 저장하지않고 부모요소에 이벤트를 저장하여 버블링을 이용하는 패턴 입니다. 2023. 2. 27. 이전 1 2 3 4 5 다음 반응형
