happy cat image

everdevel

Brand New Day

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

날짜값 가져오기 date

이번에는 날짜 정보를 가져오는 방법에 대해 알아봅시다.

몇월 몇일 몇시 몇분 몇초부터 언제까지 무언가를 표시하는 기능을 만들때 필요합니다.

현재의 날짜 데이터를 가져오는 방법

new Date();

자 그럼 어떤 값을 반환하는지 해봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - date</title>
<script>
    const NOW_DATE = new Date();
    document.write(NOW_DATE);
</script>
</head>
<body>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript date

결과는 여러분이 코드를 실행하는 시간이 나타나기 때문에 위의 이미지와는 다른 값이 나옵니다.

이 값에서 년, 월, 일, 시, 분, 초 값을 가져오는 방법에 대해 알아보겠습니다.

년도값 가져오기

getFullYear();

그럼 년도 값을 가져와 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - date</title>
<script>
    const NOW_DATE = new Date();
    document.write(NOW_DATE.getFullYear());
</script>
</head>
<body>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript date getFullYear

현재 년도가 잘 나옵니다.

다음은 월 값을 가져오겠습니다.

현재 월 값 가져오기

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - date</title>
<script>
    const NOW_DATE = new Date();
    document.write(NOW_DATE.getMonth());
</script>
</head>
<body>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript date getMonth

결과는 아마 여러분이 현재 코드를 실행한 월에서 1이 모자란 값이 나올겁니다.

월은 0부터 숫자를 반환합니다.

즉, 1월은 0, 2월은 1, 3월은 2 이런식입니다.

그러므로 월 값을 사용할 때는 +1한 값을 사용합니다.

다음과 같이요.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - date</title>
<script>
    const NOW_DATE = new Date();
    const NOW_MONTH = NOW_DATE.getMonth() + 1;
    document.write(NOW_MONTH);
</script>
</head>
<body>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript date getMonth

현재 제가 실행중인 월인 8이 나옵니다. ^^

자, 다음은 일 입니다.

오늘은 몇일인가에 대해서 봅시다.

현재 일 값 가져오기

getDate();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - date</title>
<script>
    const NOW_DATE = new Date();
    document.write(NOW_DATE.getDate());
</script>
</head>
<body>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript date getDate

제가 실행한 날은 15일이 맞습니다. ^^

이번엔 요일값 가져오는 방법을 알아봅시다.

현재 요일 값 가져오기

getDay();

getDay는 숫자를 반환합니다.

일요일부터 토요일 순으로 숫자를 나타냅니다.

그리고 0부터 반환합니다.

즉, 일요일은 0, 월요일은 1, 화요일은 2, 수요일은 3, 목요일은 4, 금요일은 5, 토요일은 6입니다.

그럼 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - date</title>
<script>
    const NOW_DATE = new Date();
    document.write(NOW_DATE.getDay());
</script>
</head>
<body>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript date getDay

숫자 6이 나옵니다. 네, 오늘은 6 토요일이 맞습니다.

보통 이런 경우 switch문을 사용해서 몇요일이다. 이렇게 표시를 하는데 switch문은 나중에 학습하니 아래의 코드는 대충 아하 그렇구나라고 생각하고 결과만 보고 넘어갑니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - date</title>
<script>
    const NOW_DATE = new Date();
    var nowDay = "";
    switch(NOW_DATE.getDay()){
        case 0:
            nowDay = "일요일";
            break;
        case 1:
            nowDay = "월요일";
            break;
        case 2:
            nowDay = "화요일";
            break;
        case 3:
            nowDay = "수요일";
            break;
        case 4:
            nowDay = "목요일";
            break;
        case 5:
            nowDay = "금요일";
            break;
        case 6:
            nowDay = "토요일";
            break;
        default :
            nowDay = "알수없는요일";
            break;
    }
    document.write("오늘은 " + nowDay);
</script>
</head>
<body>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript date getDay

다음은 현재 시 값 입니다.

현재 시 값 가져오기

getHours();

그럼 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - date</title>
<script>
    const NOW_DATE = new Date();
    document.write(NOW_DATE.getHours());
</script>
</head>
<body>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript date getHours

현재 제가 실행한 시간은 오후 11시 입니다. 즉 24시간 제로하여 23이 나오니 정상값입니다.

12시간제로 표시할려면 -12 를 해서 값을 표시하면 됩니다.

그럼 다음은 분입니다.

현재 분 값 가져오기

getMinutes();

그럼 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - date</title>
<script>
    const NOW_DATE = new Date();
    document.write(NOW_DATE.getMinutes());
</script>
</head>
<body>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript date getMinutes

제가 실행한 시간은 오후 11시 34분입니다. 34가 정확히 나옵니다.

자, 다음으로 초 값입니다.

현재 초 값 가져오기

getSeconds();

그럼 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - date</title>
<script>
    const NOW_DATE = new Date();
    document.write(NOW_DATE.getSeconds());
</script>
</head>
<body>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript date getSeconds

초까지 나오고 잘 사용하지 않지만 밀리초 해봅시다.

현재 밀리초 값 가져오기

getMilliseconds();

그럼 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - date</title>
<script>
    const NOW_DATE = new Date();
    document.write(NOW_DATE.getMilliseconds());
</script>
</head>
<body>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
로그인을 하면 PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript date getSeconds

이렇게 시간값에 대해서 알아봤습니다. ^^









봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준