JavaScript와 친해지길 바래 🙏(6) - Date, SetInterval( )

재밌는 이벤트의 세계, JavaScript

---

💡 Date 객체

Date 객체는 웹 브라우저가 설치된 PC의 현재 시각을 얻어와요.

📎 Date 객체 선언

변수 변수이름 = new Date( );

  <script>
      let mydate = new Date();
  </script>

📎 Date 객체 값 리턴 받기

⚫️ getFullYear()

  <script>
    // 년 구하기
	let mydate = new Date();
	let yy = mydate.getFullYear();
  </script>

⚫️ getMonth()

  <script>
    // 월 구하기
	let mydate = new Date();
    
   	// 월은 0이 1월, 11이 12월을 의미한다.
	let mm = mydate.getMonth() + 1;
  </script>

⚫️ getDate()

  <script>
    // 일 구하기
	let mydate = new Date();
	let yy = mydate.getDate();
  </script>

⚫️ getDay()

  <script>
	let mydate = new Date();
    
    // 요일 배열 만들기
    let days = ['일', '월', '화', '수', '목', '금', '토'];
    
    // 0 = 일요일 ~ 6 = 토요일 값이 리턴
	let i = mydate.getDay();
    
    let day = days[i];
  </script>

⚫️ getHours()

  <script>
    // 시 구하기
	let mydate = new Date();
	let hh = mydate.getHours();
  </script>

⚫️ getMinutes()

  <script>
    // 분 구하기
	let mydate = new Date();
	let mi = mydate.getMinutes();
  </script>

⚫️ getSeconds()

  <script>
    // 초 구하기
	let mydate = new Date();
	let ss = mydate.getSeconds();
  </script>

⚫️ 예제로 확인하기

	<script>
		let mydate = new Date();
      
      	// 년 구하기      
        let yy = mydate.getFullYear();
      	// 월 구하기    
        let mm = mydate.getMonth() + 1;
      	// 일 구하기    
        let dd = mydate.getDate();
      
      	// 요일 구하기    
     	let days = ['일', '월', '화', '수', '목', '금', '토'];
        let i = mydate.getDay();
        const day = days[i];
      
      	// 현재 시각을 출력하기
        
        let hh = mydate.getHours();
        let mi = mydate.getMinutes();
        let ss = mydate.getSeconds();
	</script>

📎 Date 객체 값 재정의하기

⚫️ setYear()

  <script>
    // 년 재정의하기
	let mydate = new Date();
	let yy = mydate.setYear();
  </script>

⚫️ setMonth()

  <script>
    // 월 재정의하기
	let mydate = new Date();
	let mm = mydate.setMonth() + 1;
  </script>

⚫️ setDate()

  <script>
    // 일 재정의하기
	let mydate = new Date();
	let yy = mydate.setDate();
  </script>

⚫️ setHours()

  <script>
    // 시 재정의하기
	let mydate = new Date();
	let hh = mydate.setHours();
  </script>

⚫️ setMinutes()

  <script>
    // 분 재정의하기
	let mydate = new Date();
	let mi = mydate.setMinutes();
  </script>

⚫️ setSeconds()

  <script>
    // 초 재정의하기
	let mydate = new Date();
	let ss = mydate.setSeconds();
  </script>

⚫️ new Date(값1, 값2, ...)

  <script>
    // 파라미터 기입으로 날짜 재정의하기
	let mydate = new Date(2022, 11, 31);
  </script>

⚫️ 예제로 확인하기

	<script>
        // Date 객체에 임의의 날짜 / 시간 정하기
        const days = ['일', '월', '화', '수', '목', '금', '토'];

        let mydate = new Date();

        // Date 객체안에 저장된 시각을 임의 날짜로 변경하기
        mydate.setYear(2010);
        mydate.setMonth(1); // 0부터 시작하니까 2월
        mydate.setDate(14);
        mydate.setHours(12);
        mydate.setMinutes(16);
        mydate.setSeconds(30);

        // 년, 월, 일, 시, 분, 초를 리턴
        let yy = mydate.getFullYear();
        let mm = mydate.getMonth() + 1;
        let dd = mydate.getDate();
        let i = mydate.getDay();
        let day = days[i];

        let hh = mydate.getHours();
        let mi = mydate.getMinutes();
        let ss = mydate.getSeconds();

        const result = yy + "-" + mm + "-" + dd + "-" + day + " " + hh + ":" + mi + ":" + ss;

        document.write("<h1>" + result + "</h1>");
    </script>

📎 두 날짜의 차이를 구하기

⚫️ TimeStamp 값의 사용

• TimeStamp 1970년 1월 1일 자정부터 지금까지 지난 시각을 초 단위로 바꾼 값
• JavaScript에서는 getTime()함수를 통해서 Date객체가 담고있는 시각을 1/1000초 단위의 TimeStamp 형태로 변환하여 리턴해 줘요.
• (24시간 60분 60초 * 1000)으로 나누면 날짜 차이값을 구할 수 있어요.

	<script>
        // 날짜 객체
        let theday = new Date(2022, 0, 1); // 객체에 파라미터를 넘기면 날짜를 임의로 세팅할 수 있다.
        let today = new Date();

        let cnt = today.getTime() - theday.getTime();

        let day = Math.floor( cnt / (24 * 60 * 60 * 1000) ) ;
        document.write("<h1>올해는 " + day + "일 지났습니다.</h1>");
    </script>

---

💡 setInterval( )

다른 함수의 이름과 1/1000초 단위의 시간값을 파라미터로 설정하여 정해진 시간에 한번 씩 파라미터로 전달된 함수를 반복적으로 호출해요.

	<script>
 	 // 함수를 1초에 한 번씩 반복해서 자동 호출한다.
	setInterval(함수, 1000); 

	// 익명함수(: 함수의 이름이 없다.)를 1초에 한 번씩 반복해서 자동 호출한다.
	// 파라미터 형태로 전달되는 함수를 콜백함수라고 한다.
	setInterval(function(){
		.. 1초마다 반복 실행될 구문 ..
	}, 1000);
	</script>

📎 예제

⚫️ (1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!--
	onload : 페이지가 load 되었을 때 실행할 function
-->
<body onload="startTime()">
    <h1 id="timer"></h1>

    <script>
        function printTime(){
            // 현재시간을 구한다.
            let days = ['일', '월', '화', '수', '목', '금', '토'];

            let mydate = new Date();
            let yy = mydate.getFullYear();
            let mm = mydate.getMonth() + 1;
            let dd = mydate.getDate();

            let i = mydate.getDay();
            let day = days[i];

            let hh = mydate.getHours();
            let mi = mydate.getMinutes();
            let ss = mydate.getSeconds();

            // 완성된 현재 시각
            let result = yy + "-" + mm + "-" + dd + "-" + day + " " + hh + ":" + mi + ":" + ss;
            
            // getElemnetById : id 속성값이 timer인 요소에게 결과를 출력한다.
            document.getElementById("timer").innerHTML = result;
            
        }

        function startTime(){
            // printTime 함수를 1초에 한 번씩 반복해서 자동 호출한다.
            setInterval(printTime, 1000);
        }

    </script>
</body>
</html>

---

다음에 더 JavaScript와 친해질 거예요.🎈

---

출처
https://media.giphy.com/media/qqtvGYCjDNwac/giphy.gif
https://media.giphy.com/media/26tPplGWjN0xLybiU/giphy.gif