Home | 第92号 | 第93号 | 第94号 | 目次

初心者のためのホームページ作り　第93号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。

なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方まで メールにてご質問ください。

＜第93号＞ 今週のおさらい
　　　　　　　　　　　　　毎週金曜日配信　What's New 2004年5月14日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　  ■ JavaScript講座  第17回 --- location、historyオブジェクト
◆ JavaScript講座 --- locationオブジェクトと historyオブジェクト
windowオブジェクトの下位階層に位置する locationオブジェクトと、historyオブジェクトについて解説します。
■ locationオブジェクト
locationオブジェクトは、現在表示中のドキュメントに関する情報を扱います。
locationオブジェクトであらかじめ定義されているプロパティとメソッド、及びその機能は以下のとおりです。
■ hashプロパティ
<a name="……"> 〜 </a> という形式で示されるアンカーを扱います。 hashプロパティでは、埋め込まれたアンカーを参照したり設定することができます。
以下は、hashプロパティを使った簡単な例文です。このページの埋め込みアンカーを探して表示します。 
function linkCheck() {
  for(i = 0; i < document.links.length; i++) {
  if(document.links[i].hash == "") {
  dummy = i;
    } else {
     alert(document.links[i].hash);
　　}
　}
}
　　← クリックすると実行します。
■ hostプロパティ
現在訪問中のホスト (ドメイン名、あるいは IPアドレスなど) 情報を参照します。
以下は、ホストを参照するための具体的な例文です。
document.write("現在のホストは", location.host);
実行結果
■ hostnameプロパティ
hostnameプロパティは、現在本門柱のホスト名を参照します。その参照結果は hostプロパティと同様、ドメイン名を返します。
以下はその具体的な例文です。
document.write("現在のホスト名は", location.hostname);
実行結果
■ hrefプロパティ
hrefプロパティは、<a href="……"> 〜 </a> で指定されているリンク先 (URI) を参照、あるいは設定することができます。
以下は、ボタンにリンク先を指定した例文とその結果です。
<input type="button" value="Yahoo!" 
  onclick="location.href='http://www.yahoo.co.jp/'">
　　← クリックすると Yahoo Japan! に移動します。
■ portプロパティ
現在表示しているときの、ポート番号を参照します。ただし、ポート番号が選択されていない場合には何も表示しません。
以下は、具体的な例文です。
document.write("ポート番号は",location.port);
■ protocolプロパティ
protocol (プロトコル) とは、通信手順をあらわす仕様を示します。このプロパティでは現在訪問中のプロトコルを参照します。
document.write("現在のプロトコルは", location.protocol, "です");
■ searchプロパティ
<a href="……"> 〜 </a> で設定されたリンク先、または現在のページの CGIなどに渡されるサーチ部分 (?以降の文字列) を参照、または設定します。
以下は、参照先を指定する具体的な例文です。
location.search = '?sendmail.cgi'
■ reloadメソッド
reloadメソッドは、現在のページを「再読み込み」させるために用います。テキストや画像などを利用して「ライブ中継」するとき、ある一定時間ごとに再読み込みして利用されます。
location.reload();
■ replaceメソッド
移動先を指定します。ただしその場合、リンク後の履歴を残しません。ブラウザの戻るボタンをクリックしても、元のページに戻れません。
<input type="button" value="Home" 
  onclick="location.replace('http://www.scollabo.com/banban/')">
　← クリックするとトップページに移動します。
■ historyオブジェクト
Webブラウザの履歴をオブジェクトとして扱います。このメソッドを利用する場合、ブラウザに履歴があることが前提となります。履歴がない場合、動作は無視します。
以下は、historyオブジェクトのプロパティとメソッドです。
■ lengthプロパティ
現在のブラウザが持っているページ参照の履歴の数を参照します。履歴がなければ何も表示しません。
なおこのプロパティはリンク先を参照するものではありません。以下は具体的な例文と実行結果です。
document.write("現在の履歴数は", history.length);
■ backメソッド
現在のブラウザが持つ履歴を、指定した数の分だけ戻って表示します。履歴がなければ何もしません。引数が何も指定されていない場合は、現在のページの直前の履歴を参照します。
<a href="javascript:history.back()">１つ前に戻る</a>
">１つ前に戻る
■ fowardメソッド
履歴が持つ１つ前のページに移動します。履歴がなければ何もしません。引数が何も指定されていない場合は、現在のページの直後の履歴を参照します。
<a href="javascript:history.foward()">１つ進む</a>
">１つ進む
■ goメソッド
引数に指定した数の履歴に移動します。引数に負数が指定されれば、back()メソッドと同じ働きをします。なお、履歴がなければ何もしません。
<a href="javascript:history.go(-2)">２つ前に戻る</a>
">２つ前に戻る
■ まとめ
locationオブジェクトは埋め込まれているリンクの参照や設定、あるいは通信環境などを参照します。また historyオブジェクトはブラウザの履歴を参照します。
どちらもシーンに応じて便利に使えますが、JavaScriptに対応していない環境も考えて、多用するのは考え物です。
特に historyオブジェクトでは、閲覧者が何らかの検索エンジンを使って訪問したとき、このメソッドを使ってリンクさせるのは賢いやり方ではありません。その点を踏まえて設計に十分配慮してください。
This page is Valid HTML 4.01! 初版公開日 2004年5月22日
Copyright（C） 2002-2004 banban@scollabo.com