Web/JS30
-
Whack a Mole Game 🎮Web/JS30 2021. 1. 2. 19:52
벌써 Javascript 30의 마지막 주제까지 왔다. 사실 2020년 안에 전부 끝내는 게 목표였는데, 아쉽게도 이틀정도 딜레이됐다. 다른 이유가 있는 건 아니고, 그냥 중간중간에 딴 것도 자꾸 하고싶고 게을러지기도 하고 그랬던 것 같다. 그래도 예제들 중에 실제로 써먹어본 것들도 많고, 전혀 몰랐던 브라우저의 기능을 새로 알게 된 경우도 많고 해서 끝까지 오는 데에 크게 지루한 적은 없었다. 나름 재미있었다. 생각보다 실제로 써먹을 일이 좀 있었다는 게 신기했지. 마지막 주제는 'Whack-A-Mole', 즉 두더지 잡기 게임을 만들어보는 예제이다. 우선 HTML 코드를 살펴보자. Whack-a-mole! 0 Start! HTML 코드를 보면 알 수 있듯이, 각각의 구멍들 안에는 이미 mole(두더지..
-
Countdown Timer ⏱Web/JS30 2021. 1. 2. 03:13
이번에는 정해진 시간만큼 카운트다운을 해주는 타이머를 만들어보는 예제이다. 맨 처음 예제였던가, 시계를 만드는 예제가 있었는데 이번에도 거기서 사용되었던 Date 객체를 이용한다. 우선, HTML 코드는 다음과 같다. 20 Secs Work 5 Quick 15 Snack 20 Lunch Break 우선, 사용될 예정인 HTML 태그들을 변수에 담아준다. const timerDisplay = document.querySelector('.display__time-left'); const endTime = document.querySelector('.display__end-time'); const buttons = document.querySelectorAll('[data-time]'); 위의 GIF에서 봤을..
-
Video Speed Controller UIWeb/JS30 2020. 12. 27. 22:03
오늘은 예전에 배웠던 내용들을 섞어서 만든 예제인 듯하다. HTML5 비디오와 마우스 이벤트를 가지고 비디오의 배속을 조절하는 기능을 만들어 보는 아주 간단한 예제이다. 1× 우선, 우리가 조작하고자 하는 요소들을 변수에 담아보자. 일단 마우스로 조작해야하는 부분은 오른쪽에 보라색으로 그라데이션이 들어가있는 부분이다. 흰 배경은 'speed'라는 클래스를 가진 div 태그이고, 보라색 그라데이션 부분은 'speed-bar'라는 클래스를 가진 div 태그이다. 이 둘을 각각 'speed'라는 변수와 'bar'라는 변수에 담아준다. 그리고 저 스피드바를 이용해서 우리가 조작하게 될 대상은 비디오 태그의 배속이기 때문에 비디오 태그 역시나 'video'라는 변수에다가 담아주도록 한다. 우리가 mousemove..
-
Click and Drag to ScrollWeb/JS30 2020. 12. 26. 21:56
웹서핑을 하다보면, 마우스로 드래그해서 스크롤을 할 수 있게끔 해 놓은 페이지들을 종종 볼 수 있다. 마치 터치를 하는 것과 비슷한 조작감을 주곤 하는데, 오늘은 이 드래그 스크롤을 구현해보도록 하자. HTML 코드는 간단하다. items라는 클래스를 가진 div 안에 item이라는 클래스를 가진 div들이 총 25개 들어있다. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 우선, 변수 선언부는 다음과 같다. const slider = document.querySelector('.items'); let isDown = false; let startX; let scrollLeft; 아이템들을 포함하고 있는 가장 상위 d..
-
Stripe Follow Along NavWeb/JS30 2020. 12. 26. 04:11
미국의 결제 서비스인 stripe 홈페이지에 가보면 다음과 같은 네비게이션 메뉴를 볼 수 있다. 메뉴를 이동하더라도 자연스럽게 연결되면서 컨텐츠에 따라 크기도 알아서 바뀌고 하는 아주 신기한 드롭다운 메뉴인데, 사실은 저 메뉴들이 각각 다 다른 div가 아니라 하나의 div로 구성되어있다. 오늘은 이 신기한 드롭다운 메뉴를 따라서 구현해보는 시간을 갖도록 하자. 며칠전에, 흰 span이 링크들을 따라가면서 위치를 옮기는 효과를 구현했던 것과 꽤 유사하다. HTML 코드는 대략적으로 다음과 같다. About Me Wes Bos sure does love web development. He teaches thin ... ... 보시다시피 드롭다운 메뉴가 nav 태그 안에 포함되어있고, 메뉴 안의 내용들은 u..
-
Event Capture, Propagation, Bubbling and OnceWeb/JS30 2020. 12. 24. 22:24
오늘은 이벤트 캡쳐와 버블링 등 자바스크립트의 이벤트를 다루기 위해서는 필수적으로 알아야 할 이론들에 관한 내용을 가르쳐주는 예제이다. 다른 것들은 이미 알고 있었지만 복습하는 데에 의미가 있었고, capture이나 once 같은 옵션들은 새로 배운 내용이어서 나중에 꽤나 유용하게 써먹을 수 있을 듯 하다. 이벤트 버블링(Event Bubbling) 우리가 자바스크립트의 특정 요소에 클릭을 하게 되면, 당연히 해당 요소에서만 이벤트가 발생할 것 같지만 사실은 그렇지 않다. 특정 요소에 클릭을 하게 되면, 해당 요소에서 이벤트가 발생하는 것은 물론이고 그 요소의 부모 요소, 그 부모의 부모 요소, 이런 식으로 쭉쭉 타고 올라가면서 이벤트가 전달이 된다. 위의 사진에서, 맨 안쪽의 div에는 three라는 ..
-
Sticky Nav 🩹Web/JS30 2020. 12. 23. 19:12
예전에 jQuery를 많이 쓰던 때에 유행하던 스타일의 네비게이션 바로 기억한다. 네비게이션 바가 존재하고, 스크롤을 내리면서 네비게이션 바의 상단이 브라우저 상단에 부딪히는 순간 상단에 위치가 고정된 채로 스크롤과 함께 움직이는 그런 네비게이션 바. 오늘은 그것을 라이브러리 없이 만들어보는 예제이다. 일단은 네비게이션 바를 변수에 담아준다. 그리고, 네비게이션바의 상단이 전체 페이지(문서)의 최상단에서 얼마만큼 떨어져있는지를 의미하는 변수인 topOfNav를 만들어준다. const nav = document.querySelector('#main'); const topOfNav = nav.offsetTop; 언제 네비게이션 바의 상단이 화면의 상단에 부딪히는지를 스크롤이 될때마다 항상 지켜보고 있어야 하..
-
📢 Speech Synthesis 🔊Web/JS30 2020. 12. 23. 06:57
이번에도 목소리와 텍스트를 다루는 브라우저 내장 객체에 대한 내용이다. 생각했던 것보다 훨씬 다양한 기능이 들어있는 신비한 브라우저였구만. 이전에 Speech Recognition 이 목소리를 텍스트로 바꾸는 브라우저의 기본 내장 객체였다면 Speech Synthesis는 텍스트를 목소리로 바꾸는 브라우저의 내장 객체라고 볼 수 있다. 위의 인터페이스를 구성하는 HTML 코드는 다음과 같다. The Voiceinator 5000 Select A Voice Rate: Pitch: Hello! I love JavaScript 👍 Stop! Speak const msg = new SpeechSynthesisUtterance(); let voices = []; const voicesDropdown = docum..