今週のおさらい/第36号/初心者のためのホームページ作り

今回は、今までの復習をかねて、Dateオブジェクト、windowオブジェクト、navigatorオブジェクトなどを盛り込んで解説します。

◆ Dateオブジェクト

Dateオブジェクトに関しては、第30号でも取り上げました。ここでは、オブジェクトが持っているメソッドを利用したサンプルを提示します。

Dateオブジェクトの持つメソッドの一部

メソッド	内容
getFullYear()	４桁の西暦年を取り込む
getMonth()	今日の月数を取り込む
getDate()	今日の日付を取り込む

<script type="text/javascript">
<!--
weeks=new Array("日","月","火","水","木","金","土");
today=new Date();
y=today.getFullYear();
m=today.getMonth()+1;
d=today.getDate();
w=weeks[today.getDay()];
document.write("今日は、<span>",y,"<\/span>年");
document.write("<span>",m,"<\/span>月");
document.write("<span>",d,"<\/span>日");
document.write("<span>",w,"<\/span>曜日です。");
//-->
</script>

実行結果

ここでは本日の日付と曜日を取得するスクリプトを実行しています。残念ながらあなたのブラウザは、このスクリプトには対応しておりません。あしからず。

◆ if構文と関数

関数の中で if構文を用いることが多々あります。if構文は、第30号で説明した通り、条件式によって繰り返しを行います。

以下のスクリプトでは、effect関数の中で 0～16までの数値を取得する if構文を設定し、その数値によってページ訪問時の背景色を 0.05秒毎に変化させフェード・インています。

