개발/JavaScript 30 (26) 썸네일형 리스트형 15. LocalStorage 기본 코드 LOCAL TAPAS Loading Tapas... 목표내용이 새로고침시에도 변하지 않도록 내부저장소를 이용해보자.코드 분석function addItem(e) { e.preventDefault(); const text = (this.querySelector('[name=item]')).value; const item = { text, done: false }; items.push(item); populateList(items, itemsList); localStorage.setItem('items', JSON.stringify(items)); this.reset(); } function populateList(plates = [], platesList) { platesList.innerHTML.. 14. JavaScript References VS Copying 기본 코드 목표배열과 객체의 복사와 참조를 정확히 이해한다.코드 분석코드들을 분석하기 전에 객체의 특성에 대해서 알아야 한다. 문자열, 숫자, 불린을 제외한 객체는 다른 변수에 대입할 때 값을 복사하는 게 아니라 참조(메모리의 주소)를 복사한다. 따라서, 위의 기본 코드에 적힌 내용을 예시로 보면 현재 ['Wes, 'Sarah', 'Ryan', 'Poppy']라는 하나의 값을 team과 players라는 두 변수가 가리키고 있는 것이다. 이를 Shallow copy(얕은 복사) 라고 한다. 이럴 경우 두 변수 중 하나의 내용에 변화를 주더라도 다른 하나의 변수의 내용에도 변화가 생긴다. const team2 = players.slice(); const team3 = [].concat(players); c.. 13. Slide in on Scroll 기본 코드 Slide in on Scroll 목표그림들이 스크롤을 올렸다 내렸다 할 때 각 사이드에서 나타나도록 만든다.코드 분석 const sliderImages = document.querySelectorAll('.slide-in'); function checkSlide(e) { sliderImages.forEach(sliderImage => { const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; const imageBottom = sliderImage.offsetTop + sliderImage.height; const isHalfShown = slideInAt > sliderImage.offsetTop; .. 12. Key Sequence Detection 코드 분석 목표지정해놓은 시크릿코드가 입력되면 유니콘 모양이 나오도록 만들어보자.분석사용할 변수를 선언한다.const pressed = []; const secretCode = 'wesbos'; 선언한다.window.addEventListener('keyup', (e) => { console.log(e.key); pressed.push(e.key); pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); if (pressed.join('').includes(secretCode)) { console.log('DING DING!'); cornify_add(); } console.log(pressed); 주목할 부분은 presse.. 11. Custom Video Player 코드 분석 This is an inbox layout. Check one item Hold down your Shift key Check a lower item Everything inbetween should also be set to checked Try do it with out any libraries Just regular JavaScript Good Luck! Don't forget to tweet your result! 목표동영상의 재생, 시간이동 기능을 추가한다.분석사용할 변수들에 대해서 먼저 정리해 놓는다.const player = document.querySelector('.player'); const video = player.querySelector('.viewer'); const .. 10. Hold Shift and Checkboxes 코드 분석 This is an inbox layout. Check one item Hold down your Shift key Check a lower item Everything inbetween should also be set to checked Try do it with out any libraries Just regular JavaScript Good Luck! Don't forget to tweet your result! 목표박스 체크를 할 수 있는 삼중 조건문을 알아보자.분석const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]'); let lastChecked; function handleCheck(e) { l.. 9. Dev Tools Domination 코드 분석 ×BREAK×DOWN× 목표콘솔 창에서 확인할 수 있는 여러가지에 대해 알아보자분석 console.log('hello'); console.log('Hello I am a %s string!', '💩'); console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue') console.warn('OH NOOO'); console.error('Shit!'); console.info('Crocodiles eat 3-4 people per year'); 여러가지 내용 중 내가 모르던 것만 골라서 보겠다.%s는 그 자리에 ,뒤의 부분에 적은 내용을 넣는 것이다. %c는 ,앞에 있는 내.. 8. Fun with HTML5 Canvas 코드 분석 목표클릭 후 드래그할 때 색이 변하고 두께가 커졌다 작아졌다를 반복하는 선을 만들어보자.분석이번에는 개요를 나누다가는 조금 더 번잡해질 수 있기 때문에 강의에 나온 순서대로 풀어가면서 해보겠다.const canvas = document.querySelector('#draw'); const ctx = canvas.getContext('2d'); 가장 먼저 해야하는 일은 이 두가지이다. 우리의 목표가 화면 내에서 클릭을 통해 선을 그려내는 것이기 때문에 그에 대한 기본적인 틀을 만들어 주어야 한다. 위의 코드처럼 적어주면, 이것은 2D코드를 사용하여 캔버스의 컨텍스트를 가져오고 이렇게 되면 캔버스에 대한 2D 렌더링 컨텍스트가 생겨서 그 안에 그릴 수가 있게 되는 것이다. (자세한 내용은 여기를 .. 이전 1 2 3 4 다음
