자바 스크립트 코어 라이브러리-3, Date 클래스, Array 클래스

Date 클래스

 

1. Date 클래스란?

 - Date 클래스에는 날짜 및 시간과 관련된 유용한 기능이 있다.

 

2. Date 클래스의 실무에서의 활용

- 다이어리 같은 프로젝트에서 달력을 만들 때

- 현재 시간을 출력하는 시계를 만들 때

- 게임을 만드는 경우 플레이 경과 시간을 알아낼 때

- D-day를 출력할 때

 

Date 클래스 주요 기능

 

1. 함수(메서드) 목록

메서드	설명
getDate()	로컬 시간을 사용하여 일(월 기준) 반환
getDay()	로컬 시간을 사용하여 일(주 기준, 즉 요일)을 반환
getFullYear()	로컬 시간을 사용하여 연도를 반환
getHours()	로컬 시간을 사용하여 시간을 반환
getMilliseconds()	로컬 시간을 사용하여 밀리초를 반환
getMinutes()	로컬 시간을 사용하여 분을 반환
getMonth()	로컬 시간을 사용하여 월을 반환
getSeconds()	로컬 시간을 사용하여 초를 반환
getTime()	1970년 1월 1일 00: 00: 00 부터 현재 시간 까지 경과한 시간을 밀리초로 반환
getYear()	로컬 시간을 사용하여 연도 값을 반환. getFullYear() 사용을 권장
setDate()	로컬 시간을 사용하여 일(월 기준)을 설정
setFullYear	로컬 시간을 사용하여 연도를 설정
setHours()	로컬 시간을 사용하여 시간을 설정
setMilliseconds()	로컬 시간을 사용하여 밀리초를 설정
setMinutes	로컬 시간을 사용하여 분을 설정
setMonth	로컬 시간을 사용하여 월을 설정
setSeconds	로컬 시간을 사용하여 초를 설정
setTime	날짜와 시간 값을 설정
setYear	로컬 시간을 사용하여 연도값을 설정. setFullYear() 사용을 권장

 

1. 시간, 분, 초, 밀리초 알아내기

- Date클래스의 getHours(), getMinutes(), getSeconds(), getMilliseconds()를 이용하면 시간, 분, 초, 밀리초를 알아낸 수 있다.

① getHours() var hours = Date인스턴스.getHours(); //리턴값은 0~23까지의 정수

② getMinutes() var minutes = Date인스턴스. getMinutes(); //리턴값은 0~59까지의 정수

③ getSeconds() var seconds = Date인스턴스. getSeconds(); //리턴값은 0~59까지의 정수

④ getMilliseconds() var mSeconds = Date인스턴스. getMilliseconds(); //리턴값은 0~999까지의 정수

 

2. 년, 월, 일, 요일 알아내기
- Date클래스의 getFullYear(), getMonth(), getDate(), getDay()를 이용하면 년, 월, 일, 요일을 알아낸 수 있다.
① getFullYear()
var year = Date인스턴스. getFullYear(); //리턴값은 네 자리로 된 연도 값
② getMonth()
var month = Date인스턴스. getMonth(); //리턴값은 0(1월)~11(12월)까지의 정수
③ getDate()
var date = Date인스턴스. getDate(); //리턴값은 1~31까지의 정수
④ getDay()
var day = Date인스턴스. getDay(); //리턴값은 0(일요일)~6(토요일)까지의 정수

 

7. Array 클래스

 

1. Array 클래스란?
- Array클래스에는 배열을 만드는 기능부터, 추가, 삭제, 찾기 등의 유용한 기능이 있다.
2. Array 클래스의 실무에서의 활용
- 게시판에서 게시물 리스트를 출력할 때
- 갤러리에서 이미지 리스트를 출력할 때
- 웹사이트의 메뉴를 만들 때

 

8. Array 클래스의 주요 기능

 

1. 프로퍼티
- length : 배열의 크기(개수)를 알 수 있다.

 

2. 메서드 목록

메서드 명	설명
concat(array)	두 개의 배열을 하나의 배열로 합침
push(date)	배열의 끝에 데이터를 추가 후 배열의 길이를 리턴
pop()	배열의 마지막 항목을 제거하고 제거된 데이터 반환
shift()	배열의 첫 번째 데이터 제거 후 해당 값을 리턴
unshift(date)	배열의 맨 앞에 데이터를 추가 후 배열의 길이 반환
join(구분자)	지정한 구분자 이용 배열을 문자열로 변환 후 반환
splice(index, 제거수, [data1, ... dataN])	지정 인덱스 번호부터 제거할 개수만큼 데이터 제거. data를 전달하여 대체하는 것도 가능.
slice(시작인덱스[ , 종료인덱스])	시작인덱스부터 종료 인덱스 사이의 데이터를 배열로 리턴
reverse()	배열의 데이터 순서를 거꾸로 변경
sort()	배열의 데이터를 문자열로 변환 후 사전식으로 정렬

 

9. Array 클래스의 핵심 내용

 

