JavaScript - JavaScript와 객체

하쮸·2025년 6월 13일
JavaScript

JavaScript

목록 보기
3/4

1. 객체.

  • 객체(Object)는 프로그램에서 인식할 수 있는 모든 대상을 가리킴.
  • 자바스크립트에서 객체는 데이터를 저장하고 처리하는 기본 단위.

1-1. 객체란?

  • 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킴.
    • 자바스크립트는 웹 사이트나 웹 애플리케이션을 개발하는 언어이므로 웹과 관련된 대상을 전부 객체로 인식함.
  • "자바스크립트는 모든 것이 객체다"라는 말이 있을 정도로 자바스크립트에서 객체는 중요한 개념임.

1-2. 자바스크립트에서 사용하는 객체.

종류설명
문서 객체 모델(DOM)- 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지, 링크, 텍스트 필드 등도 전부 객체임.
- 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있음.
- 문서 객체 모델(DOM)은 객체를 사용해서 웹 문서를 관리하는 방법임.
브라우저 관련 객체- 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있음.
내장 객체- 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있음.

1-3. 객체의 인스턴스.

  • 자바스크립트에서 객체는 참조 형태로 사용해야함.
    • 즉, 객체 자체가 아니라 인스턴스(instance)의 형태로 만들어서 사용해야함.
  • 자바스크립트 안에 정의된 객체는 그대로 두고 객체와 똑같은 속성과 기능을 만들 수 있음.
    • 자바스크립트의 객체가 틀이라면 그 틀을 기본으로 해서 계속 같은 모양으로 찍어 내는 것이 인스턴스.
      • 인스턴스에 식별자를 붙여서 사용함.
  • ↓ 객체의 인스턴스를 만들 때는 new 예약어를 사용함.
    • new 뒤에 만들려고 하는 객체 이름을 작성.
new 객체명

1-4. 프로퍼티와 메서드.

  • 객체에는 프로퍼티(property)와 메서드(method)가 있음.
    • 프로퍼티(property) : 객체의 특징이나 속성을 나타냄.
    • 메서드(method) : 객체에서 할 수 있는 동작을 나타냄.
  • 인스턴스는 객체의 프로퍼티와 메서드를 그대로 물려받아서 똑같이 사용함.
    • 프로퍼티와 메서드를 표시하려면 인스턴스명 뒤에 온전(.)을 붙이고 프로퍼티나 메서드 이름을 작성하면 됨.
      • 이때 메서드는 함수와 같은 역할을 하므로 메서드 이름 옆에 괄호'()'를 넣어야함.

2. 내장 객체.

  • 자바스크립트 내장 객체에는 웹 문서의 계층 구조와 상관없이 나타낼 수 있는 객체가 있음.
    • Ex) Array, Date 객체 등.

2-1. Array 객체.

  • Array객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룸.

2-1-1. Array 객체로 배열 만들기.

  • 자바스크립트에는 배열을 쉽게 만들고 다룰 수 있는 Array 객체가 내장되어 있음.

초깃값이 없는 경우

var numbers = new Array();		// 배열의 크기를 지정하지 않음.
var numbers = new Array(4);		// 배열의 크기를 지정했음.

초깃값이 있는 경우

var numbers = ["one", "two", "three", "four"];			// 배열 선언.
var numbers = Array("one", "two", "three", "four");		// Array 객체를 사용한 배열 선언.

2-1-2. length 프로퍼티.

  • 배열 요소의 개수는 Array 객체에 있는 length프로퍼티를 사용하면 됨.

2-1-3. Array 객체의 메서드.

