튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 22 - Follow Along Link Highlighter 튜토리얼 분류: JavaScript 튜토리얼 설명: 마우스 커서에 따라 웹페이지 하이라이트가 이어지는 듯한 효과 나타내기 진행기간: 2020년 5월 6일 웹페이지의 특정 요소 사이에서 마우스 커서가 이동시킬 때, 하이라이트 효과가 부드럽게 이어지는 듯한 시각적 효과를 줄 수 있다. 다음과 같이 프로그래밍하면 된다. 1. 하이라이트의 대상이 될 HTML 요소 지정 2. 하이라이트 효과를 표현할 HTML 요소 생성 3. 대상 요소에 마우스 커서가 위치할 경우 하이라이트 효과 활성화 4. 하이라이트 효과의 위치와 크기를 대상 요소와 같게 만듦 5. 사용자의 마우스 스크롤 추가 반영 순서..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 21 - Geolocation based Speedometer and Compass 튜토리얼 분류: JavaScript 튜토리얼 설명: 브라우저의 위치 정보를 사용해 웹페이지에 속도계 및 나침반 표시하기 진행기간: 2020년 5월 5일 브라우저의 현재 위치 파악하기 Geolocation Web API를 사용하면 브라우저의 현재 위치를 알 수 있다. 다음의 코드를 보자. Navigator 객체의 geolocation 속성으로 Geolocation 객체에 접근하고 있다. watchPosition( ) 메서드를 사용해 브라우저의 위치가 바뀔 때마다 위치 정보를 반환한다. watchPosition( ) 메서드의 사용 방법은 다음과 같다. 1. 메서드..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 20 - Speech Detection 튜토리얼 분류: JavaScript 튜토리얼 설명: 사용자의 음성 입력을 인식해 웹페이지에 표시하기 진행기간: 2020년 5월 4일 브라우저로 음성 입력 받아들이기 당신의 컴퓨터에 마이크가 연결되어 있다면, 브라우저가 음성을 인식하게 할 수 있다. 다음의 코드를 보자. 음성을 인식하게 해주는 SpeechRecognition 인터페이스를 사용하고 있다. Google Chrome에서는 Vendor Prefix인 webkit을 붙여야 인터페이스를 인식하므로 || (or)을 사용해 설정해준다. SpeechRecognition 인터페이스의 사용 방법은 다음과 같다. 1. 생성자로 SpeechRecognition ..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 19 - Webcam Fun 튜토리얼 분류: JavaScript 튜토리얼 설명: 웹캠 화면을 브라우저에 표시하고 캡처 및 다운로드, 필터 효과 기능 추가하기 진행기간: 2020년 5월 2일, 3일 브라우저에 웹캠 화면 표시하기 당신의 컴퓨터에 웹캠이 달려있다면, 웹캠의 화면이 브라우저에 나오도록 할 수 있다. 다음 getVideo( ) 함수를 보자. 사용자의 브라우저 정보와 상태를 알려주는 Navigator 인터페이스를 사용하고 있다. Navigator 인터페이스의 mediaDevices 속성은 MediaDevices 싱글턴 객체를 반환하므로, 이에 getUserMedia( ) 메서드를 사용해 카메라, 마이크 등의 미디어 장치에 접근한다. g..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 18 - Adding Up Times with Reduce 튜토리얼 분류: JavaScript 튜토리얼 설명: 여러 동영상의 길이가 표시되어 있을 때, 전체 재생 시간을 합산하기 진행기간: 2020년 4월 30일 Array.prototype.reduce( ) 메서드로 배열 원소 합치기 JavaScript 배열의 reduce( ) 메서드는 다양한 곳에 활용될 수 있다. 형태 우선 reduce( ) 메서드의 형태를 살펴보자. callback 함수와, initialValue(초기값) 을 인자로 실행된다는 것을 알 수 있다. callback 함수는 다음 4개의 매개변수를 받아 실행된다. accumulator(누산기): 계속 누적되는 callback ..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 17 - Sort Without Articles 튜토리얼 분류: JavaScript 튜토리얼 설명: 문자열로 이루어진 배열에서 정관사 The, A, An을 제외한 기준으로 정렬하기 진행기간: 2020년 4월 29일 Array.prototype.sort( ) 메서드의 특징 sort( ) 메서드의 인자로 들어가는 함수의 반환값에 따라 동작이 달라짐 함수의 반환값 0인 경우: 비교되는 두 값 중 후자가 앞의 순서로 옴 함수의 반환값 = 0인 경우: 두 값에 대해 별도의 변경을 적용하지 않음 참고자료: Array.prototype.sort() - JavaScript | MD..