실세계의 객체들을 다룰수 있도록 자바스크립트에 객체 개념이 도입되었다. 객체의 고유한 속성을 property 라고 부르며 객체는 여러 property 와 값의 쌍으로 표현된다. 또한 객체는 여러개의 함수를 가질수 있는데 함수를 method 라고 부른다. 메서드는 다른 객체나 코드로 부터 호출되며 , 주로 객체 내부의 프로퍼티 값을 조작하거나 연산을 수행하고 결과를 리턴한다.
* 자바 스크립트 객체유형
개발자가 자바스크립트 코드로 객체를 만들어 사용할수 있지만 브라우저는 많은 자바스크립트 객체를 만들어 제공하므로 이들을 사용하기만 하면 된다. 브라우져가 제공하는 자바스크립트 객체는 다음의 3가지 유형으로 나뉜다.
. 코어객체 : 기본 객체로서 Array , Date , String , Math 타입등이 있으며 , 웹 페이지나 , 웹 서버 응용프로그램 어디서나 사용할수 있다.
. HTML DOM 객체 : HTML 페이지에 작성된 HTML 태그들을 브라우져가 하나씩 객체화 한(DOM : Document Object Model) 것들로 HTML 페이지의 내용과 모양을 제어하기 위해 사용되는 객체들이다.
. 브라우져 관련 객체 : 브라우저의 종류나 , 스크린의 크기정보를 제공하거나 새 윈도우를 생성하는 등 브라우져와 관련된 객체들로 BOM(Browser Object Model) 이라고 부른다
* 코어 객체 종류
코어 객체들은 자바 스크립트 언어가 실행되는 어디서나 사용가능한 객체들로서 여러 타입이 있다.
코어 객체의 생성은 항상 new 키워드를 사용한다
var today = new Date();
var msg = new String("Hello");
여기서 today, msg 는 생성된 객체를 가르키는 레퍼런스 변수이다. 이것을 객체라고 부른다.
* 객체의 접근
객체가 생성되면 객체 내부에는 프로퍼티와 메서드가 존재하며 이들은 점(.) 연산자를 이용하여 접근한다.
obj.프로퍼티 = 값; => 객체 obj 의 프로퍼티 값 변경 변수 = obj.프로퍼티; => 객체 obj 의 프로퍼티값 알아내기 , 변수에 대입 obj.메서드(매개변수,,,,); => 객체 obj 의 메서드 호출
. Array
배열 : 배열은 여러개의 원소들을 연속적으로 저장하고 전체를 하나의 단위로 다루는 데이터 구조이다. 배열의 각원소는 [ ] 기호와 0에서 시작하는 인덱스를 이용하여 접근한다.
. 배열 만드는 방법 1. [ ] 로 배열 만들기 2. Array 객체로 배열 만들기
만드는 방법은 다르지만 일단 배열이 생성되면 사용하는 방법은 같다.
var week = ["월","화","수","목","금","토","일"] ; var plots = [-20 , -5 , 0 , 15 , 20] ;
week[6] = "Sunday"; => week[6] 의 값을 "일" 에서 "Sunday"로 변경 var p = plots[1]; => p 는 -5
<body>
<h3>[] 로 배열 만들기</h3>
<hr>
<script>
var plots = [20,5,8,15,20]; //원소 5개의 배열
document.write("var plots = [20,5,8,15,20]<br>");
plots[8] = 13;
// 인덱스 8 에 13값을 넣는다는 의미이다 .
// 이런식으로 배열을 건너뛰면 그사이 배열은 undefined 로 출력된다.
for(i=0;i<plots.length;i++){ // 5 대신 plots.length 해도됨
var size = plots[i] // plots 배열의 i 번째 원소
while(size>0){
document.write("*");
size--;
}
document.write(" : "+ plots[i] + "<br>");
}
</script>
</body>
위의 html 를 출력한 것
plots [ 8 ] 에 13을 넣었을때 중간에 plots[ 5 ] ,plots[ 6 ] , plots[ 7 ] 이 비어있지만 undefined 로 채워진채로 출력된다. 에러가 생성되지 않음
. 배열 크기와 원소 추가
배열은 처음 만들어진 크기로 고정되지않고 , 원소를 추가하면 늘어 난다.
plots[5] = 33; plots[6] = 77;
. Array 로 배열 만들기
자바 스크립트의 코어 객체인 Array 를 이용하여 배열을 생성할수 있으며 앞의 week 배열을 Array 를 이용하여 배열을 만들면
var week = new Array("월","화","수","목","금","토","일"); 로 된다.
var week = ["월","화","수","목","금","토","일"];
. 비어있는 배열생성
초기에 배열의 원소 갯수를 예상 할수 없는 경우 빈 배열을 생성할수 있다.
var week = new Array();
week 는 빈배열이지만 원소를 순서대로 삽입하면 배열의 크기가 자동으로 늘어난다 반드시 인덱스는 순서대로 삽입하여야 한다.
. 배열 생성 방법 의미
new Array(); 빈 배열 생성 추가할때 마다 배열 크기 자동늘림
new Array(size); size 갯수의 배열 생성 ,원소 초기화 되지 않음
new Array(e1,e2,~en) n 개의 원소에 대한 초기값과 함께 배열생성
. 배열의 특징
자바스크립트의 배열은 [ ] 로 생성하든 new Array() 로 생성하든 모두 Array() 객체로 다룬다. 그러므로 모두 아래의 Array 객체 메서드를 사용할수 있다.
또한 배열은 다양한 데이터가 혼재되어 저장될수 있다.
메서드 의미
concat(arr) 현재 배열에 배열 arr 원소들을 덧붙여 만든 새 배열
join(separator) 배열의 모든 원소들을 연결하여 하나의 문자열로 만들어 리턴, 각원소 사이에 separator 로 지정된 문자열 삽입, separator 가 생략되면 ',' 가 사용
reverse() 원소를 역순으로 재배열하고 이를 복사한 새로운 배열 리턴
slice(isxA[,idxB]) 두 인덱스 idxA 와 idxB 사이의 원소들로 구성된 새 배열 리턴 , idxB 의 원소는 포함되지 않음 idxB 가 생략되면 끝 원소까지 포함
sort() 문자열을 사전순으로 정렬하고 이를 복사한 새 배열리턴
toString() 원소들을 모두 연결하여 하나의 문자열로 만들어 리턴 , 원소와 원소사이 ',' 삽입
. Date
Date 객체는 시간 정보를 담는 객체이다.
var now = new Date(); => 현재 날짜 시간 (시 , 분 , 초) 값으로 초기화된 객체 생성
<h3>Date 객체로 현재 시간 알아내기</h3>
<hr>
<script>
var now = new Date(); //현재시간 값을 가진 Date 객체 생성
document.write("현재시간 : "+ now.toUTCString() +"<br><hr>");
document.write(now.getFullYear()+"년도<br>");
document.write(now.getMonth() + 1 +"월<br>"); //Month 는 +1 해줘야한다. 기본형식이다.
document.write(now.getDate()+"일<br>");
document.write(now.getHours()+"시<br>");
document.write(now.getMinutes()+"분<br>");
document.write(now.getSeconds()+"초<br>");
document.write(now.getMilliseconds()+"밀리초<br><hr>");
var next = new Date(2022,8,21,11,15,18); //8은 9 월
document.write("next.toLocaleString() : "+next.toLocaleString()+"<br>");
</script>
