Dy's Room :: 자바스크립트

Date() 객체
Date 객체는 날자와 시간을 사용하게 해 주는 내장객체입니다.
자바스크립트에서 시간과 날짜는 사용자 컴퓨터의 시간을 기준으로 하며, 그리니치 표준시 (GMT)로 1970년 1월 1일 00:00:00을 기준으로 합니다. 이 객체 역시 new 연산자를 통해 생성을 해 주어야만 사용할 수 있습니다.
일반적인 date 객체 생성형식은 다음과 같습니다

객체명 = new Date() // 시스템의 현재 날짜를 자동으로 지정

객체명 = new Date(년,월,일,시,분,초,1/1000초) // 특정 날짜와 시간을 지정

객체명 = new Date(시,분,초,1/1000초) // 특정 시간을 지정

객체명 = new Date(월,연,일,시,분: 초: 1/1000초) // 문자열로 된 날짜와 시간을 지정

Date 객체에서 지원하는 메소드는 아래와 같습니다

getYear()/setYear()	연도표시/설정
getMonth()/setMonth()	월(0-11)표시/설정
getDate()/setDate()	일(1-31)표시/설정
getDay()/setDay()	요일(0-6)표시/설정
getHours()/setHours()	시(0-23)표시/설정
getMinutes()/setMinutes()	분(0-59)표시/설정
getSeconds()/setSeconds()	초(0-59)표시/설정
getTime()/setTime()	기준시(1970년1월1일00:00:00)를 기준으로 경과된 시간을 milisecond 로 표시/설정
toString()	날짜와 시간을 문자열로 변환
toLocaleString()	날짜와 시간을 지역시간 문자열로 변환
toGMTString()	날짜와 시간을 GMT 문자열로 변환
getTimezoneOffset()	GMT 와 지역시간의 차이를 분단위로 표시
getFullYear()/setFullyear()	연도수를 4자리수로 표시/설정

또, 날자와 시간을 문자열로 변환시켜주는toString(),toLocaleString(),toGMTString() 메소드 등이 있는데 하나씩 차근차근 공부해 보기로 합니다

먼저,오늘날짜를 출력하는 스크립트 예제를 공부해보도록 하죠.

1. <SCRIPT LANGUAGE="JavaScript">

2. <!--

3. now = new Date();

4. year = now.getYear();

5. month = (now.getMonth()+1);

6. date = now.getDate();

7. today = "오늘은 " + year + " 년 " + month + " 월" + date + " 일 입니다";

8. document.write(today);

9. //-->

10. </SCRIPT>

3번행 : now 라는 날짜변수를 생성합니다

4번행 : 현재의 연도를 구해서 year 라는 변수에 저장합니다

5번행 : 현재의 월에 해당하는 값을 구해서 month 라는 변수에 저장합니다. 좀 이상하다구요? 왜 1을 더했냐구요? getMonth() 메소드를 이용해서 반환받는 값은 1월=0, 2월=1, 3월=2....12월=11 처럼 0부터 시작해서 11까지입니다. 따라서 실질적인 월을 적용하려면 반환된 값에서 1을 더해주어 사용해야 합니다

6번행 :오늘의 날짜 값을 구합니다

7번행 : 각각의 변수와 문자열을 조합해서 출력할 내용을 today 라는 새로운 변수에 담습니다

8번행 : today 변수값을 출력 합니다

이번에는요일까지 함께 나타나도록 해 볼까요?

요일을 구하려면 getDay() 메소드를 사용한다고 하였습니다.

그런데, 이 getDay() 메소드에 의해 반환되는 값은 아쉽게도 0부터 6 까지의 숫자입니다. 따라서 우리가 원하는 월요일, 화요일... 처럼 문자열로 된 값을 반환받으려면 모종의 조치 (?)를 취해 주어야 합니다.

앞서 배운 Array() 배열을 이용하여 멋지게 요일을 출력 하도록 해 보겠습니다

1. <SCRIPT LANGUAGE="JavaScript">

2. <!--

3. now = new Date();

4. year = now.getYear();

5. month = (now.getMonth()+1);

6. date = now.getDate();

8. week = new Array("일요일","월요일","화요일","수요일","목요일","금요일","토요일");

9. weekday = week[now.getDay()];

10.

11. today = "오늘은 " + year + " 년 " + month + " 월" + date + " 일 " + weekday + " 입니다";

12. document.write(today);

