객체 알아보기

객체란?

프로그램에서 인식할 수 있는 모든 대상

1. 문서 객체 모델(DOM): 웹 문서 자체, 이미지, 링크, 텍스트 필드 등
2. 브라우저 관련 객체: navigator, history, location, screen 등
3. 내장 객체: 웹 프로그래밍을 할 때, 자주 사용하는 요소를 자바스크립트 안에 미리 객체로 정의한 것

객체의 인스턴스 만들기

<aside> 💡 new 객체명

</aside>

프로퍼티와 메서드

• 프로퍼티: 객체의 특징이나 속성
• 메서드: 객체에서 할 수 있는 동작

마침표 표기법을 사용해 객체.메서드()와 같이 사용한다.

자바스크립트의 내장 객체

Array 객체

<aside> 💡 var numbers = new Array(); //배열의 크기 지정하지 않음 var numbers = new Array(4); //배열의 크기 지정

var numbers = ["One", "Two", "Three", "Four"]; //배열 선언 var numbers = Array("One", "Two", "Three", "Four"); //Array 객체를 사용한 배열 선언

</aside>

• Array객체.lenth는 Array의 요소의 개수를 반환한다.

• Array 객체의 메서드 종류

  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

  1. concat(): 배열을 합친다
  2. join(): 배열 안의 요소끼리 합쳐서 하나의 문자열로 만들어준다.
  3. push(): 배열의 맨 끝에 요소를 추가한다.
  4. unshift(): 배열의 맨 앞에 요소를 추가한다.
  5. pop(): 배열에서 뒤에 있는 요소를 꺼낸다.
  6. shift(): 배열에서 앞에 있는 요소를 꺼낸다.
  7. splice(): 괄호 안에 인수가 1이면, 해당 인덱스부터 마지막 요소까지 삭제하고, 인수가 2이면, 첫 번째 인수인 인덱스값부터 두 번째 인수인 요소의 개수만큼 삭제하고, 인수가 3 이상이면, 인수와 2일 때와 동일하며 세 번째 인수부터는 삭제한 위치에 추가할 요소를 지정한다.
  8. slice(): 해당 인덱스부터 마지막 요소까지 꺼내서 반환한다.

  Date 객체

  <aside> 💡 new Date("2020") new Date("2020-02") new Date("2020-02-25")

  new Date("2020-02-25T18:00:00") new Date("2020-02-25T18:00:00Z") //UTC 국제 표준시로 나타냄

  new Date("02/25/2020")

  new Date("Mon Jan 20 2020 15:00:41 GMT+0900 (대한민국 표준시)")

  </aside>

  • 메서드

    https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

  Math 객체

  math객체는 따로 인스턴스를 만들지 않는다.

  • 프로퍼티 및 메서드

    https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

  브라우저와 관련된 객체

  • window: 브라우저 창
  • document: <body> 태그
  • navigator: 현재 사용하는 브라우저 정보
  • history: 현재 창에서 사용자의 방문 기록 저장
  • location: 현재 페이지의 URL 정보
  • screen: 현재 사용하는 화면 정보

  window 객체의 프로퍼티

  • document: 브라우저 창에 표시된 웹 문서에 접근
  • frameElement: 현재 창이 다른 요소 안에 표함되어 있을 경우 그 요소 반환, 포함되어 있지 않으면 null 반환
  • innerHeight: 내용 영역의 높이
  • innerWidth: 내용 영역의 너비
  • localStorage: 웹 브라우저에서 데이터를 저장하는 로컬 스토리지 반환
  • location: window 객체의 위치 또는 현재 URL
  • name: 브라우저 창의 이름
  • outerHeight: 브라우저 창의 바깥 높이
  • outerWidth: 브라우저 창의 바깥 너비
  • pageXOffset, scrollX: 스크롤했을 때 수평으로 이동하는 픽셀 수
  • pageYOffset, scrollY: 스크롤했을 때 수직으로 이동하는 픽셀 수
  • parent: 현재 창이나 서브 프레임의 부모
  • screenX: 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리
  • screenY: 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리
  • sessionStorage: 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환

  window 객체의 메서드

  • alert(): 알림 창 표시
  • blur(): 현재 창에서 포커스 제거
  • close(): 현재 창 닫기
  • confirm(): 확인, 취소 버튼이 있는 확인 창 표시
  • focus(): 현재 창에 포커스 부여
  • moveBy(): 현재 창을 지정한 크기만큼 이동
  • moveTo(): 현재 창을 지정한 좌표로 이동
  • open(): window(경로, 창 이름, 창 옵션)
  • postMessage(): 메시지를 다른 창으로 전달
  • print(): 현재 문서 인쇄
  • prompt(): 프롬프트 창에 입력한 텍스트 반환
  • resizeBy(): 지정한 크기만큼 현재 창의 크기 조절
  • resizeTo(): 동적으로 브라우저 창의 크기 조절
  • scroll(): 문서에서 특정 위치로 스크롤
  • scrollTo(): 지정한 위치까지 스크롤
  • sizeToContent(): 내용에 맞게 창의 크기 맞추기
  • stop(): 로딩 중지
  • close(): 브라우저 창 닫기

  navigator 객체

  렌더링 엔진: HTML이나 CSS를 해석한다. 웹 브라우저마다 다르다.

  따라서, 프리픽스를 붙여서 브라우저를 구별한다.

  userAgent 프로퍼티

  사용자 에이전트 문자열. 여기에는 사용자의 웹 브라우저 버전, 자바스크립트의 엔진 종류 등 여러 정보가 들어있다.

  navigator 객체 정보 살펴보기

  ctrl+shift+j를 눌러 콘솔 창을 열고 navigator를 입력한 후 →를 클릭하면 모든 정보를 살필 수 있다.

  history 객체

  브라우저에서 뒤로나 앞으로 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장된다.

  location 객체

  현재 문서의 URL 주소 정보가 들어있는데, 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서를 지정할 수 있다.

  Screen 객체

  사용자의 화면 크기나 정보를 알아낼 때 사용한다.