자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다. 브라우저 안에 미리 정의된 객체 뿐만 아니라 직접 객체를 정의할 수도 있다.
객체(Object)
객체는 기능(함수)과 속성(프로퍼티)으로 이루어져 있으며, 함수와 변수를 섞어 놓은 것을 말한다. 예를 들어 앞서 배웠던 html태그들도 하나의 객체라고 볼 수 있다. 이때 a태그의 기능은 링크를 연결하는 것이고, 속성은 태그안에 쓰이는 href, title, target뿐만 아니라 inline속성을 의미한다.
객체의 속성은 객체에 붙은 변수라고 설명할 수 있다. 객체의 속성은 일반적인 JavaScript 변수와 똑같은데, 다만 객체에 붙어있다는 점만 다르다. 속성에 넣을 땐 간단한 마침표 표기법을 사용한다.
다만 객체는 객체마다 사용할 수 있는 기능과 속성이 정해져 있다.
예를들어 a태그가 가진 inline 속성에 넓이를 지정할 수 없는 것 처럼 해당 객체마다 올바른 기능과 속성을 적용해줘야 한다.
자바스크립트에서 객체의 속성이나 메서드(함수)를 사용하고자 할때에는 아래 문법을 사용한다.
[기본형]
1. 객체.메서드();
:객체의 함수(메서드)를 실행함.
2. 객체.속성;
: 객체가 가지고 있는 속성의 속성값을 반환한다.
3. 객체.속성 = 속성값;
:객체의 속성값을 바꾼다.
객체의 종류
자바스크립트의 객체는 크게 내장 객체(Built-in Object),
브라우저 객체 모델(Browser Object Model), 문서 객체 모델(Document Object Model)로 나눠진다.
내장 객체의 경우 자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해서 사용할 수 있다.
내장 객체로는 문자객체(String),날짜(Date),배열(Array), 수학(Math)객체가 있다.
브라우저 객체 모델은 계층 구조로 내장 되어 있는 객체를 말한다.
브라우저 객체로는 Window, screen , location, history, navigator객체 등이 있다.
(이때 window는 브라우저 자체를 뜻하며, screen은 해상도를 location은 브라우저에 내장되어 있는 주소창을 navigator는 안드로이드나 맥등 운영체제를 뜻한다.)
*내장 객체의 경우 앞글자를 대문자로 작성하며 브라우저 객체의 경우 소문자로 시작한다.
문서객체 모델은 HTML문서 구조를 말한다. HTML문서의 기본 구조는 HTML태그가 최상위 객체이며, 하위 객체로는 head, body가 있다. 하지만 자바스크립트의 문서객체 모델은 IE 8버전 이하에서는 문서 호환성이 떨어지기 때문에 사용하기 힘들다는 단점이 있다. 이러한 점을 극복하기 위해 나온 언어가 바로 '제이쿼리'이다.
객체 생성 방법
위와 같이 객체를 new라는 키워드를 이용해서 생성하고 아래 객체의 프로퍼티 값을 지정할 수 있다.
객체의 함수(메서드)를 실행했을 때 아래와 같이 나타나게 된다. 이때 this는 생성한 객체를 가리킨다.
person을 객체로 생성한 뒤 아래와 같이 이름과 생년월일을 프로퍼티로 적용한 모습이다.
날짜 정보 객체(Date)
날짜 관련 메소드
날짜 관련 메서드에는 날짜의 정보를 가져오는 GET메서드와
날짜 정보를 수정하는 SET메서드로 나눠진다.
[GET]
1. getFullYear() : 연도 정보를 가져옴.
2. getMonth() : 월 정보를 가져옴.(월-1된 값으로 출력된다.)
3. getDate() : 일 정보를 가져옴.
4. getDay() : 요일 정보를 가져옴. 숫자로 가져온다. (일:0 ~ 토:6) 0~6까지로 표현
5. getHours() : 시 정보를 가져옴.
6. getMinutes() : 분 정보를 가져옴.
7. getSeconds() : 초 정보를 가져옴.
8. getMilliseconds(): 밀리초 정보를 가져옴. (1/1000초)
1000이 1초이다. 500은 0.5초가 된다.
9. getTime() : 1971년 1월 1일부터 경과된 시간을 밀리초로 표기함.
10. toGMTString() : GMT 표준 표기 방식으로 문자형 데이터로 시간을 반환함.
[SET]
1. setFullYear() : 연도 정보를 수정함.
2. setMonth() : 월 정보를 수정함.(월-1된 값으로 출력)
3. setDate() : 일 정보를 수정함.
4. 요일은 일 정보가 바뀌면 같이 수정되므로 set메서드는 없음.
5. setHours() : 시 정보를 수정함.
6. setMinutes() : 분 정보를 수정함.
7. setSeconds() : 초 정보를 수정함.
8. setMilliseconds(): 밀리초 정보를 수정함. (1/1000초)
1000이 1초이다. 500은 0.5초가 된다.
9. setTime() : 1971년 1월 1일부터 경과된 시간을 밀리초로 수정함.
10. toLOCALString() : 운영 시스템 표기 방식으로 문자형 데이터로 반환함.
날짜나 시간 관련 정보를 제공받고 싶을 때 날짜 객체(Date)를 생성한다.
날짜 정보 객체는 날짜와 관련된 작업을 할 때 유용한 객체이다.
날짜 정보 객체를 이용하면 블로그 게시글의 날짜, 시간 또는 댓글이 언제 달렸고, 몇 분전에 생성되었는지 나타내거나 D-day계산기 등을 만들 수 있다.
var today = new Data();
날짜 객체를 생성한다.
[기본형]
var 참조변수 = new Date();
=>오늘 현재 날짜에 대한 정보를 얻을 때
var 참조변수 = new Date("연도/월/일") => 문자열일 때
var 참조변수 = new Date(연도, 월-1, 일); => 숫자일 때
(컴퓨터에서 출력할 때 월-1된 값이 나오기때문에 12월을 컴퓨터에 입력하고 싶을 경우에 -1인 11월을 입력해야한다.)
만약 날짜 계산을 해야 한다면 숫자형식의 객체 문법을 사용하고,
숫자는 0월부터 시작하여 11월까지 있다.
new Date로 날짜 객체인 'today'객체를 생성 후 아래의 각각의 날짜 정보를 할당할 변수값을
지정한다. 그러면 전체 날짜를 특정 부분 잘라서 보여줄 수 있다.
Month는 컴퓨터가 출력할 때 -1되어 나타나기 때문에 +1을 해줘야 화면에 현재 월이 출력된다.
수학객체(math)
자바스크립트의 내장 객체에는 수학과 관련된 기능과 상수를 제공하는 수학 객체가 있다. 앞에서 배운 산술 연산만으로는 반올림, 올림, 최댓값 등을 구할 수 없기 때문에 수학 객체를 이용하면 어려운 수학을 연산할 수 있다.
수학객체의 메서드와 상수
1.Math.abs(숫자); : 숫자의 절댓값을 반환한다.
2.Math.max(숫자1, 숫자2, 숫자3...)
: 숫자의 최댓값(가장 큰 수)을 반환한다.
3.Math.min(숫자1, 숫자2, 숫자3...)
:숫자의 최솟값(가장 작은 수)을 반환한다.
4.Math.pow(숫자, 제곱근)
:숫자의 거듭 제곱값을 반환한다.
5.Math.random()
:0~1사이의 난수(랜덤한 숫자)를 반환한다.
6.Math.round(숫자)
: 소숫점 첫째 자리에서 반올림하여 정수를 반환한다.
7.Math.ceil(숫자)
:소숫점 첫째 자리에서 무조건 올림하여 정수를 반환한다.
8.Math.floor(숫자)
:소숫점 첫째 자리에서 무조건 내림하여 정수를 반환한다.
9. Math.sqrt(숫자)
:숫자의 제곱근 값을 반환한다.
10.Math.PI
:원주율 상수를 구한다.
var num = 2.1234;
var maxNum = Math.max(10, 5, 8, 3), //10
minNum = Math.min(10, 5, 8, 3), //3
roundNum = Math.round(num), //2
floorNum = Math.floor(num), //2
cellNum = Math.ceil(num), //3
rndNum = Math.random(),
piNum = Math.PI;
변수 여러개 선언할 때 콤마(,)를 이용하면 한번에 쓸 수 있다.
document.write(maxNum, "<br>");
document.write(minNum, "<br>");
document.write(roundNum, "<br>");
document.write(floorNum, "<br>");
document.write(rndNum, "<br>");
document.write(piNum, "<br>");랜덤 메서드를 사용하면 0~1 사이의 난수가 발생한다.
만약 0~1 사이가 아닌 임의로 지정된 구간의 숫자를 실수로 반환받고 싶다면 아래 공식을 이용한다.
ex) 0~10사이의 난수를 실수로 반환받을 때
Math.random()*10
ex) 0~10사이의 난수를 정수로 반환받을 때
만약 0~10까지의 정수로 난수를 반환받고 싶다면
Math.floor()를 이용한다. floor()메서드는 값을 내리기 때문에 10이 아닌 11을 사용한다.
Math.floor(Math.random()*11)
Math.floor를 적용하면 무조건 1을 내려버리기 때문에 곱할때 (10+1)을 곱해준다.
Math.random()을 이용해서 120~150사이의 난수를 정수로 반환
받으려면 이런 공식을 사용함.
ex) 120~150사이의 난수를 정수로 반환 받을 때
Math.floor(Math.random() 31 0~30까지의 숫자를 추첨
+120 (최댓값150이 나오려면 120을 더해야 한다. 30+120)
특정 구간의 난수를 정수로 반환받는 공식
Math.floor(Math.random() * (편차의 최솟값 +1) + 범위의 최솟값
배열(Array)★★★
변수에는 데이터가 하나만 저장된다고 했다. 하지만 하나의 변수에 여러 데이터를 묶어 저장하고자 할 때 '배열(array)'를 사용한다.
예를들어 배열은 초콜렛 상자처럼 초콜렛이 몇 개이든 상관없이 하나의 박스에 담은 것과 같다.
즉, 변수 안에 배열이 담겨 있으면 배열안에는 데이터가 수 없이 나열될 수 있다.
배열을 표기할때 보통 []를 이용해 표기한다.
배열안에 들어있는 데이터는 순서대로 '인덱스 번호'를 부여받는다.
인덱스 번호는 0부터 시작하여 마지막 데이터까지 부여받는다.
[기본형]
1. var 참조변수 = [데이터1,데이터2,데이터3...];
: 참조 변수안에 데이터가 담긴 배열을 저장함.
2. 참조변수[0];
: 참조 변수의 배열안에 인덱스 번호 0번의 데이터를 불러옴.
3. var [변수1, 변수2] = [데이터1 ,데이터2]
: Destructuring
변수에는 인덱스의 개념이 있어 0번부터 고유의 번호를 물려받는다. 데이터가 먼저 들어온 순서대로 고유번호를 물려받는다. 이때 참조변수를
0이라고하면 0번째에 있는 데이터를 불러오라는 뜻이다.
이때 배열에는 숫자, 문자열, 함수, 객체와 같은 서로 다른 타입의 데이터가 혼합되어 들어갈 수 있다.
위의 이미지와 같이 arr1[인덱스번호];를 입력하면 인덱스번호(0~n)의 데이터를 불러온다.
또한 배열의 데이터를 변수에 넣어 사용할 수도 있다.
인덱스번호가 0부터 시작하므로 i는 0부터 시작하며 arr2의 총 갯수만큼 실행을 반복한다.
배열의 다양한 메서드
배열 객체에 들어 있는 데이터의 순서를 바꾸거나 배열끼리 합치거나
혹은 배열의 특정 구간만큼을 잘라내고 싶을때 사용하는 메서드들이
있다. 또한 배열객체에 새 데이터를 넣거나 삭제할 수도 있다.
[종류]
1. .join(연결 문자) : 배열객체의 데이터를 연결 문자를 기준으로 1개의 문자형 데이터로 반환한다.
-
.reverse() : 배열객체의 데이터 순서를 거꾸로 바꾼 후 반환함.(최신게시물이 먼저보여주게 만들때 사용한다.)
-
.sort() : 배열객체의 데이터를 오름차순으로 정렬한다.(abcde... 1,2,3,4,5... 적은가격순)
-
.slice(index1, index2)
: 배열객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열객체로 가져온다.
: 하지만 index1부터 index2까지 모든 데이터를 반환하는 것이 아니라, index2번의 앞 데이터까지만 잘라서 배열 객체로 가져온다. 즉, .slice(0,5)라고 쓰면 0번부터 5번까지를 다 가져 오는 것이 아니라 0~4번 인덱스의 데이터까지만을 잘라서 배열객체로 가져온다. -
.splice(index1, index2, 데이터1, 데이터2...)
: 배열 객체의 지정 데이터를 삭제하고, 그 구간에 새 데이터를 집어넣는다.
-
.concat() : 2개의 배열 객체를 하나의 배열로 합친다.
예를들어 arr1=[1,2] 와 arr2=[3,4]가 있을 때 arr1.concat(arr2) = [1,2,3.4] 이런식으로 합칠 수있다. -
.pop() : 배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제한다.
-
.push(새 데이터) : 배열에 마지막 인덱스에 새 데이터를 저장함.
-
.shift() : 배열에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제한다.
-
.unshift(새 데이터) :배열에 첫 번째 인덱스에 새 데이터를 저장함.
-
.length : 배열에 저장된 총 데이터의 갯수를 반환한다.
(예시)
