5.0 Intervals
setInterval(첫번째 argument, 두번째 argument);
첫번째 = 실행하고자 하는 function
두번째 = 호출되는 function의 간격을 몇 ms로 할건지
-last code-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Momentum App</title>
</head>
<body>
<form class="hidden" id="login-form">
<input required maxlength="15" type="text" placeholder="What is your name?"/>
<input type="submit" value="Log In"/>
</form>
<h1 id="greeting" class="hidden"></h1>
<h2 id = "clock">00:00</h2>
<script src="js/greeting.js"></script>
<script src="js/clock.js"></script>
</body>
</html>
const clock=document.querySelector("h2#clock");
function sayHello()
{
console.log("hello");
}
setInterval(sayHello,5000);
ㄴ 5초에 한번씩 hello가 출력됨
5.1 Timeouts and Dates
setTimeout(sayHello,5000); //function쓰고 얼마나 기다릴건지 ms로 쓰기
setInterval과 같다
-last code-
const clock=document.querySelector("h2#clock");
function getClock()
{
const date=new Date();
clock.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}
getClock();
setInterval(getClock,1000); //매 초마다 getclock 실행<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Momentum App</title>
</head>
<body>
<form class="hidden" id="login-form">
<input required maxlength="15" type="text" placeholder="What is your name?"/>
<input type="submit" value="Log In"/>
</form>
<h1 id="greeting" class="hidden"></h1>
<h2 id = "clock">00:00:00</h2>
<script src="js/greeting.js"></script>
<script src="js/clock.js"></script>
</body>
</html>
ㄴ 시계 완성 !!
근데 여기서 초가 01, 02, 03 이렇게 나오게 하고 싶은데 1, 2, 3 이렇게 나와서 다음 강의에서 고친다고 하심
5.2 PadStart
"hello".padStart(20,"x")
'xxxxxxxxxxxxxxxhellopadStart = 길이가 n이어야하는 string이라고 말해주는 것, 그렇지 않다면 문자로 채워서 원하는 길이로 만들어 달라는 것
-last code-
const clock=document.querySelector("h2#clock");
function getClock()
{
const date=new Date();
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}`;
}
getClock();
setInterval(getClock,1000); //매 초마다 getclock 실행ㄴpadStart(2,"0") -> 2자리 수인데 아니면 앞에 0을 채워라 로 hours, minutes, seconds를 바꿔준다.
그리고 마지막줄 처럼 innerText로 hours, minutes, seconds를 text로 출력해준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Momentum App</title>
</head>
<body>
<form class="hidden" id="login-form">
<input required maxlength="15" type="text" placeholder="What is your name?"/>
<input type="submit" value="Log In"/>
</form>
<h1 id="greeting" class="hidden"></h1>
<h2 id = "clock">00:00:00</h2>
<script src="js/greeting.js"></script>
<script src="js/clock.js"></script>
</body>
</html>
