KH_JAVASCRIPT_4_자바스크립트와 객체

객체(object)란?

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

 - 데이터를 저장하고 처리하는 기본 단위

 

자바스크립트 객체

자바스크립트 안에 미리 객체로 정의해 놓은 것

 - 문서 객체 모델(DOM) : 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등을 모두 별도의 객체로 관리

 - 브라우저 관련 객체 : 웹 브라우저 정보를 객체로 관리

 - 내장 객체 : 웹 프로그래밍에서 자주 사용하는 요소를 객체로 정의해 놓음.

 

사용자 정의 객체

 - 필요할 때마다 사용자가 직접 만드는 객체

 

객체의 인스턴스 만들기

 - 객체는 객체 자체가 아니라 인스턴스 형태로 만들어서 사용

 - 인스턴스 : 객체를 틀처럼 사용해서 같은 모양으로 찍어낸 것

 

ex) Date 객체의 인스턴스를 만들어서 날짜와 시간 표시하기

 

 

프로퍼티와 메소드

 - 프로퍼티 : 객체의 특징이나 속성

 - 메소드 : 객체에서 할 수 있는 동작

 

내장 객체 - Array 객체

배열 만들기

1. 초깃값이 없는 경우

var numbers = new Array();
var numbers = new Array(4);

 

2. 초깃값이 있는 경우

var numbers = ["one", "two", "three", "four"];
var numbers = Array("one", "two", "three", "four");

 

배열의 크기 - Array 객체의 length 프로퍼티

var numbers = ["one", "two", "three", "four"];

//배열명에 마침표와 length 프로퍼티를 작성하면 된다.
for(let i = 0; i<numbers.length;i++){
	document.write("<p>" + numbers[i] + "</p>");
}

 

Array 객체의 메소드

 

내장 객체 - Date 객체

Date 객체 인스턴스 만들기

1. 현재 날짜로 설정할 경우

let day = new Date();

2. 특정 날짜로 설정할 경우

let day = new Date("2020-02-25");

 

자바스크립트의 날짜와 시간 입력 방식

1. YYYY-MM-DD 형식

let onlyYear = new Date("2020");

let yearAndMonth = new Date("2020-02");

let yearMonthDay = new Date("2020-02-25");

2. YYYY-MM-DDTHH 형식

let day = new Date("2020-02-25T18:00:00");

let day2 = new Date("2020-02-25T18:00:00Z");

3. MM/DD/YYYY 형식

let day = new Date("02/25/2020");

4. 이름 형식

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

 

Date 객체의 메소드

 

내장 객체 - Math 객체

Math 객체의 특징

 - 수학 계산과 관련된 메소드가 많이 포함되어 있지만 수학식에서만 사용하는 것은 아님.

 - 무작위 수가 필요하거나 반올림이 필요한 프로그램 등에서도 Math 객체의 메소드를 사용한다.

 - Math 객체는 인스턴스를 만들지 않고 프로퍼티와 메소드를 사용한다.

 

Math 객체의 프로퍼티

 

Math 객체의 메소드

 

브라우저 관련 객체

브라우저 관련 객체의 계층 구조

window 객체의 프로퍼티

주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용

 

window 객체의 메소드

window 객체는 기본 객체이므로 'window.'를 생략하고 메소드 이름만 사용해도 됨.

 

브라우저 관련 객체 - navigator 객체와 history 객체

navigator 객체

 - 사용하는 브라우저가 많아지고, 웹 어플리케이션이 등장하면서 navigator 객체에 여러 프로퍼티가 등장하고 있음.

 - 일부 브라우저에서만 지원하는 프로퍼티도 있음

주요 프로퍼티

 

history 객체

 - 방문한 사이트 주소가 배열 형태로 저장됨

 

프로퍼티와 메소드

 

브라우저 관련 객체 - location 객체와 screen 객체

location 객체

 - 현재 문서의 URL 주소 정보가 담겨 있음

 - 이 정보를 편집해서 브라우저 창에 열 사이트/문서 지정

 

screen 객체

 - 사용자의 화면 크기, 정보