[JS] 객체 (Object)

객체

객체란?

자바스크립트에서의 객체는 속성과 함수들의 집합

객체의 종류

• 내장 객체
  자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해서 사용가능
  내장 객체의 종류로는 문자, 날짜, 배열, 수학 객체등 여러가지 객체가 존재
• 브라우저 객체 모델 (BOM)
  브라우저에 계층 구조로 내장되어 있는 객체
  브라우저 객체의 종류는 window, screen, location, history, navigator 객체 등
• 문서 객체 모델 (DOM)
  문서 객체 모델은 HTML 문서 구조를 말함

내장 객체

날짜 정보 객체

날짜나 시간 관련 정보를 제공받고 싶을 때 날짜 객체를 생성하여 사용한다.

기본형

var 참조 변수 = new Date();

특정 날짜 정보 객체를 만들 때

var 참조 변수 = new Date('년/월/일');
var 참조 변수 = new Date('년-월-일');
var 참조 변수 = new Date(년,월,일);

날짜 정보를 가져올 때 사용하는 함수

함수명	설명
getFullYear()	연도 정보를 가져옴
getMonth()	월 정보를 가져옴 (현재 월 - 1)
getDate()	일 정보를 가져옴
getDay()	요일 정보를 가져옴 (일 (0) ~ 토 (6))
getHours()	시 정보를 가져옴
getMinutes()	분 정보를 가져옴
getSeconds()	초 정보를 가져옴
getMilliseconds()	밀리초 정보를 가져옴
getTime()	1970년 1월 1일부터 경과된 시간을 밀리초로 표기함
toGMTString()	GMT 표준 표기 방식으로 문자형 데이터로 반환함

날짜 정보를 수정할 때 사용하는 함수

함수명	설명
setFullYear()	연도 정보만 수정
setMonth()	월 정보만 수정 (현재 월 - 1)
setDate()	일 정보만 수정
setDay()	요일 정보만 수정 (일 (0) ~ 토 (6))
setHours()	시 정보만 수정
setMinutes()	분 정보만 수정
setSeconds()	초 정보만 수정
setMilliseconds()	밀리초 정보만 수정
setTime()	1970년 1월 1일부터 경과된 시간을 밀리초로 수정
toLocaleString()	운영 시스템 표기 방식으로 문자형 데이터로 반환

수학 객체

수학과 관련된 기능과 속성을 제공한다.

수학 객체의 메서드 및 상수

종류	설명
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	원주율 상수를 반환

배열 객체

여러 개의 데이터를 하나의 저장소에 저장하려면 배열 객체를 생성한다.

기본형

var 참조변수 = new Array();
참조변수[0] = 값1;
참조변수[1] = 값2;
참조변수[2] = 값3;
var 참조변수 = new Array(값1, 값2, 값3);
var 참조변수 = [값1, 값2, 값3, ..., 값n];

배열 객체의 메서드 및 속성

종류	설명
join(연결 문자)	배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환
reverse()	배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환
sort()	배열 객체의 데이터를 오름차순으로 정렬 후 반환
slice(값1, 값2)	배열 객체의 데이터 중 원하는 index 구간만큼 잘라서 배열 객체로 가져옴
splice()	배열 객체의 지정 데이터를 삭제, 그 구간에 새 데이터를 삽입
concat()	2개의 배열 객체를 하나로 결합
pop()	배열에 저장된 데이터 중 마지막 index에 저장된 데이터를 삭제
push(새 데이터)	배열 객체의 마지막 index에 새 데이터를 삽입
shift()	배열 객체에 저장된 데이터 중 첫 번째 index에 저장된 데이터를 삭제
unshift()	배열 객체의 가장 앞의 index에 새 데이터를 삽입
length	배열에 저장된 총 데이터의 개수를 반환

문자열 객체

문자열 객체는 문자형 데이터를 객체로 취급하는 것.
(자바스크립트에서 가장 많이 사용)

기본형

var 참조변수 = new String(문자형 데이터);

문자열 객체의 메서드 및 속성

