takeU

Click and Drag 목표 클릭해서 드래그하면 옆으로 넘어가는 페이지를 구현 기본 코드 01 02 03 04 05 과정 상수, 변수 생성 mousedown시 실행될 함수 생성 mouseleave시 실행될 함수 생성 mouseup시 실행될 함수 생성 mousemove시 실행될 함수 생성 코드 분석 1. 상수, 변수 생성 const slider = document.querySelector('.items'); let isDown = false, startX, scrollLeft; items을 클래스로 가지는 요소들을 slider에 담고 isDown, startX, scrollLeft를 변수로 생성 2. mousedown시 실행될 함수 생성 slider.addEventListener('mousedown',..

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 CLPU Command Line Power User MMD Mastering Markdown Other Links Twiter Facebook 과정 상수 생성 마우스가 올라갈 때의 함수를 생성 마우스가 떠날 때의 함수를 생성 효과를 적용, 해제하는 함수 실행 코드 분석 1. 상수 생성..

Event Capture, Propagation, Bubbling and Once 목표 이벤트 캡쳐링 - 최상위 태그가 먼저 실행이 되고, 그 후에 점점 하위로 호출 이벤트 버블링 - 최하위 태그가 먼저 실행이 되고, 그 후에 점점 상위로 호출 을 구현해보고 알아봄. 기본 코드 button 과정 상수 선언 현재의 클래스 값을 콘솔에 출력하는 함수 생성 div, button에 대해 이벤트리스너 생성 코드 분석 1. 상수 선언 const divs = document.querySelectorAll('div'); const button = document.querySelector('button'); div와 button 태그를 각각의 변수에 담는다 2. 현재의 클래스 값을 콘솔에 출력하는 함수 생성 const ..

Sticky Nav 목표 웹 브라우저에 많이 쓰이는 상단에 네비게이션바 고정을 자바스크립트로 구현 기본 코드 A story about getting lost. LOST. Home About Images Locations Maps Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 원래 쓸모없는 내용이 많지만 다 짤랐음, CSS속성도 따로 작성하지 않았음 과정 상수, 변수 생성 스크롤시 상단에 nav바를 고정하도록 함수 생성 및 실행 코드 분석 1. 상수, 변수 생성 const nav = document.querySelector('#main'); let topOfNav = nav.offsetTop; nav에 id가 main인 태그를 담고, topOfNav에 na..

Speech Synthsis 목표 자바스크립트 SpeechSynthesisUtterance API로 글을 읽어주는 도구 구현 기본 코드 The Voiceinator 5000 Select A Voice Rate: Pitch: Hello! I love JavaScript 👍 Stop! Speak 과정 사용 가능한 목소리 리스트 출력 재생, 정지 버튼 생성 목소리 설정 옵션 설정 코드 분석 0. 기능을 구현하기 위한 변수, 상수 설정 const msg = new SpeechSynthesisUtterance(); let voices = []; const voicesDropdown = document.querySelector('[name="voice"]'); const options = document.query..

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 facili..

Geolocation 목표 나침반과 현재속도를 출력 기본 코드 0 KM/H 과정 상수 선언 현재위치, 속도 값 얻는 함수 생성 및 출력 코드 분석 1. 상수 선언 const arrow = document.querySelector('.arrow'); const speed = document.querySelector('.speed-value'); arrow와 speed에 요소들을 선택 2. 현재위치, 속도 값 얻는 함수 생성 및 출력 navigator.geolocation.watchPosition(data => { console.log(data); speed.textContent = data.coords.speed; arrow.style.transform = `rotate(${data.coords.headi..

Native Speech Recognition 목표 음성인식을 구현해 보려함 기본 코드 과정 브라우저에서 음성인식을 위해 설정 음성인식을 할 수 있도록 상수 생성 말한 내용을 p태그로 브라우저에 표시 이벤트 실행 코드 분석 1. 브라우저에서 음성인식을 위해 설정 window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; 브라우저에 따라 webkit속성을 적용 2. 음성인식을 할 수 있도록 상수 생성 const recognition = new SpeechRecognition(); recognition.interimResults = true; recognition에 음성인식을 할 수 있는 함수를 담아 반환값을 주..

Webcam Fun 목표 페이지로 사진을 찍을 수 있게 웹캠기능을 적용 기본 코드 Take Photo 과정 요소에 대응되는 상수 생성 화면에 웹캠 출력 웹캠의 크기, 위치조정 사진을 찍고, 저장할 수 있도록 함수 생성 웹캠에 효과 설정 레인지바 생성, 실행 코드 분석 1. 요소에 대응되는 상수 생성 const video = document.querySelector('.player'); const canvas = document.querySelector('.photo'); const ctx = canvas.getContext('2d'); const strip = document.querySelector('.strip'); const snap = document.querySelector('.snap'); 2..

Adding Up Times with Reduce 목표 목록의 동영상들의 총 재생시간을 구하는 것 기본 코드 Video 1 Video 2 Video 3 Video 4 Video 5 Video 6 Video 7 Video 8 Video 9 Video 10 과정 배열 선언 동영상들의 총 재생시간을 초단위로 구함 총 재생시간을 시, 분, 초로 바꿔줌 코드 분석 1. 배열 선언 const timeNodes = Array.from(document.querySelectorAll('[data-time]')); timeNode에 [data-time]을 가진 태그들을 배열로 담아준다. 2. 동영상들의 총 재생시간을 초단위로 구함 const seconds = timeNodes .map(node => node.dataset..