Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Developer Gonie

[8주차] 29. window 객체의 onload속성, setInterval(), setTimeout(), clearInterval() 메소드 본문

K-DigitalTraining 강의/6. Javascript(웹표준)

[8주차] 29. window 객체의 onload속성, setInterval(), setTimeout(), clearInterval() 메소드

이대곤 2022. 7. 9. 14:30

window 객체의 onload 속성

이전에 body 태그에 onLoad 속성을 추가해서 body 영역이 모두 로드된 뒤에 호출될 콜백함수를 지정해 주었는데,

이와 같은 기능으로 아래와 같이 자바스크립트 코드를 작성해두면 비슷한 시점에 자동으로 호출된다.

단, 이걸 사용할 땐 body 태그에 onLoad 속성이 없어야 정상작동 한다. 둘 중 하나만 실행되기 때문에.

window.onload = function(){

}

* setInterval(), setTimeout() 은 시간에 의해 자동으로 불려지는 콜백 함수이기 때문에 작성만 해두면
  따로 호출을 위한 코드를 작성하지 않아도 자동으로 불려진다는 것을 알아두자.

window 객체의 setInterval() 메소드

특정 시간마다 지속적으로 여러번 반복되어야할 작업이 있다면 이 메소드를 사용할 수 있다.

변수 = window.setInterval(function(){

}, 반복 호출될 주기);

// 변수는 나중에 clearInterval() 을 위해 사용되는데
// 변수 할당하는 부분 없이 사용해도 무관하다.

window 객체의 setTimeout() 메소드

특정 시간이 지난 후 단 1번만  실행할 작업이 있다면 이 메소드를 사용할 수 있다.

window.setTimeout(function(){

}, 몇초뒤 작동될 것인가);

window 객체의 clearInterval() 메소드

setInterval() 함수로 만들어진 콜백함수를 즉시 정지시킨다.

 

window.clearInterval(함수객체)

위 4가지를 모두 사용한 종합예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">	
	//window는 언제든 생략이 가능함 
	window.onload = function(){
		var time = window.setInterval(function(){
			now = new Date();
			hour = now.getHours();
			
			if(hour >= 12)
				clock = "오후" + (hour-12) + "시";	
			else
				clock = "오전" + hour + "시";	
				
			minutes = now.getMinutes();
			clock += minutes + "분";
			
			seconds = now.getSeconds();
			clock += seconds + "초"; // clock = 오후 3시 03분 27초
			
			//특정 태그 영역에 html 코드 출력하기
			var area = document.getElementById("result"); // div태그 영역
			area.innerHTML = clock; //해당 영역에 넣을 html 지정
		},1000);
		
		//setTimeout(해야할일, 시간)  지정해둔 시간이 지나면 딱 한 번만 할일을 수행하는 함수 
		window.setTimeout(function(){
			window.clearInterval(time); // time 이름으로 관리하던 기능을 이만 그만하자.
			
			//특정 태그 영역에 html 코드 출력하기
			var area = document.getElementById("result"); // div태그 영역
			area.innerHTML = "이제는 중지합니다."; //해당 영역에 넣을 html 지정
		}, 10000);
	}
</script>
</head>
<body>
	<h1>현재 시간이 나타납니다.</h1>
	<br>
	<div id="result">
		
	</div>
</body>
</html>
저작자표시

'K-DigitalTraining 강의 > 6. Javascript(웹표준)' 카테고리의 다른 글

[8주차] 31. document 객체에 포함된 객체(배열로 관리되는 요소들)  (0) 2022.07.09
[8주차] 30. document 객체의 getElementById() 메소드  (0) 2022.07.09
[8주차] 28. window 객체의 opener 속성을 이용해 자식창 입장에서 부모창의 요소를 접근/수정 해보기  (0) 2022.07.09
[8주차] 27. window 객체의 open()/close() 메소드  (0) 2022.07.09
[8주차] 26. 내장객체 String 문자열 관련 함수  (0) 2022.07.08
'K-DigitalTraining 강의/6. Javascript(웹표준)' Related Articles more
Comments