• 1. 여러 데이터로 구성된 하나의 데이터를 의미한다. 2. 중괄호 {}를 이용해서 객체의 데이터를 묶는다. 3. 객체 형식 { 속성: 값, '속성': 값 } 4. 객체 속성 1) 객체.속성 2) 객체['속성'] 5. JavaScript 객체 표기법을 이용한 데이터 교환 형식을 JSON이라고 한다.
▶ 객체 만들기
var person = {
name : '홍길동' ,
age : 30 ,
isAlive : true ,
hobbies : [
'여행' ,
'운동' ,
'요리'
],
bef : {
name : '고길동' ,
age : 30 ,
},
info : function (){
console . log ( '이름:' + this . name + '나이' + this . age ); // 현재 객체(person === this)
}
}
▶ 객체 속성 확인
console . log ( 'name:' + person . name );
console . log ( 'age:' + person . age );
console . log ( 'isAlive:' + person . isAlive );
for ( let i = 0 ; i < person . hobbies . length ; i ++){
console . log ( 'hobbies:' + person . hobbies [ i ]);
}
console . log ( "bef's name:" + person . bef . name );
console . log ( "bef's age:" + person . bef . age );
( person . info ());
객체 속성 동적 처리(추가, 삭제, 수정)
▶ 빈 객체 생성
▶ 속성 추가
car . model = '모닝' ;
car . maker = 'kia' ;
▶ 속성 수정
▶ 속성 삭제
• 생성자 함수 1. 객체를 만드는 함수이다. 2. new 키워드를 이용해서 객체를 만들 수 있다. 3. 관례상 첫 글자를 대문자로 작성한다. 4. 생성자 함수 형식 function 함수명(매개변수, 매개변수, ...){ this.속성 = 매개변수; this.속성 = 매개변수; ... }
▶ 생성자 함수 정의
function Product ( code , name , price ){
this . code = code ;
this . name = name ;
this . price = price ;
}
▶ 생성자 함수 호출(객체 생성)
var product = new Product ( 'A123' , '청소기' , 10000 );
▶ 객체 속성 확인
console . log ( product [ 'code' ]);
console . log ( product [ 'name' ]);
console . log ( product [ 'price' ]);
▶ 객체는 for-in문으로 각 속성을 순회할 수 있다.
var book = {
title : '어린왕자' ,
author : '생택쥐베리' ,
price : 10000
};
▶ 객체 속성 순회
for ( let p in book ){ // 객체 book의 속성(property)들이 변수 p로 하나씩 전달된다.
// 이 때 변수 p의 타입은 string 이므로, book.p는 동작하지 않고 book[p]만 동작한다.
console . log ( book . p ); // 안 됨
console . log ( book [ p ]); // 됨
}
▶ 테이블 만들기 성명 연락처 이메일
숙희 010-1111-1111 sookhee@gmail.net 정희 010-2222-2222 junghee@gmail.net 미희 010-3333-3333 mehee@gmail.net
1. 생성자 함수를 정의해서 3개의 객체를 생성하시오.
var Person = function ( name , phoneNumber , email ){
this . name = name ;
this . phoneNumber = phoneNumber ;
this . email = email ;
2. 생성된 3개의 객체를 배열에 저장하시오.
var people = [
new Person ( '숙희' , '010-1111-1111' , 'sookhee@gmail.net' ),
new Person ( '정희' , '010-2222-2222' , 'junghee@gmail.net' ),
new Person ( '미희' , '010-3333-3333' , 'mehee@gmail.net' )
];
3. 배열에 저장된 값을 테이블 형식으로 출력하시오.
var str = '<table border="1">' ;
str += '<thead><tr><td>성명</td><td>연락처</td><td>이메일</td></tr></thead>' ;
str += '<tbody>' ;
for ( let i = 0 ; i < people . length ; i ++){
str += '<tr>' ;
for ( let p in people [ i ]){
str += '<td>' + people [ i ][ p ] + '</td>' ;
}
str += '</tr>' ;
}
str += '</tbody></table>' ;
document . getElementById ( 'box' ). innerHTML = str ;
결과물
▶ JSON 내장 객체 1. JavaScript 객체 -> 문자열 형식의 JSON 데이터 var 문자열 = JSON.stringify(객체) 2. 문자열 형식의 JOSN 데이터 -> JavaScript 객체 var 객체 = JSON.parse(문자열)
▶ 객체 생성
var person = {
name : '홍길동' ,
age : 30
};
▶ 객체 -> 문자열
var str = JSON . stringify ( person );
console . log ( typeof str , str );
▶ 문자열 -> 객체
var person = JSON . parse ( str );
console . log ( typeof person , person );
▶ Date 내장 객체 1. 타임스탬프 기반으로 날짜와 시간을 나타낸다. (타임스탬프 : 1970년 1월 1일 자정 UTC 기준으로 증가하고 있는 밀리초) 2. 타임스탬프, 년, 월, 일, 시, 분, 초 등 원하는 값을 얻을 수 있다.
var timestamp = Date . now ();
console . log ( timestamp );
var strNow = Date (); // new Date().toString()
console . log ( typeof strNow , strNow );
// 객체 형식의 현재 날짜와 시간
var now = new Date ();
console . log ( typeof now , now );
결과 console
▶ 서버시간 타임시커처럼 구현해보기
< div id = "watch" >
< span id = "year" ></ span > 년
< span id = "month" ></ span > 월
< span id = "day" ></ span > 일
< span id = "hour" ></ span > 시
< span id = "minute" ></ span > 분
< span id = "second" ></ span > 초
</ div >
▶ 년, 월, 일, 시, 분, 초, 타임스탬프
var year = now . getFullYear ();
var month = now . getMonth (); // 주의 ! (0~11)
var day = now . getDate ();
var hour = now . getHours ();
var minute = now . getMinutes ();
var second = now . getSeconds ();
var timestamp = now . getTime ();
console . log ( year , month , day , hour , minute , second , timestamp );
▶ 특정 날짜와 시간을 가진 객체 생성
var someday = new Date ( 2023 , 8 , 30 , 16 , 30 , 30 ); // 2023-09-30 16:30:30 (8월이 아님 주의!)
console . log ( someday );
▶ 시계 만들기
setInterval ( function (){
// 화면 표시
var now = new Date ();
document . getElementById ( 'year' ). textContent = now . getFullYear ();
document . getElementById ( 'month' ). textContent = String ( now . getMonth () + 1 ). padStart ( 2 , '0' );
document . getElementById ( 'day' ). textContent = String ( now . getDate ()). padStart ( 2 , '0' );
document . getElementById ( 'hour' ). textContent = String ( now . getHours ()). padStart ( 2 , '0' );
document . getElementById ( 'minute' ). textContent = String ( now . getMinutes ()). padStart ( 2 , '0' );
document . getElementById ( 'second' ). textContent = String ( now . getSeconds ()). padStart ( 2 , '0' );
// 50초 넘으면 class 속성 변경
if ( now . getSeconds () >= 50 ){
document . getElementById ( 'watch' ). setAttribute ( 'class' , 'warning' );
} else {
document . getElementById ( 'watch' ). removeAttribute ( 'class' );
}
}, 1000 );
< style >
.warning {
color : crimson ; 50초가 넘어갔을 때 빨간색으로 변경해주는 style태그 }
}
</ style >
결과물
50초넘겼을때 결과
▶ 수능 디데이
var now = new Date (); // 2023-08-30
var dday = new Date ( 2023 , 10 , 16 ); // 2023-11-16
var timestamp = dday . getTime () - now . getTime ();
console . log ( timestamp / 1000 / 60 / 60 / 24 );
77일남음
