🔥 [UIUX] 0114 JAVASCRIPT Coding, 코딩 초급 8

✏️ 2025. 1월 14일 / javascript 초급 8

✈️ 날짜 객체에 대해 알아봅시다
날짜 객체는 날짜나 시간 관련 정보를 제공 받고 싶을 때 사용합니다.
날짜 객체 또한 변수 안에 선언할때 new 키워드를 붙이고 뒤에 Date()를 붙입니다.
new Date();라고 쓰면 오늘 날짜의 현재 시간 정보가 남습니다.
만약 특정 날짜 정보를 제공하고 싶은 경우 Date()의 ()소괄호 안에 날짜를 입력합니다.
날짜는 문자형으로 입력하거나 숫자형으로 입력할 수 있는데,
만약 숫자로 입력할 경우 월에서 1을 빼주어야 합니다.
프로그래밍 언어에서 시작 숫자는 0이므로, 0이 곧 1월이 됩니다.
또한 문자형으로 작성할 경우 연도와 월,일을 /(슬래쉬)로 구분하고,
만약 숫자형으로 작성할 경우 연도와 월,일을 ,(콤마)로 구분합니다.

      [기본형]
      1. 오늘 날짜의 현재 시간 정보를 알고 싶을 때 사용
      - var 참조변수 = new Date();
      2. 특정 날짜 정보를 제공하고 싶을 때 사용
          연 / 월 / 일을 슬래쉬로 구분하여 작성합니다.
      - var 참조변수 = new Date('연/월/일'); //ex. var date = new Date('2000/5/31')
      - ★ var 참조변수 = new Date(연,월-1,일); //ex. var date = new Date(2000,4,31)

✈️ 날짜 관련 메서드
날짜 관련 메서드는 날짜에서 특정한 연도나, 월, 요일, 시간 정보를
따로 빼서 가져오거나 바꾸고 싶을 때 사용합니다.
여기에서 날짜나 시간 정보를 가져오고 싶을 때에는 'get메서드'를 사용하고,
날짜나 시간정보를 바꾸고 싶을 때에는 'set메서드'를 사용합니다.

      [get]
      1. getFullYear() : 연도 정보를 가져옵니다.
      2. getMonth() : 월 정보를 가져옵니다.
      //-1된 값으로 표현됩니다. 0은 월요일입니다.
      3. getDate() : 일 정보를 가져옵니다.
      4. getDay() : 요일 정보를 가져옵니다. 
      //자바스크립트에서의 요일은 숫자로 표현됩니다. 
        0~6까지의 숫자로 표현이되며,
        0은 일요일, 6은 토요일 입니다.
      5. getHours() : 시 정보를 가져옵니다.
      6. getMinutes() : 분 정보를 가져옵니다.
      7. getSeconds() : 초 정보를 가져옵니다.
      8.★ getMilliSeconds() : 밀리초 정보를 가져옵니다.(1/1,000초 단위)
      9. getTime() : 1970년 1월 1일부터 경과된 시간을 밀리초 단위로 표시합니다.
      10. toGMTString(): GMT 표준 표기 방식으로 문자형 데이터로 시간을 반환합니다.

      [set]
      1. setFullYear() : 연도 정보만 수정합니다.
      2. setMonth() : 월 정보를 수정합니다.
      //-1된 값으로 수정 해야 합니다.
      3. setDate() : 일 정보를 수정합니다.
      //요일은 일자가 바뀌면 자동으로 바뀌므로 setDay는 없습니다.
      4. setHours() : 시 정보를 수정합니다.
      6. setMinutes() : 분 정보를 수정합니다.
      7. setSeconds() : 초 정보를 수정합니다.
      8. setMilliSeconds() : 밀리초 정보를 수정합니다.(1/1,000초 단위)
      9. setTime() : 1970년 1월 1일부터 경과된 시간을 밀리초 단위로 수정합니다.
      10. toLocaleString(): 운영 시스템 표기 방식으로 문자형 데이터로 시간을 반환합니다.

🛫 도전 실습! 2002년 월드컵의 요일 정보를 알아봅시다

      document.write("<h2>2002년 월드컵의 요일 정보를 구해보자!</h2>");
      var worldcup = new Date(2002, 4, 31); //월드컵은 2002년 5월 31일에 개최되었습니다.
      var theMonth = worldcup.getMonth() + 1; //월드컵 월 정보
      var theDate = worldcup.getDate(); //월드컵의 일 정보
      var theDay = worldcup.getDay(); //월드컵 일자의 요일 정보

      //요일을 숫자에서 문자로 변환하기
      switch (theDay) {
        case 0:
          theDay = "일요일";
          break;
        case 1:
          theDay = "월요일";
          break;
        case 2:
          theDay = "화요일";
          break;
        case 3:
          theDay = "수요일";
          break;
        case 4:
          theDay = "목요일";
          break;
        case 5:
          theDay = "금요일";
          break;
        case 6:
          theDay = "토요일";
          break;
        default:
          alert("해당하는 요일이 없습니다.");
      }

      document.write(
        "월드컵 개최일은" + theMonth + "월" + theDate + "일" + theDay
      );

