전체 글 (64) 썸네일형 리스트형 21. Geolocation 기본 코드 0 KM/H 목표웹 API 를 이용하여 나침반을 움직여보자코드 분석 const arrow = document.querySelector('.arrow'); const speed = document.querySelector('.speed-value'); navigator.geolocation.watchPosition((data) => { console.log(data); speed.textContent = data.coords.speed; arrow.style.transform = `rotate(${data.coords.heading}deg)`; }, (err) => { console.err(err); alert('Hey! you gotta allow that to happen'); }); 먼저 .. 20. Speech Detection 기본 코드 목표웹 API를 사용하여 음성인식과 동시에 화면에 출력이 가능하도록 만들어 보자.코드 분석 const recognition = new SpeechRecognition(); recognition.interimResults = true; let p = document.createElement('p'); const words = document.querySelector('.words'); words.appendChild(p); recognition.addEventListener('result', e => { const transcript = Array.from(e.results) .map(result => result[0]) .map(result => result.transcript) .join('.. 19. Webcam Fun 기본 코드 Take Photo 목표웹 API 를 사용하여 웹페이지에서 카메라화면이 출력되고, 그를 통해 사진찍기, 효과주기 등 여러가지를 실행할 수 있도록 해보자.코드 분석사용할 변수를 먼저 지정해 놓는다.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'); 이벤트리스너에 넣을 함수들을 추가한다.function getVideo() { navigator.m.. 18. 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 Video 11 Video 12 Video 13 Video 14 Video 15 Video 16 Video 17 Video 18 Video 19 Video 20 Video 21 Video 22 Video 23 Video 24 Video 25 Video 26 Video 27 Video 28 Video 29 Video 30 Video 31 Video 32 Video 33 Video 34 Video 35 Video 36 Video 37 Video 38 Video 39 Video 40 Video 41 Video 42 Video 43 Video 44 Video.. 17. Sort Without Articles 기본 코드 목표알파벳 순으로 정렬할 때 관사 (정관사, 부정관사)를 제외한 내용의 순으로 정렬한다.코드 분석function strip(bandName) { return bandName.replace(/^(a |the |an )/i, '').trim(); } const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1); document.querySelector('#bands').innerHTML = sortedBands .map(band => `${band}`) .join(''); 먼저 strip부터 보겠다.내용을 보면 .replace부분이 먼저 보이는데, 이것은 a, the, an 을 공백으로 바꿔서 리턴해주는 것이다. trim은 앞 부분.. 16. Mouse move Shadow 기본 코드 🔥WOAH! 목표마우스의 이동에 따라 가운데 적힌 글씨에 대한 4개의 그림자가 같이 움직이게 만들어보자코드 분석 function shadow(e) { const { offsetWidth: width, offsetHeight: height } = hero; let { offsetX: x, offsetY: y } = e; if (this !== e.target) { x = x + e.target.offsetLeft; y = y + e.target.offsetTop; } const xWalk = Math.round((x / width * walk) - (walk / 2)); const yWalk = Math.round((y / height * walk) - (walk / 2)); 내용을 살펴보면 h.. 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.. 이전 1 ··· 4 5 6 7 8 다음
