最も基本的な記述方法で、スクリプトを宣言するタグをHTML中に記述します。<BODY>の中やその前後に置きます。
<SCRIPT LANGUAGE="JavaScript"> <!-- (ここにスクリプトを記述) //--> </SCRIPT>
例 (新しいページを開きます)
<SCRIPT LANGUAGE="JavaScript"> <!--
alert("ようこそ私のページへ"); //--> </SCRIPT>
アンカータグにスクリプトを直接記述します。
<A HREF="JavaScript:(ここにスクリプトを記述)">クリック</A>
例 <A HREF="JavaScript:alert('ようこそ私のページへ')">クリック</A>
リンクからスクリプトを呼び出して動作させます。
<A HREF="JavaScript:(呼出名)">クリック</A> <SCRIPT LANGUAGE="JavaScript"> <!-- function (呼出名){ (ここにスクリプトを記述) } //--> </SCRIPT>呼出名には、値を送り出すために()書きが必要で、「yobi()」(値なし)、「yobi(0)」(値=0)、「yobi("abc")」(値=abc)などと記述します。function では、それら値を受け取る関数を「yobi(uketori)」などとして指定し、スクリプト内で「uketori」から値を取り出します。
例 <A HREF="JavaScript:message('私')">クリック</A> <A HREF="JavaScript:message('僕')">クリック</A> <SCRIPT LANGUAGE="JavaScript"> <!-- function message(me) { alert("ようこそ"+me+"のページへ"); } //--> </SCRIPT>
ボタンからスクリプトを呼び出します。
<FORM><INPUT TYPE="button" VALUE="クリック" onClick="(呼出名)"></FORM> <SCRIPT LANGUAGE="JavaScript"> <!-- function (呼出名){ (ここにスクリプトを記述) } //--> </SCRIPT>
例 <FORM><INPUT TYPE="button" VALUE="クリック" onClick="message2()"></FORM> <SCRIPT LANGUAGE="JavaScript"> <!-- function message2() { alert("ようこそ私のページへ"); } //--> </SCRIPT>
アンカータグ内にonMouseOver(マウスを上に載せた時)やonMouseOut(マウスを上から外した時)を使って、指定したユーザーの動作によってスクリプトを呼び出します。(イベント処理)
<A HREF="(リンク)" onMouseOver="(呼出名)">クリック</A> <SCRIPT LANGUAGE="JavaScript"> <!-- function (呼出名){ (ここにスクリプトを記述) } //--> </SCRIPT>
例 <A HREF="kihon1.html" onMouseOver="message2()">クリック</A> <SCRIPT LANGUAGE="JavaScript"> <!-- function message2() { alert("ようこそ私のページへ"); } //--> </SCRIPT>
1つのHTML内に複数のタグを設置することができます。また、1つのタグの中に複数のfunctionを設置することも可能です。
下記例では、どちらも同じですので、動作する近くに記述したい場合と、ページ内にまとめて記述したい場合とで使い分けると良いでしょう。
| タグを分割 | タグを統合 | |
|---|---|---|
| 例 | <SCRIPT LANGUAGE="JavaScript">
<!--
function message(me) {
alert("ようこそ"+me+"のページへ");
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function message2() {
alert("ようこそ私のページへ");
}
//-->
</SCRIPT> |
<SCRIPT LANGUAGE="JavaScript">
<!--
function message(me) {
alert("ようこそ"+me+"のページへ");
}
function message2() {
alert("ようこそ私のページへ");
}
//-->
</SCRIPT> |
functionを複数使う場合は、それぞれの呼出名が同じにならないように注意してください。同じだとどちらを呼び出して良いか判りません。また、タグを複数に分割していても同様で、HTML内で重複しない名前を使いましょう。変数についても同様です。
スクリプトのタグ内にある「<!--」と「//-->」はいったいなでしょうか?
これは、スクリプトが実行できない環境において、スクリプトが表示されないようにするためにあります。
例えば、携帯電話のようなJavaScriptに対応しない機器でアクセスをすると、タグ内のスクリプトがそのまま画面に表示されてしまいます。
そこで、ブラウザ標準のコメントアウト機能である「<!-- -->」を前後に設置しておきます。
また「//」はJavaScript用のコメントアウトで、今度はJavaScriptを実行するときに「<!-- -->」の中がコメントアウトされないように、「-->」を使えなくしているのです。
変数はユーザーが必要に応じて作ることができる入れ物です。計算結果の数値や文字列を入れておき、後で使うために残しておくことができます。変数を使えば、同じ値を何度も繰り返し使うのも楽ですし、計算を何度もさせる必要がありません。また、ユーザーからの指示を受け止め、条件判断を行うのにも必須です。
変数には、適当な任意の英文字と数字が使えますが、数字を先頭に置くことはできません。記号では「_」が使えます。注意して欲しいのは英文字の大文字と小文字を判別することです。「Abc」という変数と「aBc」という変数は同じものではありません。
| 例 | <SCRIPT LANGUAGE="JavaScript">
<!--
function message3() {
me = "わたし";
alert("ようこそ"+me+"のページへ");
} |
上記の例では、ボタンをクリックするとmessage3が呼び出されます。変数meに「私」という文字列が代入(変数に値を入れること)され、次の行でアラートを表示するときに変数を呼び出して利用しています。ボタンを複数用意して下記のような使い方もできます。
| 例 | <FORM>
<INPUT TYPE="button" VALUE="クリック" onClick="message('私')">
<INPUT TYPE="button" VALUE="クリック" onClick="message('僕')">
</FORM>
<SCRIPT LANGUAGE="JavaScript"> |