객체(Object)
객체란 상태(속성)과 기능(오퍼레이션)으로 이루어져 있습니다.
주변의 모든 물체들을 객체라고 할 수있습니다. 기본형은 다음과 같습니다.
객체.메서드();
객체.속성
객체의 종류에는 총 3가지가 있습니다.
내장 객체, 브라우저 객체 모델, 문서 객체가 있습니다.
*내장 객체
내장 객체는 말 그대로 자바스크립트 엔진에 내장되어있어서 꺼내 사용 할 수있습니다.
예를들어 Date, Array, Math 등이 있습니다.
getDate()를 이용하여 날짜를 알수도 있겟죠.
*브라우저 객체 모델(BOM)
window , screen, location, history, navigator 등이 있습니다.
window는 document객체와 location의 상위 객체입니다. 따라서 브라우저 이동하고 싶을 때 window.location.href="이동 사이트 URL" 로 해주시면 됩니다.
*문서 객체 모델(DOM)
문서 객체 모델은 HTML문서 구조입니다.
<html>, <head>, <body>등이 있습니다.
이미지는 <img>의 src속성을 적용시킵니다.
우선 내장객체에 대해 알아보도록 할게요
내장 객체를 생성의 기본형은 다음과 같습니다.
참조변수(인스턴스) = new 생성 함수();
이해를 돕기위해 예시를 보도록 하죠.
즉 tv라는 변수에 Object객체를 생성합니다. tv는 참조변수입니다.
tv를 가지고 적용하는 코드입니다.
tv.color와 tv.price변수에 각 값을 넣습니다. info는 함수입니다. 뒷 단원에서 배우게 될거에요.
즉 Object객체를 new로 생성하고 car 참조변수는 {}로 객체를 생성했습니다.
날짜 정보 객체에 대해 알아보죠.
날짜 객체는 유용합니다. 왜냐하면 어떤 날에 무슨 요일인지 쉽게 파악할 수있고 기념일 계산기도 만들 수 있씁니다.
다음은 기본형입니다.
참조 변수=new Date();
참조 변수=new Date("년/월/일");
참조 변수=new Date("년,월-1,일);
var dat=new Date();
날짜 관련 메서드를 한눈에 표로 보도록 하죠
|
날짜 정보 GET |
날짜 정보 SET |
|
getFullYear(): 연도 정보 |
setFullYear(): 연도 정보 수정 |
|
getMonth(): 월 정보(-1) |
setMonth(): 월 정보 수정(-1) |
|
getDate(): 일 정보 |
setDate(): 일 정보 수정 |
|
getDay():요일 정보(일:0~토:6) |
x |
|
getHours():시 정보 |
setHours() |
|
getMinutes():분 정보 |
setMinutes() |
|
getSeconds(): 초 정보 |
setSeconds() |
|
getMilliseconds():밀리초 정보 |
setMilliseconds() |
|
getTime():1970년 1월 1일 부터 경과된 시간(밀리초) toGMTString():GMT표준 표기 방식으로 문자형 데이터 반환 |
setTime() toLocaleString():운영 시스템 표기 방식으로 반환 |
예를 보도록 하죠.
즉 today 참조 변수 Date객체 생성 후 nowMonth에 달 nowDate에 날짜 nowDay에 일을 저장합니다.
응용으로 연말까지 몇일 남았는지 계산하는 코드를 봅시다.
년도를 nowYear에 넣고 해당 연말 날짜를 theDate 객체에 정보를 담습니다.
diffDate는 연말까지 경과된시간에서 오늘까지 경과된 시간을 뺍니다. 즉 이 값은 경과된 시간입니다.
따라서 result에 천장을 통해 일로 환산해서 출력해줍니다.
수학 객체를 보도록 하죠.
곱하기 나누기 연산등을 쉽게 제공합니다. 또한 기본 연산으로 할 수 없는 반올림 , 최대값 구하기 ,천장, 마루 등을 쉽게 구하도록 제공합니다.
관련 메소드들을 표로 보도록 합시다.
|
종류 |
설명 |
|
Math.abs(숫자) |
숫자 절댓값 |
|
Math.max(숫자1, 숫자2,.....) |
최대값 |
|
Math.min(숫자1, 숫자2,......) |
최소값 |
|
Math.pow(숫자,제곱값) |
거듭제곱 값 반환 |
|
Math.random() |
0~1사이 난수 |
|
Math.round(숫자) |
첫 째자리 반올림 |
|
Math.ceil(숫자) |
첫 째자리에서 무조건 올림 반환 |
|
Math.floor(숫자) |
내림 |
|
Math.sqrt(숫자) |
제곱근값 |
|
Math.PI |
원주율 상수 반환 |
결과는
30
5
2
2
3
0.9809036210412969
3.141592653589793
가 나옵니다.
랜덤을 사용 할 때는 Math.random()*10을 하면 0부터 10까지 실수 난수입니다.
정수로만 난수를 발생시키기 위해서는 floor을 이용하여 Math.floor(Math.random()*11); 해주면 됩니다. 왜냐하면 내림이기 때문에 11로 써주고 내림해줘서 정수만 출력되기 때문입니다.
Math.floor(Math.random()*31)+120;은 과연 범위가 어떻게 될까요 ????
즉 공식화하면 Math.floor(Math.random()*(최댓값-최소값+1))+최솟값; 입니다.
재밌는 가위바위보 게임도 만들 수 있습니다.
가위 바위 보 선택하여 switch문으로 가위일 경우 1 바위일 경우 2 보일 경우 3으로 컴퓨터는 com에 랜덤값으로 1~3난수를 발생시킵니다.
만약에 컴퓨터 발생 난수와 같으면 출력해줍니다.
배열 객체를 보도록 할게요
여러개의 데이터를 저장하기 위해서 필요한 객체입니다.
기본형은 아래와 같습니다.
var 참조변수=new Array();
참조변수[0]=값; .........참조변수[n-1]=값;
var 참조변수=new Array(값1,값2,......);
var 참조변수=[값1,값2,값3,....];
ex)
var a=new Array();
a[0]=1;
a[1]="오잉";
a[2]=true;
var b=new Array(1,"오잉",true);
var c=[1,"오잉",true];
저장된 객체를 참조하여 사용하기위해선 어떻게 해야 할까요????
우선 생성된 변수에 인덱스번호를 붙이면 되겠죠.
참조변수[인덱스]
실행 결과는
배열값 가져오기-1
1
오잉
true
배열값 가져오기-2
1
오잉
true
배열값 가져오기-3
1
오잉
true
이런식으로 나오게 됩니다.
배열 관련 메서드들을 한번 표로 살펴봅시다.
|
종류 |
설명 |
|
join(연결문자) |
배열 객체 연결문자 기준으로 1개 문자형 데이터 반환 |
|
reverse() |
순서를 거꾸로 반환합니다. |
|
sort() |
정렬하여 반환 |
|
slice(index1,index2) |
데이터 중 원하는 인덱스 구간만큼 잘라서 가져옴 |
|
splice() |
지정 데이터 삭제하고 그 구간에 새 데이터 삽입 |
|
concat() |
2개의 배열 객체를 하나로 결합 |
|
pop() |
마지막 인덱스에 저장된 데이터 삭제 |
|
push(new data) |
data를 마지막 인덱스에 삽입 |
|
shift() unshift(new data) |
첫 인덱스 저장 데이터 삭제 가장 앞의 인덱스에 데이터 삽입 |
|
length |
데이터 개수 반환 |
문자열 객체에 대해 알아보도록 하죠
문자형 데이터를 객체로 취급합니다. 가장 많이 사용하므로 중요시 여겨야합니다.
기본형은 다음과 같습니다.
var 참조 변수=new String(문자 데이터);
var 참조 변수=문자형 데이터;
var t=new String("heel"):
var t="heel";
관련 메서드를 표로 보도록하죠 .
|
종류 |
설명 |
|
charAt(index) |
문자열에서 인덱스 해당 번호 문자 반환 |
|
indexOf("찾을 문자") |
문자를 왼쪽부터 찾아 제일 먼저 찾은 인덱스 번호 반환 |
|
lastIndexOf("찾을 문자") |
문자를 오른쪽 부터 찾아 제일 먼저 찾은 인덱스 번호 반환 |
|
match("찾을 문자") |
제일 먼저 찾은 문자를 반환 |
|
replace("바꿀 문자","새 문자") |
바꿀 문자를 찾아 새 문자로 치환 |
|
search("찾을 문자") |
제일 먼저 일치하는 인덱스 번호 반환 |
|
slice(a,b) |
a개의 문자를 자르고 b번째 이후에 문자를 자른후 남은 문자 반환 ex) var str="hello javascript" str.slice(3,7); => lo j를 반환 |
|
substring(a,b) |
a인덱스부터 b인덱스 이전 구간 문자 반환 |
|
substr(a,문자개수) |
문자열에 인덱스a부터 지정한 문자 개수만큼 반환 ex) var str="hello javascript" str.substring(3,2); lo를 반환 |
|
split("문자") |
지정 문자를 기준으로 문자 데이터 나누어 배열에 저장후 반환 |
|
toLowerCase() |
영 문 대문자를 모두 소문자로 |
|
toUpperCase() |
소문자를 모두 대문자로 |
|
length |
문자열개수 반환 |
|
concat("새 문자") |
새문자를 결합 |
|
charCodeAt(index) |
아스키 코드갑 반환 |
|
fromCharCode(아스키 코드 값) |
아스키에 해당하는 문자 반환 |
|
trim() |
공백 문자열 제거 |
연락처에 해당하는 번호를 뒷번호를 ****로 표시하여 출력하고싶으다면
substring으로 0인덱스부터 번호 길이에서 -4를 하면 뒤에 4자리가 없애고 ****을 붙인 결과를 출력한다.
실행결과:
LEEJEONGCHAN
010-2000-****
또한 이메일 유효 검사를 할 때도 사용합니다.
@를 작성을 잘 했는지 확인을 위해서 indexOf("@")으로 0보다 큰 값을 반환한다면 잘쓴겁니다. 그리고 또하나로 뒤에 .com .co.kr .net .or.kr .go.kr 을 잘 썼는지도 확인을 해야합니다. indexOf("해당 배열")으로 0보다 큰 값을 반환하다면 잘쓴겁니다.
코드로 보시죠
다음으로 브라우저 객체 모델(BOM)에 대해 배우도록 하겠습니다. 감사합니다.
'웹 > JavaScript,JQurey' 카테고리의 다른 글
| JavaScript 함수 (0) | 2019.02.25 |
|---|---|
| 객체(2) (0) | 2018.09.09 |
| 제어문(선택문과 반복문) (0) | 2018.09.06 |
| 제어문(조건문에 대해) (0) | 2018.09.05 |
| Javascript 본격 들어가기(2) (0) | 2018.08.22 |
