梅ちゃん堂 > JavaScript 入門 > JavaScript の基礎 >
- プログラムを呼び出す -

最初はボタンの onClick 属性の値に直接プログラムを記述する例です。

Sample 5
何か言葉を入れてボタンをクリックして下さい。

ソース

<FORM name="test1">
<INPUT type="text" sise=5 name="input_data">
<INPUT type="button" value="ここをクリック" onClick="var dat = ''; dat = document.test1.input_data.value; if (dat == '') alert('何も入っていません!'); else alert(dat + 'が入力されました。')">
</FORM>

onClick 属性の値に命令が4個も入っています。(1個の命令はセミコロン ; で区切っています。) このような書き方も出来るということです。これと似た例を見てみましょう。

Sample 6
下のリンクをクリックしてみて下さい。
今何時?

ソース

<A href="javascript: Now = new Date(); alert(Now.toLocaleString());">今何時?</A>

この方法では onClick 属性の代わりに A タグの href 属性を使用しています。 ハイパーリンクはウェブページやファイルにリンクするだけでなく、JavaScript のプログラムにリンクすることも出来るのです。 但し、この場合は必ず javascript: 宣言から始めなければなりません(すべて小文字の javascript のあとにコロン : を付け、 そのあとに JavaScript の命令が続きます)。

上記2つの方法は、JavaScript を呼び出すタグの属性値にそのまま命令を書くので手軽ですが、 命令が何十行にも及ぶ場合、この方法は使えません。 そこで、<SCRIPT> タグを使ってページ内に JavaScript を定義する特別な領域を作るのが次の方法です。

Sample 7
入力欄に数字を入れて下さい。

ソース

<SCRIPT type="text/javascript">
<!--
function culculate() {
  with(document.test2) {
    var d1 = data1.value;
    var d2 = data2.value;
    if(isNaN(d1) || d1=="") {
      alert("「"+d1+"」は計算可能な数字ではありません。\n半角数字を入れて下さい。");
      data1.focus();
      data1.select();
      return;
    }
    if(isNaN(d2) || d2=="") {
      alert("「"+d2+"」は計算可能な数字ではありません。\n半角数字を入れて下さい。");
      data1.focus();
      data2.select();
      return;
    }
    data3.value=eval(d1)+eval(d2);
  }
}
//-->
</SCRIPT>

<FORM name="test2">
<INPUT type="text" size=10 maxlength=10 style="ime-mode: disabled;" name="data1">

<INPUT type="text" size=10 maxlength=10 style="ime-mode: disabled;" name="data2">

<INPUT type="text" size=10 style="border:none;ime-mode: disabled;" name="data3"><BR>
<INPUT type="button" value="計算"onClick="culculate()">
</FORM>

「計算」ボタンをクリックすると culculate() というユーザ定義関数が呼び出されます。 culculate() の内容は、あらかじめ <SCRIPT> タグの中に定義されています。 <SCRIPT> タグの使用方法は次の通りです。

  1. <SCRIPT> タグは必ず終了タグ </SCRIPT> を必要とします。 これを付け忘れると、プログラムが正常動作しないばかりか、ページの表示にも影響します。
  2. <SCRIPT> タグを入れる位置は、HTML のヘッダ内(</TITLE> と </HEAD> の間)に入れることが多いですが、、 <BODY>〜</BODY> 内に入れることもできます。入れる位置と処理内容によっては、エラーになる場合もあります。
  3. 1つの HTML 内には <SCRIPT> タグをいくつでも使用できます(それぞれに終了タグ </SCRIPT> が必要)。
  4. <SCRIPT> タグは特に言語を指定しない場合、デフォルトでは JavaScript として解釈されますが、普通は属性で言語を指定します。 言語の指定の仕方は、従来は language="JavaScript"、或いは JavaScript のバージョンを入れて language="JavaScript1.3" のように language 属性が使われてきましたが、 現在は type 属性を使い、type="text/javascript" と書くことが推奨されています。例:<SCRIPT type="text/javascript">
  5. <SCRIPT>〜</SCRIPT> 間には直接プログラムを書き入れることが出来ますが、マナーとしてコメントタグ <!-- 〜 //--> でプログラムを囲むことが推奨されています。 これは JavaScript に対応していないユーザーエージェントがスクリプトデータそのものを普通の文章と一緒に表示してしまうのを防ぐためです。(上記ソースを参照。)
  6. <SCRIPT>〜</SCRIPT> 間に入れるスクリプトには半角英数字記号のみを使用して下さい。 但し " " または ' ' で囲んだリテラル(文字列データ)には全角文字も使用できます。 インデントには半角スペースまたはタブを使用して下さい(全角スペースは不可)。
  7. スクリプト本文内で使用できるコメントには1行コメントと範囲コメントがあります。 1行コメントは、コメントにしたい文の頭に // を付けます(// から行末までがコメントとなります)。範囲コメントは、コメントにしたい文を /* 〜 */ で囲みます。 コメント文には日本語全角文字など、どんな文字も使用してかまいません。

スクリプト本文には、プログラムに必要な変数を宣言・定義したり、関数を定義したりします。(上記ソースを参照。) 但し、そのどちらもしない用法もあります。

<SCRIPT type="text/javascript">
<!--
  document.write("あなたが使用しているブラウザは JavaScript 使用可能です。");
//-->
</SCRIPT>

document.write は 文書中に文章を書き込むメソッドで、 JavaScript をサポートしているブラウザなら文章が指定位置に書き込まれるという理屈です。 ページが読み込まれると、ブラウザは他の文章に混じる形でこの文章を表示します。 特にイベントを規定していないのに実行される「暗黙のイベント」の1例です。

では次に、外部ファイル(.js ファイル)を使う方法について考えてみましょう。 外部ファイル(.js ファイル)とは、JavaScript のプログラムを書き込んだテキストファイルのことで、 HTML からリンクして呼び出します。外部ファイル(.js ファイル)を使うのは以下のような場合です。

  1. 1つのプログラムを複数の HTML ファイルで使い回したい。
  2. プログラムが長文に及ぶため、HTML に書き込みたくない。
  3. HTML のソースに書き込んだプログラムを閲覧者に見られたくない。 (但し知識のある人なら、.js ファイルのあるアドレスから直接ダウンロードできますので、プログラムソースを完全に隠すことは出来ません。)

テキストファイルに JavaScript のプログラムを書き込み、これを拡張子 .js の付いたファイル名で保存します。 書き方は <SCRIPT> タグの本文と全く同じです。<SCRIPT> タグやコメントタグ <!-- 〜 //--> は必要ありません。 (入れてはいけません。)HTML ファイルの方では、 <SCRIPT> タグを使ってこのファイルにリンクします。

<SCRIPT src="program1.js"></SCRIPT>

書き込む位置も通常の <SCRIPT> タグの規則に従います。 複数の .js ファイルを呼び出したい場合は、上記の書き方をファイル名を変えて繰り返します。 また HTML 中にプログラムを直接書いた <SCRIPT> タグと共存させても問題ありません。 <SCRIPT src="...js"> と </SCRIPT>の間には何も入れないで下さい。

.js ファイルの扱いで注意すべきは次の点です。

前ページに戻る 前ページに戻る 次ページに進む
Copyright © 2003 梅ちゃん堂. All Rights Reserved