종류설명
concat- 기존 배열에 요소를 추가해서 새로운 배열을 만듦.
- 서로 다른 2개의 배열을 합쳐서 새로운 배열을 만듦.
every- 배열의 모든 요소가 주어진 함수에 대해 참이면 true 반환하고 그렇지 않으면 false 반환함.
filter- 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라서 새로운 배열을 만듦.
forEach- 배열의 모든 요소에 대해 주어진 함수를 실행함.
indexOf- 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 반환함.
join- 배열의 요소를 문자열로 합침.
- 구분자를 지정할 수 있음. 따로 지정하지 않으면 쉼포(,)로 구분함.
push- 배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환함.
- 여러 개의 요소를 추가할 수 있음.
unshift- 배열의 시작 부분(맨 앞)에 새로운 요소를 추가함.
- 여러 개의 요소를 추가할 수 있음.
pop- 배열의 마지막 요소를 꺼내 그 값을 결과로 반환함.
- 기존 배열은 꺼낸 요소가 빠진 상태로 변경됨.
shift- 배열의 첫 번째 요소의 값을 반환함.
- 기존 배열은 꺼낸 요소가 빠진 상태로 변경됨.
splice- 배열에 요소를 추가하거나 삭제함. (원하는 위치에, 여러 개를 추가ㆍ삭제 할 수 있음.)
- 실행한 후에는 삭제한 요소를 반환하고 기존 배열은 변경됨.
- 인수가 1개
괄호 안의 인수는 배열의 인덱스 값을 가리킴. 즉, 인수가 지정한 인덱스의 요소부터 배열의 맨 끝 요소까지 삭제함.
- 인수가 2개
첫 번째 인수는 인덱스값, 두 번째 인수는 삭제할 요소의 개수.
- 인수가 3개
첫 번째 인수 : 배열에서 삭제할 시작 위치, 두 번째 인수 : 삭제할 개수, 세 번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정함.
slice- 배열에서 요소를 꺼냄.
(시작과 끝 인덱스를 지정해서 요소를 여러 개 꺼내고, 실행으로 인해 기존 배열이 바뀌지 않음.)
- 인수가 1개
해당 인수를 시작 인덱스로 간주하고 지정한 요소부터 마지막 요소까지 꺼내서 반환함.
- 인수가 2개
첫 번째 인수 : 배열의 시작 인덱스, 두 번째 인수 : 해당 인수를 인덱스로 간주해서 (해당 인덱스 - 1)의 인덱스를 가리킴.
reverse- 배열의 배치 순서를 역순으로 바꿈.
sort- 배열 요소를 지정한 조건에 따라 정렬함.
toString- 배열에서 지정한 부분을 문자열로 반환함.
- 각 요소는 쉼표(,)로 구분함.

2-2. Date 객체.

  • Date 객체는 날짜와 시간 정보를 나타낼 수 있음.

2-2-1. Date 객체 인스턴스.

  • Date 객체를 사용하려면 Date 객체의 인스턴스를 만들어야함.
new Date();
  • 특정한 날짜를 저장한 Date 객체를 만들고 싶다면 괄호 안에 날짜 정보를 입력하면 됨.
new Date("2025-01-01");
  • 시간 정보까지 Date 객체로 나타내려면 날짜 뒤에 대문자 'T'를 추가한 후 그 뒤에 시간을 입력하면됨.
new Date("2025-01-01T12:00:00");

2-2-2. 자바스크립트의 날짜, 시간 입력 방식.

  • Date 객체를 사용하여 날짜와 시간을 지정하려면 자바스크립트가 인식할 수 있는 형식으로 써야함.

YYYY-MM-DD 형식

new Date("2025")
new Date("2025-01")
new Date("2025-01-01")
  • 연도만 나타낼때는 YYYY
    연도와 월을 나타낼 때는 YYYY-MM
    연도와 월과 일을 나타낼 때는 YYYY-MM-DD

YYYY-MM-DDTHH 형식

new Date("2025-01-01T12:00:00")
new Date("2025-01-01T12:00:00Z")
  • 시간을 나타낼 때는 날짜 뒤에 'T'를 붙이고 HH:MM:SS 형태로 사용.
    맨 끝에 'Z'를 붙이면 UTC(국제 표준시)로 표시됨.

MM/DD/YYYY 형식

new Date("01/01/2025")
  • 연도를 마지막에 나타내고 싶을 경우.

이름 형식

new Date("Wed Jan 01 2025 12:00:00 GMT+0900 (대한민국 표준시)")
  • 월은 January처럼 전체를 사용하거나 Jan과 같이 줄여서 사용할 수 있음.
    맨 앞에 요일(Wed)을 함께 작성할 수도 있음.

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

  • 자바스크립트를 사용하면 웹 브라우저와 관련된 여러 가지 효과를 만들 수 있음.
    • 자바스크립트 내에 웹 브라우저와 관련된 여러 객체가 미리 정의되어 있기 때문.
  • 웹 브라우저 창에 문서가 표시되는 순간 브라우저는 HTML 소스를 한 줄씩 읽으면서
    화면에 내용을 표시하고 관련된 객체를 만들어냄.

↓ 만들어진 자바스크립트의 객체는 아래와 같은 계층 구조를 보임.

↓ 자바스크립트의 내장 객체

3-1. window 객체의 프로퍼티.

  • window 객체는 웹 브라우저의 상태를 제어하며 자바스크립트의 최상위에 있음.
    • 따라서 자바스크립트의 모든 객체는 window 객체 안에 포함됨.
  • window 객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용함.
    • 프로퍼티를 사용하려면?
      프로퍼티 이름 앞에 window.를 붙이면 됨.

window 객체의 프로퍼티

3-2. window 객체의 메서드.

  • window 객체의 메서드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등 웹 브라우저 창 자체와 관련됨.
  • window 객체는 기본 객체이므로 window.를 생략하고 메서드를 사용할 수 있음.

