개발/JavaScript 30 (26) 썸네일형 리스트형 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.. 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.. 이전 1 2 3 4 다음
