Date Object
Date object는 년, 월, 일, 요일, 시간 등의 값을 구하거나 지정하는 JavaScript 브라우저 내장 객체로서 앞 페이지의 Array object와 마찬가지로 'new' Keyword로 객체를 생성합니다. 그 순서는
Date object 만들기
<body>
<script type="text/javascript">
// Date 객체를 생성하여 변수 myDate 에 저장한다.
var myDate = new Date()
// 일요일=0, 월요일=1, ... , 토요일=6 순으로 숫자를 return 반아서 변수 toDay에 저장.
var toDay = myDate.getDay()
document.write(toDay)
</script>
</body>
Date Object의 Method
NN : Netscape Navigator, IE : Internet Explorer (Property와 Method를 처리하는 최소 브라우저 버전)
| String Object Property |
| Methods |
설 명 |
NN |
IE |
| Date() |
Date object return |
2.0 |
3.0 |
| getDate() |
1~31 사이의 날자 return |
2.0 |
3.0 |
| getDay() |
0~6 (0=Sunday, 1=Monday, ...) 사이의 요일 return |
2.0 |
3.0 |
| getMonth() |
0~11 (0=January, 1=February, ...) 사이의 월 return |
2.0 |
3.0 |
| getFullYear() |
4 자리 수의 년도 return |
4.0 |
4.0 |
| getYear() |
0~99 사이의 년도 return |
2.0 |
3.0 |
| getHours() |
0-23 사이의 시간 return |
2.0 |
3.0 |
| getMinutes() |
0~59 사이의 분 return |
2.0 |
3.0 |
| getSeconds() |
0~59 사이의 초 return |
2.0 |
3.0 |
| getMilliseconds() |
0-999 사이의 1/1000초 return |
4.0 |
4.0 |
| getTime() |
1970년 1월 1일 자정 이후 현재 까지의 1/1000초 단위 시간 return |
2.0 |
3.0 |
| getTimezoneOffset() |
GMT 국제표준시(UTC : Coordinated Universal Time) 와 사용자 컴퓨터에 설정된 시간과의 시차 return |
2.0 |
3.0 |
| getUTCDate() |
1~31 사이의 UTC(국제표준시) 날자 return |
4.0 |
4.0 |
| getUTCDay() |
0~6 (0=Sunday, 1=Monday, ...) 사이의 UTC 요일 return |
4.0 |
4.0 |
| getUTCMonth() |
0~11 (0=January, 1=February, ...) 사이의 UTC 월 return |
4.0 |
4.0 |
| getUTCFullYear() |
4 자리 수의 UTC 년도 return |
4.0 |
4.0 |
| getUTCHours() |
0-23 사이의 UTC 시간 return |
4.0 |
4.0 |
| getUTCMinutes() |
0~59 사이의 UTC 분 return |
4.0 |
4.0 |
| getUTCSeconds() |
0~59 사이의 UTC 초 return |
4.0 |
4.0 |
| getUTCMilliseconds() |
0-999 사이의 UTC 1/1000초 return |
4.0 |
4.0 |
| setDate() |
1~31 사이의 날자 지정 |
2.0 |
3.0 |
| setFullYear() |
4 자리 수의 년도 지정 |
4.0 |
4.0 |
| setHours() |
0-23 사이의 시간 지정 |
2.0 |
3.0 |
| setMilliseconds() |
0-999 사이의 1/1000초 지정 |
4.0 |
4.0 |
| setMinutes() |
0~59 사이의 분 지정 |
2.0 |
3.0 |
| setMonth() |
0~11 (0=January, 1=February, ...) 사이의 월 지정 |
2.0 |
3.0 |
| setSeconds() |
0~59 사이의 초 지정 |
2.0 |
3.0 |
| setTime() |
1970년 1월 1일 자정 이후 현재 까지의 1/1000초 단위 시간 지정 |
2.0 |
3.0 |
| setYear() |
0~99 사이의 년도 지정 |
2.0 |
3.0 |
| setUTCDate() |
1~31 사이의 UTC 날자 지정 |
4.0 |
4.0 |
| setUTCDay() |
0~6 (0=Sunday, 1=Monday, ...) 사이의 UTC 요일 지정 |
4.0 |
4.0 |
| setUTCMonth() |
0~11 (0=January, 1=February, ...) 사이의 UTC 월 지정 |
4.0 |
4.0 |
| setUTCFullYear() |
4 자리 수의 UTC 년도 지정 |
4.0 |
4.0 |
| setUTCHour() |
0-23 사이의 UTC 시간 지정 |
4.0 |
4.0 |
| setUTCMinutes() |
0~59 사이의 UTC 분 지정 |
4.0 |
4.0 |
| setUTCSeconds() |
0~59 사이의 UTC 초 지정 |
4.0 |
4.0 |
| setUTCMilliseconds() |
0-999 사이의 UTC 1/1000초 지정 |
4.0 |
4.0 |
| toGMTString() |
UTC 시간을 문자열로 return.
예) 13 Nov 2003 00:44:26 UTC |
2.0 |
3.0 |
| toLocaleString() |
현재 시각을 문자열로 return.
예) 2003년 11월 13일 목요일 오전 9:45:41 |
2.0 |
3.0 |
| toString() |
현재 시각을 UTC 시간과 비교하여 return.
예) Thu Nov 13 09:46:06 UTC+0900 2003 |
2.0 |
4.0 |
Array 와 함께 사용하여 요일로 출력하기 <body>
<script type="text/javascript">
// 위에서 설명한 대로 new Keyword로 Date object 생성
var myDate = new Date()
// (1). 일요일=0, 월요일=1, ... , 토요일=6 순에 맞추어 일 ~ 토까지 element 7개 변수 배열
var dayArray = new Array("일","월","화","수","목","금","토")
// (2). 일요일=0, 월요일=1, ... , 토요일=6 순으로 숫자 0 ~6을 return 받아서 변수 toDay에 저장.
var toDay = myDate.getDay()
// (3). 위에서 받은 0~6 의 숫자 중에 dayArray의 element 7개중 순서에 맞는 글자 writeDay에 저장.
writeDay = dayArray[toDay]
document.write("<b style='color:red;'>" + writeDay + "</b> 요일 입니다.")
</script>
</body>
아마 첨 접하는 사람들은 언뜻 이해가 가지 않을 겁니다. 약간의 보충 설명을 하겠습니다. 일단 오늘이 목요일 이라고 가정하져. 아래의 표를 보면
| dayArray |
일 |
월 |
화 |
수 |
목 |
금 |
토 |
| toDay |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
- (1) 과정에서 변수 dayArray 에 일, 월, 화, 수, 목, 금, 토의 7개의 변수가 배열 됩니다.
- (2) 과정에서 변수 toDay에 getDay() Method 로 오늘의 요일에 맞는 번호가 return 되어 저장 됩니다. 목요일 이라고 가정했으니까 4가 들어 오겠군요.
- (3) 과정에서 dayArray[toDay] 는 결국 dayArray[4] 와 마찬 가지이므로 변수 dayArray의 0 에서 부터 5번째 배열 변수인 목이 writeDay 변수에 들어가게 되는거져. 그래서 document.write 에 의해서 " 요일 입니다." 라는 문자열과 합쳐져서 브라우저 창에 출력되었습니다.
Date Object와 setInterval, clearInterval Method를 사용하여 시간 출력하기
아마 JavaScript를 배워 보겠다고 용을 써본 사람들 중에 시계를 다루어 보지 않은 사람은 거의 없을 거라고 생각 되네요. 어딜 가나 널려 있는거지만 문자열을 합치고, 조건문을 사용하는 등 종합적으로 공부거리가 되는 것은 틀림 없습니다. 함 해 보시져...
입력
<html>
<head>
<title>시간 출력하기</title>
<style type="text/css">
<!--
@font-face {
font-family: Almagro;
font-style: normal;
font-weight: normal;
src: url(../../web_font/ALMAGRO0.eot);
}
-->
</style>
<script type="text/javascript">
<!--
var oInterval=""; // 조건을 만들기 위해 변수 oInterval 을 flag으로 세움.
function fnStartInterval(){
if(oInterval == ""){ // oInterval 변수 값이 비었으면
// id가 oTimer 인 div Tag을 내용을 "Interval Started" 로 하고
oTimer.innerHTML="Interval Started";
// oInterval 변수에 아래의 fnRecycle function을 대입하여 1초 마다 실행할 준비를 한다.
oInterval = window.setInterval("fnRecycle()",1000);
}
else{ // 아니면 fnStopInterval function을 실행하라.
fnStopInterval();
}
}
function fnStopInterval(){
if(oInterval != ""){ // oInterval 변수가 비어있지 않으면
window.clearInterval(oInterval); // 1초마다 실행하던 fnRecycle function을 중지하고
oInterval = ""; // 변수 oInterval에 저정한 데이터를 비운다.
// id가 oTimer 인 div Tag을 내용을 "Interval Stopped" 로 한다.
oTimer.innerHTML = "Interval Stopped";
}
}
function fnRecycle(){
var oDate = new Date(); // Date object를 생성해서 변수 oDate 에 저장한다.
var sSwitch = "am"; // sSwitch 변수를 만들어 문자열 'am'을 저장.
var iHours = oDate.getHours(); // iHours 변수에 시간 값 return 받아 저장.
if(iHours > 12){ // return 값이 12 보다 크면, 즉 오후면
iHours = iHours - 12; // 12 를 빼고
sSwitch = "pm"; // sSwitch 변수에 'pm'을 저장.
}
// sMinutes 변수에 분 값 저장하고빈 문자열 ""을 합쳐서 0~9 분일 때 앞에 0 을 넣을 자리수 확보.
var sMinutes = oDate.getMinutes() + "";
if(sMinutes.length == 1){ // sMinutes 값의 자리수가 1자리 라면 즉, 0~9 사이의 값이면
sMinutes="0" + sMinutes; // 앞에 0 을 더하고
}
// sSeconds 변수에 초 값 저장하고빈 문자열 ""을 합쳐서 0~9 분일 때 앞에 0 을 넣을 자리수 확보.
var sSeconds=oDate.getSeconds() + "";
if(sSeconds.length == 1){ // sSeconds 값의 자리수가 1자리 라면 즉, 0~9 사이의 값이면
sSeconds="0" + sSeconds; // 앞에 0 을 더한다.
}
// id가 oTimer 인 div Tag을 내용을 아래에 구한 시, 분, 초로 출력한다.
oTimer.innerHTML=iHours + ":" + sMinutes + ":" + sSeconds + " " + sSwitch;
}
// -->
</script>
</head>
<body topmargin="150">
<div align="center" ID="oTimer" style="font:bold 18px Almagro;
color: #0000FF;">Interval Stopped
</div>
<div align="center"><br /><br />
<input type="button" value="Start Interval" onclick="fnStartInterval()">
<input type="button" value="Stop Interval" onclick="fnStopInterval()">
</div>
</body>
</html>
