튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 15 - LocalStorage and Event Delegation 튜토리얼 분류: JavaScript 튜토리얼 설명: localStorage로 값을 저장하고, 이벤트 위임을 활용해 동적으로 추가된 요소에 이벤트 연동시키기 진행기간: 2020년 4월 27일 HTML submit 타입 태그에 이벤트 설정하기 해당 태그에 click 이벤트를 연동하는 방식과, submit 이벤트를 연동하는 방식으로 나뉨 click 이벤트는 키보드 입력으로 발생하는 submit 이벤트에 반응하지 않는다는 한계가 있음 submit 이벤트를 통해 연결하는 것이 확실함 예시 코드 참고자료: SubmitEvent - Web APIs | MDN 특정 HTML 태그로 인한 ..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 14 - JavaScript References VS Copying 튜토리얼 분류: JavaScript 튜토리얼 설명: JavaScript 데이터의 종류별 전달 방식 진행기간: 2020년 4월 26일 숫자, 문자열과 데이터 복사 예시 코드 한 변수에 다른 변수를 지정한 후, 한 변수를 바꿔도 다른 변수의 값은 유지됨 배열과 데이터 참조 예시 코드 한 변수에 다른 변수를 지정한 후, 한 변수의 데이터를 바꾸면 다른 변수의 데이터도 바뀜 배열의 데이터를 복사하는 방법 전통적 방식: slice( ) 메서드, [ ].concat( ) 메서드 새로운 방식 (ES6) 객체와 데이터 참조 예시 코드 한 변수에 다른 변수를 지정한 후, 한 변수의 데이터를 ..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 13 - Slide In on Scroll 튜토리얼 분류: JavaScript 튜토리얼 설명: 진행기간: 2020년 4월 25일 웹페이지 스크롤한 길이 확인하기 웹페이지가 수평/수직으로 화면 크기보다 커서 스크롤할 때, Web API를 통해 스크롤한 길이를 확인할 수 있음 형태 수평 스크롤: window.scrollX 수직 스크롤: window.scrollY 참고자료 Window.scrollX - Web API | MDN Window.scrollY - Web API | MDN 일정 시간 간격 이하로 함수가 실행되는 것 방지하기 setTimeout( ) 메서드 활용하여 별도의 함수 만들어 대상 함수와 중첩 실행 실행 코드 GitHub 저장소 링크

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 12 - Key Sequence Detection 튜토리얼 분류: JavaScript 튜토리얼 설명: 특정 키 조합에 반응하여 JavaScript 코드 동작시키기 진행기간: 2020년 4월 23일 배열에 원소를 추가하면서 전체 길이를 일정 길이 이하로 유지하기 예시 코드 배열의 길이가 주어진 길이 len보다 작거나 같을 때 배열의 길이 - len = 1이므로, -len - 1 index의 원소를 삭제 음수 index는 끝으로부터의 순서이므로, -len - 1 은 항상 배열의 첫번째 원소를 가리키게 됨 배열의 길이는 len으로 유지되면서, 가장 오래된 원소는 자동으로 제외됨 Github 저장소 링크

튜토리얼 출처: 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 태그의 선택 여부 확..