2021. 11. 5. 17:30ㆍ강의 정리/노마드코더( 바닐라 JS 강의 )
Intervals
핵심 : intervals과 timeout 기능에 대해 알아본다.
. 한 파일에 모든 코드들을 넣는게 아닌 Devide and Conquer 방식으로 예를 들어 clcok.js 에서는 시계 기능만, greetings.js 기능에서는 greeting 기능만 다룸.
이렇게 세분화하여 파일을 관리하면, 코드도 짧아지고, 정리도 쉬워짐.
. intervals이란?
intervals은 "매번" 일어나야 하는 무언가를 뜻한다. ex) "매 2초"는 interval이다.
즉 매 2초마다 무슨 일이 일어나게 하는 것이 interval이다. ex) 2초마다 주식 시장 확인하는 기능etc...
JS에서는 intervals이 이미 저장되어있다.
/* setInterval의 첫번째 인자는 실행할 기능(function),
두번째 인자는 호출되는 기능 간격을 몇초로 할 것인지
*/
setInterval(sayHello, 5000);
/* setTimeout의 첫번째 인자는 실행할 기능(function),
두번째 인자는 실행까지 몇 초를 기다릴 건지
*/
setTimeout(sayHello, 5000);
. Dates란?
Dates는 현재 년도, 월, 일, 요일 등을 value로 반환해주는 기능임.
const Date = new Date();
Date.getDate();
Date.getDay();
Date.getHours();
Date.getMinutes();
Date.getSeconds();
1. 시계를 넣기 위해서 h2를 새로 만든다.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- css 연결 -->
<link rel="stylesheet" href="css/style.css">
<title>Momentum</title>
</head>
<body>
<!-- input은 항상 form안에 있어야 함.-->
<form class="hidden" id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?">
<button>Log In</button>
</form>
<!-- 시계를 표시할 h2 -->
<h2 id="clock" ></h2>
<!-- form이 사라지고 출력 될 h1-->
<h1 class="hidden" id="greeting" ></h1>
<!-- 자바 스크립트 연결 -->
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
2. clock.js에서 clock 기능 구현
const clock = document.querySelector("h2#clock");
// intervals 기능 구현
function getClock() {
// date 변수에 Date() 함수를 저장
const date = new Date();
// "시간:분:초"를 출력해줌
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
// 웹사이트가 load되자마자 바로 getClock()을 실행하고 또 매초마다 다시 실행됨
getClock()
// getClock 함수를 매 1초마다 실행해줌.
setInterval(getClock, 1000);
PadStart
핵심 : 시, 분, 초가 10보다 적으면 한자리 수로 출력되는 문제를 해결해보자!
. 많은 개발자들이 같은 문제를 겪고, 또 겪었다면 JS라는 언어 자체에 이미 그 작업을 수행하는 function이 있을 것이다.
. PadStart란?
padStart()는 string에 쓸 수 있는 function이다.
만약 "문자".padStar(2,"0") "문자"의 최소 길이가 2가 아니면, 앞에 "0"을 붙여라.
1. 시, 분, 초가 10보다 적으면 한자리 수로 출력되는 문제를 해결하기.
const clock = document.querySelector("h2#clock");
// intervals 기능 구현
function getClock() {
// date 변수에 Date() 함수를 저장
const date = new Date();
// padStart() 함수를 호출하고 String형으로 바꿔줌
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
// "시간:분:초"를 출력해줌
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
/* 웹사이트가 load되자마자 바로 getClock()을 실행하고 또 매초마다 다시 실행됨
getClock()이 없으면, 1초동안은 00:00:00을 표시함.
*/
getClock();
// getClock 함수를 매 1초마다 실행해줌.
setInterval(getClock, 1000);
핵심 요약
1. intervals은 "매번" 일어나야 하는 무언가를 뜻한다.
2. Dates는 현재 년도, 월, 일, 요일 등을 value로 반환해주는 기능임.
3. 많은 개발자들이 같은 문제를 겪고, 또 겪었다면 JS라는 언어 자체에 이미 그 작업을 수행하는 function이 있을 것이다.
4. padStart()는 string에 쓸 수 있는 function이다.
'강의 정리 > 노마드코더( 바닐라 JS 강의 )' 카테고리의 다른 글
| 동백 // 노마드 코더 바닐라JS: Weather (0) | 2021.11.12 |
|---|---|
| 동백 // 노마드 코더 바닐라JS: Login (0) | 2021.11.04 |
| 동백 // 노마드 코더 바닐라JS: CSS와 JS (0) | 2021.11.03 |
| 동백 // 노마드 코더 바닐라JS: HTML과 JS (0) | 2021.11.02 |
| 동백 //노마드 코더 바닐라JS : Events (0) | 2021.11.02 |