전체 글 (64) 썸네일형 리스트형 29. CountDown Timer 기본 코드 20 Secs Work 5 Quick 15 Snack 20 Lunch Break 목표스탑워치기능을 넣어보자.코드 분석1. 사용할 변수를 선언let countdown; const timerDisplay = document.querySelector('.display__time-left'); const endTime = document.querySelector('.display__end-time'); const buttons = document.querySelectorAll('[data-time]'); 2. 사용할 함수를 선언function timer(seconds) { clearInterval(countdown); const now = Date.now(); const then = now + sec.. 28. Video Speed Controller 기본 코드 1× 목표비디오의 속도를 조절할 수 있는 속도바를 만들어보자. 코드 분석사용할 변수를 선언한다.const speed = document.querySelector('.speed'); const bar = speed.querySelector('.speed-bar'); const video = document.querySelector('.flex'); 함수를 선언한다. function handleMove(e) { const y = e.pageY - this.offsetTop; const percent = y / this.offsetHeight; const min = 0.4; const max = 4; const height = Math.round(percent * 100) + '%'; const p.. 27. Click and Drag 기본 코드 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; 늘 그렇듯이 먼저 사용할 변수에 대해서 선언해준다. 여기서 isDown이라는 내용은 마치 전류가 흘러들어올때만 회로를 연결해주어 전기가 통할 수 있도록 해주는 스위치 (?)처럼 클릭을 하고서 움직여야만 원하는 내용이 실행될 수 있도록 해주는 스위치같은 역할이다. 이 부분에 대해서는 진행하면서 다시 짚어보도.. 26. Stripe Follow Along Nav 기본 코드 Cool About Me Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though! Courses RFB React For Beginners ES6 ES6 For Everyone STPU Sublime Text Power User WTF What The Flexbox?! LRX Learn Redux CLPU Command Line Power User MMD Mastering Markdown Other Links Twiter Facebook Blog Course Catalog 목표마우스의 .. 25. Event Capture, Propagation, Bubbling and Once 기본 코드 목표이벤트 버블링과 이벤트 캡쳐에 대해서 이해해보자.코드 분석 const divs = document.querySelectorAll('div'); const button = document.querySelector('button'); function logText(e) { console.log(this.classList.value); } divs.forEach(div => div.addEventListener('click', logText, { capture: false, once: true })); 사실 이번 챕터는 코드가 별로 중요한 내용이 없는 듯 하여 핵심만 짚겠다. 여기서 .addEventListener의 3번째 항목은 옵션항목으로서 작용한다. capture를 false값을 주게 되면.. 24. Sticky Nav 기본 코드 A story about getting lost. LOST. Home About Images Locations Maps 중간에 들어간 텍스트들은 너무 많을뿐더러 주제와 맞지않아서 제외했다.목표자바스크립트를 이용하여 상단에 있는 메뉴바를 스크롤이 내려가더라도 그대로 유지해보자.코드 분석 const nav = document.querySelector('#main'); const topOfNav = nav.offsetTop; function fixNav() { if(window.scrollY >= topOfNav) { document.body.style.paddingTop = nav.offsetheight + 'px'; document.body.classList.add('fixed-nav'); } .. 23. Speech Synthesis 기본 코드 The Voiceinator 5000 Select A Voice Rate: Pitch: Hello! I love JavaScript 👍 Stop! Speak 목표적어놓은 멘트를 지정된 웹 API를 이용하여 여러가지 나라의 언어로 바꾸어 들을 수 있도록 해보자.코드 분석 msg.text = document.querySelector('[name="text"]').value; function populateVoices() { voices = this.getVoices(); voicesDropdown.innerHTML = voices .filter(voice => voice.lang.includes('en')) .map(voice => `${voice.name} (${voice.lang})`) .jo.. 22. Follow Along Link Highlighter 기본 코드 Home Order Status Tweets Read Our History Contact Us Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae! Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pariatur earum quaerat cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam. Cum ipsam quod, incidunt si.. 이전 1 ··· 3 4 5 6 7 8 다음