종류	설명
charAt(인덱스)	문자열에서 인덱스 번호에 해당하는 문자를 반환
indexOf("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환 찾는 문자가 없으면 -1을 반환
lastindexOf("찾을 문자")	문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환 찾는 문자가 없으면 -1을 반환
match("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 반환 찾는 문자가 없으면 null을 반환
replace("바꿀 문자", "새 문자")	문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환
search("찾을 문자")	문자열에서 왼쪽부터찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호를 반환
slice(a,b)	a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환
substring(a,b)	a 인덱스부터 b 인덱스 이전 구간의 문자를 반환
substr(a, 문자개수)	문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환
split("문자")	지정한 문자를 기준으로 문자 데이터를 나누어 배열로 저장하여 반환
toLowerCase()	영문 대문자를 모두 소문자로 변환
toUpperCase()	영문 소문자를 모두 대문자로 변환
length	문자열에서 문자의 개수를 반환
concat("새로운 문자")	문자열에 새로운 문자열을 결합
charCodeAt(인덱스)	문자열 인덱스에 해당 문자의 아스키 코드값을 반환
fromCharCode(아스키 코드 값)	아스키 코드값에 해당되는 문자를 반환
trim()	문자의 앞 또는 뒤에 공백 문자열을 삭제

브라우저 객체 모델

브라우저에 내장된 객체를 브라우저 객체라고 함.
브라우저 객체는 계층적 구조로 이루어져 있다.
이를 브라우저 객체 모델 (BOM, Browser Object Model)이라 함

window 객체

브라우저 객체의 최상위 객체

window 객체의 함수 종류

종류	설명
open("URL","새창이름","새창옵션")	URL 페이지를 새 창으로 나타냄
alert(데이터)	경고 창을 나타내고 데이터를 보여줌
prompt("질문","답변")	질문과 답변으로 질의응답 창을 나타냄
comfirm("질문")	질문 내용으로 확인/취소 창을 나타냄 확인을 누르면 true, 취소를 누르면 false 반환
moveTo(X,Y)	지정한 새 창의 위치를 이동
resizeTo(width,height)	지정한 새 창의 크기를 변경
setInterval(function(){코드}, 시간)	지속적으로 일정한 시간 간격으로 함수를 호출하여 코드를 실행
setTimeout(function(){코드}, 시간)	단 한 번 일정한 시간 간격으로 함수를 호출하여 코드를 실행

setInterval( )

일정 시간 마다 반복해서 실행

setInterval()

var 참조변수 = setInterval(function() {
	실행할 코드;
}, 시간 간격);

clearInterval()

clearInterval(참조변수);

screen 객체

사용자의 모니터 정보를 제공하는 객체

screen 객체의 속성

종류	설명
screen.width	화면의 너빗값을 반환
screen.height	화면의 높잇값을 반환
screen.availWidth	작업 표시줄을 제외한 화면의 너빗값을 반환
screen.availHeight	작업 표시줄을 제외한 화면의 높잇값을 반환
screen.colorDepth	사용자 모니터가 표현 가능한 컬러 bit를 반환

location 객체

사용자 브라우저와 관련된 속성과 함수를 제공하는 객체

location 객체의 속성 종류

종류	설명
location.href	주소 영역의 참조 주소를 설정하거나 URL을 반환
location.hash	URL의 해시값을 반환
location.hostname	URL의 호스트 이름을 설정하거나 반환
location.host	URL의 호스트 이름과 포트번호를 반환
location.protocol	URL의 프로토콜을 반환
location.search	URL의 쿼리를 반환
location.reload()	새로고침

history 객체

사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공하는 객체

history 객체의 속성

종류	설명
history.back()	이전 방문 사이트로 이동
history.forward()	다음 방문 사이트로 이동
history.go(이동 숫자)	이동 숫자에 따라 이전/다음 방문 사이트로 이동
history.length	방문 기록에 저장된 목록의 개수를 반환

navigator 객체

현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공하는 객체

navigator 객체의 속성

종류	설명
navigator.appCodeName	현재 브라우저의 코드명을 반환
navigator.appName	현재 브라우저의 이름을 반환
navigator.appVersion	현재 브라우저의 버전 정보를 반환
navigator.language	현재 브라우저가 사용하고 있는 언어를 반환
navigator.product	현재 브라우저의 엔진 이름을 반환
navigator.platform	현재 컴퓨터의 운영체제 정보를 제공
navigator.onLine	온라인 상태 여부에 대한 정보를 제공
navigator.userAgent	브라우저와 운영체제의 종합정보를 제공