Date메소드, math메소드

Date

• 시스템의 현재 날짜와 시간 정보가 포함된 정보 획득하기 
  • var now = new Date();
    console.log(now);
  • //Fri Dec 17 2021 10:48:25 GMT+0900 (한국 표준시)
• Date의 주요 메소드
  • console.log("년", now.getFullYear());
    console.log("월", now.getMonth() + 1); //월은 0 ~ 11
    console.log("일", now.getDate());
    console.log("시", now.getHours());
    console.log("분", now.getMinutes());
    console.log("초", now.getSeconds());
    console.log("유닉스타입", now.getTime());
    console.log("날짜", now.toLocaleDateString());
    console.log("시간", now.toLocaleTimeString());
  • 자바스크립트는 내가 원하는 날짜대로 표현하는 기능은 부족하다.
  • moment.js라는 라이브러리를 사용하면 쉽게 날짜를 다룰 수 있다. 
• moment라이브러리 
  • <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>

• 표를 만들었다. 
• 
  <div class="mb-3 p-3" id="date-button-group">
  <button class="btn btn-outline-secondary btn-sm active" onclick="set1Week()" id="btn-1-week">1주일</button>
  <button class="btn btn-outline-secondary btn-sm" onclick="set1Months()" id="btn-1-month">1달</button>
  <button class="btn btn-outline-secondary btn-sm" onclick="set3Months()" id="btn-3-month">3개월</button>
  </div>
  <div class="mb-3">
  <input type="date" id="from-date"> ~ <input type="date" id="end-date" name="end" readonly="readonly">
  </div>
• onclick라는 이벤트를 발생하면 해당하는 버튼의 함수가 실행된다. 
• 우선 자바스크립트에 날짜가 표시되는 input태그를 입력하고 id의 값을 부여했다. 
  도큐먼트에서 id를 찾는 함수를 실행한다. 
  var from = document.getElementById("from-date");
  var end = document.getElementById("end-date");
  위의 해당 botton을 클릭하면 날짜가 변경되도록 입력한다.
• function set1Week(){
  from.value = moment().add(-1,'w').format("YYYY-MM-DD");
  end.value = moment().format("YYYY-MM-DD"); }
• function set1Months(){
  from.value = moment().add(-1,'M').format("YYYY-MM-DD");
  end.value = moment().format("YYYY-MM-DD"); }
  
• function set3Months(){
  from.value = moment().add(-3,'M').format("YYYY-MM-DD");
  end.value = moment().format("YYYY-MM-DD"); }
  • 이제 해당하는 이벤트를 클릭하면 날짜가 변경되도록 moment의 메소드를 입력했다. 
• 그러나 해당 1주일 1달 3달후라는 버튼을 클릭하면 셋팅이 변경되도록 작성하고 싶다. 
  • 그래서 버튼들에게 id를 부여했다. 
  • function clearActiveDateButton(){
    var buttons = document.querySelectorAll("#date-button-group button");
    //아이디가 date-button-group에서 button을 싹다 가져오도록 함
    buttons.forEach(button => button.classList.remove('active'));
    //버튼클래스에 있는 active의 글자를 없애달라고작성함
    }
• 그리고 메소드에 이 함수를 추가했고, 해당하는 id의 엘리먼트에 active라는 클래스에 넣어 활동성있어보이게 변경했다. 
• 
  function set1Week(){
  from.value = moment().add(-1,'w').format("YYYY-MM-DD");
  end.value = moment().format("YYYY-MM-DD");
  clearActiveDateButton();
  document.getElementById("btn-1-week").classList.add('active')
  }
  function set1Months(){
  from.value = moment().add(-1,'M').format("YYYY-MM-DD");
  end.value = moment().format("YYYY-MM-DD");
  clearActiveDateButton();
  document.getElementById("btn-1-month").classList.add('active')
  }
  function set3Months(){
  from.value = moment().add(-3,'M').format("YYYY-MM-DD");
  end.value = moment().format("YYYY-MM-DD");
  clearActiveDateButton();
  //전체적으로 삭제 후 
  document.getElementById("btn-3-month").classList.add('active')
  //해당하는 아이디의 엘리먼트를 active를 클래스에 넣는다. 
  }
• 그런데 뭔가 너무 반복되는 함수들이 존재한다. 그래서
• function changeFromToEnd(number, type, id) {
  //날짜를 변경하는 함수를 설정하는데, 매개변수로는 변경하는 숫자와 타입, id를 입력받도록 작성했다.
  from.value = moment().add(number, type).format("YYYY-MM-DD");
  //변경하는 부분을 입력하고
  end.value = moment().format("YYYY-MM-DD");
  //숫자가 변경되게 입력했다. 
  clearActiveDateButton();
  //다른 버튼을 클릭하면, 해당 버튼클래스에 있는 active의 글자를 삭제하는 함수를 실행한다. 
  document.getElementById(id).classList.add('active');
  //그리고 해당하는 id가 실행되면 active를 클래스에 넣는 메소드가 실행되게 작성
  }
  
  changeFromToEnd(-1,'w','btn-1-week');
  changeFromToEnd(-1,'M','btn-1-week');
  changeFromToEnd(-3,'M','btn-1-week');
• 버튼의 설정도 메소드가 실행되도록 작성한다. 메소드에 해당하는 매개변수를 입력한다. . 
• <button class="btn btn-outline-secondary btn-sm active" 
  onclick="changeFromToEnd(-1,'w','btn-1-week')" id="btn-1-week">1주일</button>
  <button class="btn btn-outline-secondary btn-sm"
   onclick="changeFromToEnd(-1,'m','btn-1-months')" id="btn-1-month">1달</button>
  <button class="btn btn-outline-secondary btn-sm" 
  onclick="changeFromToEnd(-3,'m','btn-3-months')" id="btn-3-month">3개월</button>
  
  
• 이렇게 하나로 만들어서 코드가 간경하게 만드는 것을 리펙토링이라고 한다. 
• 사용성이 좋아지고, 호환성도 좋고, 코드가 간결하게 코드를 클린하게 변경하는 것이 리펙토링이라고 한다. 
  •  

math

• 산술과 연관된 함수다. 
• console.log("절대값",Math.abs(-3)); // 3
  console.log("천장값",Math.ceil(1.4)); // 2
  console.log("바닥값",Math.floor(1.4)); // 1
  console.log("반올림",Math.round(1.3)); // 1
  console.log("소숫점버림",Math.trunc(1.9)); // 1
  console.log("난수",Math.random()); // 0<= value < 1 범위의 실수
• var x = 0.1, y = 0.2;
  console.log(x + y);  //0.30000000000000004
  console.log((10*x + 10*y)/10); //0.3
  • 소수점을 없애는 값을 곱하고, 그 값을 나눠야 정확한 값이 나온다.
  • 컴퓨터는 부동소수점으로 저장하기 때문에 근사값으로 계산해서 실수의 값은 정확하지 않다. 
  • 그렇기 때문에 2번째 방식으로 계산해야 값이 정확하게 나온다.