DAY 88. JavaScript - 객체, 내장 객체

 

객체

• 객체를 만들기 전에는 class를 먼저 만들고, new 연산자를 사용해서 객체를 만든다.
• 자바 스크립트는 프로토 타입 기반의 객체 지향 언어이다. 따라서 클래스 기반 언어와는 다르게 객체 생성 방법이 여러 개가 있는데

1. 객체 리터럴을 사용하는 방법 : 변수에 객체 리터럴이 할당되는 순간에 변수의 타입이 정해진다. let 변수명 = {};
2. 속성 만들기

- 자바의 인스턴스 필드, 메소드와 같은 것들을 속성 = 프로퍼티라고 부른다.

- 속성은 키와 값으로 구성이 된다.

- 키(KEY)는 일반적으로 문자 데이터이지만 식별자를 지정하는 네이밍 규칙을 만족하면 '키 이름' 에 ' '를 생략할 수 있다. - 키를 숫자 형태로 지정할 수 있는데, 실제 저장될 때는 내부적으로는 문자로 변환되어 인식한다.

- 값(VALUE)은 모든 타입 지정이 가능하다. 프로퍼티를 여러 개 지정할 때는 , 로 구분하여 나열한다.

- 중복으로 선언하게 되면 마지막에 선언된 프로퍼티가 덮어쓰게 된다.

 

• 객체는 키 값을 사용하여 속성(멤버 변수)을 식별한다.
• 객체는 0개 이상의 프로퍼티로 구성이 되어 있고 프로퍼티는 키와 값으로 구성된다.
• 중괄호를 사용하여 객체를 생성하고 [ ] 또는 . 으로 요소 값에 접근한다.
• 속성에 모든 자료형이 올 수 있으며

• 그 중 함수 자료형인 요소 : 메소드 객체 내에서 자신의 속성을 호출할 때 반드시 this 키워드를 사용하고,
• 객체의 모든 속성을 출력하려면 단순 for문이나 while 문으로는 출력이 불가능 하니 for in 문을 사용해야 한다.

 

** 식별자로 사용할 수 없는 문자(띄어쓰기, 특수문자)를 속성으로 사용할 경우

     → ' ' 로 묶어서 선언하고 접근 시에는 [ ] 만 가능하다.

 

 

▪️ method

객체 프로퍼티로 할당 된 함수

ex. 객체 안에 함수를 추가하고, 객체명.함수명(); 으로 호출할 때 함수의 실행부분이 출력된다.

 

▪️ this

화살표 함수는 일반 함수와는 달리 자신만의 this 를 가지지 않는다. 화살표 함수 내부에서 this 를 사용하면, 그 this는 외부에서 값을 가져온다.

 

** 메소드의  this 는 해당 객체 자체를 가리킨다.

객체의 메소드를 가리킬 때는 화살표 함수로 작성하지 않는 것이 좋다. why? window객체를 의미하기 때문에

 

▪️ in/with

• in : 객체 내부에 해당 속성이 있는지 확인하는 메소드
• with : 코드를 줄여주는 키웓, 호출 시 객체명은 생략이 가능하다. but 가독성, 성능 문제로 자주 사용하지 않는다.

 

객체 배열

생성된 객체를 배열에 넣어 활용이 가능하다.

 

 

생성자 함수

this를 사용하여 속성을 생성하는 함수이다.

new라는 키워드를 통해서 객체를 생성하고, 생성자 명의 첫 글자는 대문자로 시작하고 instanceof로 어떤 생성자가 생성됐는지 확인할 수 있다.

 

캡슐화

생성자 함수에서 속성을 선언할 때 this 키워드를 사용하지 않고 지역변수로 선언한다.

this 키워드를 사용하여 setter/getter 메소드 작성한다.

** 클로저를 활용한다 (지역 변수를 지우지 않고 사용하는 기능)

 

 

---

 

내장 객체

Object 객체

• 모든 기본 내장 객체는 Object 객체를 상속한다.
• 모든 객체는 기본적으로 Object의 메소드를 가지고 있다.

 

Object 메소드

 

Number 객체

 

String 객체

String객체 메소드

 

Date 객체

날짜를 관리하는 객체

 

 

 

---

 

BOM(Browser Object Model)

웹 페이지 요소 제외, 브라우저 각자 요소들을 객체화 시켜놓은 것

최상위는 윈도우 객체이다.

 

 

window 객체