13. //-->

14. </SCRIPT>

6번행까지는 위의 오늘날짜 구하는 코드와 다른 것이 없습니다.

8번행에서 각각의 요일값에 해당하는 문자열을 일요일부터 차례대로 넣어 week 라는 배열변수를 만들었습니다. 어디에 사용될까요?

자, 9번행을 볼까요?weekday = week[] 이 구문은 week 배열에서 특정 순서에 있는 배열값을 불러와weekday 라는 새로운 변수에 저장하도록 한 구문입니다. 즉, 요일값을 반환하는getDay() 메소드는 0부터 6까지의 숫자를 반환한다고 하였으니, 만약 오늘이 일요일이면 0을, 월요일이면 1을 반환하게 되겠죠? 그러면weekday = week[0],weekday = week[1],.. 이런식으로 오늘의 요일값에 해당하는 숫자가 배열번호로 적용되어 결국 일요일, 월요일,.. 처럼 문자열을 대입받게 됩니다.

이해가 가시나요? 잘 이해가 가지 않는다면 앞서배운 배열 부분도 다시한번 살펴 보도록 하세요

이번에는 복습하는 의미에서 역시 앞에서 배운 if ~ else 문을 이용해 오전인지 오후인지를 구분하여 현재의 시간을 나타내 보도록 하겠습니다.

어때요? 점점 재미있어지지 않나요?

1. <SCRIPT LANGUAGE="JavaScript">

2. <!--

3. now = new Date();

4. hour = now.getHours();

5. min = now.getMinutes();

6. var ampm;

7. if (now.getHours() <= 12) {

8. ampm = "오전";

9. }

10. else {

11. ampm = "오후";

12. }

13.

14. now_time = "지금은 " + ampm + ", " + hour + " 시 " + min + " 분 입니다";

15. document.write(now_time);

16. //-->

17. </SCRIPT>

오전인지 오후인지를 구분하는 것은 하루를 24시로 생각하여 12시보다 같거나 적으면 오전이되고, 12시가넘어 24시 까지는 오후로 취급 됩니다.
6번행에서 우선 오전오후를 문자열로 표현하기 위한 변수 ampm을 선언합니다.
7번행에서 만약 getHours() 메소드로 얻어진 값이 12보다 적거나 같으면(즉, 오전이면) ampm 이라는 변수에 "오전" 이라는 문자열을 할당하고, 그렇지 않을 경우 (12 보다 클 경우)에는 "오후" 라는 문자열을 ampm에 할당하고 있습니다.
이번에는 getTime() 메소드를 이용하여 특정일로부터 지난시간, 그리고 특정일까지 남은 일수를 계산하는 스크립트를 코딩 해 보도록 하겠습니다

1. <SCRIPT LANGUAGE="JavaScript">

2. <!--

3. now = new Date();

4. dDay = new Date(2005,1,1);

6. now2 = now.getTime();

7. dDay2 = dDay.getTime();

9. count = dDay2 - now2;

10. count = Math.floor(count/(24*3600*1000));

11.

12. document.write("2005년 까지 남은 일수는 " + count + " 일 입니다");

13. //-->

14. </SCRIPT>

자, 이 예문에서는 new 연산자를 두 번 사용하였습니다.
첫 번째(3번행)는 오늘의 현재시간값을 가져오고, 두 번째(4번행)는 d-day 즉, 특정일의 날짜를 지정하기 위해 사용하였습니다.
그리고 나서 각각의 시간을 getTime() 메소드를 사용하여 1970년 1월 1일 00 시 00 분 00 초를 기준으로 한 시간으로 바꾸어 주었습니다(6,7번행). 그렇게 해야 두 날짜간의 시간간격을 계산할 수 있으니까요. 참고로 한번 더 설명하자면 getTime() 메소드로 얻어진 날짜값은 1/1000 초 단위로 받환됩니다.
그다음,9번행에서 두 번째 날짜에서 오늘 날짜를 뺀값을 계산하여 count 라는 변수에 저장한 후, 그 값을 일수(1/000 초 단위를 일단위로)로 변환한 후 다시 count 변수에 저장하였습니다.
10번행에서는 처음보는 함수가 나왔죠? 이 Math 함수는 조금 있으면 배우게 될 수학계산을 위한 객체입니다.Math.floor() 는 계산후 남는 값을 버린다는 의미로 일단 이해합니다.
이렇게 해서 특정일까지 남은 일수를 계산할 수 있는데, 반대로 지나온 일수를 계산하려면 9번행의 식을 거꾸로 해 주면 되겠죠.

