여러 자료를 한꺼번에 담는다

객체란?

- 숫자, 문자열등을 포함하고 있는 복합자료형 이라고 한다

- 자바스크립트에서 객체는 저장하고 처리하는 기본 단위

 

 

 

복합자료형이란?

- 하나의 변수에 다양한 정보를 담기 위해 사용하는 자료형

 

내장객체

- 자바스크립트 안에서 미리 만들어진 객체

 

문서 객체 모델(DOM)

- 웹 문서 안에 포함된 이미지, 링크 , 텍스트 필드 각각 별도로 미리 만들어진 객체 

• 문서를 담는 Document객체
• 이미지를 관리하는 Image객체

 

브라우저 객체 모델(BOM)

- 웹 브라우저의 주소 표시줄이나 창 크기등 브라우저 정보를 객체로 다룬다.

 

• 브라우저 종류나 버전을 담고 있는 Navigatior객체
• 방문 기록을 남기는 history객체
• 주소 표시줄 정보를 담고 있는 Location객체
• 화면크기 정보가 들어 있는 screen객체

객체의 속성

- 객체에서 값을 담고 있는 정보를 속성(property)라고 부른다.

- 객체의 속성 값을 가져올 때 객체 이름 뒤에 마침표를 찍고 속성 이름을 적는다.

 

메서드

- 객체가 어떻게 동작할지 선언해 놓은 함수

window객체 안에 들어있는 요소

위에 그림이 표시된 것은 window객체의 메서드 라고 합니다.

 

 

객체의 인스턴스 소개

- image객체를 사용해서 똑같은 모양의 객체 3개를 만들어낸 다음 객체마다 원하는 이미지를 

  담아 놓은 것 입니다.

 

image객체 프로토타입

- 웹 이미지가 공통으로 가지는 속성과 기능을 모아 놓은 것

  웹 이미지를 만들기 위한 기본틀 프로토타입 이라고 한다.

 

 

객체의 인스턴스 만들기

- 새 객체를 만들 땐 new객체 예약어를 사용한다.

- new예약어 뒤에 객체 이름과 괄호( )를 써준다.

 

ex) 날짜 시간 정보를 작성할 때

var now = new Date( ) //Date객체의 인스턴스를 만든후 변수에 저장한 뒤 사용한다. 

 

현재 날짜와 시간 정보를 로컬 형식으로(현재 지역에 맞는 형식) 바꿔준다.

- toLocaleString( )함수

ex) now,toLocaleString( )

    현재 날짜와 시간 표시

 

 내장 객체로 무작위 수 프로그램 만들기

 

 Math객체 함수

- abs(X) : 숫자의 절댓값을 반환

- cbrt(x) : 숫자의 세제곱근 반환

- ceil(x) : 인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환 합니다.(숫자의 소수점 이하를 올린다.)

- floor(x): 같은 수 중애서 가장 큰 정수를 반환 합니다.(숫자의 소수점 이하를 버린다.) 

- random(x) : 0과 1사이의 무작위 수를 반환 한다.

- round(x) : 숫자의 소수점 이하를 반올림 한다.

 

아래처럼 계산 값에 1을 더해주면 정수부분 1에서 100까지 숫자가 표시 된다.

 ex)Math.random( )* 100 +1

     69.29102910920192

 

Math객체에서 소수점 이하를 버리는 함수는 floor( ) 입니다.

ex)Math.floor(Math.random( )*100+1)

    = 40 이 된다

 

객체리터럴 표기법

-  객체를 선언하면서 동시에 값을 지정하는 것 입니다

   var 객체이름 : {속성이름 : 속성값 }

 

함수이름 정의

 

var book = {

title : "자바스크립트"

함수이름 : function(  ){  -->함수 실행 소스 작성

   alert(this.title + "책의 분량은" + "thid.pages" + "쪽 입니다.")

}

 

사용자 정의 객체 title 속성값 가져오기

- book.title  

"자바스크립트"  

 

새로운 속성을 추가할 수 있음

field 속성을 추가한 다음 원하는 값을 넣을 수 있다.

ex) book.filed ="IT"

=IT

 

생성자 함수를 사용해 객체 만들기

 

- 필요한 속성과 함수는 미리 틀처럼 만들어 놓는다.

- 틀을 복제한 인스턴스를 만들어 정보 값을 담는다.

 

생성자 함수 객체 정의

 

- this.속성 이름 = 속성; 을 작성 한다.

※ 객체의 속성은 객체에서 사용하는 변수 ※

※ 객체의 함수는 해당 객체에서 사용하는 변수 ※

 

생성자 함수록 도서 목록 객체 만들기

 

 

속성을 book객체의 포함 하겠습니다

소스를 추가 해서 Book객체의 속성 값을 정의 한다.

인스턴스를 만들 때는 Book객체를 만들 때 사용한 매개변수에 넣을 값을 지정한다.

 

간단하게 책 제목만 골라서 작성 할때

이 소스는 배열로 작성 합니다. 변수에 여러 값을 저장 하는 복합 자료형 이다.

Book객체가 각각 저장 되어 있다.

 

