예제 10-3. setTimeout()으로 웹 페이지 자동 연결. 예제 10-4. setInterval()로 텍스트 회전

WEB/JAVASCRIPT-CONCEPT 2017. 11. 2. 19:08 |

* iframe 객체와 window 객체

iframe 객체는 <iframe> 태그로 만들어진 프레임 윈도우를 나타낸다. 브라우저 윈도우는 <iframe> 태그로 만들어진 여러 프레임 윈도우를 담을 수 있다.

자식 윈도우는 window 객체의 frames 컬렉션을 통해 접근할 수 있고, 그 개수는 window.length 프로퍼티로 알 수 있다.

브라우저 윈도우에서 각 프레임 윈도우는 다음과 같이 접근한다.

window.frame[0], window.frame[1], window.frame[window.length-1]


window, self : 프레임 윈도우 자신을 가리키는 레퍼런스

parent : 부모 윈도우에 대한 레퍼런스

top : 최상위 브라우저 윈도우에 대한 레퍼런스


3. window의 타이머 활용

window에는 타이머를 작동시키는 메소드가 있어 이를 이용하면 시간에 따라 웹 페이지에 동적인 변화를 줄 수 있다. window 타이머는 다음 2가지 기능으로 활용된다.

1. 타임아웃 코드 1회 호출 : setTimeout() / clearTimeout()

2. 타임아웃 코드 반복 호출 : setInterval() / clearInterval()


이들 메소드를 호출할 때 window는 생략할 수 있다.


* setTimeout() / clearTimeout()

setTimeout() 메소드에 밀리초 단위의 타임아웃 지연 시간과 타임아웃 코드를 지정하면, 타임 아웃 지연 시간 후 타임아웃 코드를 실행한다. 타임아웃 코드는 1회만 실행된다.

1
2
3
4
5
var timerID = setTimeout("timeOutCode",msec);
clearTimeout(timerID)
timeOutCode : 타임아웃 자바스크립트 코드
msec : 밀리초 단위 정수로서, 타임아웃 지연 시간 
 

cs

setTimeout()은 msec 후에 timeOutCode를 1회 실행하도록 타이머를 설정하고, 타이머 ID를 리턴한다.
clearTimeout()은 작동 중인 timerID의 타이머를 해체한다.


다음은 3초 후 경고장을 출력하는 사례이다.
1
2
3
4
5
function myAlert(time)function myAlert(time)
{
    alert(time + "초 지났습니다");
}
var timerID = setTimeout("myAlert(3),3000") // 3초 후 myAlert('3') 호출
cs



한 줄로 쓰게 될 경우

1
setTimeout("alert('3초 '),3000")
cs



setTimeout()의 리턴 값은 타이머 ID로서, 이를 매개변수로 clearTimeout()을 호출하면 타임아웃 전에 타이머를 해체시킬 수 있다.
1
2
var timerID = setTimeout("myAlert(3)",3000);
clearTimeout(timerID); // timerID의 타이머 
cs

* setInterval() / clearInterval()
setInterval()은 타임아웃 시간 주기로 타임아웃 코드를 무한 반복 실행하도록 타이머를 설정한다.
clearInterval()은 setInterval()에 의해 설정된 타이머를 해제시킨다.

1
2
3
4
var timerID = setInterval("timeOutCode",msec)
clearInterval(timerID)
timeOutCode : 타임아웃 자바스크립트 코드
msec : 밀리초 단위 정수로서, 타임아웃 지연 시간 
cs
setInterval()은 msec 주기로 timeOutCode를 무한 반복하도록 타이머를 설정하고, 타이머의 ID를 리턴한다.

clearInterval()은 timerID의 타이머를 해제한다.



예제 10-3. setTimeout()으로 웹 페이지 자동 연결
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
32
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setTimeout()으로 웹 페이지 자동 연결</title>
</head>
<body>
<h3>이미지에 마우스를 올리고 5초간 그대로 있을 때 사이트로 이동합니다</h3>
<hr>
<img id="img" src="media/naver.gif"
    onmouseover="startTimer(5000)"
    onmouseout="cancelTimer()">
<script>
var timerID=null;
function startTimer(time) {
    // 타이머 시작
    timerID = setTimeout("load('http://www.naver.com')", time);
 
    // 툴팁 메시지
    document.getElementById("img").title = "타이머 작동 시작...";
}
function cancelTimer() {
    if(timerID !=null)
        clearTimeout(timerID); // 타이머 중단
}
function load(url) {
    window.location = url; // 현재 윈도우에  url 사이트 로드
}
</script>
</body>
</html>
 
cs

다음은 함수 f()가 1초 주기로 반복 호출되로록 타이머를 작동시키는 코드이다.

1
2
3
4
5
fuction f()
{
// 함수 코드
}
var timerID = setInterval("f()",1000); // 1초 주기로 f()가 호출되도록 타이머 작동
cs

다음은 timeerID의 타이머를 해제시키는 코드이다.
1
clearInterval(timerID); // timerID의 타이머 
cs




예제 10-4. setInterval()로 텍스트 회전

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setInterval()로 텍스트 회전</title></head>
<body>
<h3>텍스트가 자동 회전하며, 마우스로 클릭하면 중단합니다.</h3>
<hr>
<div><span id="div" style="background-color:yellow">
        자동 회전하는 텍스트입니다.</span>
</div>
<script>
var div = document.getElementById("div"); // id 찾기
var timerID = setInterval("doRotate()", 200); // 200밀리초 주기로 doRotate() 호출
 
div.onclick = function (e) { // 마우스 클릭 이벤트 리스너
    clearInterval(timerID); // 타이머 해제. 문자열 회전 중단
}
 
function doRotate() {
    var str = div.innerHTML; // <p></p>사이의 내용읽기
    var firstChar = str.substr(0, 1); // str 텍스트의 첫 문자 알아내기(인덱스 0에서부터 1개수만큼 새로운 문자열리턴)
    var remains = str.substr(1, str.length-1); // str 텍스트의 나머지 문자열 알아내기
    str = remains + firstChar;
    div.innerHTML = str; // str 텍스트를 div 객체에 출력
}
</script>
</body>
</html>
 
cs





저작자표시 비영리 동일조건

'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글

예제 10-6. 1초마다 10픽셀씩 자동 스크롤. 예제 10-7. 웹 페이지 프린트. 예제 10-8. onbeforeprint와 onafterprint 이벤트 활용  (0) 2017.11.02
예제 10-5. 윈도우의 위치와 크기 조절  (0) 2017.11.02
예제 10-1. window.open()으로 윈도우 열기. 예제 10-2. 윈도우 닫기 // 수정해야딤  (0) 2017.11.02
window 객체, window 객체의 프로퍼티와 메소드 // 수정해야됨 p 438  (0) 2017.11.02
예제 9-20. 키 이벤트 리스너  (0) 2017.11.02
Posted by 너래쟁이
:

티스토리툴바