- 프론트엔드 공부 23일차 -
조건문
비교 연산자
두개의 데이터를 서로 비교하는 방법
조건문
코드의 실행 분기점
비교 연산자
엄격한 비교 연산자
===
느슨한 비교 연산자
==
느슨한 비교 연산자보다 엄격한 비교 연산자를 이용하는 것이 좋다
ex)
1 === “1”
false
1 == “1”
true
0 == “0”
true
0 == []
true
“0” == []
false
배열과 객체의 비교
원시 타입 (Primitive type)
참조 타입 (Reference type)
원시 타입
String, Number, Boolean, Bigint, undefined, Symbol, Null
참조 타입
원시 타입 이외의 모든 것
원시 타입 특징
불변성 (데이터가 변하지 않는 속성)
참조 타입의 특징
가변성
ex)
값의 복사
let a = “hi”
let b = a
b = “bye”
console.log(b) -> “hi”
값의 복사 (참조 타입)
let a = [1, 2, 3]
let b = a
a.pop()
console.log(a) = [1, 2]
console.log(b) = [1, 2]
조건문
로직의 실행 분기
우리가 작성한 조건이 참일경우 지정한 코드를 수행하도록 하는 기능
if(조건식)
if( 조건1 ) {
// 조건1이 참이면 실행
} else if( 조건2 ) {
// 조건1은 거짓, 조건2는 참이면 실행
} else {
// 모두 거짓이면 실행
}
논리 연산자
&& AND 연산자 => 양쪽에 위치한 조건이 모두 만족하는 경우 true
|| OR 연산자 => 양쪽에 위치한 조건 중, 하나라도 만족하는 경우 true
<!DOCTYPE html>
<html lang="ko">
<head>
<title>D-Day</title>
<link rel="stylesheet" href="./index.css" />
<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;
// remaining === 0 (남은 시간이 0)
if (remaining <= 0) {
console.log("타이머가 종료되었습니다.");
} else if (isNaN(remaining)) {
// 만약 잘못된 날짜가 들어왔다면, 유효한 시간이 아닙니다 출력
console.log("유효한 시간이 아닙니다.");
}
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>
<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="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 id="startBtn" onclick="counterMaker()">카운트다운</button>
</body>
</html>
* {
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;
}
#startBtn {
margin-top: 0.5rem;
font-size: 1.5rem;
}
isNAN(a)
- a 가 NAN인지 판별해주는 코드
a 가 NAN 이면 true, 아니면 false 를 출력
'프론트엔드 공부 > Javascript 기초' 카테고리의 다른 글
| 25일차 프론트엔드 공부 - 함수 (1) | 2024.10.06 |
|---|---|
| 24일차 프론트엔드 공부 - 반복문 (0) | 2024.10.05 |
| 22일차 프론트엔드 공부 - 함수 (0) | 2024.10.01 |
| 21일차 프론트엔드 공부 - 배열, 객체 (0) | 2024.09.29 |
| 20일차 프론트엔드 공부 - 기초 JavaScript (1) | 2024.09.28 |