Step.7 - 移動ボタンをつけよう

どんどん奥へ進んでいくホームページや行ったり来たりするつくりのホームページは移動ボタンをつけてあげましょう。ブラウザの「進む」、「戻る」、「更新」、そして「トップページ」のボタンを JavaScript で作ってみます。

Step テーマ
● onclick イベント (ボタン処理)
● history オブジェクト (ページの移動)
● location オブジェクト (ページの移動)

実行例

サンプルだけの HTMLはこちらへ

説明

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

はい、なんとボタンの <INPUT>タグに JavaScript を埋め込んだのです！
onclick はタグの属性ではなくて JavaScript です。名前の通り、クリックされたら指定の JavaScript を実行します。

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

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

location.href は、セットされたアドレス（ＵＲＬ）へ移動します。
※ 別ウィンドウを開いてリンクしたい場合は、window.open() を使います。 Step.13 参照
※ reload のパラメータの trueはサーバーから更新、false はキャッシュから更新、省略時は false。

● 文字列の中にクォーテーション文字を使う場合

おや？　サンプルの location.href の URL は、ダブルクォーテーション（ " ) じゃなくて、シングルクォーテーション（ ' ）で囲ってるよ！？
location.href='http://www.red.oit-net.jp/tatsuya/index.htm'

はい、どっちを使ってもよいのです。ただ、私がダブルクォーテーション派なんです。 (^^;
今回は onclick が先にダブルクォーテーションを使っちゃったので、仕方なくシングルクォーテーションを使ったのです。
onclick="location.href='http://www.red.oit-net.jp/tatsuya/index.htm'"

たとえば、括弧は開く閉じる ' ( ' と ' ) ' があるので、 a = (( b + c ) * ( d + e )) といった書き方をしてもどの括弧と括弧が対応しているかわかります。しかし開く閉じるが同じ記号であれば人間でもわからなくなるでしょう。シングルとダブルを使ったのでブラウザが開く閉じるを判断できるわけです。

ちなみに、 onclick="location.href=¥"http://www.red.oit-net.jp/tatsuya/index.htm¥""
と、¥" と記述することで、ダブルクォーテーションで囲った文字列の中にダブルクォーテーション文字を入れることもできます。
文字列内の ¥ は特殊な文字(エスケープ文字といいます)で、¥" と記述すると " は、囲み記号ではなく、ただの文字にしてくれます。

今後、ダブルクォーテーションとシングルクォーテーションを使った文字列をダブルクォーテーションで囲みたくなるケースが出てきますので覚えておきましょう^^
例) 次のタグコードを文字列にセットしたい。

str = "<A href=¥"javascript:func( 'id' )¥">";

● history.go()

ページ移動の別の方法として history.go() があります。

history.go() は、パラメータに数値をセットします。数値は履歴の相対番号です。
簡単に説明すると、
history.go(0) は、location.reload(true) と同じことです。
history.go(1) は、history.forward() と同じことです。
history.go(-1) は、history.back() と同じことです。

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

ボタンじゃなくて画像を使いたい場合は、

もしくは、

とします。この辺は Step.36 を参照してくださいませ。

▲TOP

リファレンス

● location オブジェクト

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

● プロパティ

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

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

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

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

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

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

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

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

● あなたのブラウザで使える location プロパティ/メソッド一覧

● あなたのブラウザで使える history プロパティ/メソッド一覧 ※ Firefox は表示してくれません。

▲TOP

実行例

リスト

説明

リファレンス