たのしいぷるぐらみんぐシリーズ

JavaScript を使おう講座

第０回「status line」

・JavaScriptが使いたいよぅ

ちょっと凝ったWebページに行くと、時刻表示や、ブラウザ最下行のステータスラインに文字がするするとスクロールしていくのが見られたりします。「う～ん、自分のページでもこんなのがやりたいっ！」と思った方は多いのではないでしょうか。(かくいう私も、その一人です。) この願いをかなえるのが、本講座の目的です。

第０回目の今回は、「ステータスラインに文字をスクロールさせる」です。

・では、準備です

JavaScript は html ファイルの中に <SCRIPT>～</SCRIPT> で囲って直接記述します。このとき、JavaScript に対応していないブラウザはスクリプトをそのまま表示してしまいます。これを避けるため、一般に以下のような書き方をします。

<SCRIPT>
<!--

スクリプト本体

// --> このページは JavaScript を使用しています。できれば、Netscape 2.x 以降か、InternetExplorer 3.x 以降で御覧ください。
</SCRIPT>

<SCRIPT> タグで囲むと、html の「」 は無視され、コメントとして働きません。よって、上の例では、スクリプト本体がで囲まれていても、ちゃんとスクリプトとして働きます。代わりに「//」が、JavaScript 中でのコメントになります。上の例では「// -->このページはJavaScriptを～～」の行はJavaScriptでのコメントとなり、画面には表示されません。

補足ですが、 JavaScriptに対応していないブラウザは <SCRIPT>や</SCRIPT> を無視します。よって今度はがちゃんとコメントとして働き、中に入っているスクリプト部分をコメントとみなし無視します。よって、スクリプト部分が画面に表示されてしまう事を防げます。そして上の例の場合、「このページはJavaScriptを～～」の部分がコメントの外に出ているので、画面に表示されます。

・ステータスラインに文字を出す

それでは早速、ステータスラインになにか表示してみましょう。これは、status = "文字列"; とするだけでできちゃいます。 JavaScript のスクリプトは html ファイルのどこに置いてもかまいませんので、今回は<BODY>の中に書いてみましょう。最初ですので、html 全文を以下に書いてみます。

<HTML>
<HEAD>
<TITLE>JavaScript Status Line</TITLE>
</HEAD>
<BODY>
<SCRIPT>
<!--

status = "Welcome to My Page.";

// --> このページは JavaScript を使用しています。できれば、Netscape 2.x 以降か、InternetExplorer 3.x 以降で御覧ください。
</SCRIPT>

ステータスラインに文字が表示されてますか？

</BODY>
<HTML>

さて、みなさんどうですか？ステータスラインに何か表示されましたか？ InternetExplorer だと、リロードした瞬間にちらっと。Netscape だと、ほとんど見えないかもしれません。そしてすぐ、いつものように「ページが表示されました。」や「Document:Done.」という表示になってしまうと思います。実はステータスラインへの表示は、次になにか表示されると上書きされてしまうのです。そこで、ずっと表示させておくにはどうしたらいいか？それは、インターバルタイマーを使って定期的にステータスラインを書き換えることにより可能になります。

・関数の定義、呼出とタイマー

まず、ステータスラインを定期的に書き換える例を以下に示します。さっきは html 全文を書きましたが、今度からは JavaScript の部分だけを書きますね。

<SCRIPT>
<!--

function setStatus() {
  status = "Welcome to My Page.";
  window.setTimeout("setStatus();",100);
}

setStatus();

// --> このページは JavaScript を使用しています。できれば、Netscape 2.x 以降か、InternetExplorer 3.x 以降で御覧ください。
</SCRIPT>

今度はうまく表示され続けていると思います。さてここで、新しい書式が一つと、新しいメソッド(C でいう関数)が一つでてきました。まず一つめは関数定義で、二つめは、インターバルタイマーをセットするメソッドです。順番に説明していきましょう。

関数定義は「function setStatus() {関数の中身}」の部分です。これは C とそっくりなので、C を知っている人は分ってしまうと思いますが、このように関数を定義すると、以後 setStatus(); と書くだけで関数の中身を実行してくれます。この場合 setStatus は私が勝手につけた関数名なので、自分で好きに決めてかまいません。例えば、 function auau() {～}とすれば、以後 auau(); で呼び出せます。

次にでて来るのが、インターバルタイマーをセットする「window.setTimeout("setStatus();",100);」の部分です。この場合「setTimeout」の部分がメソッド名で、一般に「クラス名.メソッド名()」という表記になります。関数と良く似ていますが、それもそのはず。関数はユーザーが定義するメソッドなのです。「一撃必殺 JavaScript日本語リファレンス」のリファレンスを見ると、どんなメソッドがあるか分かります。

