setTimeout() 메소드
setTimeout() 은 지정된 시간후 특정 코드를 실행시켜주는 메소드입니다. 뒤에서 다룰 setInterval() 과는 달리 setTimeout() 메소드를 사용하면 지정된 코드는 한번만 실행 됩니다. 사용형식은 아래와 같습니다
code : 일정시간 후 실행시킬 자바스크립트 코드를 포함한 문자열
delay : 문자열 code 내에 있는 자바스크립트 코드가 실행되기까지 걸리는 시간 (1/1000초 단위)
아래의 예는 3초 후에 alert()를 실행시키는 setTimeout()을 이용한 간단한 예문입니다
|
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2. <HTML>
3. <HEAD>
4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
5. <TITLE> Jasko Sample Script </TITLE>
6.
7. <SCRIPT LANGUAGE="JavaScript">
8. <!--
9. function Timer() {
10. setTimeout("alert('3초후에, 안녕하세요')",3000);
11. }
12. //-->
13. </SCRIPT>
14.
15. </HEAD>
16.
17. <BODY>
18.
19. <p><input type=button onclick="Timer()" value="3초후에 인사하기">
20.
21. </BODY>
22.
23. </HTML> |
이번에는 setTimeout()을 이용하여 입력상자에 실시간으로 작동하는 디지털시계를 만들어 보겠습니다
|
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2. <HTML>
3. <HEAD>
4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
5. <TITLE> Jasko Sample Script </TITLE>
6.
7. <SCRIPT LANGUAGE="JavaScript">
8. <!--
9. function Timer() {
10. var now = new Date();
11. var H = now.getHours();
12. var M = now.getMinutes();
13. var S = now.getSeconds();
14. myForm.myText.value = "지금은 " + H + "시" + M + "분" + S + "초";
15. setTimeout("Timer()", 1000);
16. }
17. document.onLoad = setTimeout("Timer()",1000);
18. //-->
19. </SCRIPT>
20.
21. </HEAD>
22.
23. <BODY>
24.
25. <form name=myForm>
26. <input type=text name=myText style="text-align:center">
27. </form>
28.
29. </BODY>
30. </HTML>
|
9~14번행에서는 26번행의 텍스트 입력상자에 현재시간을 보여주는 Timer() 함수를 정의한 코드입니다. 그냥 단순히 보여주기만 해서는 실시간으로 변화하는 시간을 알려줄 수가 없기 때문에 15번행에서 1초(1000)후에 다시 Timer() 함수를 호출하여 현재시간을 표시하고 있습니다.
17번행에서 이렇게 재귀적으로 반복 호출되는 Timer() 함수를 페이지가 로딩되면 실행토록 하였습니다.
setInterval() 메소드
setInterval()은 지정된 시간후 특정 자바스크립트 코드가 포함된 문자열을 반복하여 호출하는 메소드입니다. setTimeout() 이 지정 시간 후 한번만 호출하는데 비해, 이 메소드는 반복하여 호출 됩니다
|
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2. <HTML>
3. <HEAD>
4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
5. <TITLE> Jasko Sample Script </TITLE>
6.
7. <SCRIPT LANGUAGE="JavaScript">
8. <!--
9. function myFunc() {
10. setInterval("alert('안녕하세요')",1000);
11. }
12. document.onLoad = myFunc();
13. //-->
14. </SCRIPT>
15.
16. </HEAD>
17.
18. <BODY>
19.
20. <b>1초 간격으로 반복해서 경고창이 뜹니다
21.
22. </BODY>
23. </HTML>
|
9~11번행에서 1초(1000)마다 경고창을 띄우는 함수 myFunc()를 정의하고, 12번행에서는 이 함수를 문서가 로딩되면 실행되도록 호출하였습니다
window 의 setInterval() 메소드를 이용하여, 우리가 자바스크립트에 관심을 갖게되는 가장 기본적인 자바스크립트 효과인 브라우저의 상태표시줄에 메시지 보여주기를 할 수 있습니다.
아래의 자세한 설명이 첨부된 예문을 보면서 배워 보기로 할까요?
|
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2. <HTML>
3. <HEAD>
4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
5. <TITLE> Jasko Sample Script </TITLE>
6.
7. <SCRIPT LANGUAGE="JavaScript">
8. <!--
9. // 메세지의 시작부분을 결정하는 변수를 설정 합니다
10. var count = 0
11.
12. // 공백 메세지를 설정 합니다
13. var message = " "
14.
15. // 메세지 앞에 보여줄 공백칸을 50개 입력 합니다
16. // 이 공백은 메세지를 흐르게 하는 효과를 주기위한 메세지 시작 앞 부분에
17. // 보여줄 공백 문자열 입니다.
18. for(i=0; i<50; i++) {
19. message += " "
20. }
21.
22. // 실제 메세지들을 공백 메세지 뒤에 붙입니다
23. message += "자바스크립트는 재미있습니다...."
24. message += "즐거운 시간 되세요...."
25.
26. // 이제, 메세지들을 스크롤 시키는 함수를 정의 합니다
27. function myScroll()
28. {
29. // 메세지 문자열에서 count 이후 부터, count + 150 개의 문자열을 추출하여 보여줍니다
30. // substring(start,length) 메소드는 start 번째 이후부터 length 개의 문자열을 추출합니다
31. window.status = message.substring(count, count + 150)
32.
33. // 이제 count 변수값을 1 씩 증가시켜 줍니다.
34. // 그러면 substring(count, count + 150) 메소드에 의해
35. // 초기에는 substring(0,150) 이므로, 첫번째 문자부터 150 번째 까지 보여주고,
36. // 그 다음에는 substring(1,151)이 되므로, 두번째 문자부터 151번째 까지 보여주고,
37. // 그 다음에는 substring(2,152)이 되므로, 세번째 문자부터 152번째 까지 보여주는 식으로 되겠죠
38. count++;
39.
40. // 그렇게 해서 count가 문자열의 길이(message.length) 보다 커지면 메시지가 모두 출력된 것이므로
41. // 메시지가 처음부터 다시 흐르도록 count 에 0을 다시 지정해 줍니다.
42. if(count>message.length) {
43. count = 0;
44. }
45. }
46. // 이제 이렇게 설정 된 myScroll( ) 함수를 setInterval() 메소드를 이용해 0.05 초 마다 호출합니다
47. setInterval(함수,시간간격) 메소드는 지정된 시간간격 마다 함수가 반복해서 호출해 주는 역할을 합니다
48. document.onload=setInterval("myScroll()",50);
49. //-->
50. </SCRIPT>
51. </HEAD>
52. <BODY>
53. <H3 align=center> 아래 상태표시줄을 보세요 </H3>
54. </BODY>
55. </HTML> |
window.closed
이 속성은 특정 윈도우가 닫여있는지 여부를 체크하여 true 나 false 값으로 반환합니다.
아래 예문은 현재의 윈도우가 열려있는 상태인지 아닌지를 체크하여 메시지를 출력하도록 한 간단한 예문이지만, 팝업 윈도우를 열고 그 팝업 윈도우에서 opener 페이지(팝업윈도우를 열어준 페이지)를 참조하고자 할 때 이 closed 프로퍼티를 주로 사용합니다
|
1. <SCRIPT LANGUAGE="JavaScript">
2. <!--
3. if (window.closed) {
4. document.write("윈도우가 닫힌 상태입니다");
5. }
6. else {
7. document.write("윈도우가 열려 있는 상태입니다");
8. }
9. //-->
10. </SCRIPT> |
3번행에서는 현재의 윈도우가 닫힌 상태이면 true 를, 열려있는 상태이면 false를 반환합니다. 당연히 여러분들이 보고 있는 이 윈도우는 열려있는 상태이므로 false를 반환받아 7번행을 리턴합니다
다음에서 오프너 윈도우가 열려있는지 여부를 알려주는 간단한 예문을 살펴보고 넘어가겠습니다. 이 예문은 현재윈도우(opener)에서 버튼을 클릭하면 열려지는 팝업 윈도우에 사용된 코드 입니다
|
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2. <HTML>
3. <HEAD>
4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
5. <TITLE> Jasko Sample Script </TITLE>
6.
7. <SCRIPT LANGUAGE="JavaScript">
8. <!--
9. function myFunc() {
10. if (opener.closed) {
11. alert("오프너 윈도우가 사라졌어요");
12. }
13. else {
14. alert("오프너 윈도우가 아직 열려 있습니다");
15. }
16. }
17. //-->
18. </SCRIPT>
19.
20. </HEAD>
21.
22. <BODY>
23.
24. <input type=button onClick="myFunc();" value="확인하기">
25.
26. </BODY>
27. </HTML> |
현재의 창을 닫고 팝업윈도우에 있는 버튼을 클릭하면 11번째행의 구문이, 현재의 창이 있는 상태에서 버튼을 클릭하면 14번째행의 구문이 출력 됩니다
window.defaultStatus 속성
defaultStatus 프로퍼티는 윈도우의 상태표시줄에 메시지를 보여줍니다.일반적으로 문서내의 하이퍼링크에 마우스를 대면 상태표시줄에서는 해당 URL을 출력 해 주지만 마우스를 떼었을 때는 공백을 보여줍니다. 이 경우 defaultStatus를 설정 해 두면 마우스를 떼었을 때에도 상태표시줄에 기본값으로 설정한 defaultStatus 값을 출력 해 줍니다.
이 defaultStatus 속성은 읽기/쓰기가 가능하며 반영구적입니다. 일시적인 메시지를 출력 하려면 status 프로퍼티를 사용합니다
|
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2. <HTML>
3. <HEAD>
4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
5. <TITLE> Jasko Sample Script </TITLE>
6.
7. <SCRIPT LANGUAGE="JavaScript">
8. <!--
9. defaultStatus = "안녕하세요"
10. //-->
11. </SCRIPT>
12. </HEAD>
13. <BODY>
14. <input type=button onClick="javascript:defaultStatus='반갑습니다';" value="바꾸기">
15. <p>
16. <a href="http://www.jasko.co.kr">JASKO</a>
17. </BODY>
18. </HTML> |
opener 프로퍼티, name 프로퍼티
opener 프로퍼티는 팝업창에서 팝업창을 열어준 윈도우를 참조할 때 사용되는 프로퍼티입니다. 반대로 opener에서 팝업윈도우를 참조할 때는 팝업윈도우의 name 이 아닌, 팝업윈도우의 변수값을 참조한다는 점 기억해 두세요
아래 예문에서는 팝업윈도우를 열 때 myWin = window.open('sample61-2.html','popwindow','옵션') 의 코드로 열어주었으므로 오프너에서 팝업윈도우를 참조하려면 myWin 이라는 변수값을 사용해야 합니다
여기에서 사용된 팝업윈도우의 이름인 popwindow 는 HTML 코드에서 타겟을 지정할 때처럼 타겟으로 사용됩니다.
|
오프너 페이지
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2. <HTML>
3. <HEAD>
4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
5. <TITLE> Jasko Sample Script </TITLE>
6.
7. <SCRIPT LANGUAGE="JavaScript">
8. <!--
9. function openWin() {
10. myWin = window.open('sample61-2.html','popwindow','width=600,height=300');
11. }
12. //-->
13. </SCRIPT>
14.
15. </HEAD>
16.
17. <BODY>
18.
19. <input type=button onclick="openWin();" value="팝업창 열기">
20. <input type=button onclick="myWin.close();" value="팝업창 닫기">
21.
22. </BODY>
23. </HTML> |
9~11번행에서 정의된 openWin() 함수에서는 새로운 팝업윈도우를 myWin 이라는 변수에 담아 열어주는 함수입니다. 21번행에서 사용된 팝업윈도우 닫기 코드에서 사용된 myWin을 주의깊게 살펴 보세요
오프너 페이지에서 <a href="http://www.jasko.co.kr" target="popwindow"> 처럼 태그를 사용하면 팝업윈도우에 자스코 홈페이지가 열리게 됩니다
|
팝업 윈도우
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2. <HTML>
3. <HEAD>
4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
5. <TITLE> Jasko Sample Script </TITLE>
6.
7. </HEAD>
8.
9. <BODY>
10.
11. <input type=button onclick="alert('현재창의 이름은 : ' + window.name)" value="현재창의 이름">
12. <input type=button onclick="opener.location='http://www.jasko.co.kr'" value="오프너윈도우에 자스코페이지 열기">
13.
14. </BODY>
15. </HTML> |
window.name 프로퍼티는 현재윈도우의 이름값을 반환해 줍니다. 11번 행의 코드를 실행시키면 팝업윈도우의 이름인 popwindow를 반환해 줍니다
팝업윈도우에서 오프너 페이지에 다른 페이지를 불러오려면 참조값으로 opener 프로퍼티를 사용해야 합니다
