튜토리얼 출처: 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..

튜토리얼 출처: 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 저장소 링크