자바 스크립트 예제(6)

  

자바로 날짜와 시간 표시하기

 

 

이번에는 자바 스크립트로 브라우저에 날짜와 시간을 나타내 보겠습니다. 이렇게 하기 위해서 우선 Date 객체에 대해서 알아보겠습니다. 이 객체는 내부적으로 1970년 1월 1일 0시를 기준으로 밀리세컨드 단위로 시간을 저장합니다. 따라서 1970년 이전의 날짜는 허용되지 않습니다.

일반적인 구문은 다음과 같습니다.

선언 : dateObjectName = new Date()

사용 : dateObjectName.methodName(parameters)

 

Date 객체의 도구는 다음과 같은 것들이 있습니다.

 

getDate, setDate : 날자를 얻거나 셋팅

getDay, setDay : 요일을 얻거나 셋팅. 0-일요일, 1-월요일 등

getHours, setHours ; 0 - 23

getMinutes, setMinutes ; 0 - 59

getMonth, setMonth : 0-1월, 1- 2월, ... ,11-12월

getSeconds, setSeconds : 0 - 59

getYear, setYear : 0-1900, 1-1901, ... ,96-1996.

getTime, setTime : milisecond 단위의 시간

toLocaleString : 로컬 시스템에 맞는 순서로

parse

toGMTString

UTC

 

Date 객체의 간단한 사용예를 보면 다음과 같습니다.

 

today = new Date()

str=today.toLocaleString()

 

이 예는 today라는 Date 객체 이름을 사용하여(물론 아무 이름이나 상관없습니다) 현재의 시간을 할당하고, 이를 로컬 스트링으로 변환하여 str에 할당합니다. 이제 필요한건 이 스트링을 보기좋게 출력해주면 됩니다.

 

그러면 이제 간단히 오늘의 날자를 알려주는 스크립트를 작성해 보겠습니다.

 

<html><head>

<SCRIPT LANGUAGE = "JAVASCRIPT">

 

function whatday() {

var now = new Date();

var days=new Array();

var year,month,day;

year=now.getYear() + 1900;

month = now.getMonth() + 1;

day = now.getDate();

var date=now.getDay();

var str=year+"년 "+ month+"월 "+ day +"일 ";

document.form1.but1.value=str;

}

 

</SCRIPT></head>

<BODY BGCOLOR="#0000FF" onLoad="whatday()">

<form name=form1>

<input type=text name=but1 size=20>

</form>

</body></html>

 

이제 시계를 만들어 봅시다. 일단 시간, 분, 초를 각각 getHours(), getMinutes(), getSeconds() 도구를 이용하여 알아낸 뒤 이를 화면에 디스플레이 하면 됩니다. 1초를 주기로 갱신하는 루틴이 첨가되면 완벽한 디지탈 시계가 될 것입니다. 스크립트는 다음과 같습니다.

 

<HTML><HEAD>

<SCRIPT LANGUAGE = "JAVASCRIPT">

 

var timer= null;

var isrunning=false;

 

function stop() {

if(isrunning)

clearTimeout(timer);

isrunning=false;

}

 

function start() {

stop();

start_time();

}

 

function start_time() {

var now= new Date();

var hour=now.getHours();

var minute=now.getMinutes();

var second=now.getSeconds();

var time_dis=" "+hour+" : ";

time_dis+=((minute < 10) ? "0" : " ") + minute;

time_dis+=((second < 10) ? " : 0" : " : ") + second;

document.clock.myclock.value=time_dis;

timer=setTimeout("start_time()",1000);

isrunning=true;

}

 

</SCRIPT>

</HEAD>

<BODY BGCOLOR="#0000FF" onLoad="start()">

<center>

<FORM name="clock" onSubmit="0">

<INPUT NAME="myclock" TYPE=text size=11>

</FORM>

</center>

</body></HTML>

 

지금까지 다룬 자바 스크립트라면 여러분의 홈페이지를 꾸미는 데 크게 부족하지 않을 것입니다.

그러면 이것으로 자바 스크립트 강좌를 마칩니다.