3-2-1. open()

  • 새 브라우저 창을 여는 메서드.
  • 링크를 클릭하거나 웹 문서를 열 때 새창이 자동으로 뜨게 하려면 window.open()메서드를 사용함.
    • 주로 팝업 창을 띄울 때 사용함.

새 브라우저에서 창 열기

window.open(경로, 창 이름, 창 옵션)

// Ex (너비 500px, 높이 500px)
window.open("tmp.html", "", "width=500, height=500");
  • 경로
    • 팝업 창에 표시할 문서나 사이트의 경로(주소)를 나타냄.
  • 창 이름
    • 팝업 창의 이름을 지정하면 항상 이 창에 팝업 내용이 나타나도록 할 수 있음.
    • 이름을 지정하지 않으면 팝업 창이 계속 새로 나타남.
  • 창 옵션
    • left, top 속성을 사용해서 위치를 지정하거나 width, height 속성을 사용해서 크기를 지정할 수 있음.
    • 지정하지 않으면 기본값으로 화면 11시 방향에 나타남.

3-2-2. 창 이름 지정.

  • 팝업 창의 이름을 지정하지 않으면 새로고침할 때마다 똑같은 팝업 창이 계속 나타남.
    • 팝업 창의 이름을 지정하면 해결 가능.
// Ex
window.open("tmp.html", "pop", "width=500, height=500");

3-2-3. 팝업 창 위치 지정.

  • open() 메서드의 left와 top 속성으로 지정할 수 있음.
// Ex (화면의 왼쪽에서 200px, 위에서 100px 떨어진 위치에 팝업 창 표시)
window.open("tmp.html", "pop", "width=500, height=500, left=200, top=100");

3-2-4. 팝업 차단 고려.

  • 웹 사이트에서 팝업 창으로 어떠한 내용을 보여줘야 한다면?
    • 팝업 차단된 상태인지 체크하여 사용자가 알려주는 것이 좋음.
  • 웹 브라우저에서 팝업을 차단하면 window.open()은 null을 반환함.
<script>
  function openPopup() {			
    var newWin = window.open("tmp.html", "pop", "width=500, height=400");
    if (newWin == null) {
      // 팝업이 차단되어 있다고 메시지 알림창을 보여줄 수 있음.
      alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.")
    }
  newWin.moveBy(100,100);			
}
</script>

3-2-5. close()

  • 브라우저 창을 닫는 메서드.
window.close()

// Ex
<button onclick="javascript:window.close();">닫기</button>

3-3. navigator 객체.

  • navigator 객체에는 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온ㆍ오프라인 등의 여러 정보가 담겨 있음.
    • 이 정보들은 사용자가 수정할 수 없고, 가져와서 보여줄 수만 있음.

3-3-1. 웹 브라우저와 렌더링 엔진.

  • 여러 웹 브라우저를 고려할 때 가장 먼저 생각해야 할것은 렌더링 엔진임.
    • 아직 표준화되지 않은 CSS 속성 앞에는 브라우저 벤더를 의미하는 프리픽스(prefix)를 지정함.
      • 지정하는 이유는 웹 브라우저마다 HTML이나 CSS를 해석하는 렌더링 엔진(rendering engine)이 다르기 때문임.
  • 웹 브라우저마다 내장된 자바스크립트 엔진도 서로 다름.

3-3-2. userAgent 프로퍼티.

  • 사용자 에이전트 문자열을 의미함.
  • userAgent는 사용자의 웹 브라우저 정보를 서버에 보낼 때 사용함.
  • userAgent에는 사용자의 웹 브라우저 버전, 자바스크립의 엔진 종류 등 여러 정보가 들어있음.
    • 따라서 서버에서는 이런 정보들을 확인하여 사용자에게 맞는 웹 페이지를 보여줄 수 있음.
  • 최근에는 같은 자바스크립트 엔진을 사용하는 브라우저가 많아서 사용자 에이전트 문자열의 내용이 겹치므로 사용하지 않는 추세.

3-4. history 객체.

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

3-5. location 객체.

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

  • 브라우저의 새로 고침과 같은 역할을 하는 reload() 메서드와 현재 창에 다른 문서나 사이트를 보여 주는 replace() 메서드가 매우 유용함.

3-6. screen 객체.

  • 사용자의 화면 크기나 정보를 알아낼 때 사용함.
  • screen 객체에서 사용하는 메서드는 화면 방향을 잠그거나 잠근 화면의 방향을 해제하는 역할을 함.

profile
하쮸
Every cloud has a silver lining.
이전 포스트

JavaScript - 함수와 이벤트

다음 포스트

JavaScript - 문서 객체 모델(DOM)

0개의 댓글