[javascript] window 객체의 기본 메소드 / 타이머 함수
by mini_min[javascript] window 객체의 기본 메소드 / 타이머 함수
✔️ window 객체?
: DOM 을 포함한 브라우저의 창을 나타내는 객체를 window 객체이며, documnet 속성은 브라우저 창에 로드된 DOM 문서를 나타낸다.
: window 객체는 브라우저 기반 자바스크립트의 최상위 객체이다.
: 전역 객체라고도 불리며, 전역 객체는 그 객체의 프로퍼티나 메소드를 사용할 때 이름을 명시할 필요가 없다.
✨ 타이머, 자바스크립트 경고 창 및 입력 대화상자를 위한 메소드 등이 있다.
document.write("<h3>타이머 함수 예제</h3>");
✔️ 타이머 함수
: 특정 시간에 특정한 함수를 실행하는 함수로 window 객체에 정의되어 있다.
setTimeout("alert('환영합니다!!!');", 3000); //3초 후 한 번 실행setInterval("sub();", 2000); // 2초에 한 번씩 무한 반복
📓 1초에 한 번 실행되어 10초 후에 종료하는 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var n = 0;
function sub() {
n++;
document.write("<p>숫자 : " + n + "</p>");
}
var timer = setInterval("sub();", 1000) // 1초에 한 번씩 무한 반복
setTimeout(function(){
clearInterval(timer); // 타이머 종료
}, 10000); // 10초 후 한 번 실행
</script>
</head>
<body>
</body>
</html>
📓 타이머 예제 : 3초마다 랜덤 색상변경하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
#box {
width: 300px; height: 300px;
border: 5px solid gray;
margin: 30px auto;
}
</style>
<script type="text/javascript">
function bg() {
let r = Math.floor(Math.random() * 256); // 0~255 사이의 난수
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
let s = `rgb(${r}, ${g}, ${b})`;
document.getElementById("box").style.backgroundColor = s;
}
setInterval("bg();", 3000); //3초에 한번씩
</script>
</head>
<body>
<h3> 타이머 예제 </h3>
<div id="box"></div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [javascript] 함수 (함수 선언방식/함수 표현식/기명함수) / 호이스팅 (0) | 2022.09.19 |
|---|---|
| [javascript] 조건문 (+querySelector, getElementById) (0) | 2022.09.19 |
| [javascript] 내장 함수 : parseInt / Number / isFinite / eval / encodeURIComponent (0) | 2022.09.18 |
| [javascript] 연산자 종류 (0) | 2022.09.18 |
| [javascript] 상수(Constant) / 리터널(Literal) (0) | 2022.09.18 |
블로그의 정보
개발자 미니민의 개발로그
mini_min