- 프론트엔드 공부 22일차 -
함수
어떠한 기능을 수행하거나 계산을 수행하는 코드의 집합
함수 사용
함수를 호출하는 방법,함수 선언 종류
함수 선언 방법
함수의 표현식
const 함수이름 = function(param1, param2, ...) {
// 코드
return 결과값
}
함수의 선언문
function 함수이름(param1, param2, ...) {
// 코드
return 결과값
}
화살표 함수
const 함수이름 = ( param1, param2, ... ) => {
// 코드
return 결과값
}
실습
입력한 날짜까지 남은 시간 알려주기
<!DOCTYPE html>
<html lang="ko">
<head>
<title>D-Day</title>
<script>
const dateFormMaker = function() {
const inputYear = document.querySelector('#yearInput').value
const inputMonth = document.querySelector('#monthInput').value
const inputDay = document.querySelector('#dayInput').value
// const dateFormat = inputYear + '-' + inputMonth + '-' + inputDay;
const dateFormat = `${inputYear}-${inputMonth}-${inputDay}`
return dateFormat;
// console.log(inputYear, inputMonth, inputDay)
}
const counterMaker = function() {
const targetDateInput = dateFormMaker();
const nowDate = new Date();
const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0);
const remaining = (targetDate - nowDate) / 1000;
const remainingDate = Math.floor(remaining / 3600 / 24);
const remainingHour = Math.floor(remaining / 3600) % 24;
const remainingMin = Math.floor(remaining / 60) % 60;
const remainingSec = Math.floor(remaining) % 60;
console.log(remainingDate, remainingHour, remainingMin, remainingSec)
}
</script>
</head>
<body>
<input id="yearInput" class="date" >
<input id="monthInput" class="date">
<input id="dayInput" class="date">
<button onclick="counterMaker()">버튼</button>
</body>
</html>
const inputYear = document.querySelector('#yearInput').value
docutment.querySelector 란?
html 안에서 사용한 객체를 가져오기 위한 함수
() 안에 # 을 붙이면 id 를 .을 붙이면 class 를 아무것도 붙이지 않으면 태그의 값을 가져온다
const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0);
.setHours(0, 0, 0, 0) 이 붙은 이유?
한국의 표준시는 GMT+9 이기에 .setHours(0, 0, 0, 0)을 붙이지 않으면 아침 9시 기준으로 남은 시간이 나온다.
아침 9시가 아닌 자정으로 나타내기 위해 사용한 코드
만약
함수1() {
A
}
함수2(){
}
라는 코드가 있고 함수1 안의 A 값을 함수2에서도 사용하고 싶으면 함수1 안에 return A; 를 입력해야 한다.
또한 함수2에는 const newA = 함수2(); 와 같은 코드를 작성해야 한다.
'프론트엔드 공부 > Javascript 기초' 카테고리의 다른 글
| 25일차 프론트엔드 공부 - 함수 (1) | 2024.10.06 |
|---|---|
| 24일차 프론트엔드 공부 - 반복문 (0) | 2024.10.05 |
| 23일차 프론트엔드 공부 - 조건문 (0) | 2024.10.02 |
| 21일차 프론트엔드 공부 - 배열, 객체 (0) | 2024.09.29 |
| 20일차 프론트엔드 공부 - 기초 JavaScript (1) | 2024.09.28 |