자바스크립트 예제(2)

    

상태바에 문자열 스크롤

 

 

이번에는 브라우저 하단의 상태바에 문자열을 스크롤하는 방법을 알아봅시다. 사실 스크롤을 위해 자바 스크립트에서 지원하는 특별한 도구가 있는 것은 아닙니다. 그저 문자열을 보여주고 지운 후에 위치를 이동해서 다시 보여주는 방법으로 스크롤되는 것 같은 효과를 냅니다. 다음의 코드를 봅시다.

 

<HTML><HEAD>

<SCRIPT LANGUAGE = "JAVASCRIPT">

var msg="자바 스크립트로 만든 스크롤 문자열입니다.";

var msglen=msg.length;

var width=100;

var pos=1-msglen;

 

function scroll() {

pos++;

var scroller = " ";

if(pos == msglen) {

pos=1-width;

}

if(pos < 0) {

for(var i=1; i<=Math.abs(pos); i++) {

scroller=scroller+" ";

}

scroller=scroller+msg.substring(0,width-i+1);

}

else {

scroller=scroller+msg.substring(pos,width+pos);

}

window.status=scroller;

setTimeout("scroll()",150);

}

</SCRIPT>

</head>

<body onLoad="scroll(); return true;">

</body></html>

 

이 코드를 브라우저에서 실행하면 하단의 상태바에 문자열이 왼쪽으로 스크롤되는 것을 볼 수 있을 것입니다. 그러면 이 코드에 대한 분석을 시작해 봅시다.

 

msg에는 스크롤 될 문자열을 지정합니다. 그리고 msg.length는 메시지의 길이를 돌려주는데 이는 String 객체의 속성으로 정의된 length가 스트링의 길이를 돌려주는 기능을 하기 때문입니다.

함수 내부에서 쓰이는 변수를 보면, scroller는 실제로 상태바에 보여지는 메시지를 뜻하며, pos는 출력되는 위치를 나타냅니다. 실제로 window.status를 사용하여 문자열을 상태바에 출력할 때 무조건 왼쪽 시작점부터 출력하기 때문에 문장의 시작위치를 정의할 수가 없습니다.

그래서 편법으로 문장의 왼쪽을 공백으로 채움으로서 시작위치를 정합니다.

다음으로 스크롤되는 속도를 정하기 위해 setTimeout 도구를 사용합니다. setTimeout 도구의 구문은 다음과 같습니다.

 

timerID=setTimeout(expression, msec)

 

expression은 처리하고자 하는 스트링을 나타내고 msec는 밀리세컨드 단위의 시간입니다. 이 도구는 정해진 시간뒤에 expression을 처리하는 것으로서 expression에 자신을 부르는 함수를 넣으면 정해진 시간마다 반복적으로 처리되는 함수를 만들 수 있습니다.

또 위에서 사용되는 도구인 substring은 String 객체의 도구로서 구문은 다음과 같습니다.

stringName.substring(indexA, indexB)

이 도구는 String 객체의 서브스트링을 선택하는 것으로서 인덱스는 0에서 스트링길이 -1 까지이며 indexA에서부터 indexB-1까지의 스트링을 돌려줍니다.

위의 예제 코드는 영문에서는 깨끗하게 스크롤되지만 한글은 한 글자가 2 바이트이므로 상태바의 왼쪽 끝으로 가면 글자가 깨지게 됩니다. 그러므로 다음의 예제를 이용하여 한글에 어울리는 스크롤 문자열을 만들어 보겠습니다. 먼저 코드를 봅시다.

<HTML>

<HEAD>

<SCRIPT LANGUAGE = "JAVASCRIPT">

var chardelay=200;

var termdelay=1000;

var whichmsg=0;

var msglength=0;

var whattimer=null;

var msg=new Array();

msg[0]="첫번째 메시지입니다";

msg[1]="두번째 메시지입니다";

msg[2]="세번째 메시지입니다";

 

function status_add() {

var msg_str=msg[whichmsg];

if(msglength < msg_str.length) {

msglength++;

var dis_str=msg_str.substring(0, msglength+1);

window.status=dis_str;

msglength++;

whattimer=setTimeout("status_add()", chardelay);

}

else {

msglength = 0;

whichmsg++;

if(whichmsg==msg.length)

whichmsg = 0;

whattimer=setTimeout("status_add()", termdelay);

}

}

 

</SCRIPT>

</HEAD>

<BODY onLoad="status_add()">

</body></html>

 

먼저 메시지가 디스플레이 되는 속도와 메시지 사이의 속도를 지정해주는 두개의 변수(chardelay, termdelay)를 지정했으며, 두 변수의 시간 단위는 밀리세컨드입니다. whichmsg는 배열중의 몇 번째 캐릭터인지 지정하는 것이며, msglength는 출력할 서브스트링의 길이를 지정하는 것이고,

whattimer는 setTimeout을 위한 변수입니다.

 

다음으로 메시지를 포함할 배열을 만들어서 세 개의 메시지를 작성했습니다. 사용하실 때에는 문자열을 변경시킬 수 있을 뿐만 아니라 문자열의 갯수도 추가할 수 있습니다.

코드의 기본적인 흐름은 다음과 같습니다. 첫번째 예제에서는 상태바의 오른쪽에서 왼쪽으로 흐르듯이 스크롤시켰지만, 이번 예제에서는 왼쪽부터 오른쪽으로 차례대로 보여주는 것입니다.

이 때 substring 도구를 이용하여 문자를 하나씩 증가시키면서 보여줌으로서 움직이는 것처럼 보이게 했습니다. 따라서, 상태바의 크기를 넘는 메시지는 보이지 않게 되며, 배열을 이용하여 메시지를 여러개로 나누어 사용할 수 있게 하였습니다.