■JavaScript■

■JavaScriptとは■

●Webページに動きや対話性を持たせるためのスクリプト言語●

JavaScriptは，Webページに動きを持たせたり，ページ閲覧者の都合に合わせたり，ページ制作者の都合に合わせて，その場で動的にページ内容を切り替えたりするための仕掛けを実現するために用意された．

まずはJavaScriptの使用例を参照のこと．例えば，閲覧者のパソコンの画面サイズに合わせて表示する画像のサイズを切り替えたり，時刻に合わせて表示内容を変更したりすることができる．

"Java Script"ではなくて"JavaScript"であり，まぎらわしい名前だがJava言語とはまったく別の言語である．JavaScriptは，Java言語を参考にSun Microsystemsと旧Netscape Communicationsが開発したオブジェクト指向型スクリプト言語である．HTMLで記述内に，スクリプトとして埋め込むことができる．つまり，JavaScriptはWebページのデータの一部としてダウンロードされ，それをブラウザが直接解釈してスクリプトをユーザ側のコンピュータ上で実行する．

(混同されがちな，Java言語で書かれた「アプレット」は，バイナリ形式のプログラムファイルがクライアントのパソコン側に一度ダウンロードされてからパソコンのJava仮想マシンによって実行される．)

現在も開発が続けられているものの，Microsoft社など各社が独自に拡張を行ったりして規格がまとめられず混沌としている．その中でも各社の仕様の共通部分をまとめようとしたものがECMAScriptである．

●利点・欠点●

