자바스크립트 객체(Object)/Date 객체

자바스크립트 객체(Object)/Date 객체
/category/Programming/JavaScript

2023. 12. 11. 20:35

728x90

- 객체?

: 여러 개의 값을 담는 것

var person = {
	name: 'hehesim', // 이름은 ~다.
    age: 28 // 나이는 ~다.
    favoriteMovie: 'Monster',
    hobby: ['코딩', '영화', '콘서트관람'], //배열
    money: {stock: 10, cash: 1}, //객체
    sayHello: function() {
    	console.log('hello') //메서드
    },
}

- 키(key/속성명)-값(속성값)으로 이루어짐

- 값 부분에는 단순 문자열, 숫자 뿐만 아니라 배열, 객체, 함수가 올 수 있다

- 값을 빼올 때는 객체.키 를 사용. (person.sayHello();)

- Date 객체 (내장 객체)

>> https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date에서 확인 가능

// 1. Date 객체 생성
var now = new Date(); //현재 시각을 기준으로 객체가 만들어진다. 

// 2. 연도를 가져오는 메서드
console.log(now.getFullYear());

// 3. 월 정보를 가져오는 메서드 (0:1월...이므로 실제 월은 +1)
console.log(now.getMonth()+1);

// 4. 일 정보를 가져오는 메서드
console.log(now.getDate());

// 5. 1970년 1월 1일 00:00:00을 기준으로 흐른 시간을 밀리초로 표시하는 메서드
console.log(now.getTime()); // 결과값 1702272447876

// 6. 특정 일의 Date 객체 생성
var christmas = new Date('2023-12-25');
console.log(christmas); // 결과값 2023-12-25T00:00:00.000Z

// 7. 특정 ms의 Date 객체 생성 (1970년 1월 1일 00:00:00 기준으로 괄호 시간이 지난 후의 시간 객체)
var ms = new Date(1702272447876);
console.log(ms); //2023-12-11T05:27:27.876Z

<실습>

기념일 계산기 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>기념일 계산기</title>
    <style>
        * {
            color: #333333;
        }
        p {
            margin-bottom: 1px;
        }
        .photos {
            margin-top: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #duhee {
            width:150px;
            height:150px;
            object-fit:cover;
            border-radius:50%;
            margin-right: 30px;
        }
        #jisook {
            width:150px;
            height:150px;
            object-fit:cover;
            border-radius:50%;
            margin-left: 30px;
        }
        #heart {
            width:50px;
            height:50px;
        }
        .gray {
            color: #a0a0a0;
        }
        .special-day {
            display: flex;
            justify-content: space-between;
        }
        .title {
            display: flex;
            align-items: center;
        }
        .days-left {
            text-align: right;
        }
        .date {
            text-align: right;
            color: #a0a0a0;
        }
    </style>
</head>
<body class="container">
    <section class='photos'>
        <img id='duhee' src="duhee.jpeg" alt="duhee">
        <img id='heart' src="heart.png" alt="heart">
        <img id='jisook' src="jisook.jpeg" alt="jisook">
    </section>
    <div class='container d-flex flex-column justify-content-center align-items-center mt-3'>
        <h3>두희♥지숙</h3>
        <h3 id='love'>0일째</h3>
        <h4 class="date">2023.11.05</h4>
    </div>
    
    <section class='special-day'>
        <h3 class='title'>발렌타인 데이</h3>
        <div class='date-box'>
            <p id='valentine' class='days-left'>0일 남음</p>
            <p class='date'>2024.2.14</p>
        </div>
    </section>
    <hr/>
    
    <section class='special-day'>
        <h3 class='title'>1000일</h3>
        <div class='date-box'>
            <p id='thousand' class='days-left'>0일 남음</p>
            <p id='thousand-date' class='date'>0000.00.00</p>
        </div>
    </section>
    <hr/>
    
    <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
    <script>
    
   		 // 1) 우리 몇일째?
        var now = new Date(); //현재날짜 객체
        var start = new Date('2023-11-05'); // 사귄 날 객체

        var timeDiff = now.getTime() - start.getTime(); //기준날짜 기준 현재날짜까지의 ms-사귄날까지의 ms를 하면 사귄 기간이 나온다.
        // 보통 사귀면 그 해당 날짜부터 1일이기때문에 +1을 해준다.
        var day = Math.floor(timeDiff / (1000*60*60*24)+1); //나온 ms를 일수로 바꾸기 
        // 1000을 곱해 초로 만들고, 60초가 1분, 60분이 1시간, 24시간이 하루니까 곱하고 하루 더하기.
        // 사귄날수를 정수로 만들기 위해 Math.floor()함수 사용. (소수점 버리기)
        $('#love').text(day+'일째');
        
        
        // 2) 기념일까지 남은 날짜는?
        var valentine = new Date('2024-02-14');
        var timeDiff2 = valentine.getTime() - now.getTime();
        var day2 = Math.floor(timeDiff2 / (1000*60*60*24) +1);
        $('#valentine').text(day2+'일 남음');
        
        
        // 3) 천일은 언제인가?
        var ms = start.getTime() + 999*(1000*60*60*24);
        var thousand = new Date(ms);
        var thousandDate = thousand.getFullYear()+'.'+(thousand.getMonth()+1)+'.'+thousand.getDate();
        $('#thousand-date').text(thousandDate);
    </script>
</body>
</html>

1) 사귄날로부터 몇일째인지

- timeDiff = now.getTime() - start.getTime();

기준날짜 기준으로 현재날짜까지의 ms - 사귄날까지의 ms를 일수로 바꿔준다.

- 사귄날 부터 1일이기 때문에 +1을 해줌.

- 사귄날수를 정수로 만들기 위해 Math.floor()함수 사용하여 소수점 버리기.

2) 특정 기념일이 몇일 남았는지

- timeDiff = specialDay.getTime() - now.getTime();

기준날짜 기준으로 특정 기념일까지의 ms - 현재날짜까지의 ms를 일수로 바꿔준다.

3) 사귄날로부터 몇일 후는 언젠지

- 1000일의 밀리초 = 사귄날.getTime() + 999일의.getTime()하여

1000일 = new Date(1000일의 밀리초); // 즉, 기준날짜 기준으로부터 1000일의 밀리초가 지난 날짜의 객체 생성

- 그 날짜 객체를 활용하여 getFullYear(), getMonth()+1, getDate() 을 활용하여 실제 날짜가 나오도록 출력.

2)번 활용하여 남은 일수로도 바꿔줌.

728x90

저작자표시

'Programming > JavaScript' 카테고리의 다른 글

jQuery (0)	2023.12.11
자바 스크립트 런타임/ 비동기처리 (1)	2023.10.19

hehe_sim

CATEGORIES