JavaScript入門

安岡孝一

JavaScriptは、HTMLで書かれたページの表示を変化させて、動きのあるページを作るのに非常に便利な言語です。 一般にNetscape 3.0以上あるいはInternet Explorer 4.0以上で動作しますが、もちろん、できることには限りがあります。 JavaScriptではどのようなことができるか、以下に簡単に挙げてみましょう。

できるのはたったこれだけですが、 これだけのことを組み合わせるだけでも、 相当凝ったことができたりするのです。

JavaScriptの基本

JavaScriptは、HTMLファイルの中に直接埋め込む形で記述するプログラム言語です。 通常は 
        <HEAD>
        <SCRIPT LANGUAGE="JavaScript">
        <!--
        プログラム本体
        //-->
        </SCRIPT>
        </HEAD>
というように<HEAD>の中に記述します。 JavaScriptのプログラム本体は 
        function clicked(x){
          if(document.forms[0].elements[x].checked)
            status=x+" is clicked on";
          else
            status=x+" is clicked off";
          return;
        }
のような関数定義から構成されます。 上の例ではclickedという関数が定義されていて、引数はx、戻り値はありません。 戻り値のある関数を定義したい場合は、return;ではなく、return(戻り値);と記述すればOKです。 関数が呼び出される契機は、基本的には以下の通りです。 これらについては、次章の例で詳しく説明します。

JavaScriptで用いることのできる値には、数、文字列、真偽値があります。 数は通常の10進数で小数も扱えます。 文字列は通常"で囲まれているものです。 "以外のASCIIが可能ですが、漢字はうまく使えません。 真偽値はtrueとfalseの2値だけです。

数を返す基本演算は以下の通りです。
数+数加算
数-数減算
数*数乗算
数/数除算
数%数剰余
Math.pow(数,数)「左数」の「右数」乗
Math.max(数,数)大きい方の数
Math.min(数,数)小さい方の数
Math.abs(数)絶対値
Math.ceil(数)「数」以上の最小の整数
Math.floor(数)「数」以下の最大の整数
Math.random()0以上1未満の乱数
parseFloat(文字列)文字列を数に変換
文字列.length文字列の長さ
文字列.indexOf(文字列,数)「左文字列」中の「数+1」文字目以降で最初に「右文字列」が現れるのは何文字目か、から1を減じたもの(なければ-1)
　
文字列を返す基本演算は以下の通りです。
文字列+文字列文字列の連結
数+文字列数を文字列とみなして連結
文字列+数数を文字列とみなして連結
文字列.substring(数,数)部分文字列、元の文字列の「左数+1」文字目から「右数」文字目までを返す
　
真偽値を返す基本演算は以下の通りです。
文字列==文字列文字列が等しい時true
文字列<文字列左文字列が右文字列より辞書順で前ならtrue
文字列>文字列左文字列が右文字列より辞書順で後ならtrue
文字列!=文字列文字列が等しい時false
文字列<=文字列左文字列が右文字列より辞書順で後ならfalse
文字列>=文字列左文字列が右文字列より辞書順で前ならfalse
数==数数が等しい時true
数<数左数が右数未満ならtrue
数>数左数が右数より大きいならtrue
数!=数数が等しくない時true
数<=数左数が右数以下ならtrue
数>=数左数が右数以上ならtrue
!真偽値trueならfalse、falseならtrue
真偽値&&真偽値両方ともtrueならtrue
真偽値||真偽値いずれかがtrueならtrue
　
特殊な演算としては、以下のものがあります。
真偽値?式:式trueの時「左式」、falseの時「右式」

JavaScript中では、変数を用いることができます。 変数の宣言にはvar命令を用います。 functionの外で宣言された変数は全ての関数で有効ですが、function内で宣言された変数および引数はその関数の中でだけ有効です。 またArrayにより、変数を1次元配列として用いることもできます。 変数への代入は=を用いますが、数の演算を行ないながらの代入に関しては、Cと同様の形式(+=、-=、*=、/=、%=、++、--)が認められています。

JavaScriptでの制御構造は、if、while、forの3つだけです。 ifは 

    if(真偽値を返す式){ 命令… }else{ 命令… }
という形で、trueの場合は左の命令群、falseの場合は右の命令群を実行します。 else以降は省略可能です。 whileは 
    while(真偽値を返す式){ 命令… }
という形で、trueの間、命令群を繰り返し実行します。 forは 
    for(命令;真偽値を返す式;命令){ 命令… }
という形で、whileで書き換えると 
    命令;while(真偽値を返す式){ 命令… ; 命令}
となります。 いずれも{と}の間に命令が1つしかない場合は「命令;」と書いてもかまいません。

JavaScriptを用いたHTMLの実際例

Example 1

の実際例をここに示します。 ソースはここにあります。

この例ではというボタンをクリックすると、clicked(0)が実行されて、ステータスバーに「No.0 is clicked」という文字列が表示されます。 あるいはのボタンでも同様です。 ボタンは必ず<FORM>〜</FORM>の中に書く必要があります。

Example 2

の実際例をここに示します。 ソースはここにあります。

