Javascript 객체 및 객체의 종류

객체의 종류

- 내장 객체

자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용할 수 있음

기본형 : 참조 변수(인스턴스 이름) = new 생성 함수();

 

* 날짜 정보 객체

var t = new Date();

특정 날짜 정보 객체 생성 방법

var t = new Date("2002/5/31");

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()	분 정보만 수정함
getSeconds()	초 정보를 가져옴	setSeconds()	초 정보만 수정함
getMiliseconds()	밀리초 정보를 가져옴 (1/1,000초 단위)	setMiliseconds()	밀리초 정보만 수정함
getTime()	1970년 1월 1일부터 경과된 시간을 밀리초로 표기함	setTime()	1970년 1월 1일부터 경과된 시간을 밀리초로 수정함
toGMTString()	GMT 표준 표기 방식으로 문자형 데이터로 반환함	toLocaleString()	운영 시스템 표기 방식으로 문자형 데이터로 반환함

 

* 수학 객체

- 수학 객체는 최대값, 최솟값, 반올림값 등 수학과 관련된 일련의 작업을 처리할 수 있음.

 

- Math.random() 함수

  0~1 사이의 난수를 발생시킴

Math.random() * 10; // 0부터 10까지 실수로 난수를 반환

Math.floor(Math.random()*11); // 0부터 10까지 난수를 발생하여 소수점 값을 제거

Math.floor(Math.random()*(최대값-최솟값+1))+최솟값; // 난수를 발생하여 원하는 구간 정수의 값 구하기

* 배열 객체의 메서드 및 속성

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

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

종류	설명
charAt(index)	문자열에서 인덱스 번호에 해당하는 문자 반환
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(index)	문자열 index에 해당 문자의 아스키 코드값을 반환
fromCharCode(아스키 코드 값)	아스키 코드값에 해당하는 문자를 반환
trim()	문자의 앞 또는 뒤에 공백 문자열을 삭제

 

- 브라우저 객체 모델(BOM, Browser Object Model)

브라우저에 계층 구조로 내장되어 있는 객체.

window는 브라우저 객체의 최상위 객체이머, window 객체에는 하위 객체가 포함되어 있음.

 

* window 객체의 메서드 종류

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

 

* open() 메서드

- 지정한 URL페이지를 새 브라우저 창에 나타낼 수 있음.

- 즉 광고에 자주 사용되는 팝업 창을 만들 수 있음

window.open("http://www.easypub.com", "easypub", "width=350, height=400, left=50, top=10, scrollbars=no");

새 창의 옵션 종류

속성	설명
width	새 창의 너비 설정
height	새 창의 높이 설정
left	새 창의 수평(X축) 위치를 설정
top	새 창의 수직(Y축) 위치를 설정
scrollbars	새 창의 스크롤바의 숨김(no)/노출(yes)을 설정
location	새 창의 URL 주소 입력 영역의 숨김/노출을 설정
status	새 창의 상태 표시줄 영역의 숨김/노출을 설정
toolbars	새 창의 도구 상자 영역의 숨감/노출을 설정

 

* 일정한 시간 간격으로 코드 실행하기

- clearInterval(참조변수) : setInterval() 메서드를 취소

- clearTimeout(참조변수) : setTimeout() 메서드를 제거

 

* screen 객체

- 사용자의 모니터 정보(속성)를 제공하는 객체.

- pc인지 mobile인지 tablet인지 구분 가능.

 

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()	브라우저에서 F5 키를 누른 것처럼 새로 고침

* history 객체

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

 

history 객체의 속성 종류

종류	설명
history.back()	이전 방문 사이트로 이동
history.forward()	다음 방문 사이트로 이동
history.go(이동 숫자)	이동 숫자에 -2를 입력하면 2단계 이전의 방문 사이트로 이동
history.length	방문 기록에 저장된 목록의 개수를 반환

* navigator 객체

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

 

navigator 객체의 속성 종류

종류	설명
navigator.appCodeName	현재 브라우저의 코드명을 반환
navigator.appName	현재 브라우저의 이름을 반환
navigator.appVersion	현재 브라우저의 버전 정보를 반환
navigator.language	현재 브라우저가 사용하고 있는 언어를 반환. 한국어를 사용할 경우 "ko"를 반환
navigator.product	현재 브라우저의 엔진 이름을 반환 크롬의 경우는 "Gecko"를 반환
navigator.platform	현재 컴퓨터의 운영체제 정보를 제공
navigator.onLine	온라인 상태 여부에 대한 정보를 제공. 만일 인터넷이 정상적으로 연결되어 있다면 true를 반환
navigator.userAgent	브라우저와 운영체제의 종합 정보를 제공

 

- 문서 객체 모델(DOM, Document Object Model)

HTML 문서 구조를 말함. 

HTML 문서의 기본 구조는 최상위 객체로 <html> 이 있으며 그 하위 객체로 <head>,<body> 가 있음