베이스캠프 12일차
자바스크립트를 집중적으로 배운지 2일차이다.
오늘 강의가 많아서 정해진 시간 내에 듣는라고 힘들었다.
querySelector를 활용한 데이터 참조
자바스크립트로 특정 태그를 연결시키는 방법에는 querySelector가 있다.
querySelector("input") or querySelector("#id") or querySelector(".class) 이런식으로 작성이 가능하다.
즉 태그와 id, class을 이용하여 자바스크립트와 연결이 가능하다.
new Date() 메소드1
new Date() 메소드는 우리가 원하는 시간을 형식에 맞춰서 데이터를 보여주게 된다.
기본으로는 현재 날짜와 현재 시간을 불러온다.
new Date('2022-08-24') 이런식으로 매개변수를 넣으면 특정 시간대의 날짜와 시간을 구해올 수 있다.
new Date('2030-01-27') - new Date() 이런식으로 작성하게 된다면
유저가 설정한 날짜와 시간을 남은 만큼을 나타낼 수 있다.
(new Date('2030-01-27') - new Date()) / 1000 위에 식에 1000을 나눠주면 유저가 설정한 날짜와 시간을 남은 초를 보여준다.
(new Date('2030-01-27') - new Date()) / 3600 / 24; 이 식은 3600으로 나누고 또 다시 24로 나누면 정해진 남은 일수를 나타낸다.
이런식으로 작성하게 된다면 뒤에 소수점이 있기 때문에 Math.floor메소드를 이용한다.
Math.floor((new Date('2030-01-27') - new Date()));
(new Date('2030-01-27') - new Date()) / 3600 % 24; 이 식은 2600으로 나누고 24으로 또 다시 한번 나눠서 나머지 값을 구하면 남은 시간을 구할 수 있다.
(new Date('2030-01-27') - new Date()) / 60 % 60; 이식은 60으로 나눈다 근데 17400이라는 큰 숫자의 분이 나오기 때문에 다시 한번 60을 나눠서 나머지값을 구하면 남은 분을 구할 수 있다.
(new Date('2030-01-27') - new Date()) / 1000 위에에도 적었지만 남은 초를 나타낸다.
위에 있는 식 모두다 Math.floor 메소드를 이용하여 뒤에 소수점을 없애야 한다.
그러면 깔끔하게 유저가 보기 편한 날짜를 보여준다.
Const dateFormat = Year + ‘-‘ + Month + ‘-‘ + Date
이런식으로 문자열과 변수를 합쳐서 유저에게 보여줄 수 있다 하지만. 문자열과 변수를 같이 적으면 불편하다.
편한 방법으로는
Const dateFormat = $(Year)-(Month)-(Date) 이런식으로 문자열과 변수를 같이 적을때 편하게 적을 수 있다. 단 적을떄
Cost dateFormMaker = function() {
Const dateFormat = $(Year)-(Month)-(Date)
New Date(dateFormMaker(())이 식은 유저가 설정한 시간을 New Date 라는 메소드에 값을 넣어 남은 날짜와 시간을 나타낼 수 있다.
New Date(dateFormMaker(()).setHours(0, 0, 0, 0)을 이용하면 자정을 기준으로 날짜와 시간을 나타낼 수 있다.
원래는 오전 9 시 기준으로 나타 낸다.
지역변수와 전역변수
지역변수는 함수안에 변수를 선언시 그 함수 안에서만 변수를 사용할 수 있다.
전역변수는 함수 밖에서 변수를 선언했을 경우이다. 전역변수 같은 경우는 모든 곳에서 사용이 가능하다.
함수 선언 방식
const sum = function() {} 이 방식은 함수 표현식이다.
즉 변수에 함수를 할당 시킨 표현식이다.
function sum() {} 이 방식은 변수에 할당 없이 그냥 생으로 적는 방식이다. 이 방식은 함수 선언문이라고 불린다.
이 방식의 크게 단점으로는 호이스팅이 있다.
호이스팅이란 위로 끌어지는 것을 뜻한다.
자바스크립트는 코드를 한줄씩 차례대로 읽는다.
근데 표현식은 sum()이라는 함수를 선언하지 않고 미리 사용을 하고,
function sum() {} 함수를 선언을 뒤늦게 적었을 경우
함수를 선언을 하지 않았음에도 sum() 이라는 사용식을 사용했을 때 보다 먼저 function sum()이라는 선언식이 먼저 코드를 읽게되는 호이스팅이 일어난다.
그래서 어떠한 오류가 나타날지 모른다.
화살표 함수는 const sum =() => {} 이렇게 화살표 모양의 함수 선언 방식이다.
이 함수식은 자주사용한다.
Localhost
Localhost(도메인)라는 주소는 나의 컴퓨터 주소를 말한다.
예를 들어 127.0.0.1(ip 주소) 이런식으로 나타낸다.
Domain Name System는 아이피 주소를 도메인으로 바꿔주는 시스템을 말한다.
즉 127.0.0.1을 Localhost로 바꿔준다.
Localhost:5500 에 있는 숫자는 포트번호라고 한다.
포트번호는 localhost라는 도메인에 방문하기 위해 5500이라는 입장경로 와 입장문을 말한다.
Https는 443 포트번호를 사용한다.
http는 80 포트번호를 사용한다.
원시 타입, 참조 타입
타입의 큰 틀에는 원시 타입과 참조 타입으로 나누어 진다.
원시 타입에는 String, Number, Boolean, Bigint, undefined, Symbol, Null가 있다.
참조 타입은 원시 타입에 속하지 않는 것들을 말한다.
원시 타입은 불변성이라는 특징을 가지고 있다.
즉 데이터가 변화하지 않는다.
비교 연산자로 NaN
abc라는 변수와 NaN을 abc === NaN 이런식으로 비교할 수가 없다.
isNaN(abc) 이런식으로 isNaN 메소드를 사용하면 NaN이랑 비교가 가능하다.
isNaN은 true, false 값으로 반환한다.
즉 abc가 NaN 값이랑 같으면 true 아니면 false 값으로 반환한다.
강의 들으면서 진행한 d-day-counter 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script>
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;
// inputYear, inputMonth, inputDate 유저가 입력한 값들을 가져온다.
// const dateFormat = inputYear +'-' + inputMonth + '-' +inputDate
const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`;
// 유저가 입력한 값들을 문자열로 다시 재정리한다.
return dateFormat;
// dateFormat 라는 변수 값을 반환한다.
// 즉 유저가 입력한 값을 반환한다.
};
const counterMaker = function () {
const targetDateInput = dateFormMaker();
// dateFormMaker 함수 값을 targetDateInpu라는 변수에 담는다. 즉 유저가 입력한 값을 dateFormMaker 변수에 넣는다.
console.log(targetDateInput);
const nowDate = new Date();
// new Date()라는 메소드를 이용하여 날짜를 불러온다.
// 현재 날짜와 시간을 불러온다.
const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0);
// 유저가 가져온 값을 기준으로 날짜를 불러온다. 또 setHours라는 메소드는 유저가 가져온 값은 오전 9시 기준인데 자정 기준으로 바꿔 날짜를 불러온다.
// 유저가 가져온 값을 new Date 메소드에 넣어 유저가 가져온 값 기준으로 날짜를 나타낸다. 또 setHours라는 메소드를 사용하여 오전 9시 기준에서 자정기준으로 날짜를 가져온다.
const remaining = (targetDate - nowDate) / 1000; // 초
// remaining 라는 변수에 유저가 설정한 날짜 - 현재날짜를 뺀다 그리고 나누기 1000을 하면 남은 초 계산
// remaining === 0 이 된다면 목표 시간에 도달한거
// 만약 remaining이 0이라면 타이머가 종료되었습니다. 출력
// 위에 커퓸터 언어로 작성하기 전에 인간의 언어로 작성하는 것을
// 수도코드라고 한다.
console.log;
console.log(remaining);
if (remaining <= 0) {
console.log("타이머가 종료되었습니다.");
// 만약 남은 시간과 날짜가 0보다 작너가 같을 경우
// 타이머가 종료되었습니다라는 문구를 띄운다.
} else if (isNaN(remaining)) {
console.log("유효한 시간대가 아닙니다");
// 그게 아니라면 만약 유저가 이상한 날짜를 입력시 유효한 시간대가 아닙니다 라는 문구를 띄운다.
// else if (isNaN(remaining) === true) 이렇게 작성해도 작동함
// 이유는 isNan메소드가 불리언 값으로 반환 해주기 때문
}
// 만약 잘못된 날짜가 들어왔다면 유효한 시간대가 아닙니다 출력
const remainingDate = Math.floor(remaining / 3600 / 24); // 남은 날짜
// remaining 에 3600을 나누고 또 24로 나누면 남은 일 수를 구할 수 있다.
const remainingHours = Math.floor(remaining / 3600); //남은 시간
// remaining에 3600으로 나누면 남은 시간을 구할 수 있다.
const remainingMin = Math.floor((remaining / 60) % 60); //남은 분
// remaining 에 60을 나누면 분을 구할 수 있다 하지만 60진법이 아니기 떄문에 % 60으로 다시 나누면 분을 60진법으로 나타낼 수 있다.
const remainingSec = Math.floor(remaining % 60); // 남은 초
// remaining에 60을 나누고 나머지값을 구하면 남은 초를 구할 수 있다.
console.log(remainingDate, remainingHours, remainingMin, remainingSec);
};
</script>
</head>
<body>
<h1>D-Day</h1>
<div id="d-day-container">
<div class="d-day-child-container">
<span id="days">0</span>
<span>일</span>
</div>
<div class="d-day-child-container">
<span id="hours">0</span>
<span>시간</span>
</div>
<div class="d-day-child-container">
<span id="min">0</span>
<span>분</span>
</div>
<div class="d-day-child-container">
<span id="sec">0</span>
<span>초</span>
</div>
</div>
<div id="target-selector">
<input id="target-year-input" class="target-input" size="5" /> -
<input id="target-month-input" class="target-input" size="5" /> -
<input id="target-date-input" class="target-input" size="5" />
</div>
<button onclick="counterMaker()" id="start-btn">카운트다운 시작</button>
</body>
</html>