しかし、動的なコンテンツを作ろうとすると、クライアントのちょっとした動作によって、頻繁にサーバー?クライアント間の通信が発生し、 両者の間の実効的な通信速度が遅い場合、実用的なコンテンツではなくなります。 また、多数のユーザーが同時に利用する場合、サーバーにおける負荷が高くなりやすいといった問題もあります。
そこで、ある程度の動的な仕事はクライアント側でさせるようにするためにJavaScript言語が開発されました。 クライアントがJavaScriptを含むページにアクセスすると、最初にJavaScriptのプログラムがクライアント側にダウンロードされます。 そして、他のページをアクセスするまでは、そのJavaScriptプログラムはクライアントのWWWプログラムの中で実行されます。
このように、JavaScriptのような仕組みはクライアント側にプログラムを送り込むためにセキュリティー上で問題となりやすいものです。 そこで、JavaScriptにはさまざまな制限がありますし、クライアントソフト側ではJavaScriptを無効にすることもできます。
<HTML lang=ja>
<HEAD>
<TITLE>例１</TITLE>
<script language="JavaScript"> <-1
<!-- Begin code <-2
userName = prompt("名前を入力して下さい",""); //入力を要求する <-3
if(userName != "") { <-4
document.write(userName, "さん、ようこそ！"); //画面に出力 <-5
} else { <-6
document.write("名無しさん、ようこそ！"); //画面に出力 <-7
} <-8
// -- End code --> <-9
</script> <-10
</HEAD>
<BODY>
</BODY>
</HTML>
1行目(<-1)では、ここからJavaScriptのプログラムが始まることを宣言しています。
10行目と対にして使います。
一般にJavaScriptのプログラムはHEAD部の中で記述します。
2行目と9行目はJavaScriptが使えないクライアントのためのおまじないで、これも対で使います。
３行目のpromptはJavaScriptの組み込み関数で、表示されたフォームに入力された文字列がOKボタンが押されるとuserNameという変数に入れられます。
４行目でuserNameが空かどうかをチェックして、空でなければ５行目で画面表示します。 userNameが空であれば７行目で「名無しさん、ようこそ！」を画面表示します。
if()は（）の中の条件をチェックしてOKなら次の｛｝の中を実行し、条件にマッチしなければelse以降の｛｝の中を実行します。
!= ""は空の文字列ではないという条件を表します（！は否定）。
document.write()はページに文字列を表示する関数です。
先ほど保存したjs1.htmlをダブルクリックすると下のようなフォームが表示されますので、 期待通りの動作をするか、試してみてください。
小さな画像の上にマウスを置くと、大きな画像が変わります。
|
次のHTML＋JavaScriptをメモ帳で入力し、js2.htmlに保存して、クリックしてみてください。
（この例題は総合情報基盤センターのWWWクライアントでは異図した動作をいたしません）
new Arrayで０からFまでの16進数の文字をひとつずつhxに配列として入力しています。
JavaScriptでは自分で関数を作れます。ここではfunction disp()としてdisp関数を作成しています。
for(i=0;i<16;i++) はiを16まで１ずつ足しながら繰り返すことを意味しています。 for(j=1;j<16;j=j+2) はｊを16まで２ずつ足しながら繰り返します。
col="#"+hx[i]+hx[j]+hx[i]+hx[j]+hx[i]+hx[j]; で16進数の色コードを作ってcol変数に代入しています。
<body onLoad="disp();"> はページを表示する時にdisp関数を実行することを示しています。
