반응형
✅ 오늘의 문제 풀이 인증
📣 과제에 대한 답안 코드는 <소스코드>를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가)
📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁
Day7.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script>
let h = 0, m = 0, s = 0; // h : 시, m : 분, s : 초
function start() {
repeat = setInterval(goesOn, 1000); // var 키워드 없이 선언하면 전역변수
}
function goesOn() { // setInterval로 1초마다 반복실행하게 될 함수
s++;
if (s == 60) {
s = 0;
m++;
if (m == 60) {
m = 0;
h++;
}
}
let time = document.getElementsByClassName('time');
time[0].innerHTML = `${h < 10 ? `0${h}` : h}:${m < 10 ? `0${m}`: m}:${s < 10 ? `0${s}` : s}`;
}
function stop() {
clearInterval(repeat);
}
function reset() {
clearInterval(repeat);
let time = document.getElementsByClassName('time');
time[0].innerHTML = "00:00:00";
h = 0; m = 0; s = 0;
}
</script>
</head>
<body>
<style>
.btn{
display: inline-block;
width: 60px;
height: 40px;
background-color: lightgray;
border: 1px solid black;
cursor: pointer;
text-align: center;
line-height: 40px;
margin-top: 10px;
border-radius: 5px;
}
</style>
<div class="layout">
<h1 class="time">00:00:00</h1>
<div class="btns">
<div class="btn" onclick="start()">시작</div>
<div class="btn" onclick="stop()">멈춤</div>
<div class="btn" onclick="reset()">초기화</div>
</div>
</div>
</body>
</html>변수의 재할당이 가능하지만 var과 다르게 변수의 재선언이 불가능한 let에 대해 알게되었습니다.
그리고 일정한 간격으로 함수를 반복 실행하는 setInterval에 대해서도 알게되었습니다.
코드를 짜면서 두가지 버그가 있었는데, 첫 번째는 innerHTML으로 h1태그의 문자를 바꿨는데 계속해서 바꿔지지 않았습니다. 문제는 배열 형식으로 가져오기 때문에 [0]을 해줘야했는데 이를 까먹었습니다... 이런 바보같은 실수 안하게 기본기를 더 닦아야겠습니다.
그리고 두 번째로 변수 선언입니다. clearInterval을 해도 계속 작동하지 않았습니다. 문제는 변수의 scope였습니다. 이를 해결하기 위해 새로운 변수 선언 방법을 찾아보았습니다. 그리고 var,let,const 키워드 없이 변수를 선언하면 전역변수로 선언된다는 것을 알게되었습니다. 이를 통해 문제를 해결하였습니다.
✅ 오늘의 한마디
👉 난이도가 조금 올라간 과제였던 것 같습니다! 덕분에 그 과정에서 더 많이 배운 것 같습니다!
반응형
'Front-End > JavaScript' 카테고리의 다른 글
| [코뮤니티] 9일차 - 한 입 웹개발(JS) (0) | 2021.05.12 |
|---|---|
| [코뮤니티] 8일차 - 한 입 웹개발(JS) (2) | 2021.05.11 |
| [코뮤니티] 6일차 - 한 입 웹개발(JS) (0) | 2021.05.06 |
| [코뮤니티] 5일차 - 한 입 웹개발(JS) (0) | 2021.05.04 |
| [코뮤니티] 4일차 - 한 입 웹개발(JS) (0) | 2021.05.03 |