田村仁研究室　日本工業大学創造システム工学科

メニュー

JavaScriptとは

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

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

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

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

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

このため，Webブラウザの種類によってうまく動作するJavaScriptもあれば動作しないものもあり，なるべくどのソフトでも実行できるように仕様を定めたものがECMAScriptである．

利点・欠点

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

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

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

JavaScriptのチュートリアル

このページが参考

JavaScriptの基本形

JavaScriptはHTMLで書かれたページ内容の中へ直接書き込む．基本的には，次のように<script>タグと</script>の間にスクリプト本体を書きこむ．このタグはHTML中のどこに書いても構わないが，通常は<head></head>タグの間に書くことが多い．

埋め込んだJavaScriptは，通常のタグのオプションとして記述したJavaScriptの起動指示によって起動させる．あるいはリンクのURLの代わりに起動指示を埋め込む方法もある．

次のように埋め込む．実際のプログラム内容については後述する．

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

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

      <a href="javascript: 起動したいJavaScriptプログラム"> そのプログラムの説明 </a>
　　　　または
      <p onClick="起動したいJavaScriptプログラム">ここをクリック</p>
  </body>
</html>

URLの代わりとしてタグに起動の指示を含めるには，ページ位置を示すための「http:」の代わりに「javascript:」を用いて次のように書く．

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

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

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

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

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

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

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

単純なプログラム例

簡単な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における関数は，次のように記述する

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

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

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

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

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

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

    プログラムの内容

//-->
</script>

それに対して，JavaScript対応ブラウザの場合には，<script>で示されたスクリプト部分においても無視され，結果としてスクリプトが実行できる．

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

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

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

オブジェクト指向と具体的なプログラム例

文法などの解説

コンピュータリテラシー2

Computer Literacy 2