[JavaScript] 자바스크립트와 객체

YEN·2022년 2월 26일
1

JavaScript

목록 보기
3/7
post-thumbnail

1. 객체

1) 객체: 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다.

  • 자바스크립트는 웹 사이트나 웹 애플리케이션을 개발하는 언어이므로 웹과 관련된 대상을 모두 객체로 인식한다.

2) 자바 스크립트에서 사용하는 객체

문서 객체 모델(DOM): 웹 문서 자체도 객체이고 그안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체이다.

-> 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있다.

브라우저 관련 객체: 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있다.

-> navigator, history, location, screen 객체 등이 있다.

내장 객체: 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의 되어 있다.

-> Date 객체를 가져와 시간과 관련된 프로그램을 개발할 수 있다.

자바스크립트는 모든 것이 객체라고 흔히 말한다.

  • 객체의 인스턴스 만들 때는 new 예약어 뒤에 만들려고 하는 객체 이름을 적는다.
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): 객체에서 할 수 있는 동작

2. 자바스크립트의 내장 객체

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.메서드명

3. 브라우저와 관련된 객체

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()

    -> 풀 스크린 상태일 때나 방향 전환을 할 수 있는 앱에서 사용한다.

0개의 댓글