簡単にJavaScript をご紹介しましょう。
ページを生き物にする方法としては、
JavaScript 以外にもありますが、
より高度なプログラムの知識を必要としたり、
多くのプロバイダーは、その使用を禁止しています。
一方、JavaScript はＨＴＭＬの一部として記述されて、
閲覧者のブラウザ上で動作するだけですから、
サーバー（プロバイダー）の制約はありません。
▲
ＨＴＭＬはプログラムの一種ですが、ブラウザにたいして一方的に、
文字とか、画像の表示を指示することしか出来ません。
一方JavaScript は、ＨＴＭＬの一部として同時に読み込まれ、
ＨＴＭＬと一体になって、ブラウザ上でプログラムとして進行します。
ＨＴＭＬは、所定の表示を完了すると、そこで停止してしまいますが、
JavaScript は、ブラウザの中で活動を継続しています。
画面からの働きかけに対し、それに反応させることも出来ます。
働きかけなしに、単独で、活動を継続させることも出来るのです。
画面を通じてインタラクティブなページを作ることが可能になります。
JavaScript もプログラムの一種です。本格的なプログラム言語です。
ですから、ある程度プログラムというものの、専門知識が必要といえます。
でも、心配することはありません。表計算ソフトなどの「マクロ」とか、
ＨＴＭＬのコーディングについて、多少でも経験があるのなら、
JavaScript 言語は、容易に理解することが出来ると思います。
▲
混同されがちですが、まったく違うものです。
プログラムの書き方は似ているところもありますが、仕組みが違います。
JavaScript は、ＨＴＭＬの中にプログラムとして書き込んでしまいます。
ブラウザは、ＨＴＭＬの一部として取り込んで、ページの表示をしながら
JavaScript のプログラムの処理をしていくのです。
一方Java は、プログラムをコンパイラーという翻訳処理で、
あらかじめ、ブラウザが処理しやすいように前加工されています。
この加工済みのプログラムは、独立したファイル（アプレット）として、
サーバー（プロバイダー）に登録しておきます。
画像ファイルが、ＨＴＭＬとは別のファイルとして登録されているのと
同じ考え方です。画像ファイルが、呼び出されるのと同じように
アプレットは、ＨＴＭＬから呼び出される独立したプログラムなのです。
JavaScript は、ブラウザと一体になって動作する、ＨＴＭＬの
拡張機能といえます。
ＨＴＭＬと同時に読み込まれて、その世界の中だけで、動作するのです。
ですから、Java ほど柔軟で強力なプログラムを作ることは出来ません。
とはいっても、工夫次第でかなりのことが出来ます。過大でもなく、
過小でもなく、出来ることと出来ないことを、理解する事が大切です。
▲
JavaScript は、LiveScript と呼ばれ Netscape 社が ブラウザ用に
開発した Script 言語でした。
Sun Microsystems 社の Java の文法、機能を取り込んで、
名前を改め JavaScript として、共同発表したものです。
JavaScript 1.0 は Netscape 2.0 で、JavaScript 1.1 は
Netscape 3.0 でそれぞれサポートされています。
MS IExploror では、MSIE 3.0 からのサポートになっていますが、
対応範囲は、ほぼ JavaScript 1.0 くらいで、細かいところでは、
一致していません。機能しない命令や、エラーとなる命令もあります。
小生は、Win95 Netscape 4.0 で開発、テストをしていますが、
Win3.1/ Netscape 1.0 2.0 3.0 MSIE 3.0 と、
Win95 / Netscape 3.0 MSIE 3.0 4.0 で、出来るだけ確認しています。
それでも、しばしばミスをしてしまい、ご迷惑をお掛けしています。
JavaScript は文法規則違反（間違った書き方）にかなり寛容ですが、
その寛容度合いも、ブラウザ毎にかなり異なっています。
JavaScript を、ページに採用される場合は、出来るだけ
この２大ブラウザで、それぞれテストされることを、お薦めいたします。
▲
ＨＴＭＬで経験されていると思いますが、プログラムと言うのは
まずトライするのが早道です。理屈は、後から着いてくれば良いのです。
人まねで良いから、やってみると少しずつ理解出来て来るものです。
それでは、始めてみましょう。
あなたのホームページの <BODY> から </BODY> の間に
次の記述を入れてみて下さい。
（マウスでドラッグすれば、クリップボードにコピー出来ます）
<font color=brown>
<script language="JavaScript">
<!------
document.write("更新日：" + document.lastModified)
//------>
</script>
</font>
|
この記述を入れたところに、こんな風に表示されます。
ページを更新、変更した時の情報が自動的に表示されるようになります。
更新した都度、更新日付を書き換えて表示するよりずっと便利ですね。
最初の <font color=brown> と、最後の </font> は、
表示色を指定しているだけで、JavaScript とは関係ありません。
JavaScript は、
<script language="JavaScript"> で始まり </script> で終わります。
<!------ と //------> は、JavaScript をサポートしていない
ブラウザで読み込んだとき、JavaScript の記述を無視させる為に、
記述しているだけで、JavaScript の動作には関係ありません。
もう一つ、実験してみましょう。
ＨＴＭＬの <BODY> から </BODY> の間に次のタグを入れると
<font color=magenta>
<script language="JavaScript">
<!------
now = new Date()
document.write("今日は" + now.getYear() + "年"
+ (now.getMonth() + 1) + "月"
+ now.getDate() + "日ですね")
//------>
</script>
</font>
|
入れたところに、そのページをブラウザで表示した日付が表示されます。
getYear() を getHours() にすると「時刻（時）」、
getMinutes() は「分」、getSeconds() は「秒」を表します。
大文字小文字は、正しく間違えないでこの様に指定して下さい。
行替え、+ の前後の半角スペースは、見易くする為に入れてあります。
この通りでも良いし、一行にしても、詰めて記述しても差し支えありません。
ちょっと面白い実験をしてみましょう。
<BODY> から </BODY> の間に次のタグを入れると
<FORM>
<INPUT TYPE="button" value="青ボタン"
onclick="document.bgColor='lightblue'">
<INPUT TYPE="button" value="赤ボタン"
onclick="document.bgColor='#ff8080'">
</FORM>
|
ボタンを押してみて下さい。
色の指定は表意文字列でも良いし、１６進指定でも構いません。
ボタンの数を増やせば、指定色が増えます。色々試してみて下さい。
これも、JavaScript の応用です。
普通のＨＴＭＬの使い方とほとんど同じですね。
表示したい所で、JavaScript の「タグ」を記述するだけです。
▲
ＨＴＭＬの <BODY> から </BODY> の間に次のタグを入れると
<font color=deeppink>
<script language="JavaScript">
<!------
for (i=1;i<8;i++)
document.write("<font size=" + i + ">Welcome to JavaScript</font><br>")
//------>
</script>
</font>
|
入れたところに、こんな風に表示されます。
for で i の値を 0 から 7 迄変化させ、繰り返し表示しています。
あらかじめ、次のような画像ファイルを用意しておいて、
day0.gif |
day1.gif |
day2.gif |
day3.gif |
day4.gif |
day5.gif |
day6.gif
|
ＨＴＭＬの <BODY> から </BODY> の間に次のタグを入れると
<font color=green>
<script language="JavaScript">
<!------
now = new Date()
document.write("今日は <img src=day" + now.getDay() + ".gif width=32 height=32> 曜日ですね")
//------>
</script>
</font>
|
入れたところに、ブラウザで表示した曜日が表示されます。
JavaScript で取り込んだ「曜日」のコード「 now.getDay() 」で、
画像を呼び出しています。
ここまでは、JavaScript を、ＨＴＭＬと同じ様な使い方で、
タグの拡張機能のイメージとして、使用する例題をご紹介しました。
JavaScript の使い方で、非常に強力な使い方があります。
「関数（function）」という形で、組み込んでおくのです。
必要になったとき、呼び出す（イベントを発生させる）方法です。
<form name="disp">
現在時刻：<input type="text" name="time" size=8>
</form>
<SCRIPT LANGUAGE="JavaScript">
<!----------
function clock() // 関数 clock() を定義
{
var now = new Date(); // 「現在」の定義
var h = now.getHours(); // 「時」の取り出し
var m = now.getMinutes(); // 「分」の取り出し
var s = now.getSeconds(); // 「秒」の取り出し
var tm = " "+ h; // tm に「時」をセット
tm += ((m < 10) ? ":0" : ":") + m; // tm に「分」を２桁でセット
tm += ((s < 10) ? ":0" : ":") + s; // tm に「秒」を２桁でセット
document.disp.time.value = tm; // tm を表示欄に表示
setTimeout ("clock()",100); // １００ミリ秒後 clock() を再起動
}
clock() // 関数 clock() の起動
// -------->
</SCRIPT>
|
<body> から </BODY> の任意の所にコピーすれば
その場所に、時刻が表示されます。
応用問題ですが、少し複雑にするとこんなこともできます。
表示されている経過時間は、
この「入門講座」に来られてからの、経過時間です。
<form NAME="javamsg">
経過秒数：<INPUT TYPE="text" NAME="time" SIZE="3">：
<INPUT TYPE="button" VALUE="停止" onClick="clearTimeout(timer)">
<INPUT TYPE="button" VALUE="開始" onClick="start()">
</form>
<SCRIPT LANGUAGE="JavaScript">
function init()
{
var now = new Date();
var tm = Math.floor((now.getTime() - old.getTime())/1000);
tm = ((tm < 10) ? "0" : "") + tm;
tm = ((tm < 100) ? "0" : "") + tm;
document.javamsg.time.value = tm
timer=setTimeout("init()",100)
}
function start()
{
old = new Date()
init ()
}
start()
</SCRIPT>
|
如何でしょうか。応用すると、色々面白い使い方が出来そうですね。
この他の例題は、「Welcome to JavaScript World」をご覧下さい。
具体的な応用事例については、「幕の内弁当」の各ページをご覧下さい。
ほとんどすべてのページで JavaScript を組み込み、応用しています。
▲
あなたも JavaScript の素晴らしい世界に
挑戦して見ませんか。
