반응형
DOM??
Document Object Model의 약자로, HTML요소를 JavaScript Object처럼 조작할 수 있는 Model이다.
HTML의 작은 부분까지 접근할 수 있는 구조로, DOM을 이용하여 HTML로 구성된 웹페이지를 동적으로 움직이게 만들 수 있다.
위와 같이 트리 구조로 되어 있다.
- 자바스크립트를통해DOM 요소를실시간으로변경가능
- 클릭, 입력, 스크롤과같은사용자이벤트처리가능
아래와 같은 실습 내용이 있었다.
startBUtton을 클릭하면 progress가 1초에 10%씩 증가
3초에서 5초 사이로 랜덤으로 생성된 종료 시간이 되면 progress가 100%가 되도록 구성
나는 이전에 배운 Bootstarp을 이용해 조금 예쁘게 다듬어 보았다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar Example</title>
<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5"><!-- 반응형 웹페이지 margint-top 5 -->
<div class="row justify-content-start">
<div class="col-md-6 text-start"><!-- 왼쪽 정렬 -->
<div class="progress">
<div id="progressBar" class="progress-bar bg-success" role="progressbar" style="width: 0%;"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<button id="startButton" class="btn btn-primary mt-3">시작</button>
<div id="time"></div>
<div id="currentTime"></div>
</div>
</div>
</div>
<script>
document.getElementById("startButton").addEventListener("click", function () {
let progressBar = document.getElementById("progressBar");
let progress = 0;
let maxTime = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000; // 3~5초 랜덤
let intervalTime = 1000; // 1초
let time = document.getElementById("time");
time.textContent = "최대시간: " + Math.floor(maxTime / 1000) + "초";
let startTime = performance.now();
let currentTime = document.getElementById("currentTime");
let interval = setInterval(() => {
// 소수점 제거 - Math.floor() 사용
const elapsedSeconds = Math.floor((performance.now() - startTime) / 1000);
currentTime.textContent = "현재시간: " + elapsedSeconds + "초";
progress += 10;
progressBar.style.width = progress + "%";//시각적으로 표현
progressBar.setAttribute("aria-valuenow", progress);//실제 값
if (performance.now() - startTime > maxTime || progress >= 100) {
progress = 100;
progressBar.style.width = "100%";
progressBar.setAttribute("aria-valuenow", 100);
clearInterval(interval);
}
}, intervalTime); //1초마다 실행
});
</script>
</body>
</html>
위에 document.getElementById("time");
이 바로 DOM의 주요 메서드 중 하나이며 이를 통해 요소를 선택할 수 있다.
그리고 DOM요소를 가지고오면 객체 참조로 저장되기 때문에 Javascript 내에서 동적으로 값이 변경 가능하다.
setInterval() 사용법
웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우가 있는데, 이럴 때는 자바스크립트의 setInterval() 함수를 사용할 수 있다.
첫 번째 인자로 실행하고자 하는 함수, 두 번째 인자로 반복 주기를 받는다.
setInterval()의 반환값을 "변수"에 할당하고
마지막으로 clearInterval("변수")로 반복을 중지시킬 수 있다.
반응형
