Notice
Recent Posts
Recent Comments
Link
Tags
more
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archives
Today
Total
관리 메뉴

JongDDA의 한걸음 한걸음씩

[JavaScript] 객체 본문

개발/프론트엔드

[JavaScript] 객체

종따 2021. 3. 18. 19:45
728x90

객체란?

자바스크립트는 객체(object) 기반 언어이다. 여기서 객체란 기능 또는 속성을 가지고 있는 데이터를 의미한다. 자바스크립트 객체의 기본적인 사용법은 다음과 같다.

 

객체.메소드(); // 메소드를 사용할 때

객체.속성; // 속성값을 조회할 때

객체.속성 = 값; // 속성값을 변경할 때

 

객체의 종류

자바스크립트 객체는 크게 내장 객체, 브라우저 객체 모델(BOM), 문서 객체 모델(DOM)로 나눌 수 있다.

내장 객체

내장 객체는 자바스크립트 엔진에 내장되어 있어, 필요한 경우 생성해 사용할 수 있다(우리는 이미 Math를 사용해봤습니다). 내장 객체로는 Date, Array, Math 등이 있다(추후 경험해 볼 예정입니다).

브라우저 객체 모델(BOM)

브라우저에 계층적으로 내장되어 있는 객체들을 브라우저 객체 모델이라고 한다. 브라우저 객체로는 window, screen, location 등이 있다.
아래는 브라우저 객체 모델을 활용해 현재 페이지의 링크를 확인하는 코드이다.

 

문서 객체 모델(DOM)

문서 객체 모델이란 HTML 문서 구조를 말한다. HTML 문서 구조 최상위에는 <html>이 있다.
자바스크립트 문서 객체 모델은 오래된 브라우저 등에서는 호환이 잘 되지 않는다는 불편함이 따른다.

 

Date 객체와 사용

Date 객체는 일자와 시간을 다루기 위한 내장 객체로, 아래와 같은 기능을 가진다.

  • 현재 시간을 가져온다.
  • 과거나 미래의 시간을 설정한다.
  • 시간 데이터를 계산한다.

Date 객체는 초기화가 필요하다. Date 객체를 사용하고 싶은 경우,아래 코드와 같이 초기화 해줘야 한다.

 

var DateObject = new Date();

 

이 프로그램에서는 Date 객체를 초기화해서 변수 now에 대입하고 있다. new는 객체를 초기화하기 위한 키워드이다. Date 객체를 포함한 몇몇 내장 객체를 new를 사용해서 초기화한 후 사용해야 한다.

 

예제. 시계 만들기

 

 

 

예제2. 실시간 시계

 

 

 

 

 

01_script.js
0.00MB

 

02_script.js
0.00MB
03_script.js
0.00MB

728x90
반응형

'개발 > 프론트엔드' 카테고리의 다른 글

[JavaScript] 연산자  (0) 2021.03.20
[JavaScript] 배열  (0) 2021.03.19
[JavaScript] 반복문  (0) 2021.03.17
[JavaScript] 제어문(if문)  (0) 2021.03.17
[HTML] 플렉스 박스(flex box)  (0) 2021.03.15
Comments