window.setTimeout()の意味ですが、 window.setTimeout("setStatus();",100); のように書くと、100ミリ秒経過後、setStatus(); を一回だけ呼び出してくれます。一回呼び出すとインターバルタイマーは解除されるので、何回も実行させたい場合は、上の例のように呼び出す関数の中等で毎回 window.setTimeout() を実行して、インターバルタイマーをセットしなおす必要があります。
ちなみに、第一引数の"～"のところには、関数名だけでなく、なんでも記述できます。例えば、window.setTimeout("a=a+1;b=a+2;setStatus();",1000); のように書くこともできます。(a=a+1;等の意味は見ての通りですが、後で一度説明します。)

・ステータスラインでスクロール

それでは、ステータスラインで文字列をスクロールさせてみましょう。

mes="Welcome to My Page.    ";
meslen = mes.length;
mes += mes;
statuslen = 20;
i=0;
function statusbar() {
  status=mes.substring(i,i+statuslen);
  i = (i+1) % meslen;
  window.setTimeout("statusbar();",100);
}
statusbar();

さて、ちょっと長くなって来ましたが、気合いをいれて少しずつ見ていきましょう。

mes="Welcome to My Page. ";: mes という変数に "Welcome～" という文字列を代入しています。 JavaScript では、初めて代入した時に変数の型が決定されます。この例だと、 mes は自動的に文字列型になります。
meslen = mes.length;: meslen に mes の長さを代入しています。 length は文字列型変数のプロパティで「文字列型変数.length」とすると、文字列型変数に格納されている文字列の長さを取得できます。 (ちなみに、文字列型変数の正式名称は String オブジェクトです。)
mes += mes;: mes に mes の内容を足しています。JavaScript では、文字列もそのまま足せます。この場合、結果として mes は
"Welcome to My Page. Welcome to My Page. "
となります。「変数 += 値」という表記は、「変数A = 変数A + 値」の簡略形です。なぜmesにmesを足しているかというと、こうしないと、最後の文字列までスクロールしていって、文字列の先頭に戻るとき、ちょっと変に見えるからです。違いを比べてみると、よく分かります。
statuslen = 20;
i=0;: statuslen には、ステータスラインに表示する文字列の長さを格納しています。
i には、mes の何文字目をステータスラインの先頭に表示するかを格納しています。
どちらも、私が勝手に決めた変数名なので、好きな名前にして構いません。
function statusbar() {: 関数定義です。ここから、statusbar() という関数の定義の始まりです。
status=mes.substring(i,i+statuslen);: status に、mes の i 文字目から i+statutslen 文字目までを代入しています。ちなみに、文字列の先頭は 0 文字目と数えます。 status はもうみなさんご存知のように、ステータスラインに表示したい文字列を設定するシステム変数 (正確にはwindowオブジェクトのプロパティで、 window.status が正式な表記)です。
i = (i+1) % meslen;: 次回のステータスラインに表示する文字列の先頭を1つずらすために、i に 1 足して、meslen で割った余りを i に代入しています。例えば、i=(i+1)%3をくり返し実行すると、i の値は 0,1,2,0,1,2,0,1,2,～と変化していきます。変数=(変数+増分)%上限 というのは、プログラミングの際よく使うテクニックですので、皆さんもいろいろ活用してみましょう。i+=1;if (i>=meslen) i=0; とやるよりスッキリしててカッコイイと思いませんか?
window.setTimeout("statusbar()",100);: setTimeout() を使って、100ミリ秒後に再び statusbar() を呼ぶように設定しています。これは、上のほうでもう説明しましたね。
}: 上に出てきた「function statusbar() {」に対応した閉じ括弧で、ここで関数定義は終りです。
statusbar();: 関数は定義しただけでは実行されないので、ここで一回 statusbar() を呼んでおきます。一度 statusbar() を実行すると、statusbar() の中で setTimeout() を使って次回の呼び出しを設定しているので、以後くり返して statusbar() が呼び出されます。というわけで、ステータスラインにするすると文字が表示されつづけるわけです。

☆いかがだったでしょうか

JavaScript を使おう講座第０回では、ステータスラインへ文字を表示することを目標に、関数定義、インターバルタイマの使いかた等をご説明しました。初回ということで少し回りくどい説明が多くなってしまい、読むのが大変だったかもしれません。

さて次回は、時計表示を中心に、オブジェクトのプロパティやメソッドについてご説明してみたいと思います。プロパティやメソッドのことが分かると、いろいろな機能をどんどん使うことができるようになります。また、「こんなことがしたいよぅ」とか「ここが分からなかった」等の、ご要望、感想、質問もじゃんじゃん受け付けていますので、お気軽にお書きください。
では、次回をおたのしみに！

初心者の質問ページへ行く
本ページはリンクフリーです。
なお、御連絡頂ければ相互リンクを張らせて頂きます。

Produced by 月島美夏

お手紙ちょ～だ～い
minatsu@proc.org.tohoku.ac.jp