튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 11 - Custom HTML5 Video Player 튜토리얼 분류: JavaScript 튜토리얼 설명: JavaScript로 커스텀 동영상 플레이어 기능 추가하기 진행기간: 2020년 4월 22일 JavaScript로 HTML Video 요소 다루기 currentTime, duration, autoplay, paused, playbackRate, volume 등 동영상의 속성을 설정할 수 있음 play(), pause() 등의 메서드로 동영상을 조절할 수 있음 미디어 요소가 재생될 때, 멈출 때 코드 실행하기 미디어 요소가 재생될 때, 그리고 멈출 때 코드가 실행되도록 Event Listener를 등록할 수 있음 play, pause 이벤..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 10 - Hold Shift and Check Checkboxes 튜토리얼 분류: JavaScript 튜토리얼 설명: 쉬프트를 누른 채 HTML 체크박스를 클릭하면 가운데 있는 체크박스도 같이 선택되게 하기 진행기간: 2020년 4월 21일 이벤트 발생 시 특수 키 입력 여부 확인하기 마우스, 키보드 이벤트 발생 시 이벤트의 ctrlKey, shiftKey, altKey, metaKey 속성을 통해 확인 해당 특수 키와 함께 키보드 입력이 발생했다면 해당 속성의 값이 true, 특수 키가 없었다면 false가 됨 event.ctrlKey, event.shiftKey 등의 방법으로 접근 가능 라디오, 체크상자 등 input 태그의 선택 여부 확..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 09 - Dev Tools Domination 튜토리얼 분류: 개발자 도구 튜토리얼 설명: 개발자 도구의 다양한 기능 알아보기 진행기간: 2020년 4월 20일 HTML 요소의 속성 변화를 구체적으로 확인하기 개발자 도구 > Elements 탭 > HTML 요소 선택 후 우클릭 > Break on > attribute modifications 속성이 변화하는 순간 Debugger가 작동, Sources 탭으로 전환되어 그 변화를 만든 코드 line을 화면에 표시함 콘솔 메시지에 스타일 입히기 형태: console.log('%c문자열', 'CSS 속성값'); 콘솔로 표현식 테스트하기 형태: console.assert(표현식, 코드); 첫 번째 ..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 08 - Fun with HTML5 Canvas 튜토리얼 분류: JavaScript 튜토리얼 설명: HTML5 캔버스로 무지개색으로 색깔이 변하는 선 그리기 진행기간: 2020년 4월 19일 HTML Canvas 요소 HTML 위에 그래픽 요소를 표현할 수 있는 요소 Canvas API, WebGL API, JavaScript 코드와 함께 활용됨 Canvas API는 주로 2D 그래픽을, WebGL API는 2D와 3D 그래픽을 표현하는 데 쓰임 참고자료 Canvas API - Web APIs | MDN WebGL: 2D and 3D graphics for the web - Web APIs | MDN 특징 그래픽 요소는 Canvas 요소가 아..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 07 - Array Cardio 2 튜토리얼 분류: JavaScript 튜토리얼 설명: JavaScript 배열 조작 메서드 연습하기 진행기간: 2020년 4월 18일 Array.prototype.find( ) 메서드의 특징 filter( ) 메서드와 유사하나, 제시된 조건에 해당하는 모든 요소가 아닌 '첫 번째' 요소만 반환하는 것이 차이점 ※ findIndex( ) 메서드 또한 제시된 조건을 만족하는 '첫 번째' 요소의 index를 반환함 원본 배열에 영향을 미치지 않고 특정 Index의 원소 제거하기 배열의 원소를 제거하는 방법으로는 splice( ) 메서드가 대표적임 단, 원본 배열의 원소 구성을 직접적으로 변화시키는 문제가 있음 sl..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 06 - Ajax Type Ahead 튜토리얼 분류: JavaScript 튜토리얼 설명: AJAX를 이용한 검색어 자동완성 기능 진행기간: 2020년 4월 17일 Fetch API AJAX를 구현하는 방법 중 하나로, 사용이 쉽고 간단함 Promise 객체를 반환하므로, Promise가 도입된 ES6 이후로 자주 쓰임 반환된 Promise 객체는 then 키워드로 활용 예시 코드 참고자료 Fetch API - Web API | MDN AJAX, XMLHttpRequest와 Fetch 살펴보기 | Dev.White 자바스크립트 fetch API 알아보기 ! Internet Explorer에서는 지원되지 않음 정규 표현식 문자열의 특정 문자 조합..