📝 JavaScript
🖥️ 1. setInterval 함수
setInterval 함수는 다른 함수의 이름과 1/1000초 단위의 시간값을 파라미터로 설정하여 정해진 시간에 한번씩 파라미터로 전달된 함수를 반복적으로 호출한다.
// 해당 함수를 1초에 한번씩 반복해서 호출 setInterval(함수이름, 1000); // 지정된 시간만큼 딜레이 한 후 파라미터로 전달된 함수를 1회만 호출 setTimeout(함수이름, 1000);
4-1. 파라미터로 함수를 직접 정의하는 패턴
- 별도의 함수를 정의하는 형태가 아니라 다음과 같이 function(){} 블록을 직접 설정하는 것도 가능하다.
이처럼 파라미터 형태로 전달되는 함수를 콜백함수라고 한다.
setInterval(function(){ ... }, 1000); setTimeout(function(){ ... }, 1000);
EX) 현재 시각 구하기
<body onload="startTime()">
<h1 id="timer"></h1>
<script>
function printTime(){
// 현재 시각 구하기
let days = ['일','월','화','수','목','금','토'];
let mydate = new Date();
let yy = mydate.getFullYear();
let mm = mydate.getMonth() + 1;
let dd = mydate.getDate();
let i = mydate.getDay();
let day = days[i];
let hh = mydate.getHours();
let mi = mydate.getMinutes();
let ss = mydate.getSeconds();
let result = yy + "-" + mm + "-" + dd + "-" + day + "요일"
+ hh + ":" + mi + ":" + ss;
document.getElementById("timer").innerHTML = result;
}
function startTime(){
setInterval(printTime, 1000);
}
</script>
</body>🔎 onload
- 자바스크립트에서 페이지가 로드되면 자동으로 실행되는 전역 콜백함수
- 페이지의 모든 요소들이 로드외어야 호출
- 한 페이지에서 하나의 window.onload()함수만 적용
🔎 getElementById()
- id를 사용해서 HTML 요소를 가져오라는 뜻
