많다면 많고, 적다면 적었던 JavaScript30 시리즈의 마지막 튜토리얼입니다. 오락실 앞에 약방의 감초처럼 놓여있는 두더지 게임을 간단하게 JavaScript로 구현해봅니다. 튜토리얼 정보 출처: JavaScript30 이름: Day 30 - Whack A Mole 언어: JavaScript 목표: 구멍에서 무작위로 튀어나오는 두더지를 잡는 미니 게임 만들기 진행 기간 2020년 5월 16일 두더지가 나오는 구멍, 나와있는 시간 무작위로 설정하기 우선, 두더지가 튀어나올 구멍이 여럿 필요합니다. 여러 구멍 중 어떤 구멍으로 나올지, 그리고 나와서 얼마 동안 있다가 다시 들어갈 지가 정해져야 하겠죠. 두더지가 튀어나오는 구멍과 튀어나왔다가 들어가는 시간이 일정하면 금방 질리기 때문에, 이 둘을 무작위..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 29 - Countdown Timer 튜토리얼 분류: JavaScript 튜토리얼 설명: 지정된 시간과 직접 입력한 시간 동안 카운트다운되는 타이머 만들기 진행기간: 2020년 5월 14일 JavaScript를 사용해 현재 시간으로부터 일정 시간 뒤까지 카운트다운을 실행하는 타이머를 만들 수 있다. 사전에 지정한 시간 동안 작동하게 할 수도 있고, 직접 입력한 시간 동안 작동하게 할 수도 있다. 카운트다운 시간 계산하기 우선, 카운트다운 시간을 계산하기 위해 현재 시각과 종료 시각이 필요하다. 아래 timer 함수의 코드를 보자. Date.now( ) 메서드를 통해 현재 시각을 계산하고, 현재 시각에 인자로 넘겨받은 seconds를 더해 종료..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 28 - Video Speed Scrubber 튜토리얼 분류: JavaScript 튜토리얼 설명: 영상 속도를 실시간으로 조절하고 보여주는 슬라이더 만들기 진행기간: 2020년 5월 13일 HTML Video 태그로 웹페이지에 삽입된 영상은 JavaScript를 사용해 속성을 다양하게 변경할 수 있다. 커서 위치에 반응하는 슬라이더를 만들어 영상 재생 속도를 실시간으로 조절해보자. 커서 위치에 따라 슬라이더의 높이 변경하기 우선, 현재 재생 속도를 시각적으로 나타내야 한다. 다음의 코드를 보자. speed는 슬라이더의 배경, bar는 슬라이더에 해당하는 DOM 요소이다. 슬라이더를 마우스 커서와 연동하려면 mousemove 이벤트에 이벤트 리..

웹페이지의 요소의 내용이 요소 자체의 크기를 초과할 경우, 스크롤이 되는 슬라이더가 자동으로 생깁니다. 일반적으로 마우스 휠을 사용해 스크롤하지만, JavaScript를 활용하면 드래그로도 스크롤을 할 수 있습니다. 이 글에선 드래그를 사용한 기본적인 좌우 스크롤을 구현합니다. 튜토리얼 정보 출처: JavaScript30 이름: Day 27 - Click and Drag to Scroll 언어: JavaScript 목표: 웹페이지 요소를 드래그하고 좌우로 움직였을 때 스크롤과 같은 효과 구현하기 진행 기간 2020년 5월 11일 마우스 이벤트와 슬라이더 연동시키기 마우스가 현재 드래그 중이라는 것을 인식시키기 위해, 관련 마우스 이벤트를 슬라이더와 연동시켜줘야 합니다. 현재 마우스가 클릭 중인지를 지속적..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 26 - Stripe Follow Along Nav 튜토리얼 분류: JavaScript 튜토리얼 설명: 내비게이션 바의 드롭다운 메뉴의 나타나고 사라지는 효과 자연스럽게 이어지도록 하기 진행기간: 2020년 5월 10일 내비게이션 바 항목에 하위 링크를 연결하고 싶을 때 사용하는 드롭다운 메뉴. 가장 기본적인 드롭다운 메뉴는 링크에 마우스 커서를 올리면 나타나고, 마우스 커서를 떼면 사라진다. 이 드롭다운 메뉴를 좀 더 시각적으로 자연스럽게 보이도록, 링크 사이에서 이어지듯이 나타나고 사라지게 해보자. 드롭다운 메뉴 나타나고 사라지게 하기 우선 마우스를 올리면 나타나고, 떼면 사라지도록 만들어야 한다. 아래의 코드를 보자. 내비게이션 바의 모..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 25 - Event Capture, Propagation, Bubbling and Once 튜토리얼 분류: JavaScript 튜토리얼 설명: JavaScript 이벤트의 전파(Propagation)과 전파 방식 두 가지, 이벤트 버블링과 이벤트 캡쳐 진행기간: 2020년 5월 9일 웹페이지의 DOM 요소를 어떤 이벤트에 반응하게 하고 싶다면, 일반적으로 JavaScript의 addEventListener( ) 메서드를 활용해 해당 요소에 이벤트 리스너를 등록한다. 그런데 DOM 요소의 배치와 이벤트리스너가 등록된 상황에 따라 예상하지 못한 방식으로 동작할 수 있다. 중첩된 DOM 요소와 이벤트의 작동 방식 위처럼 여러 DOM 요소가 중첩되고..