bookList에 저장된 도서 객체에서 책 제목만 골라서 표시할 수 있다.

 

 

저장한 후 웹 브라우저 화면에서 확인

 

i는 방번호를 나타낸다

bookList.length는 = 배열 방의 개수를 나타낸다

 

 

Date객체 함수

- 날짜와 시간 정보를 가져오는 함수

- 날짜와 시간을 원하는 값으로 설정한다.

 

날짜 시간 정보를 가져오는 함수

- getFullyear( ) : 연도를 가져와서 네 자리를 표시

- getMonth( ) : 월을 가져와서 표시 0~11월을 숫자로 표시  0부터 1월이고 11은 12월 입니다.

- getDate( ) : 일자 정보를 가져온다

- getDay( ): 요일 정보를 가져온다 0~6의 숫자를 표시 0 일요일이고 6은 토요일에 해당한다.

- getTime( ) : 밀리초는 1/1000

- getHours( ): 0~23의 숫자로 시를 표시

- getMinutes( ) :  0~59 숫자로 분을 표시

- getSeconds( ) : 0~59 숫자로 초를 표시

- getMilliseconds( ): 0~999 밀리초로 표시

 

 날짜 시간 정보를 설정하는 함수

 - setFullYear( ) : 연도를 네 자리 숫자로 설정

- setMonth( ): 0~11은 월로 설정 한다. 0부터 1월이고 11은 12월 입니다.

- setDate( ): 1~31 숫자 일을 설정

- setTime( ): 자정 이후 시간을 밀리초 설정

- setHours( ): 0~23숫자를 시를 설정

- setMinutes( ):0~59 숫자를 분으로 설정

- setSeconds( ):0~59 숫자를 초로 설정

- setMilliseconds( )0~999 숫자를 밀리초로 설정

 

기념일 계산 프로그램 만들기 - 며칠 만났는지 알아보기

 

1. 결과값 영역에 id값을 확인하고 기억한다

2. 어떤 순서로 구성할지 순서도를 구성한다.

3. getTime( )함수 반환 값이 밀리초로 표시된다.

   밀리초로 바꿔서 계산하고 우리가 익숙한 시분초 형식으로 바꾼다.

4. 오늘 만난날 과 처음 만난날 Date객체의 인스턴스를 만들어 객체의 firstDay 변수에 저장한다.

 

5. 오늘 날짜의 밀리초 값과 처음 만난날의 밀리초 값을 계산 둘의 차이를 구한후 passedTime변수에 저장

 

 6. 밀리초 값을 1000밀리초*60분*60초*24시간 =1일 나눈값이 실수 이기 때문에 Math객체의 round( )함수를 사용후

   결과 값을 반올림 후 passedDay변수에 저장

7. #accent 영역에 나타내서 표시 한다.

   웹 브라우저에서  문서를 불러와 확인할 수 있다.

 

기념일 계산 프로그램 만들기 - 100일 후 날짜 계산하기

 

1.  100일을 밀리초 값으로 바꿔서 더한다

    처음 만난후 100일 되는날의 값을 알고 싶다. 

    처음 만난날에 100일을 더한다 Date객체의 인스턴스를 만든다.

 

    - var future = toFirst + 100*(1000*60*60*24);

    - var someday = new Date(future) ;

 

2.  연도, 월, 일을 추출한 값을 각각 해당 하는 변수에 저장

  

 - var year = someday.getFullYear( );  // ‘연도’를 가져와 year 변수에 저장합니다.
 - var month = someday.getMonth( ) + 1;  // ‘월’을 가져와 month 변수에 저장합니다.
 - var date = someday.getDate( );

 

3. innerText( )함수를 사용해 #date요소를 표시한다.

   document.querySelector("#date100").innerText = year + "년 " + month + "월 " + date + "일";

 

4. 웹 브라우저에 문서를 불러와 확인 한다.

 

기념일 계산 프로그램 만들기 calcDate( )함수 선언

 

- 여러번 반복하지 않고 특정 기념일을 계산하는 calcDate( )함수 작성

 

1. calcDate( )함수 자리를 만든다.

   100, 200일 기념일을 계산하는 값을 받는 매개변수(days)를 적는다.

 

function calcDate(days) {
var future = toFirst + days*(1000*60*60*24);  // 처음 만난 날에 밀리초로 바꾼 100일을 더합니다.
var someday = new Date(future);  // future 값을 사용해 Date 객체의 인스턴스를 만듭니다.

 

var year = someday.getFullYear( );  // ‘연도’를 가져와 year 변수에 저장합니다.
var month = someday.getMonth( ) + 1;  // ‘월’을 가져와 month 변수에 저장합니다.
var date = someday.getDate( );  // ‘일’을 가져와 date 변수에 저장합니다.

 

document.querySelector("#date"+days).innerText = year + "년 " + month + "월 " + date + "일";
}

 

2. 함수 실행 소스는 함수선언 앞에서 추가도 되고 뒤에서 추가 해도 된다.

   100, 200, 365, 500일 기념일을 계산 하는 함수를 호출 한다.