JavaScriptは，以前演習したCGIスクリプトと同様にリアルタイムにその場で情報を加工して表示させることなどが可能である．CGIとの違いはブラウザの上で(ユーザのパソコン側で)実行される点にある．(CGIスクリプトは，Webサーバの上で実行される．ユーザのパソコンの上で実行されるため，ユーザ側の詳細な情報を利用できる．例えば，マウスカーソルの位置や画面の解像度や表示可能色などを利用して，細かい制御ができる．(これらはCGIなどでは利用できない．)

その反面，ユーザ側のパソコンの設定次第では動作できなかったり，悪意のあるユーザがスクリプトを書き換えてから実行する可能性もありうる．このため，電子商取引などで，例えば実際のお金の計算など重要な目的には利用すべきではない．さらに欠点として，そもそもブラウザがJavaScriptに対応していないと動作しない(例えば，携帯電話など)．また，対応しているWebブラウザでも，ブラウザの種類によって対応のしかたが異なるため，作成したJavaScriptプログラムは，実際にいろいろなブラウザ上で動作確認が必要である．

こうした欠点のため，あくまで画面デザイン目的での利用や，サーバ側で管理しなくてもいいような仕事(例えば入力欄の埋め忘れのチェック)など，JavaScriptは，最悪の場合動作しなくても問題がない部分にだけ利用すべきである．

■JavaScriptのチュートリアル■

このページが参考

■JavaScriptはどこに書くのか(最低限知っておくこと)■

JavaScriptはHTMLで書かれたページ内容の中へ直接書き込む．次のように<head></head>タグの間，あるいは<body></body>タグの間に，<script>タグを使って記述する方法と，リンクのURLの代わりに埋め込む方法と，<input>タグや<a href>タグなどの表示要素のタグの中にオプションとして書き込んでしまう方法の3通りある．

●(1) <script>タグを使用する方法●

スクリプトタグを使用すれば，HTML中の自在の位置へ埋め込むことができる．JavaScriptは原則として読み込まれた直後に実行される． ヘッダ(<head></head>)はHTMLページの一番最初に読み込まれるため，ヘッダ情報の操作や後から読み込まれるスクリプトのためにあらかじめ準備しておく部分は，次のように埋め込む．実際のプログラム内容については後述する．

<html>
  <head>
      <title>ページのタイトル</title>
      
      ...省略，その他のヘッダ部分...
      
      <script type="text/javascript">
             
              JavaScriptのプログラムはここに書く
             
      </script>
  </head>

  <body>
      通常どおり，ページ内容の本体を書いておく
  </body>
</html>

その後のページ本体にも埋め込める．読みやすいように操作対象の近くに書いておくことも多い．

<html>
  <head>
      ...普段通りのヘッダ部分...
  </head>

  <body>
      ...ページの内容...

      <script type="text/javascript">

             JavaScriptのプログラムをここに書く

      </script>

      ...ページ内容の続き...
  </body>
</html>

ヘッダ部分とページ本体に同時にそれぞれ別のスクリプトを書いたりなど，複数のスクリプトタグを必要に応じて好きなように書けばよい．

<script type="text/javascript">タグは，JavaScriptの記述の開始を意味する．実は<script>タグは，そのほかのスクリプト言語でも利用されるため，JavaScript言語を利用するためにtypeオプションで指定する．

●(2) URLの代わりとして埋め込む方法●

また，イベントではなく，URLとしてタグに含めることもできる．ただし<a href>タグなど，URLを指定できるタグの中だけである．ページ位置を示すための「http:」の代わりに「javascript:」を用いて次のように書く．

<a href="http://サーバ名/ページ名"> リンクの説明　</a>
		↓
<a href="javascript: Javascriptのプログラム内容"> プログラムの説明 </a>

●(3) イベント指定オプションを使用して埋め込む方法●

(1)の<script>タグを使わずに，直接他のタグ，例えば<a href="url">や，<img><body>や<h1>など，様々なタグの中に，オプションのイベント指定として記述する方法がある．例えば，<p>に埋め込むには，次のように書く．

<p onClick="JavaScriptのプログラム内容">ここをクリック</p>

(2)リンクの時のような「javascript:」は必要ない．直接プログラムを書く．これで，ページ内の表示された「ここをクリック」の部分をマウスで「クリックする(onClick)」と，指定したJavaScriptが実行されることになる．このようにクリックなどのユーザが行った操作や，タイマーで規定時間に到達するなど，ある特定の事象のことをイベントと呼ぶ．<script>タグの場合と違って，ブラウザに読み込まれた瞬間には実行されず，イベントが発生したときにはじめて実行される点に注意すること．

イベントには次のようなものがある

onClick その場所でクリックされた時
onDblClick その場所でダブルクリックされた時
onMouseOver その場所にマウスカーソルが上にのせられた時
onMouseOut その場所からマウスカーソルが離れた時
onMouseWheel その場所でマウスホイールが回された時
onContextMenu その場所で右クリックされた時
onCopy その場所の内容をコピーした時
onCut その場所の内容を切り取った時
onPaste その場所へ貼り付けた時
onLoad ページがロードされた時
onUnLoad 別のページへ切り替えられる時

すべてのタグに埋め込むことが可能であるが，<body>の中に書いた場合はページ全体に対して効果があり，例えば<body onClick="プログラム内容">とするとページ全体どの場所でもマウスをクリックした時にプログラムを実行することになる．また最後の二つの項目だけは<body>の中だけで利用できる．

■典型的な書き方のテクニック■

実際のプログラムでは前節で説明した方法を組み合わせて使用する．いくつかのテクニックと合わせて，ここで紹介する．

●関数の利用 (いくつかの処理のまとめ書き)●

実際のJavaScriptのプログラムは一つの命令だけですむ単純なものではなく，何行にもわたることになる．長いプログラムでは，ひとつの目的のために必要な処理を「関数」としてまとめて整理する．ここでいう「関数」とは数学で教わった関数とはまったく別物と考えてよい．まとめられたプログラムのことを慣例的に「関数」と呼んでいるだけである．

JavaScriptにおける関数は，次のように記述する

function 関数の名前(引数の名前)
{
  
  1番目の処理
  2番目の処理
  3番目の処理
  ...  
}

関数の名前には，アルファベットで好きな名前を付けることができる．中に含む処理を一言で説明するような名前が好ましい．引数とは，関数に渡すパラメータのことで，関数内部の処理を切替えたり，制御したりするための変数のことをいう．関数の内部で動作を切り替える必要がなければ(いつも同じように動作させるだけなら)，なくてもよい．つまり空括弧()でよい．

●コメントを利用した非対応ブラウザへの対応●

最近のパソコン上のブラウザでは，まずJavaScriptに対応している．しかし携帯機器用の簡易ブラウザではJavaScriptに対応していないものもある．そのようなJavaScript非対応ブラウザでJavaScriptが埋め込まれているページを閲覧すると，JavaScriptのプログラム内容がそのまま文字として表示されてしまう．

そのため，次のようにJavaScriptのプログラムをHTMLのコメント(注釈)として設定しておくことが行われた．コメントとは，ページの内容そのものではなく，ページを閲覧されるときには表示されないメモ部分のことをいう．元のHTMLファイルの中身を編集する際に，参考となるような情報を付記しておくために用意されている．

<script type="text/javascript">
<!--

    プログラムの内容

//-->
</script>

<script>と</script>のすぐ内側に，<!--と//-->を追加しただけである．HTMLでは，<!--は，HTMLの注釈部分の開始を意味し，注釈部分の終わりを-->で指示するように取り決められている．このため非対応ブラウザでは<script>と</script>の間には何もないものとして扱われる．そして未対応のscriptタグを無視するため，結果として何もなかったものとされる．

それに対して，JavaScript対応ブラウザの場合には，<script>で示されたスクリプト部分において<!--記号の方が無視される．そして後述するように，//記号はJavaScriptプログラムに対するコメント記号として定義されているため，-->も無視され，結果としてスクリプトが実行できる．

また，<script>タグを使わずに，他のタグの中に埋め込まれたJavaScriptに関しては，対応していないブラウザでは単純に無視されるために， ページの表示内容には影響せず，通常そのままでそのままで構わない．

●単純なプログラム例●

以上のテクニックも合わせて，簡単なJavaScriptの例として次のように記述される．蒼い部分がJavaScriptに関係する部分である．

<html>
 <head>
   <title> JavaScriptのサンプルページ</title>
   <script type="text/javascript">
   <!--

     function my_first_program(message){
       alert(message);
     }

   //-->
   </script>
 </head>
 <body>
   
   ...普通のページ内容を書いておく...
   
   <font color="RED" onClick=" my_first_program('こんにちは') " >
    ここをクリック
   </font>
 </body>
</html>

まず，HTMLのヘッダ部分に， <script>タグを使って，関数を用意しておく．この例ではmy_first_programという中身が一行だけの簡単な関数である．引数の名前はmessageで，ここに渡されてきた内容をalert関数に引き渡して実行するだけである．このalert関数自体は，最初からJavaScriptに組み込まれているもので，自分でalert関数を用意しなくてもよい．このalert関数は画面に一つウィンドウを表示させて，メッセージを表示する機能を提供している．

次に，<body>の中で，通常の<font>タグが使われているが，そのオプションとしてonClickイベントが指定されて，先ほどのmy_first_programが呼び出されている．実際にその関数へ引き渡す引数の実体として'こんにちは'という文字が指定されている．これで，その<font>タグで指定された部分をクリックすると，指定されたメッセージが表示されるというスクリプトを実現している．

これに相当する例が下の部分である．次の「ここをクリック」の所をクリックすると，ウィンドウが開くので試してみよ．

ここをクリック

■JavaScriptの文法やサンプルについて■

JavaScriptのより詳細な文法やサンプルプログラムは次のリンクで確認すること．

Google

WWW を検索
nit.ac.jp を検索

■メニュー■