ボタン型リンク

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

戻る

実例

例文

<input type="button" value="トップへ" onClick="document.location='index.html';">

解説

onClickはマウスイベントで、ボタンをクリックすると呼び出され、その中身を実行します。
document.location はブラウザで表示するページを指し示しています。 それを「index.html」に変更しなさいというJavaScriptの命令文になっています。

応用１

イベント処理を行う場合、直接的に命令を書くよりも、ユーザー関数を呼び出して処理する方が良いでしょう。
下記では、ボタンを押すと、functionで定義されたユーザー関数linkが呼び出されます。
このように命令の実行文を分けてしまえば、１つの<SCRIPT>タグ内に複数のユーザー関数をまとめて、メンテナンスを効率良く行うことができます。また、１つの命令文を複数の場所から呼び出したり、複雑な処理も記述しやすくなります。

<form><input type="button" value="トップへ" onClick="link()"></form> 

<script type="text/javascript">
function link() {
	document.location = "index.html";
}
</script>

応用２

メールアドレスを隠しておいて、リンクをクリックすると正しくメールソフトを起動して、メールを送らせるためのリンクを作ってみましょう。 　「user@dammy.com」などとメールアドレスをそのまま表記すると、スパムメールのためにメールアドレスが収集される恐れがあります。それを回避するため、スクリプトでメールアドレスを作ってしまおうというものです。

<form><input type="button" value="メール" onClick="sendmail()"></form> 

<script type="text/javascript">
function sendmail() {
	var acount = "user"; 
	//アカウント
	var domain = "dammy.com";
	//ドメイン
	document.location = "mailto:" + acount + "@" + domain; //メールアドレス生成
}
</script>

通常のリンクで良い場合は、ボタン部分（<FORM>～</FORM>）を「<a href="javascript:sendmail()">メール</a>」とします。
さらなる応用例はこちらをどうぞ。→http://www.guardian.ne.jp/program.html

戻る