ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）
１２／０１日発行 ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.21★
| 履歴を使ったプログラム |
今回は特にプログラムという要素ではなく、覚えれば簡単に使えるんだ。
今回はダイジェストのような形で、さっと説明していくね。
| ★ ページの移動 ★ |
ブラウザの上には、BACKボタンやNEXTボタンなどがあるね。
同じような動作を画面上で使うための命令をやってみよう。
一つ前のページに戻る |
history.back() |
一つ先のページに進む |
history.forward() |
数字の分だけページを移動する |
history.go(数字) |
ホームに戻る |
home() |
これでページの移動をできるんだ。
（※基本的にブラウザの上にあるボタンと同じ。つまり、ブラウザを開いた時に表れるページの場合、とうぜん、後ろのページに戻ることはできない。）
また、ホームというのはブラウザを起動させたときに、一番はじめに表示されるページのことだよ。
（※ちなみに、はじめに表示するページ(ホーム)を変更するには、ＩＥの場合、上から[ツール]→[インターネットオプション]で変更できます。）
じゃあ、これらを使ったプログラムを見てみよう。
<HTML>
<HEAD>
<TITLE>ページの移動</TITLE>
</HEAD>
<BODY>
<INPUT TYPE="button" VALUE="ひとつ戻る" onClick="history.back()">
<P>
<INPUT TYPE="button" VALUE="ひとつ進む" onClick="history.forward()">
<P>
<INPUT TYPE="button" VALUE="ふたつ戻る" onClick="history.go(-2)">
<P>
<INPUT TYPE="button" VALUE="ふたつ進む" onClick="history.go(2)">
<P>
<INPUT TYPE="button" VALUE="ホームに戻る" onClick="home()">
</BODY>≪結果≫
--解説--
これは大体わかるよね。
複数ページ移動する場合、
ページを進むときはhistory.go(数字)の数字はそのまま書けばいいね。
ページを戻るときはhistory.go(数字)の数字の部分がマイナス(－)になるんだ。
それだけを覚えておこう。
| ★ 関連命令 ★ |
じゃあ、履歴に関する命令をもう１つやっておこう。
移動後もとのページの戻れなくする |
location.replace(移動先のURL) |
これをつかうと、この命令で移動したURLから、移動元のページへ戻れないんだ。
実際には、リンク元が履歴に残らないので、
戻るボタンを押してもそのページには戻れなくなっているんだよ。
<HTML>
<HEAD>
<TITLE>ページの移動</TITLE>
<SCRIPT language="JavaScript">
<!--
function go_page(){
location.replace("http://village.infoweb.ne.jp/~fwig2642/yoshi/make_HP/main.htm");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="button" VALUE="先へ進む" onClick="go_page()">
</BODY>≪結果≫
| ★ リンクを使ったJavaScript ★ |
いままでは、JavaScriptはボタンを使ってやっていたね。
同じようにして、リンクや普通の文字でもJavaScriptは使えるんだ。
例）
ボタン：<INPUT TYPE="button" VALUE="押してね" onClick="命令">
文字：<DIV onClick="命令">押してね</DIV>
リンク：<A HREF="URL" onClick="命令">押してね</A>
このように、リンクボタンや普通の文字のときも同じようにできるんだ。
けれど、リンクボタンにはもうひとつの方法があって、
<A HREF="JavaScript:命令">押してね</A>
という形でJavaScriptを実行することもできるんだよ。
じゃあ、最後に今回やった命令をこの方法を使ってやってみよう。
<HTML>
<HEAD>
<TITLE>ページの移動</TITLE>
</HEAD>
<BODY>
<A HREF="JavaScript:history.back()">ひとつ戻る</A>
<P>
<A HREF="JavaScript:history.forward()">ひとつ進む</A>
<P>
<A HREF="JavaScript:history.go(-2)">ふたつ戻る</A>
<P>
<A HREF="JavaScript:history.go(2)">ふたつ進む</A>
<P>
<A HREF="JavaScript:home()">ふたつ進む</A>
</BODY>≪結果≫