JavaScriptで履歴を扱う「History」、URLを扱う「Location」などの基本：JavaScript標準ライブラリの使い方超入門（10）（2/4 ページ）

　Locationオブジェクトのhrefプロパティは、ドキュメントのURLを取得するだけでなく、プロパティにURLを代入することで、任意のページに移動することができます。次は、フォームのプッシュボタンに直接、onclick属性を設定し、hrefプロパティのURL情報を設定する例です。ボタンクリックで指定したページへ移動します。

　Locationオブジェクトには、次の2つのメソッドがあります。replace（）メソッドでページを移動した場合は、移動前のページの履歴が残されずに移動が行われます。

URL情報を取得する

hrefプロパティで指定したURLに移動する

　本項の冒頭でお話ししたように、hrefプロパティにURLを設定することで、表示中のページから任意のページへ移動することができます。例として、プルダウンリストの項目を選択すると、指定したページへ移動するプログラムを作成してみることにします。

　プッシュボタンをクリックしたタイミングでイベントリスナーからイベントハンドラーが呼び出され、hrefプロパティにURLがセットされるようにしています。

　（1）では、あらかじめ指定したおいたURLに、プルダウンリストで選択された項目のvalueの値を連結することで各ページへのURLを新たに生成し、これをhrefプロパティに設定しています。

Hint　プルダウンリストのonchange属性でプログラムを起動する

　プルダウンリストのonchange属性を設定することで、項目が選択されたタイミングで関数を呼び出すことができます。HTMLにJavaScriptのコードを埋め込むことになりますが、リストが選択された段階で即座にジャンプさせることができるようになります。

　この場合、次のようにselect要素の開始タグ内でonchange属性を設定します。値に関数名を記述し、引数として自分自身（selectオブジェクト）を「this」を使って渡すようにします。

　一方、関数側ではパラメーターとしてselectオブジェクトを受け取ることで、パラメーターを利用してオブジェクトにアクセスできるようになります。

Tips　履歴を残さないでジャンプする

　hrefプロパティの代わりに、replace（）メソッドを使うと、移動するもとになったページの履歴を残さずにジャンプさせることができます。この場合、ジャンプしたあとでブラウザーの[戻る]ボタンをクリックしても、移動する前のページ（replace（）メソッドが埋め込まれたページ）に戻ることはできません。

　重要な情報を扱うページなど、何らかの理由で履歴を残したくない場合は、replace（）メソッドを使うとよいでしょう。

　以下は、本編で作成したプログラムのhrefプロパティをreplace（）メソッドに書き換える例です。