[javascript] D-Day-Counter (1)

1. 함수 선언 후 실행하기

함수는 선언 후 반드시 실행해야 사용할 수 있다. 실행은 소괄호를 이용한다.

• 함수 : 기능 수행 또는 계산을 수행하는 코드 집합을 의미한다.
• 함수 사용 : 호출 방법, 함수 선언 종류

// 0. 함수 정의하고 실행하는 방법

// 함수 정의하기.

// const output = function () {
//   console.log("함수를 실행했습니다.");
// };

// 함수 실행하기.

// 함수명()
// output();

2. input 값 가져오는 dateFormMaker 함수 만들기

원하는 날짜를 가져오는 동적인 값을 만들기 위하여 함수를 만들어준다.

여기서 document.querySelector를 이용하는데 document는 객체의 일부이다.

// 1. dateFormMaker 함수 만들기 : input에 담기는 값 가져오는 함수 만들기.

const dateFormMaker = function () {
  const inputYear = document.querySelector("#target__year__input").value;
  const inputMonth = document.querySelector("#target__month__input").value;
  const inputDate = document.querySelector("#target__date__input").value;

  // Template literals

  const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`;
  // 또 다른 함수에 dateFormat을 참조해야 한다.
  // 함수에 갇혀있는 변수 : 지역 변수
  // 함수 밖에 있는 변수 : 전역 변수
  // 바깥으로 나갈 수는 없지만, 안으로 들어갈 수 있다.
};

3. 현 시점에서 원하는 날짜까지 얼마나 남았는지 체크하는 countMaker 함수 만들기

• 현재 시간
• 원하는 시간
• 남은 시간 : 남은 날짜, 남은 시간, 남은 분, 남은 초 모두 계산할 수 있다.

시간이 너무 커서 24로 나누었을 때 (예를 들어서 시간이 75시간이면 24시간이 하루이기 때문에, 일 수로 변경할 수 있기 때문이다.), 몫은 며칠인지를 나타내는 것이고 (즉, 일 수를 나타낸다.) 나머지가 날짜로 변경 후 남은 시간을 의미한다.

이 부분은 계속 헷갈리니 계속 고민해보기.

 

  const remainingDate = Math.floor(remaining / 3600 / 24);

  const remainingHours = Math.floor(remaining / 3600) % 24;

  const remainingMins = Math.floor(remaining / 60) % 60;

  const remainingSecs = Math.floor(remaining) % 60;

 

그래서 이런 식으로 남은 시간들을 나타낼 수 있다.

 

// 2.  countMaker 함수 만들기 : 현 시점에서 원하는 날짜까지 얼마나 남았는지 체크하는 함수 만들기.

const countMaker = function () {
  const newDate = new Date(); // 현 시점
  const targetDate = new Date(dateFormat); // 원하는 날짜
  const remaining = (targetDate - newDate) / 1000; // 원하는 날짜에서 현 시점까지 남은 s(초)

  // 남은 날짜, 남은 시간, 남은 분, 남은 초 나타내기.

  const remainingDate = Math.floor(remaining / 3600 / 24);
  const remainingHours = Math.floor(remaining / 3600) % 24;
  const remainingMins = Math.floor(remaining / 60) % 60;
  const remainingSecs = Math.floor(remaining) % 60;
  console.log(remainingDate, remainingHours, remainingMins, remainingSecs);
};

4. dateFormMaker의 값 반환 받아 countMaker에서 이용하기

• 전역 변수와 지역 변수의 개념
• 이 경우에 함수의 반환이 이루어진다. 반환 후 바로 함수가 종료된다.

A 함수에서 값을 반환 받아 B 함수에서 이용하기.

1. A 함수에서 밖으로 내보내고 싶은 값을 반환하기.
2. B 함수에서 A 함수를 실행시키는 명령을 담은 변수 만들어주기.
3. B 함수에서 필요한 부분에 그 변수 넣어주기.

이 순서대로 실행한다면, 제대로 값을 반환받을 수 있다.

 

5. 함수의 선언 종류

함수 선언문	호이스팅 O
함수 표현식	호이스팅 X
화살표 함수

호이스팅이 존재하는 함수 선언문은 예측이 어렵기 때문에 잘 사용하지 않는다. 원래 자바스크립트 코드는 위에서 아래로 읽는다.

 

funtion 함수명(){} // 함수 선언문
const 함수명 = function(){} // 함수 표현식
const 함수명 = () => {} // 화살표 함수