初心者のためのホームページ作り 第36号
Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

今週<第36号>マガジンのおさらい

                   毎週金曜日配信 What's New 2003/1/24
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
 今週の課題 ■ JavaScript講座 第5回
今回は、今までの復習をかねて、Dateオブジェクト、windowオブジェクト、navigatorオブジェクトなどを盛り込んで解説します。

Dateオブジェクト

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

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

メソッド内容
getFullYear()4桁の西暦年を取り込む
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>

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

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表示中のページのプロトコル(通信手順)を取得する
searchCGIなどに渡されるサーチ部分を参照、または設定する

以下のスクリプトは、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)">1つ前に戻る</a>
  <a href="javascript:history.forward(2)">2つ先に進む</a>
  <a href="javascript:history.go(-2)">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オブジェクトのメソッド

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

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

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

あなたのブラウザ環境は以下の通りです。

なお、この他にも windowオブジェクト以外に独立したオブジェクトや、documentオブジェクトが持つ下位オブジェクトに関しては、いずれ講座を進める中で開設する予定です。



Copyright© 2002-2003 banban@scollabo.com ばんばん