JavaScriptの基本

基本的な動作方法

  1. 読み込み時に動作

    2. 最も基本的な記述方法で、スクリプトを宣言するタグをHTML中に記述します。<BODY>の中やその前後に置きます。

    <SCRIPT LANGUAGE="JavaScript">
<!--
（ここにスクリプトを記述）
//-->
</SCRIPT>
    例

    ここをクリック

    （新しいページを開きます） 

    <SCRIPT LANGUAGE="JavaScript">
<!--
    alert("ようこそ私のページへ");
//-->
</SCRIPT>
  2. リンクをクリック（直接）

    3. アンカータグにスクリプトを直接記述します。

    <A HREF="JavaScript:（ここにスクリプトを記述）">クリック</A>
    例

    ここをクリック

    		 
    <A HREF="JavaScript:alert('ようこそ私のページへ')">クリック</A>
  3. リンクをクリック（呼出）

    4. リンクからスクリプトを呼び出して動作させます。

    <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>

  4. ボタンをクリック

    5. ボタンからスクリプトを呼び出します。

    <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>

  5. リンク上から呼出

    6. アンカータグ内に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>

タグの記述方法

　１つのHTML内に複数のタグを設置することができます。また、１つのタグの中に複数の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+"のページへ");
}
//-->
</SCRIPT>

　上記の例では、ボタンをクリックするとmessage3が呼び出されます。変数meに「私」という文字列が代入（変数に値を入れること）され、次の行でアラートを表示するときに変数を呼び出して利用しています。ボタンを複数用意して下記のような使い方もできます。

例 

<FORM>
<INPUT TYPE="button" VALUE="クリック" onClick="message('私')">
<INPUT TYPE="button" VALUE="クリック" onClick="message('僕')">
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!--
function message(me) {
	alert("ようこそ"+me+"のページへ");
}
//-->
</SCRIPT>

 

戻る