この例では、HTMLファイルの読み込みが終了すると、init()が実行されて、変数pに大きさ3の配列が割り当てられたあと、p[0]にもp[1]にもp[2]にもfalseが代入されます。 その後、例えば0と書かれたアンカーをクリックすると、clicked(0)が呼び出されて、document.images[0].srcにqueen.gifという文字列が代入されます。 この結果、IMGのうち最初のものがqueen.gifすなわちに置き換えられます。 さらにもう一度、0と書かれたアンカーをクリックすると、やはりclicked(0)が呼び出されて、今度はdocument.images[0].srcにspace.gifという文字列が代入されます。 この結果、IMGのうち最初のものがspace.gifすなわちに置き換えられます。

ここで大切なのは、document.images[数].srcが、HTMLファイル中の「数+1」番目のIMGに対応しているということです。 したがってdocument.images[数].srcに文字列を代入することで、対応するIMGのがその文字列で示される画像ファイルに置き換えられるのです。 ただしdocument.images[数].srcは読み出せない(実は読み出せなくはないが、代入した文字列がそのまま入っているわけではない)ため、space.gifとqueen.gifのどちらが表示されているかを、対応する配列pにfalseとtrueで覚えさせているのです。 なお、置き換えるIMGは同じサイズのものでなければいけません。 もし違うサイズのものを用いる場合は 

    <IMG SRC="space.gif" WIDTH=32 HEIGHT=32>
のようにサイズを強制的に変換する必要があります。

Example 3

Example 2を改良して、アンカーをIMGに重ねた例をここに示します。 ソースはここにあります。 この例はExample 2と本質的に同じですが、アンカーがIMGに重なっているため、をクリックすると絵が変わるような錯覚に陥ります。

Example 4

Example 3を改良して の実際例をここに示します。 ソースはここにあります。

この例では、最初のIMGのアンカーにマウスが重なると、moused(0)が呼び出されて、最初のが置き換わります。 クリックした場合はclicked()が呼び出されますが、これはダミーの関数(HREFの後には何か書いておく必要があるのです)で、何もしません。 2つ目、3つ目のIMGについても同様です。

Example 5

の実際例をここに示します。 ソースはここにあります。

この例では、HTMLファイルの読み込みが終了すると、question()が実行されて、number?と書かれたミニウィンドウが登場します。 このnumber?の文字列は 

    n=prompt("number?","");
のprompt中の左文字列によるものです。 なお、右文字列はミニウィンドウの入力部の初期値で、ここでは空文字列になっています。 ミニウィンドウで入力された文字列はnに代入されます。 ただし、入力がCancelされた場合はnullがnに代入されます。 次にnを数に変換して 
    t=setTimeout("clearTimeout(t);dispbin(0)",200);
で、200ミリ秒後にdispbin(0)を呼び出すことを設定します。 このtはタイマー番号を覚えておくための変数で、setTimeoutで返ってきた番号のタイマーをclearTimeout(t)で止めるために用います。 タイマーの個数には制限があるため、一度動かしたタイマーは、必ず止めなければならないのです。 なお、タイマー番号用の変数は、functionの外で宣言しなければいけません。

dispbin(0)が呼び出されると、まずdocument.forms[0].elements[0].checkedにfalseが代入されます。 この結果、<FORM>中の最初のINPUTのチェックボックスがの表示になります。 次にdocument.forms[0].elements[1].checkedにもfalseが代入されて、中の2番目のINPUTのチェックボックスがの表示になります。 以後、全てのチェックボックスがになり、x++でxが1増えて、もしnを越えていないならば 
    t=setTimeout("clearTimeout(t);dispbin("+x+")",200);
で、200ミリ秒後にdispbin(1)を呼び出すことを設定します。 もしnを越えていれば 
    question();
でquestion()を呼び出します。

ここで大切なのは、document.forms[0].elements[数].checkedが、<FORM>中の「数+1」番目のINPUTに対応していて、trueもしくはfalseになっているということです。 なお、document.forms[0].elements[数].checkedは読み出しも可能で、現在のの状態を調べることもできます。 ちなみに、もしHTML中に<FORM>が複数ある場合は、順にforms[0]、forms[1]、…となるのは言うまでもありません。

Example 6

の実際例をここに示します。 ソースはここにあります。

この例では、JavaScriptは<BODY>内にも書かれています。 この<BODY>内のJavaScriptは、HTMLファイルの読み込み時に1回だけ実行されるものです。 この部分では、基本的に関数定義は行なわず、function外で宣言された変数だけを用います。

この例の本質は 

    for(t=0;t<r;t++)
      document.write("<INPUT TYPE=CHECKBOX>");
の部分であり(tは本来タイマーに使うために準備した変数ですが、ここではちょっと借りています)、例えばrが4だったとすると、この部分は 
    <INPUT TYPE=CHECKBOX><INPUT TYPE=CHECKBOX><INPUT TYPE=CHECKBOX><INPUT TYPE=CHECKBOX>
というHTMLになってしまうのです。 したがって、<FORM>中のチェックボックスの数や、あるいは表示するIMGの数などを、JavaScriptで変更することが可能なのです。 ただし、この部分の実行は1回だけなので、もし再実行したい場合はlocation.hrefに自分自身のファイル名を代入することで、HTMLの再読み込みを行なわねばなりません。 しかも再読み込みの際には、変数などは全て初期化されてしまいますから、必要なデータを渡すためには、特殊な変数であるdocument.cookieを使うしかありません。

JavaScriptプログラムのページへ