基本的な動作方法

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

前のページ

読み込み時に動作

<script>タグ内にJavaScriptの命令を書き込むことで、ページの読み込みと同時に実行されます。

<script type="text/javascript">
<!--
（ここにスクリプトを記述）
//-->
</script>

使用例

<script type="text/javascript">
<!--
document.getElementById("text").innerHTML = "ようこそ私のページへ";
//-->
</script>

リンクをクリック（直接記述）

<a>タグ内にスクリプトを直接記述します。
hrefには通常URLを記述しますが、「javascript:」から記述を始めることでJavaScriptとして処理を行います。

<a href="javascript:（ここにスクリプトを記述）">クリック</a>

使用例

ここをクリック

<a href="javascript:alert('ようこそ私のページへ')">クリック</a>

リンクをクリック（呼出）

<a>タグからユーザー関数を呼び出して動作させます。
リンク内に直接命令を書き込むのではなく、命令をまとめたユーザー関数を呼び出すことで、複雑な処理を実行させることができます。

<a href="javascript:（ユーザー関数）">クリック</a>

<script type="text/javascript">
<!--
function（ユーザー関数）{
	（ここにスクリプトを記述）
}
//-->
</script>

ユーザー関数には、値を受け渡す機能があるため、値の有無にかかわらず名前の後ろに()を付けます。ユーザー関数へ引き渡す値は、()の中に「,」で区切って入力します。受信する側では、関数を使って受け取ります。
<script>タグ内では、「function」で始まる部分がユーザー関数になっています。

使用例

私のクリック / 僕のクリック

<a href="JavaScript:message('私')">私のクリック</a> / <a href="JavaScript:message('僕')">僕のクリック</a>

<script type="text/javascript">
<!--
function message(me) {
 alert("ようこそ" + me + "のページへ");
}
//-->
</script>

ボタンをクリック

ボタンからスクリプトを呼び出します。
ボタンからユーザー関数を呼び出しています。直接スクリプトを記述することも可能です。

<form><input type="button" value="クリック" onClick="（ユーザー関数）"></form>

<script type="text/javascript">
<!--
function（ユーザー関数）{
	（ここにスクリプトを記述）
}
//-->
</script>

ボタンの場合、ボタンを押すという動作（イベント）を切っ掛けにスクリプトを呼び出すため、「onClick」というイベント処理を利用しています。これにより、ボタンを押したら実行という、ユーザーの動きに合わせた処理が可能になります。

使用例

<form><input type="button" value="クリック" onClick="message2()"></form>

<script type="text/javascript">
<!--
function message2() {
	alert("ようこそ私のページへ");
}
//-->
</script>

イベントによる呼出

<a>タグ内でイベント処理からスクリプトを呼び出します。
ユーザーのクリックに対応する場合は、href内にスクリプトの記述を行いましたが、それ以外のイベントにも対応させることができます。

<a href="（リンク）" onMouseOver="（ユーザー関数）">クリック</a>

<script type="text/javascript">
<!--
function （ユーザー関数）{
	（ここにスクリプトを記述）
}
//-->
</script>

ユーザーのマウスの動きに連動するイベントには、onMouseOver（マウスを上に載せた時）、onMouseOut（マウスを上から外した時）、onMouseMove（マウスが動いている間）などがあります。

今回は<a>タグを使っていますが、<img>タグ内でも使えます。マウスを画像に重ねたとき、画像が入れ替わる仕組みもこれを利用しています。
このようなイベント処理はウィンドウやドキュメントなどあらゆるところで利用することができます。

使用例1

ここにマウスを載せます

<a href="javascript:void(0)" onMouseOver="message2()">ここにマウスを載せます</a>

<script type="text/javascript">
<!--
function message2() {
	alert("ようこそ私のページへ");
}
//-->
</script>

使用例2

ここにマウスを載せます

<a href="javascript:void(0)" onMouseOver="message3(0)" onMouseOut="message3(1)"><span id="mouse">ここにマウスを載せます</span></a>

<script type="text/javascript">
<!--
function message3(num) {
 if (num == 0) {
  document.getElementById("mouse").innerHTML = "マウスが上に載ってます";
 } else {
  document.getElementById("mouse").innerHTML = "マウスが上から外されました";
 }
}
//-->
</script>

画像が入れ替わるサンプルはこちらにあります。

次のページ

戻る