* 객체란?
- 자바스크립트는 객체(Object) 기반 프로그래밍 언어.
- 객체를 구성하는 요소로는 속성(Property)과 기능(Method)가 있음.
- 자바스크립트 객체의 메소드와 속성을 사용하는 기본형
|
1. 객체.메서드() // 갹체의 매서드를 실행함. 2. 객체.속성; 또는 객체.속성=값; // 객체의 속성값을 가져옴. || 객체의 속성값을 바꿈. |
* 객체의 종류
- 자바스크립트의 객체는 크게 내장 객체, 브라우저 객체 모델(BOM: Browser Object Model), 문서 객체 모델(DOM: Document Object Model)로 나눌 수 있음.
1) 내장 객체
- 내장 객체는 자바스크립트 엔진에 내장되어 있어, 필요한 경우 생성해 사용할 수 있음.
- 내장 객체로는 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있음.
- 예를 들어 오늘 날짜를 알고 싶다면 오늘 일자를 알려 주는 메서드 getDate()를 사용하면 됨.
2) 브라우저 객체 모델(BOM)
- 브라우저에 계층적으로 내장되어 있는 객체들.
- window, screen, location, history, navigator 객체 등이 있음.
- 브라우저(window)는 document와 location 객체의 상위 객체임.
3) 문자 객체 모델(DOM)
- (X)HTML 문서 구조
- (X)HTML 문서의 기본 구조는 최상의 객체로 <html>이 있으며, 그 하위 객체로는 <head>와 <body>가 있음.
- 자바스크립트의 문서 객체 모델은 IE 8 이하 버전에서 호환성이 떨어지기 때문에 사용이 힘들다는 단점이 있음.
- 그래서 최근에 제이쿼리 문서 객체 모델을 많이 사용함.
* 내장 객체
- 내장 객체(Built-in Object)란 브라우저의 자바스크립트 엔진에 내장된 객체를 말하며, 필요한 경우 객체를 생성해 사용할 수 있음.
- 내장 객체로는 문자(String), 날짜(Date), 배열(Array), 수학(Math), 정규 표현 객체(RegExp Object) 등이 있음.
[내장 객체 생성하기]
|
참조 변수(인스턴스 네임)=new 생성 함수() |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
<<script type="text/javascript">
//<![CDATA[
var tv=new Object(); // 생성된 객체를 변수 tv가 참조함.
// tv 객체의 속성을 생성함.
tv.width="30cm";
tv.height="25cm";
tv.weight="20kg";
tv.color="white";
// tv 객체의 off 기능(메서드)을 생성함.
tv.off=function() {
document.write("전원 off", "<br />");
}
document.write(tv.width, "<br />"); // tv의 너비 속성을 출력
document.write(tv.height, "<br />"); // tv의 높이 속성을 출력
document.write(tv.weight, "<br />"); // tv의 무게 속성을 출력
document.write(tv.color, "<br />"); // tv의 컬러 속성을 출력
tv.off(); // tv에 off 기능을 실행함
//]]>
</script>> |
cs |
[날짜 정보 객체]
- 날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체(Date Object)를 생성함.
- 날짜와 관련된 작업을 할 때 유용한 객체임.
- Date 객체는 다음과 같이 생성함.
|
참조 변수=new Date(); 예) var t=new Date(); |
- 특정 날짜의 Date 객체는 다음과 같이 생성함.
|
참조 변수=new Date("연/월/일"); 예) var t=new Date("2002/5/31"); 참조 변수=new Date(연, 월-1, 일); 예) var t=new Date("2002,4,31); |
- 날짜 관련 메서드
|
날짜 정보를 가져올 때 (GET) |
날짜 정보를 수정할 때 (SET) | ||
|
getFullYear() |
연도 정보를 가져옴. |
setFullYear() |
연도 정보만 수정 |
|
getMonth() |
월 정보를 가져옴. (현재 월-1) |
setMonth() |
월 정보만 수정 (월-1) |
|
getDate() |
일 정보를 가져옴. |
setDate() |
일 정보만 수정 |
|
getDay() |
요일 정보를 가져옴. (일:0 ~ 토:6) |
'요일'은 날짜를 바꾸면 자동으로 바뀌므로 setDay는 없음. | |
|
getHours() |
시 정보를 가져옴. |
setHours() |
시 정보만 수정 |
|
getMinutes() |
분 정보를 가져옴. |
setMinutes() |
분 정보만 수정 |
|
getSounds() |
초 정보를 가져옴. |
setSeconds() |
초 정보만 수정 |
|
getMilliseconds() |
밀리초 정보를 가져옴. (1/1000초 단위) |
setMilliseconds() |
밀리초 정보만 수정 |
|
getTime() |
1970년 1월 1일부터 경과된 시간을 밀리초로 표기함. |
setTime() |
1970년 1월 1일부터 경과된 시간을 밀리초로 수정 |
|
toGMTString() |
GMT 표준 표기 방식으로 문자형 데이터로 반환함. |
toLocaleString() |
운영 시스템 표기 방식으로 문자형 데이터로 반환함. |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<<script type="text/javascript">
//<![CDATA[
var t=new Date();
var nowMonth=t.getMonth();
var nowDate=t.getDate();
var noewDay=t.getDay();
document.write("현재 월:"+nowMonth, "<br />");
document.write("현재 일:"+nowDate, "<br />");
document.write("현재 요일:"+nowDay, "<br />");
var m=new Date(2002,4,31); // 2002(5.31) 날짜 객체를 생성함.
var theMonth=m.getMonth();
var theDate=m.getDate();
var theDay=m.getDay();
document.write("2002월드컴 몇 월:"+theMonth, "<br />");
document.write("2002월드컴 몇 일:"+theDate, "<br />");
document.write("2002월드컴 무슨 요일:"+theDay, "<br />");
//]]>
</script>> |
cs |
- 특정 날짜부터 특정 날짜까지 며칠이 남았는지 구하는 형식은 다음과 같음. (이때 남은 일수는 밀리초(1/1000초) 단위로 계산됨.)
|
남은 일수(밀리초) = 특정 날짜 객체 = 현재 날짜 객체 |
|
1초 = 1000(msc) 1분(60초) = 1000 * 60 // 60,000(msc) 1시간(60분) = 1000 * 60 * 60 // 3,600,000(msc) 1일(60분*24) = 1000 * 60 * 60 * 24 // 86,400,000(msc) |
[숫자 객체]
- 숫자 객체(Number Object)는 자바스크립트를 이용하여 숫자를 표기할 때, 표현 가능한 수의 속성과 숫자 표기법에 대한 메서드를 제공함.
|
var 참조 변수 = new Number(값); 또는 var 참조 변수 = 값; |
- 자바스크립트의 표현 가능한 숫자의 속성을 알고 싶다면 다음과 같이 사용함.
|
Number.속성; |
- 숫자에 대한 표기법 관련 메서드를 사용하려면 다음과 같이 사용함.
|
객체.표기 메서드() |
- Number 객체의 속성
|
속성 |
설명 |
|
MAX_VALUE |
표현 가능한 가장 큰 수 |
|
NIN_VALUE |
표현 가능한 가장 작은 수 |
|
POSITIVE_INFINITY |
무한대 수 표기 |
|
NEGATIVE_INFINITY |
음의 무한대 수 표기 |
|
NaN |
숫자가 아닌 경우 표기 |
- Number 객체의 메서드
|
속성 |
설명 |
|
toExponential(n) |
지수 표기법으로 소수점 n자리만큼 문자형 데이터로 반환함. |
|
toFixed(n) |
소수점 n자리만큼 반올림하여 문자형 데이터로 반환함. |
|
toPrecision(n) |
유효 숫자 n의 개수만큼 반올림하여 문자형 데이터로 반환함. |
|
toString() |
숫자형 데이터를 문자형 데이터로 반환함. |
|
valueOf() |
객체의 원래 값을 반환함. |
|
parseInt(값) |
데이터를 정수로 변환하여 반환함. |
|
parseFloat(값) |
데이터를 실수로 변환하여 반환함. |
[수학 객체]
- 자바스크립트 내장 객체에는 수학과 관련한 기능과 속성을 제공하는 수학 객체(Math Object)가 있음.
- 더하기, 곱하기, 나누기 등은 산술 연산자를 사용하면 됨.
- 수학 객체의 메서드 및 상수
|
종류 |
설명 |
|
Math.abs(숫자) |
숫자의 절댓값을 반환함. |
|
Math.max(숫자 1, 숫자 2, 숫자 3, 숫자 4) |
숫자 중 가장 큰 값을 반환함. |
|
Math.min(숫자 1, 숫자 2, 숫자 3, 숫자 4) |
숫자 중 가장 작은 값을 반환함. |
|
Math.pow(숫자, 제곱값) |
숫자의 거듭제곱한 값을 반환함. |
|
Math.random() |
0~1 사이에 난수를 반환함. |
|
Math.round(숫자) |
소수점 첫째 자리에서 반올림하여 정수를 반환함. |
|
Math.ceil(숫자) |
소수점 첫째 자리에서 무조건 올림해서 정수를 반환함. |
|
Math.floor(숫자) |
소수점 첫째 자리에서 무조건 내림해서 정수를 반환함. |
|
Math.sqrt(숫자) |
숫자의 제곱근 값을 반환함. |
|
Math.PI |
원주율 상수를 반환함. |
- 다음과 같이 Math.random()을 이용하면 0부터 10까지 난수를 반환함.
|
Math.random()*10; |
- 만일 Math.random()를 이용하여 0부터 10까지 정수로만 난수를 반환시키려면 다음과 같이 Math.floor()를 이용함.
|
Math.floor(Math.random()*11); // 0부터 10까지 난수를 발생하여 소수점 값을 제거함. |
- 난수를 발생시켜 원하는 구간 정수의 값 구하기
|
Math.floor(Math.random()*(최댓값-최솟값+1)+최솟값 |
[배열 객체]
- 배열 객체의 기본형
|
var 참조 변수=new Array(); 참조 변수[0]=값1; 참조 변수[1]=값2; ... 참조 변수[n-1]=값n;
var 참조 변수=new Array(값1, 값2, 값3, ..., 값n);
var 참조 변수=[값1, 값2, 값3, ..., 값n]; |
- 배열 객체의 메서드 및 속성
|
속성 |
설명 |
|
join(연결 문자) |
배열 객체에 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환함. |
| reverse() | 배열 객체에 데이터의 순서를 거꾸로 바꾼 후 반환함. |
| sort() |
배열 객체에 데이터를 오름차순으로 정렬함. |
|
slice(index1,index2) |
배열 객체에 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옴. |
| splice() | 배열 객체에 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있음. |
| concat() | 2개의 배열 객체를 하나로 결합시킴. |
| pop() | 배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제함. |
| push(new data) |
배열 객체 마지막 인덱스에 새 데이터를 삽입함. |
| shift() | 배열 객체에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제함. |
|
unshift(new data) |
배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입함. |
| length | 배열에 저장된 총 데이터의 개수를 반환함. |
[문자 객체]
- 문자 객체(String Object)는 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 사용함.
- 문자 객체 생성법
|
var 참조 변수=new String(문자형 데이터) |
|
var 참조 변수=문자형 데이터 |
- 예)
|
var t=new String("hello javascript"); // 문자 객체 생성 |
|
var t="hello javascript"; // 문자 객체 생성 |
- 문자 객체 메서드 및 속성
|
종류 |
설명 |
|
charAt(index) |
문자열에서 인덱스 번호에 해당하는 문자를 반환함. |
|
indexOf("찾을 문자") |
문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 문자의 인덱스 번호를 반환함. 만일 찾는 문자가 없으면 -1을 반환함. |
|
lastIndexOf("찾을 문자") |
문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 문자의 인덱스 번호를 반환함. 만일 찾는 문자가 없으면 -1을 반환함. |
|
match("찾을 문자") |
문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 찾은 문자를 반환함. 만일 찾는 문자가 없으면 -1을 반환함. |
|
replace("바꿀 문자", "새 문자") |
문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 최초로 찾은 문자를 새 문자로 치환함. |
|
search("찾을 문자") |
문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 인덱스 번호를 반환함. |
|
slice(a, b) |
2개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환함. 파라미터에 -1을 적을 경우, -1은 뒤에서 1글자를 가리킴. |
|
substring(a, b) |
a 인덱스부터 b 인덱스 이전 구간의 문자를 반환함. |
|
substr(a, 문자 개수) |
문자열 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환함. |
|
split("문자") |
지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환함. 예) vat str="webkmobilek2002"; var arr=str.split("K"); -> arr="web mobile 2002" |
|
toLowerCase() |
문자열에서 영문 대문자를 모두 소문자로 바꿈. |
|
toUpperCase() |
문자열에서 영문 소문자를 모두 대문자로 바꿈. |
|
length |
문자열에서 문자의 개수를 반환함. |
|
concat("새로운 문자") |
문자열에 새로운 문자열을 결합함. |
|
charCodeAt("찾을 문자") |
찾을 문자의 아스키 코드 값을 반환함. |
|
fromCharCode(아스키 코드 값) |
아스키 코드 값에 해당하는 문자를 반환함. |
|
trim() |
문자의 앞 또는 뒤에 공백 문자열을 삭제함. (" hello " -> "hello") |
[정규 표현 객체]
- 정규 표현(RegExp) 객체는 입력 요소에 데이터를 규칙에 맞게 작성했는지 판단해서 알려주는 객체임.
- 즉, 내가 지정한 규칙대로 단어가 입력되었는지, 잘못된 단어를 포함하고 있는지 찾을 때 사용함.
- 정규 표현 객체를 생성하는 기본형
|
1. var 참조 변수=new RegExp(패턴, 검색 옵션) 2. var 참조 변수=/패턴/검색 옵션 |
- 검색 옵션을 사용하면 일치하는 단어를 찾을 때, 다양한 조건과 규칙을 붙여 검색할 수 있음.
- 정규 표현 검색 옵션
|
종류 |
설명 |
|
* |
0회 이상 일치하는 문자를 검사할 때 사용함. |
|
+ |
1회 이상 일치하는 문자를 검사할 때 사용함. |
|
i |
찾는 문자가 영문일 경우 대·소문자를 구분하지 않음. |
|
? |
0회 또는 1회, 규칙에 맞는 문자가 있는지 검사함. |
|
g |
옵션에 g가 없으면 데이터의 왼쪽부터 규칙을 일치하는 문자 한 개만 찾지만, g를 넣으면 규칙에 맞는 모든 문자를 찾음. |
|
m |
데이터의 행이 바뀌어도 규칙에 맞는 문자를 찾음. |
|
$ |
문자열 끝부분에 규칙에 맞는 문자를 찾음. |
|
^ |
문자열 앞에서부터 규칙에 일치하는 문제를 찾음. 또는 부정을 나타냄. |
|
\d |
숫자 하나를 찾음. |
|
\D |
숫자가 아닌 문자 하나를 찾음. |
|
\s |
공백 문자(스페이스)를 찾음. |
|
[0-9][A-Z][a-z] |
숫자, 대문자 영문, 소문자 영문을 찾음. |
|
\w |
알파벳, 숫자, 밑줄(_) 기호를 찾음. |
|
\W |
알파벳, 숫자, 밑줄(_) 기호를 제외한 문자를 찾음. |
|
a|b |
a 또는 b인지 검사할 때 사용함. |
- 정규 표현 메서드
|
종류 |
설명 |
| test() |
지정된 규칙에 맞는 단어가 있으면 true 값을 반환함. |
| exec() | 지정된 규칙에 맞는 단어가 있으면 해당 단어를 반환함. |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<<script type="text/javascript">
//<![CDATA[
var str="Html Css Jquery";
var reg1=/css/; // var reg1=new RegExp("css");
//변수 str에 데이터가 reg1에 정규 표현 규칙을 잘 지켰으면 true를 반환하고, 안 지켰을 경우에는 false를 반환함.
var result_1=reg1.test(str);
document.write(result_1,"<br />");
// 옵션에 'i'를 입력하면 영문 대소문자를 구분하지 않음
var reg2=/css/i; // var reg2=new RegExp("css","i");
var result_2=reg2.text(str);
document.write(result_2,"<br />");
//]]>
</script>> |
cs |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > JavaScript' 카테고리의 다른 글
| 이벤트 (Event) (0) | 2017.05.21 |
|---|---|
| 함수 (Function) (0) | 2017.05.20 |
| 문서 객체 모델(DOM) (0) | 2017.05.20 |
| 브라우저 객체 모델(BOM) (0) | 2017.05.20 |
| 자바스크립트 기초 문법 (0) | 2017.05.20 |
| 쿠키(Cookie) (0) | 2017.05.18 |
| JavaScript의 메서드 (0) | 2017.05.18 |
| JavaScript 이벤트 (0) | 2017.05.18 |