Date() 객체에 대한 것은 너무 오래하면 지루하니까 이쯤에서 접도록 하죠.

다음시간에는 방금 보았던 Math() 객체에 대해 알아보도록 하겠습니다.

Math 객체

Math 객체는 수학계산이나 난수 등을 얻기 위하여 사용되는 객체로서 다른 내장객체와 달리 정적 객체으므로 new 연산자 없이 사용할 수 있습니다.

Math.속성 혹은 Math.메소드

Math 객체의 주요 속성과 메소드는 아래와 같습니다

속성	E	자연로그 밑에 사용되는 오일러 상수
	LN10	10의 자연로그
	LN2	2의 자연로그
	Log10E
	LOG2E
	PI	원주율
	SQRT1_2	1/2의 제곱근
	SQRT2	2의 제곱근
메소드	abs(n)	n의 절대값
	acos(n)	n의 역 코사인 값
	asin(n)	n의 역 사인값
	atan(n)	n의 역 탄젠트값
	atan2(x,y)	지정된 x,y 좌표에서의 역 탄젠트 값을 반환
	cos(n)	n의 코사인값
	sin(n)	n의 사인 값
	sqrt(n)	n의 제곱근
	tan(n)	n 의 탄젠트 값
	ceil(n)	n을 올림한 값
	exp(n)	오일러 상수 e를 n승 한 값
	floor(n)	n을 내림한 값
	log(n)	n의 자연로그 값
	max(n,m)	둘 중 큰 수
	min(n,m)	둘 중 작은 수
	pow(n,m)	n 의 m 승
	random()	0과 1사이의 난수 반환
	round(n)	n을 반올림한 값

위의 메소드 중에서 녹색부분은 비교적 자주 사용되는 메소드 들이니까 그 사용법을 자세히 알아두는 것이 좋습니다

Math 객체중 아주 많이 사용되는 random() 메소드를 사용하여 페이지 로딩시마다 다른 메시지를 보여주는 스크립트를 만들어 보도록 하겠습니다

1. <SCRIPT LANGUAGE="JavaScript">

2. <!--

3. message = new Array();

4. message[0] = "아는길도 물어가라";

5. message[1] = "천리길도 한걸음 부터";

6. message[2] = "세살버릇 여든간다";

7. message[3] = "바늘도둑이 소도둑 된다";

8. message[4] = "낫놓고 기역자도 모른다";

9. random_message = Math.floor(Math.random()*5);

10. random_message = message[random_message];

11. document.write(random_message);

12. //-->

13. </SCRIPT>

3번행부터 8번행까지는 message 라는 배열을 생성하고 그 값을 할당하는 코드입니다.

9번행은 나중에 10번행에서 message 변수의 배열번호를 생성하기 위해 Math 메소드를 사용하였습니다.먼저 Math.random()*5 부분을 설명하면, random() 메소드가 0 과 1 사이의 난수를 발생시킨다고 하였습니다. 이 메소드를 사용하면 0.9430309596662887, 0.7973843631502664, 0.06254295714207958 등과 같이 0 보다는 크고 1 보다는 적은 수를 반환하게 되는데, 이러한 수에 배열값의 갯수(length)를 곱하고 floor() 메소드를 다시 적용하게 되면, 0에서 4 까지의 정수값을 반환해 줍니다. floor() 메소드는 Math.random()*5 의 계산결과에서 정수값을 제하고 남는 나머지 소수점 이하부분을 버리게 되니까요.

배열을 착실하게 공부하신 분들은 Math.random()*5 대신에 Math.random()*message.length를 사용해도 된다는 것을 깨달을 수 있을 것입니다.

이렇게 해서 얻게된 0부터 5 까지의 수를 10번행에서 배열번호로 사용하게 되는 것이므로 결과적으로 랜덤하게 배열번호를 생성하여 그 번호에 해당하는 메시지를 출력 할 수 있게 됩니다.

이처럼, Math 객체는 랜덤하게 메시지나 이미지, 기타 내용들을 출력하고자 할 때 많이 사용됩니다.

Math 객체를 이용해서 홈페이지를 더욱 생동감 넘치는 살아 있는 홈으로 가꾸어 보세요

Posted by Dy

Trackbacks List