イヌでもわかるJavaScript講座

【リスト】

<form>
<input type="button" value="戻る" onclick="history.back()">
<input type="button" value="更新" onclick="location.reload()">
<input type="button" value="進む" onclick="history.forward()">
<input type="button" value="トップページへ" onclick="location.href='http://www.red.oit-net.jp/tatsuya/index.htm'">
</form>

【説明】

おや？　いつもの <script>～</script> がない！

はい、なんとボタンの <INPUT>タグに JavaScript を埋め込んだのです！
onclick はタグの属性ではなくて JavaScript です。名前の通り、クリックされたら指定のJavaScript を実行します。
【注意】この onclick は <INPUT>タグ以外にも使えますが NS4 はイベントが発生しないタグには使えません。

履歴を移動させるオブジェクトは history か location を使います。
履歴移動はいろいろ方法があります。今回はこれでいきます。

更新　・・・・・・　location.reload()
戻る　・・・・・・　history.back()
進む　・・・・・・　history.forward()
トップページ　・・　location.href="トップページのURL"

location.href は、セットされたアドレス（ＵＲＬ）へ移動します。

おや？　サンプルの location.href のＵＲＬは、ダブルクォーテーション（ " ) じゃなくて、シングルクォーテーション（ ' ）で囲ってるよ！？

はい、一応それぞれ意味はあるのですが、どっちを使ってもよいのです。ただ、私がダブルクォーテーション派なんです。 (^^;
今回は onclick が先にダブルクォーテーションを使っちゃったので、仕方なくシングルクォーテーションを使ったのです。
括弧は開く閉じる ' ( ' と ' ) ' があるので a = (( b + c ) * ( d + e )) といった書き方をしても、どの括弧と括弧が対応しているかわかります。しかし開く閉じるが同じ記号であれば人間でもわからなくなるでしょう。シングルとダブルを使ったのでブラウザが開く閉じるを判断してくれたわけです。
ちなみに、location.href= "http://www.red.oit-net.jp/tatsuya/index.htm' なんて、ダブル、シングルを混ぜるのはダメです。(^^;

ページ移動で戻るべき履歴がない、進むべき履歴がない場合は無視されます。

ページ移動の別の方法として history.go() があります。
history.go() は、パラメータに数値をセットします。数値は履歴の相対番号です。
簡単に説明すると、
history.go(0) は、location.reload() と同じことです。
history.go(1) は、history.forward() と同じことです。
history.go(-1) は、history.back() と同じことです。

余談ですが、こんなことをすると・・・
<script language="JavaScript"></script>
だいたい予想はつきますよね。上からホームページを表示していって、location.reload() があるものだから更新してしまいます。更新しっぱなしですネ。(^^;

ボタンじゃなくて画像を使いたい場合は、
<img src="back.gif" onclick="history.back()">
でもＯＫですが、NS4 では使えないため、
<a href="javascript:history.back()">
<img src="back.gif" border="0">
</a>
が正解です。この辺は Step.36 を参照してくださいませ。

【リファレンス】

● location オブジェクト

現在のURLを保持しています。セットすることも可能です。
「」

【プロパティ】

hash
「」
現在のURLのハッシュ(#)以降の文字列を保持しています。ハッシュが無ければヌルストリング。このプロパティにセットすることも可能。

host
「」
現在のURLの「ホスト名：ポート番号(location.hostname:location.port)」の文字列を保持しています。どちらもなければヌルストリング。このプロパティにセットすることも可能。

hostname
「」
現在のURLのホスト名を保持しています。ホスト名が無ければヌルストリング。このプロパティにセットすることも可能。

href
「」
現在のURLを保持しています。 location のデフォルトプロパティ。このプロパティにセットすることも可能。

pathname
「」
現在のURLのファイルパス名を保持しています。このプロパティにセットすることも可能。

port
「」
現在のURLのポート番号を保持しています。ポート番号の指定が無ければヌルストリング。このプロパティにセットすることも可能。

protocol
「」
現在のURLのプロトコルのコロン（：）までの文字列を保持しています。このプロパティにセットすることも可能。

search
「」
現在のURLのクエスチョンマーク（？）以降の問い合わせ文字列を保持しています。このプロパティにセットすることも可能。