⛅ 디데이 계산기를 만들어봅시다
☀️ 현재 날짜부터 특정 날짜까지 며칠이 남았는지 구하는 공식
남은 일 수(밀리초) = 특정 날짜 객체 - 현재 날짜 객체
☀️ 밀리초로 계산한 시간값
1초 = 1000(msc)
1분(60초) = 1000 * 60 > 60,000(msc)
1시간(60분) = 1000 * 60 * 60 > 3,600,000(msc)
1일(60분 * 24) = 1000 * 60 * 60 * 24 > 86,400,000(msc)

      var today = new Date(); //오늘 날짜
      var nowYear = today.getFullYear(); //현재 연도 정보
      var theDate = new Date(nowYear, 11, 31); //올해 말일 정보
      //남은 일수(밀리초) = 올해 말일(밀리초) - 오늘 날짜(밀리초)
      var diffDate = theDate.getTime() - today.getTime();
      //result = 반올림(남은일 수 / 하루)
      var result = Math.ceil(diffDate / (1000 * 60 * 60 * 24));
      document.write("연말 D-Day : " + result + " 일 남았습니다.");

🍀 수학 객체에 대해 알아봅시다
자바스크립트 내장 객체에는 수학과 관련된 기능과 속성을 제공하는 수학 객체가 있습니다.
더하기, 빼기, 곱하기, 나누기와 같은 간단한 연산식이 아닌
어려운 연산식을 쉽게 계산하도록 만들어진 객체입니다.

      [메서드와 상수 종류]
      1. Math.abs(숫자) : 숫자의 절대값을 반환한다.
      2. Math.max(숫자1, 숫자2, 숫자3...) : 숫자 중 가장 큰 값을 반환합니다.
      3. Math.min(숫자1, 숫자2, 숫자3...) : 숫자 중 가장 작은 값을 반환합니다.
      4. Math.pow(숫자, 제곱값) : 숫자의 거듭 제곱값을 반환합니다.
      5. Math.random() : 0 ~ 1 사이의 난수를 반환합니다.
      6. Math.round(숫자) : 소수점 첫째 자리에서 반올림하여 정수를 반환합니다.
      7. Math.ceil(숫자) : 소수점 첫째 자리에서 무조건 올림하여 정수를 반환합니다.
      8. Math.floor(숫자) : 소수점 첫째 자리에서 무조건 내림하여 정수를 반환합니다.
      9. Math.sqrt(숫자) : 숫자의 제곱근값을 반환합니다.
      10. Math.PI : 원주율 상수를 반환합니다.

      var num = 2.1234;
---------------------------------------------------
      var maxNum = Math.max(10, 5, 8, 30);
      document.write(maxNum, "<br/>"); //30
---------------------------------------------------
      var minNum = Math.min(10, 5, 8, 30);
      document.write(minNum, "<br/>"); //5
---------------------------------------------------
      var roundNum = Math.round(num);
      document.write(roundNum, "<br/>"); //2
---------------------------------------------------
      var floorNum = Math.floor(num);
      document.write(roundNum, "<br/>"); //2
---------------------------------------------------
      var ceilNum = Math.ceil(num);
      document.write(ceilNum, "<br/>"); //3
---------------------------------------------------
      var randomNum = Math.random();
      document.write(randomNum, "<br/>"); //0~1사이의 랜덤수
---------------------------------------------------
      var piNum = Math.PI;
      document.write(piNum, "<br/>"); //3.14159............

👀 랜덤 숫자를 출력해봅시다
Math.random()메서드를 사용하면 0과 1 사이의 랜덤한 난수를 반환합니다.
만약 0과 1사이가 아닌 임의로 지정한 숫자의 구간에서 난수를 정수로 반환 받고 싶다면
아래와 같은 공식을 사용합니다.

     [공식]
     Math.random() * 최댓값
0부터 최댓값 사이의 난수를 실수로 반환합니다.
----------------------------------------------------- 
     Math.floor(Math.random * (최댓값 + 1))
0부터 최댓값 사이의 랜덤한 수를 정수로 반환합니다.
-----------------------------------------------------
     Math.floor(Math.random()*(최댓값 - 최솟값 + 1)) + 최솟값;
원하는 구간 사이의 랜덤한 수를 정수로 반환합니다.

      //0과 10사이의 난수를 반환하기
      var num1 = Math.random() * 10;
      document.write(num1, "<br/>");
-----------------------------------------------------
      //0과 10사이의 난수를 정수로 반환하기
      num1 = Math.floor(Math.random() * 11);
      document.write(num1, "<br/>");
-----------------------------------------------------
      //120부터 150까지의 난수를 정수로 전환받기
      num1 = Math.floor(Math.random() * 31) + 120;
      document.write(num1, "<br/>");

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)