브라우저 하단 상태바에 원하는 글 출력하기[자바스크립트 소스]

브라우저 하단 상태바에 원하는 글 출력하기[자바스크립트 소스]


▶ 테스트 실행환경
OS : Window XP
브라우저 : Microsoft Internet Exploere 6.0, 
               Microsoft Internet Exploere 8
소스구동설명 : 이 자바스크립트 소스는 브라우저 하단의 상태바 왼쪽에 원하는 글을 보여주는 소스 입니다.



▶ 소스내용

 1 <SCRIPT>
 2     var message = "무궁화 꽃이 피었습니다.^" +
 3                          "대한민국 짝짝짝! 짝짝"
 4     var scrollSpeed = 25
 5     var lineDelay    = 1500
 6     var txtTemp      = ""
 7
 8     function scrollText(pos)
 9     {
10         if (message.charAt(pos) != '^')
11         {
12             txtTemp = txtTemp + message.charAt(pos)
13             status   = txtTemp
14             pauze   = scrollSpeed
15         }
16         else
17         {
18              pauze   = lineDelay
19              txtTemp = ""
20              if (pos == message.length-1) pos = -1
21          }
22          pos++
23          setTimeout("scrollText('"+pos+"')", pauze)
24   }
25  scrollText(0)
26 </SCRIPT>

▶ 소스 설명
○ 2번 Line을 보시면 message라는 변수에 "무궁화 꽃이 피었습니다.^" + "대한민국 짝짝짝! 짝짝"라는 값을 대입하고 있는데요 중간부분에 '^'기호를 확인 하실 수 있습니다. '^'기호를 통해 문장과 문장을 구분하게 됩니다.
○ 10번 Line에 if문 조건을 보시면 if (message.charAt(pos) != '^') 라고 되있는데요 if문에서 charAt()함수를 통해 읽어 들인 글자가 '^'기호가 아니라면 12번~ 13번 Line를 통해 상태바에 글자를 출력하게 되는데요. scrollSpeed변수를 통해 상태바에 글자가 출력되는 속도를 제어하고 있습니다. 반대로 if문에서 '^'기호를 만나게 되면 18번 ~ 20번Line을 통해 다음 문장을 상태바에 출력하기 위한 세팅을 하게 됩니다.
○ 이 소스에서 for문없이 계속해서 반복문을 수행하는데요 그게 가능한건 23번 Line에 setTimeout()함수 때문입니다.

▶ 실행화면

▶ 예제에서 사용된 자바스크립트 메서드

메서드 이름 : charAt()
메서드 설명
 ▷ 문법 : strValue = stringValue.charAt(index)
    strValue : 반환된 값
    stringValue : 문자열값
    index : 숫자값

 ▷ 설명
stringValue라는 변수의 문자열값 중 원하는 index(인덱스값)에 해당하는 문자값을 반환합니다. 문자열의 길이보다 큰 index(인덱스값)은 빈 문자열을 반환합니다.

 ▷ 예제
var stringValue = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ가나다'; // 문자열 선언
var strValue = charAt(1); //두번째 문자값을 strValue변수로 반환
strValue변수에는 'B'라는 값이 반환 됩니다.