브라우저를 실행하면 가장 먼저 생성이 된다. 함수나, 객체, 전역변수 들은 window 객체의 프로퍼티(속성)으로 추가된다.

브라우저 창에 대한 설정을 하는 객체이다.

자바스크립트에서의 최상위 객체이다.

생성되는 모든 객체는 window 객체 하위에 존재한다.

 

window.open('주소', '이름 또는 open방식', '형태');

 

 

⭐ window.onload 속성

윈도우 객체가 로드가 완료되면 자동으로 onload에 설정되어 있는 함수를 실행시키는 속성이다.

윈도우 객체가 로드가 완료되었다는 것은 모든 HTML 태그가 화면에 나타난 때를 말한다.

로드가 안된 상태에서 돔(요소)에 접근할 수 있다.

정상적으로 HTML, CSS 로드가 되고 나서 처리해줄 작업이 있으면 window.onload 로 실행하면 된다.

 

window.onload = function(){로직 구성};

또는

작성된 함수 호출

 

screen 객체

client 운영체제 화면에 대한 속성 값을 가지는 객체이다.

 

location 객체

브라우저의 주소 표시줄(URL)과 관련된 객체이다.

프로토콜 종류, 호스트 이름, 문서 위치 등의 정보를 가진다.

 

navigator 객체

브라우저에 대한 정보를 가지는 객체이다.

 

screen 객체

client 운영체제 화면에 대한 속성 값을 가지는 객체이다.

 

location 객체

브라우저의 주소 표시줄(URL)과 관련된 객체이다.

프로토콜 종류, 호스트 이름, 문서 위치 등의 정보를 가진다.

• href

: 현재 페이지의 URL 주소를 가지고 있는 속성으로 해당 속성의 값을 변경해서 페이지를 이동시키는 속성

: 페이지를 이동하는 것이기 때문에 뒤로가기 가능

 

navigator 객체

웹 페이지를 실행하고 있는 브라우저에 대한 정보를 가지는 객체이다.

 

history 객체

브라우저의 방문기록과 관련된 객체

 

---

 

이벤트

프로그램 입장에서 사용자가 하는 행위

 

이벤트 활용

이벤트 속성과 이벤트 핸들러(함수)를 연동하여 이벤트 발생 시 특정 기능을 하도록 하는 것이다.

 

이벤트 설정 방법

 

✔️ 고전 이벤트 모델

• ex. 요소 가지고 온 다음에 onlick 이라는 속성에 function을 직접 지정했었다.
• 요소 객체가 갖고 있는 이벤트 속성에 이벤트 핸들러를 직접 연결하는 방법이다.
• 이벤트를 제거 할 때는 속성 값에 null을 넣으면 된다.
• 이벤트 발생하는 객체는 핸들러 내부에서 this로 표현한다. (스타일 변경 가능)
• 매개 변수로 이벤트 정보를 전달할 수 있다. (e, 함수 내부에서는 window.event )

 

✔️ 인라인 이벤트 모델

속성에다가 태그에다가 속성을 직접 지정하는 것. 자바스크립트나 함수를 지정하고 스크립트 내에서 함수를 호출하는 방식으로 처리한다.

• 요소 내부에 이벤트를 작성하는 방식이다.
• 인라인 방식은 <script> 태그에 있는 함수를 호출하는 방식을 선호한다.

 

✔️ 표준 이벤트 모델

• w3 에서 공식으로 지정한 이벤트 모델이다.
• 한 번에 여러 개 이벤트 핸들러 설정이 가능하다.
• this 키워드가 이벤트 발생 객체를 의미한다.
• 확장 : 버블링 or 캡쳐링 지정

 

✔️ MS 인터넷 익스플로러 이벤트 모델 (참고만)

• 익스플로러 브라우저 적용 모델이다.
• this 키워드는 이벤트 발생 객체가 아니라 window 객체를 의미한다.

 

이벤트 전달 및 차단

 

이벤트 전달

• 버블링 : 자식 노드에서 부모 노드로 올라가면서 이벤트를 실행하는 방식
• 캡쳐링 : 부모 노드에서 자식 노드로 내려가면서 이벤트를 실행하는 방식

(** 익스플로러 지원X)

 

 

이벤트 차단

이벤트가 전달되어 모든 이벤트가 발생하는 것을 차단

• 이벤트 객체.stop.Propagation() : 익스플로러 제외한 브라우저