フォームに表示

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

基本的な文字列の呼び出し方法

実例

例文

<input type="text" name="textbox" id="textbox" size="30">
<a href="index.html" onMouseOver="msg1()">トップへ</a>／<a href="index.html" onMouseOver="msg2()">サンプルインデックスへ</a>

<script type="text/javascript">
function msg1() {
	document.getElementById("textbox").value = "JavaScriptのトップページへ";
}

function msg2() {
	document.getElementById("textbox").value = "サンプルのインデックスへ";
}
</script>

解説

リンクの部分にマウスを持っていくと、フレームの文字枠にに文字列を表示します。
アンカーの中の onMouseOver で、ユーザー関数msgを呼び出しています。

リンクをいくつか用意するときはファンクションの名称を変えなくてはいけません。
呼び出しに必要なファンクションが異なりますので、function msg() { ... } の部分を必要数コピーして、msg の部分を変更し、対応するアンカーも変更しましょう。

（注）ファンクションの呼び出し関数名（ユーザー関数）には他の関数名と同じものは使えません。うまく動かないときにはユーザー関数名を変更してみると直ることがあります。

ユーザー関数をまとめる

実例

トップへ／インデックスへ

例文

<input type="text" name="textbox2" id="textbox2" size="30">
<a href="index.html" onMouseOver="msg(1)">トップへ</a>／<a href="index.html" onMouseOver="msg(2)">サンプルインデックスへ</a>

<script type="text/javascript">
function msg(num) { //*1
	if (num == 1) { //*2
		document.getElementById("textbox2").value = "JavaScriptのトップページへ"; //*3
	}
	if (num ==2) {
		document.getElementById("textbox2").value = "サンプルのインデックスへ";
	}
}
</script>

解説

前スクリプトの function を１つにまとめました。
msg() が msg(num) となっています。更に onMouseOver の中でファンクションを呼び出すときに msg(1)、msg(2) というように数字を引き継ぐようになっています。

流れはこうです。
マウスを「トップへ」の上に置くと、 onMouseOver="msg(1)" によって、ファンクション msg(num) が呼び出されます。
このとき num に 1 が引き継がれ（代入され）ます。（*1）
ファンクション msg(num) の中で if文を使って num に入った数字によって動作を振り分けています。
if (num == 1) は num が 1 と等しい場合、{} 内を実行しなさいという命令です。（*2）
これにより文字列を呼び出す（*3）ことができるのです。

このように配列関数を私用することで処理を簡便化することができます。
さてこのままではマウスをアンカーから外しても文字列が消えませんので、次はその方法を解説します。

文字列を消す方法と配列の利用

実例

トップへ／インデックスへ

例文

<input type="text" name="textbox3" id="textbox3" size="30">
<a href="index.html" onMouseOver="msg(1)" onMouseOut="msg(0)">トップへ</a>／<a href="index.html" onMouseOver="msg(2)" onMouseOut="msg(0)">サンプルインデックスへ</a>

<script type="text/javascript">
function msg(num) { //*1
	document.getElementById("textbox3").value = ""; //*2
	if (num==1) document.getElementById("textbox3").value = "JavaScriptのトップページへ"; //*3
	if (num==2) document.getElementById("textbox3").value = "サンプルのインデックスへ"; //*4
}
</script>

解説

文字の消去に必要な部分は onMouseOut とファンクション内の document...= ""; の部分です。
更にif文をコンパクトに表記しました。これは１つの行にまとめる場合には {} を外してこのように記述することができます。

「トップへ」にマウスを載せると「１」を、「インデックスへ」にマウスを載せると「２」を、マウスを外すと「０」をファンクションに送ります。
受け取ったファンクション msg(num) は変数「num」に受け取った数字を入れます。（*1）
次に、空白（正確には何もないという情報、ヌルストリング）をフォームに入れます。（*2）
num = 1（*3）または num = 2（*4）のときにはそれぞれの文章が表示されます。
num = 0 の時は（*2）を前もって実行しているので、その後のif文が実行されないため文字列が消えるようになります。

対応するリンクを増やしたいときは SCRIPTタグ内のif文の行を増やしていくだけで出来ます。

これを応用するとグラフィックを切り換えるスクリプトを作成できます。「グラフィックを切り換える」をご覧ください。

応用

メッセージを事前に変数に入れて置く方法でも同じ処理ができます。

<script type="text/javascript">
mt = new Array();
                                      
mt[0] = ""; //*1
mt[1] = "JavaScriptのトップページへ"; //*2
mt[2] = "サンプルのインデックスへ";
                                        
function msg(num) {
	document.getElementById("textbox3").value = mt[num]; //*3
}
</script>

空白（メッセージの消去）も配列で用意しておきます。（*1）
メッセージを順に呼び出す番号に対応して用意します。（*2）
後は、function の中でメッセージの番号を呼び出して表示するだけです。（*3）

戻る