JavaScriptで文字列をスクロールさせるコード

使ったメソッドの説明

substring(i,j) // i+1番目の文字からj番目の文字までを抜き出す。
例）"abcde".substring(1,3)は、"bc"となる。

timer = setTimeout(関数,ミリ秒) // ミリ秒後に関数を一度だけ実行する。 
例）timer = setTimeout("scroll()", 1000)だと、1秒後に関数scroll()が実行される。

clearTimeout(timer) // タイマーを解除する。
例）clearTimeout(timer)で、timerが解除される。timerは上記の例で使ったもの。

実際のコード

実際に、文字をスクロールさせるコードを以下に示す。
下記のコードをエディタにコピペしてブラウザで開くと実際の動きが見れる。

<html>
<title>Scroll</title>
<head>
<script language="JavaScript">
  str = "Hello, I am a JavaScript lover!!     ";

  function scroll(){
    clearTimeout(timer1);

    document.form1.text1.value=str;
    str=str.substring(1,str.length)+str.substring(0,1);
    timer1=setTimeout("scroll()",320);  
  }
</script>
</head>

<body bgColor="000044" onLoad="timer1=setTimeout('scroll()',320)">

<form name="form1">
  <input type="text" name="text1" size="40">
</form>

</body>
</html>

解説

このソースコードがロードされると、まずonLoadによりscroll()関数が0.32秒後に実行される(timer1)。
scroll関数では、まずtimer1を解除する。これを解除しないと挙動がおかしくなることがある。
document.form1.text1に、strで定義した文字列を入れる。
ここからがポイントだが、
str.substring(1,str.length)とすることで、strの2番目の文字から最後の文字まで("ello, I am a JavaScript lover!! ")となる。
また、str.substring(0,1)で、strの1番目の文字("H")が呼び出される。
だから、str="ello, I am a JavaScript lover!! H"となる。
以後、これが0.32秒ごとに繰り返され一文字ずつずれることにより、
str="llo, I am a JavaScript lover!! He"
str="lo, I am a JavaScript lover!! Hel"
という風にstrが変化し、スクロールしているように見える。