1. 배열 만들기
- 배열 만드는 방법은 2가지가 존재한다.
① 배열 리터럴 방식
var arr = [“num1”, “num2”, “num3”, “num4”, “num5”];
② 배열 클래스 방식
var arr = new Array(“num1”, “num2”, “num3”, “num4”, “num5”);
- 위와 같이 2가지 방법이 있지만, 배열 리터럴 방식이 자바스크립트에 의해서 실행되면 내부적으로 배열 클래스 방식
으로 변환되어 실행된다.(중요)
- 아울러, 실무에서는 좀 더 간결한 배열 리터럴 방식을 이용한다.
2. 배열 요소 개수 알아내기
- length프로퍼티를 이용하면 배열 요소 개수를 쉽게 알아낼 수 있다.
var arr = [“num1”, “num2”, “num3”, “num4”, “num5”];
alert(arr.length); //실행결과 5

 

3. 특정 위치의 배열 요소 접근하기
- 배열의 n번째 배열 요소에 접근하는 기능은 []안에 인덱스 값을 넣으면 된다.
var 변수 = 배열명[인덱스] ;
var arr = [“num1”, “num2”, “num3”, “num4”, “num5”];
for(var i=0; i<arr.length; i++) {
var num = arr[i]; //배열 접근
document.write(num + “<br/>”) ;
}
4. 배열을 문자열로 만들기
- 한 번씩 배열을 문자열로 만들어야 하는 경우가 있다. 이 때 join()메서드를 이용한다.
var arr = 배열명.join([seperator]);
매개변수 : seperator은 선택사항이며, 배열 요소를 구분하기 위해 사용하는 문자열이다.생략하면 쉼표(,)가 구분자로
사용된다.
리턴값 : 지정된 구분자로 배열 요소들을 이어 붙여서 만들어진 문자열

 

5. 문자열을 배열로 만들기
- 문자열을 배열로 만들 때는 Array클래스에서 제공하는 split()메서드를 사용하면 된다.실무에서 아주 많이 사용된다.
var arr = 문자열.split(separator);
매개변수 : 구분자로 사용 할 문자열
리턴값 : 구분자로 나눠 만들어진 배열
6. 특정 위치에 배열 요소 추가
- 실무 작업에서 원하는 요소에 배열 요소를 추가할 수 있어야 한다.마지막, 첫 번째, n번째 위치로 나눠서 추가를 할 줄
알아야 한다.
① 배열 마지막 위치에 배열 요소 추가하기(push()메서드 사용)
var result = 배열.push(element[,element]);
매개변수 : 배열 마지막 위치에 추가할 배열 요소
리턴값 : 신규 배열 요소를 추가한 배열을 리턴
② 배열 첫 번째 위치에 배열 요소 추가하기(unShift()메서드 사용)
var result = 배열. unShift(element[,element]);
매개변수 : 배열 첫번째 추가할 배열 요소
리턴값 : 신규 배열 요소를 추가한 배열을 리턴

 

③ 배열 n번째 위치에 배열 요소 추가하기(splice()메서드 사용)
var result = 배열. splice( start, deleteCount[,element]);
매개변수
start : 추가 또는 삭제할 배열 요소의 시작 위치
deleteCount : start부터 시작하여 삭제할 배열 요소의 개수, 요소를 추가할 때는 0을 적용
element : 추가 요소
리턴값 : 삭제한 배열 요소를 추가한 배열을 리턴. 단, 요소를 추가할 경우는 리턴값이 없음
7. 특정 위치의 배열 요소 삭제
① 첫 번째 요소 삭제하기(shift()메서드 사용)
var result = 배열. shift();
매개변수 : 없음
리턴값 : 삭제된 배열 요소
② 마지막 번째 요소 삭제하기(pop()메서드 사용)
var result = 배열. pop();
매개변수 : 없음
리턴값 : 빼낸 마지막 번째 배열 요소

 

③ 배열 n번째 위치에 배열 요소 삭제하기(splice()메서드 사용)
var result = 배열. Splice( start, deleteCount[,element]);
매개변수
start : 삭제할 배열 요소의 시작 위치
deleteCount : start부터 시작하여 삭제할 배열 요소의 개수, 요소를 추가할 때는 0을 적용
element : 삭제 요소
리턴값 : 삭제한 배열 요소를 추가한 배열을 리턴. 단, 요소를 추가할 경우는 리턴값이 없음
8. 배열 정렬하기
- 배열 클래스에는 정렬 기능을 하는 sort()메서드를 사용하면 된다.
① sort()메서드
var result = 배열. sort([compareFunction]);
매개변수 : compareFunction은 정렬 순서를 정의하는 함수이다.생략 시 문자를 오름차순으로 정렬한다.내림차순은
예제로 살펴보자.
리턴값 : 정렬이 완료된 결과값, 정렬에 사용된 원본도 변경된다.

 

② 문자 오름차순 정렬
오름차순은 작은 것 부터 큰 순서대로의 정렬을 의미한다.sort()를 이용하여 오름차순으로 문자를 정렬하고 싶으면
매개변수인 compareFunction을 아래와 같이 만들어 주도록 하자.
배열.sort(function(a, b){
return a – b;
}); 
③ 문자 내림차순 정렬
내림차순은 큰 것 부터 작은 순서대로의 정렬을 의미한다.sort()를 이용하여 오름차순으로 문자를 정렬하고 싶으면
매개변수인 compareFunction을 아래와 같이 만들어 주도록 하자.
배열.sort(function(a, b){
return b > a;
}); 
④ 숫자 정렬하기
sort()는 기본적으로 문자열 정렬 기능이기 때문에 숫자도 문자열로 처리된다.그래서 위와 같이 정의한
compareFunction매개변수를 이용해야지 정상적으로 정렬이 됨을 잊지 않도록 하자.