第0回目の今回は、「ステータスラインに文字をスクロールさせる」です。
<SCRIPT>
<!--
スクリプト本体
// --> このページは JavaScript を使用しています。できれば、Netscape 2.x 以降か、InternetExplorer 3.x 以降で御覧ください。
</SCRIPT>
<SCRIPT> タグで囲むと、html の「<!--」「-->」 は無視され、コメントとして働きません。よって、上の例では、 スクリプト本体が<!-- -->で囲まれていても、 ちゃんとスクリプトとして働きます。代わりに 「//」 が、JavaScript 中でのコメントになります。上の例では 「// -->このページはJavaScriptを〜〜」 の行はJavaScriptでのコメントとなり、画面には表示されません。
補足ですが、 JavaScriptに対応していないブラウザは <SCRIPT>や</SCRIPT> を無視します。よって今度は<!-- -->が ちゃんとコメントとして働き、 中に入っているスクリプト部分をコメントとみなし無視します。よって、 スクリプト部分が画面に表示されてしまう事を防げます。そして上の例の場合、 「このページはJavaScriptを〜〜」の部分が コメントの外に出ているので、画面に表示されます。 |
<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.」という表示に なってしまうと思います。実はステータスラインへの表示は、次に なにか表示されると上書きされてしまうのです。そこで、ずっと表示 させておくにはどうしたらいいか?それは、インターバルタイマーを使って 定期的にステータスラインを書き換えることにより可能になります。
<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();さて、ちょっと長くなって来ましたが、気合いをいれて少しずつ見ていきましょう。
さて次回は、時計表示を中心に、オブジェクトのプロパティやメソッド
についてご説明してみたいと思います。プロパティやメソッドのことが分かると、
いろいろな機能をどんどん使うことができるようになります。
また、「こんなことがしたいよぅ」とか「ここが分からなかった」
等の、ご要望、感想、質問もじゃんじゃん受け付けていますので、
お気軽にお書きください。
では、次回をおたのしみに!
Produced by |
お手紙ちょ〜だ〜い minatsu@proc.org.tohoku.ac.jp |