- 프론트엔드 공부 24일차 -
반복문
반복적인 코드의 양을 획기적으로 압축
ex)
for(최초식; 조건식; 증감문){
// 반복을 수행할 코드
}
while문
ex)
최초식
while( 조건식 ){
// 반복을 수행할 코드
증감식
}
- 최초식 : let i = 0
- 조건식 : i < 10
- 증감식 : i = i + 1
while문 주의사항
종료 조건을 제대로 설정하지 않으면 무한 반복이 일어남.
html의 head에서 script를 이용해 JS를 사용할 때 주의사항
기본적으로 html은 body 태그를 생성하기 전 head 태그의 코드부터 해석한다.
그렇기에 홈페이지가 열리면 html의 코드가 수정되게 하기위해 JS를 할 수 있는데 이 경우 html 태그를 생성하기 전에 JS를 실행하기에 수정할 태그가 존재하지 않아 오류가 발생할 수 있다. 이럴경우 script 안에 defer을 사용하면 된다.
<script src="./index.js" defer></script>
defer 란?
스크립트 태그를 해석하는 와중 html 태그를 생성한다.
코드)
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<title>D-Day</title>
<link rel="stylesheet" href="./index.css" />
<script src="./index.js" defer></script>
</head>
<body>
<h1>D-Day</h1>
<div id="ddayContainer">
<div class="ddayChildContainer">
<span id="days">0</span>
<span>일</span>
</div>
<div class="ddayChildContainer">
<span id="hours">0</span>
<span>시간</span>
</div>
<div class="ddayChildContainer">
<span id="min">0</span>
<span>분</span>
</div>
<div class="ddayChildContainer">
<span id="sec">0</span>
<span>초</span>
</div>
</div>
<div id="ddayMessage"></div>
<div id="targetSelctor">
<input id="yearInput" class="date" size="5" placeholder="년" /> -
<input id="monthInput" class="date" size="5" placeholder="월" /> -
<input id="dayInput" class="date" size="5" placeholder="일" />
</div>
<button class="btn" onclick="starter()">카운트다운</button>
<button class="btn" onclick="setClearInterval()">타이머 초기화</button>
</body>
</html>
JS
const messageContainer = document.querySelector("#ddayMessage");
const container = document.querySelector("#ddayContainer");
const intervalIdArr = [];
messageContainer.innerHTML = "<h3>D-Day를 입력해주세요.</h3>";
container.style.display = "none";
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;
// remaining === 0 (남은 시간이 0)
if (remaining <= 0) {
messageContainer.innerHTML = "<h3>타이머가 종료되었습니다.</h3>";
messageContainer.style.display = "flex";
container.style.display = "none";
setClearInterval();
return;
} else if (isNaN(remaining)) {
// 만약 잘못된 날짜가 들어왔다면, 유효한 시간이 아닙니다 출력
messageContainer.innerHTML = "<h3>유효한 시간이 아닙니다.</h3>";
messageContainer.style.display = "flex";
container.style.display = "none";
setClearInterval();
return;
}
const remainingObj = {
remainingDate: Math.floor(remaining / 3600 / 24),
remainingHour: Math.floor(remaining / 3600) % 24,
remainingMin: Math.floor(remaining / 60) % 60,
remainingSec: Math.floor(remaining) % 60,
};
const documentObj = {
days: document.getElementById("days"),
hours: document.getElementById("hours"),
min: document.getElementById("min"),
sec: document.getElementById("sec"),
};
const timeKeys = Object.keys(remainingObj);
const docKeys = Object.keys(documentObj);
for (let i = 0; i < timeKeys.length; i++) {
documentObj[docKeys[i]].textContent = remainingObj[timeKeys[i]];
}
// documentObj["days"].textContent = remainingObj["remainingDate"];
// documentObj["hours"].textContent = remainingObj["remainingHour"];
// documentObj["min"].textContent = remainingObj["remainingMin"];
// documentObj["sec"].textContent = remainingObj["remainingSec"];
for (let key in documentObj) {
documentObj.lo;
}
};
const starter = function () {
container.style.display = "flex";
messageContainer.style.display = "none";
counterMaker();
const intervalId = setInterval(counterMaker, 1000);
intervalIdArr.push(intervalId);
};
const setClearInterval = function () {
container.style.display = "none";
messageContainer.style.display = "flex";
for (let i = 0; i < intervalIdArr.length; i++) {
clearInterval(intervalIdArr[i]);
}
};
CSS
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 3rem;
}
#ddayContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 1.6rem;
}
.ddayChildContainer {
text-align: center;
margin-right: 1rem;
}
.ddayChildContainer span {
font-size: 1.3rem;
}
.btn {
margin-top: 0.5rem;
font-size: 1.5rem;
}
setTimeout() 함수
setTimeout(() => {
counterMaker();
}, 1000 );
counterMaker() 라는 함수를 1초 뒤에 실행하라는 의미(지연)
setInterval() 함수
setInterval(counterMaker, 1000);
setInterval(함수, 시간)
특정 시간마다 함수를 반복 실행한다.
'프론트엔드 공부 > Javascript 기초' 카테고리의 다른 글
| 26일차 프론트엔드 공부 - DOM (3) | 2024.10.07 |
|---|---|
| 25일차 프론트엔드 공부 - 함수 (1) | 2024.10.06 |
| 23일차 프론트엔드 공부 - 조건문 (0) | 2024.10.02 |
| 22일차 프론트엔드 공부 - 함수 (0) | 2024.10.01 |
| 21일차 프론트엔드 공부 - 배열, 객체 (0) | 2024.09.29 |