<script type="text/javascript">
<!--
function effect {
  if ( idx < 17) {
     setTimeout('effect(), 50)
     document.bgColor 
        = (((((idx*16+idx)*16+idx)*16+idx)*16+idx)*16+idx)
     idx ++
     }
   }
  var idx = 0;
  effect()
//-->
</script>

フェード・インするページ 上記スクリプトの表示結果

◆ for構文と関数

for構文も if構文同様繰り返しを行いますが、条件はありません。単純に指定された回数を繰り返します。以下のスクリプトは、関数に for構文を利用して、ページのロード時に背景色を変化させています。

<script type="text/javascript">
<!--
function effect() {
  r_col = "00123456789abcde"
  g_col = "0123456789abcdef"
  b_col = "000123456789abcd"
  for ( n = 0; n < 16; n++ ) {
    r = r_col.charAt(n);
    g = g_col.charAt(n);
    b = b_col.charAt(n);
    document.bgColor="#" + r +r + g + g + b + b;
    }
  }
//-->
</script>

フェード・インするページその２ 上記スクリプトの表示結果

◆ Windowオブジェクト

windowオブジェクトには、以下の下位オブジェクトを持っています。

オブジェクト	機能
location	表示中のドキュメントに関する情報を取得
history	ブラウザが持つ履歴のプロパティを取得
document	表示中のドキュメントの背景色、形式などのプロパティを取得
Frame	フレームに含まれるウィンドウの情報を取得

■ windowオブジェクト

windowオブジェクトには、上記で示した通り、たくさんの下位オブジェクトを持っていますが、自らもメソッドを持ち、ステータスバーやツールバー、サブウィンドウなどをコントロールしたりします。

サブウィンドウを表示するスクリプト

<form name="sample">
<div>
<input type="button" value="Click!" 
onclick="window.open('sample.html', 'detailWindow', 
'resizable=yes,scrollbars=yes,toolbar=no,
width=400,height=250')">　←クリックしてください。
</div>
</form>

ステータスバーなどにメッセージを流すスクリプトを時折見かけますが、ページの情報が得られなくなったり、ブラウザによってはかなり重くなったりする場合がありますので、なるべく使わないようにしましょう。人によっては、うざったく思われてしまいます。

また、自動的にポップアップ・ウィンドウを開くものもありますが、これも迷惑に思われてしまいます。特にCGIなどでバナー広告をサブウィンドウで表示するものを多く見かけますが、非常にイライラします。

■ locationオブジェクト

locationオブジェクトには、下記のプロパティが用意されています。

プロパティ	機能
hash	現在のアンカーを参照、または指定したアンカーへ移動する
host	表示中のページのホスト情報を取得する
hostname	表示中のページのホスト名を取得する
href	表示中のページのパス名を参照、または指定した URIへ移動する
port	表示中のページのポート番号を参照、または設定する
protocol	表示中のページのプロトコル（通信手順）を取得する
search	CGIなどに渡されるサーチ部分を参照、または設定する

以下のスクリプトは、locationオブジェクトが持つプロパティを表示します。

<script type="text/javascript">
<!--
  document.writeln("host : " + location.host + "<br>");
  document.writeln("hostname : " + location.hostname + "<br>");
  document.writeln("href : " + location.href + "<br>");
  document.writeln("pathname : " + location.pathname + "<br>");
  document.writeln("port : " + location.port + "<br>");
  document.writeln("protocolt : " + location.protocol );
//-->
</script>

実行結果

■ historyオブジェクト

historyオブジェクトは、ブラウザが持っている履歴を操作したり、画面上に表示しているページを移動したりする操作に利用します。

historyオブジェクトのプロパティ

プロパティ	機能
length	ブラウザが持つ履歴の数を取得する

historyオブジェクトのメソッド

メソッド名	機能
back	履歴の前のページに移動する
forward	履歴の先のページに移動する
go	指定した数だけ前後の履歴のページに移動する

historyオブジェクトの使い方を記述するHTML

  <a href="javascript:history.back(1)">１つ前に戻る</a>
  <a href="javascript:history.forward(2)">２つ先に進む</a>
  <a href="javascript:history.go(-2)">２つ前に戻る</a>

■ Frameオブジェクト

Frameオブジェクトは、HTMLの frameset要素で作られるウィンドウを分割するフレーム内のウィンドウとも言えるオブジェクトです。

Frameオブジェクトのプロパティ

プロパティ	機能
length	現在のフレーム数を取得する
location	フレームの URIの設定、または参照する
name	現在のフレーム名を取得する
parent	現在のウィンドウから見た親フレーム名を参照する
self	現在のウィンドウ自身を参照する
top	トップフレームを参照する

Frameオブジェクトのメソッド

メソッド名	機能
aleat	アラートダイヤログを表示する
blur	フレームからフォーカスを外す
clearInterval	指定したタイマーを解除する
clearTimeout	指定したタイマーを解除する
confirm	確認ダイヤログの入力により真偽を取得する
focus	フレームにフォーカスを設定する
prompt	文字入力のダイヤログを表示し、入力された文字列を取得する
setInterval	一定時間ごとに命令を実行するタイマーの設定
setTimeout	一定時間ごとに命令を呼び出すタイマーの設定

Frameオブジェクトで、特にタイマーを扱うものがポピュラーで人気があります。以下は、タイマーと aleartオブジェクトを利用したスクリプトの実行です。

（ JavaScriptは今週のメールマガジンをお読みください。）

◆ navigatorオブジェクト

navigatorオブジェクトは、ユーザのブラウザの種類やバージョン、設定に関する情報などを扱うオブジェクトです。windowオブジェクトとは別の独立したオブジェクトに分類されています。

navigatorオブジェクトのプロパティ

プロパティ	機能
appCodeName	ユーザのブラウザのコード名を取得する
appName	ユーザのブラウザ名を取得する
appVersion	ユーザのブラウザのバージョンを取得する
browserLanguage	ユーザのブラウザの言語環境を取得する
language	ユーザのブラウザの言語環境を取得する
olatform	ユーザのプラットフォームを取得する
userAgent	ユーザーエージェンシーを取得する

navigatorオブジェクトのメソッド

メソッド名	機能
javaEnabled	Javaの使用の可否を調べる
taintEnabled	ユーザに非通知でデータ送信ができるのかの可否を調べる

以下は navigatorオブジェクトを利用したスクリプトの実行結果です。