개발/JavaScript 30 (26) 썸네일형 리스트형 31. JavaScript 30을 마치며 사실 이전에 간단한 HTML, CSS 공부를 마치고 바로 뛰어든 JavaScript였는데, 처음에는 단순하게 사용되는 메서드나 그 기능들에 포커스를 맞춰서 주먹구구식으로 공부를 했다. 그러다보니 몇가지 알고는 있지만, 정작 무언가를 만드는 것은 전혀 하지 못했을 뿐더러, 뭘 어떻게 해야할지 구상을 하는 단계에서도 전혀 손을 대지 못했다. 그러던 중 구글에서 JavaScript 30 이라는 외국사이트의 프로젝트를 보게 되었고, 일단 그걸 시작해보자고 생각했다. 다 듣고난 지금은 확실히 무엇인가 달라졌다. 이걸 들었다고 아무것도 만들지 못하는 상태에서 갑자기 생각하던 걸 바로바로 뚝딱 만들어내는정도의 발전은 애초에 기대하지도 않았고, 사실 불가능하다. 그렇다면 무엇이 달라졌을까. 위에서 언급한 문제중 후자에.. 30. Whack A Mole 기본 코드 Whack-a-mole! 0 Start! 목표두더지잡기 게임을 만들어보자.코드 분석1. 사용할 변수들에 대해 선언한다. const holes = document.querySelectorAll('.hole'); const scoreBoard = document.querySelector('.score'); const moles = document.querySelectorAll('.mole'); let lastHole; let timeUp = false; let score = 0; 2. 두더지가 튀어나오는 시간을 정하는 함수를 정한다. function randTime(min, max) { return Math.round(Math.random() * (max - min) + min); } Math.r.. 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'); } .. 이전 1 2 3 4 다음
