1) 객체: 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다.
2) 자바 스크립트에서 사용하는 객체
① 문서 객체 모델(DOM): 웹 문서 자체도 객체이고 그안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체이다.
-> 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있다.
② 브라우저 관련 객체: 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있다.
-> navigator, history, location, screen 객체 등이 있다.
③ 내장 객체: 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의 되어 있다.
-> Date 객체를 가져와 시간과 관련된 프로그램을 개발할 수 있다.
자바스크립트는 모든 것이 객체라고 흔히 말한다.
new 객체명
<body>
<script>
var now = new Date();
document.write("현재 시간은 " + now);
</script>
</body>
3) 프로퍼티와 메서드
① 프로퍼티: 객체의 특징이나 속성
② 메서드: 객체에서 할 수 있는 동작
ex) 자동차 운전이 하나의 프로그램이라면 자동차는 객체가 되고 프로퍼티와 메서드는 아래의 표와 같다.
프로퍼티 | 메서드 |
---|---|
제조사 | 시동 걸기 |
모델명 | 움직이기 |
색상 | 멈추기 |
배기량 | 주차하기 |
프로퍼티와 메서드를 표시하려면 인스턴스 명 뒤에 . 을 붙여 객체의 프로퍼티나 메서드 이름을 작성한다.
-> 이때 메서드는 함수와 같은 역할을 하므로 이름 옆에 ( )를 넣는다.
<body>
<script>
var now = new Date();
document.write("현재 시간은 " + now.toLocaleString());
</script>
</body>
- 객체(object): 프로그램에서 인식할 수 있는 모든 대상
- 프로퍼티(property): 객체의 특징이나 속성
- 메서드(method): 객체에서 할 수 있는 동작
1) array 객체: 배열
종류 | 설명 |
---|---|
concat | 기존 배열에 요소를 추가해 새로운 배열을 만든다. |
every | 배열의 모든 요소가 주어진 함수에 대해 참이면 true를 반환하고 그렇지 않으면 false를 반환한다. |
filter | 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만든다. |
forEach | 배열의 모든 요소에 대해 주어진 함수를 실행한다. |
indexOf | 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾는다. |
join | 배열 요소를 문자열로 합친다. (구분자를 지정할 수 있다.) |
push | 배여르이 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환한다. |
unshift | 배열의 시작 부분에 새로운 요소를 추가한다. |
pop | 배열의 마지막 요소를 꺼내 그 값을 결과로 반환한다. |
shift | 배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환한다. |
splice | 배열에 요소를 추가하거나 삭제한다. |
slice | 배열에서 특정한 부분만 잘라 낸다. |
reverse | 배열의 배치 순서를 역순으로 바꾼다. |
sort | 배열 요소를 지정한 조건에 따라 정렬한다. |
toString | 배열에서 지정한 부분을 문자열로 반환한다. (각 요소는 , 로 구분한다.) |
2) Date 객체
new Date( );
YYYY-MM-DD 형식, YYYY-MM-DDTHH 형식, MM/DD/YYYY 형식, 이름 형식이 있다.
날짜와 시간 정보 가져오기
종류 | 설명 |
---|---|
getFullYear() | 연도를 4자리 숫자로 표시한다. |
getMonth() | 0~11 사이의 숫자로 월을 표시한다. (0부터 1월 ~ 11은 12월) |
getDate() | 1~31 사이의 숫자로 일을 표시한다. |
getDay() | 0~6사이의 숫자로 요일을 표시한다. (0부터 일요일 ~ 6은 토요일) |
getTime() | 1970년 1월 1일 자정 이후의 시간을 밀리 초(1/1000초)로 표시한다. |
getHours() | 0~23 사이의 숫자로 시를 표시한다. |
getMinutes() | 0~59 사이의 숫자로 분을 표시한다. |
getSeconds() | 0~59 사이의 숫자로 초를 표시한다. |
getMilliseconds() | 0~999 사이의 숫자로 밀리초를 표시한다. |
종류 | 설명 |
---|---|
setFullYear() | 연도를 4자리 숫자로 설정한다. |
setMonth() | 0~11 사이의 숫자로 월을 설정한다. (0부터 1월 ~ 11은 12월) |
setDate() | 1~31 사이의 숫자로 일을 설정한다. |
setDay() | 0~6사이의 숫자로 요일을 설정한다. (0부터 일요일 ~ 6은 토요일) |
setTime() | 1970년 1월 1일 자정 이후의 시간을 밀리 초(1/1000초)로 설정한다. |
setHours() | 0~23 사이의 숫자로 시를 설정한다. |
setMinutes() | 0~59 사이의 숫자로 분을 설정한다. |
setSeconds() | 0~59 사이의 숫자로 초를 설정한다. |
setMilliseconds() | 0~999 사이의 숫자로 밀리초를 설정한다. |
3) Math 객체
Math.프로퍼티명
Math.메서드명
1) 자바스크립트의 내장 객체
종류 | 설명 |
---|---|
window | 브라우저 창이 열릴 때마다 하나씩 만들어지며 브라우저 창 안의 요소 중에서 최상위에 있다. |
document | 웹 문서마다 하나씩 있으며 body 태그를 만나면 만들어지고, HTML 문서의 정보가 담겨져 있다. |
navigator | 현재 사용하는 브라우저의 정보가 들어 있다. |
history | 현재 창에서 사용자의 방문 기록을 저장한다. |
location | 현재 페이지의 URL 정보가 담겨 있다. |
screen | 현재 사용하는 화면 정보를 다룬다. |
2) window 객체의 메서드
종류 | 설명 |
---|---|
alert() | 알림 창을 표시한다. |
blur() | 현재 창에서 포커스를 제거한다. |
close() | 현재 창을 닫는다. |
confirm() | [확인], [취소] 버튼이 있는 확인 창을 표시한다. |
focus() | 현재 창에 포커스를 부여한다. |
moveBy() | 현재 창을 지정한 크기만큼 이동한다. |
moveTo() | 현재 창을 지정한 좌표로 이동한다. |
open() | 새로운 창을 연다. |
postMessage() | 메시지를 다른 창으로 전달한다. |
print() | 현재 문서를 인쇄한다. |
prompt() | 프롬프트 창에 입력한 텍스트를 반환한다. |
resizeBy() | 지정한 크기만큼 현재 창의 크기를 조절한다. |
resizeTo() | 동적으로 브라우저 창의 크기를 조절한다. |
scroll() | 문서에서 특정 위치로 스크롤한다. |
scrollBy() | 지정한 크기만큼씩 스크롤한다. |
scrollTo() | 지정한 위치까지 스크롤한다. |
sizeToContent() | 내용에 맞게 창의 크기를 맞춘다. |
stop() | 로딩을 중지한다. |
3) navigator 객체
① userAgent: 사용자 에이전트 문자열을 의미한다.
사용자의 웹 브라우저 정보를 서버에 보낼 때 사용한다.
-> 서버에서 그 정보를 확인하여 사용자에게 맞는 웹 페이지를 보여준다.
② 각 브라우저의 사용자 에이전트 문자열은 Mozilla 예약어로 시작한다.
인터넷 초창기에 넷스케이프 사용자 에이전트 문자여과 호환하기 위해 넷스케이프 네비게이터에서 사용하는 Mozilla 키워드를 사용하였다.
4) history 객체
브라우저에서 [뒤로]나 [앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장된다.
브라우저 히스토리는 보안 문제로 읽기 전용이다.
5) location 객체
현재 문서의 URL 주소 정보가 들어 있는데 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서를 지정할 수 있다.
reload(): 현재 문서를 다시 불러온다.
replace(): 현재 문서의 URL을 지우고 다른 URL의 문서로 교체한다.
6) screen 객체
사용자의 화면 크기나 정보를 알아낼 때 사용한다.
screen 객체에서 사용하는 메서드는 화면 방향을 잠그거나 잠근 화면의 방향을 해제하는 역할을 한다.
-> lockOrientation(), unlockOrientation()
-> 풀 스크린 상태일 때나 방향 전환을 할 수 있는 앱에서 사용한다.