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

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第10号
第11号  第12号  第13号  第14号  第15号  第16号  第17号  第18号  第19号  第20号
第21号  第22号  第23号  第24号  第25号  第26号  目次

プレーンテキスト版バックナンバー

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

                  毎週金曜日配信 What's New 2002/11/15
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題 ■ JavaScript講座 第2回

■ プロパティ

documentオブジェクトには、あらかじめ用意されているプロパティがあります。

プロパティとは、オブジェクトの属性に当たります、documentオブジェクトには、、背景色や文字色、タイトル、URL、などの属性を持っており、このプロパティを利用することで、ページに変化を与えることができます。

documentオブジェクトのプロパティ一覧

documentオブジェクトが持つプロパティは下記の通りです。なお、大文字と小文字を厳格に区別しますので、注意してください。
alinkColorアクティブなリンクの表示色
anchors画面上に表示されている全アンカーの内容の持つオブジェクトの配列
bgColor背景色
cookieクッキー、ちょっとした情報を入れるための文字列型オブジェクト
fgColor表示色
forms画面上に表示されている全フォームの内容を持つオブジェクトの配列
lastModified最終更新日
linkColorリンクの表示色
links画面上に表示されている全アンカーの内容の持つオブジェクトの配列
location表示中のURL
referrer呼び出したURL
titleドキュメントのタイトル
vlinkColor訪問済みのリンクの表示色

参考までに、例えば、Webページの最新の更新日を表示させるには、

document.writeln(lastModified);

オブジェクトのプロパティを利用するだけで、ページに関する情報を取得できます。

サンプル   プロパティを使ったサンプルページ (HTML文は今週のメールマガジンをお読みください。)

イベント属性でプロパティを使う

プロパティをHTMLで表示させる方法で、イベント属性を使って、背景色を変えるようにします。非常に簡単なHTMLですので、どなたでも理解できると思います。

今回使うイベント属性は、onmouseover 属性で、マウスが、要素の上を通過、あるいは触れたときに発生するイベントです。イベント属性の詳しい解説は、HTML属性レファレンスの イベント属性 をお読みください。

onmouseover="document.bgColor='#ffffcc'"

この記述は、要素の上にマウスが触れたら、背景色をクリーム色に変化させるものです。

背景色変化のサンプル   (HTML文は今週のメールマガジンをお読みください。)

次に、onmouseout 属性を使って、マウスが離れた時に、背景色が元に戻る表示をします。記述は、単に上記のHTMLに onmouseout="bgColor='white'" をテーブルのデータセル内のみ変更を加えたものです。
<tr><td><a href="#" onmouseover="document.bgColor='#ffffcc'"
         onmouseout="document.bgColor='white'">クリーム</a></td>

    <td><a href="#" onmouseover="document.bgColor='#ffcccc'"
         onmouseout="document.bgColor='white'">ピンク</a></td>

    <td><a href="#" onmouseover="document.bgColor='#ccffff'"
         onmouseout="document.bgColor='white'">アクア</a></td>

    <td><a href="#" onmouseover="document.bgColor='#ffff00'"
         onmouseout="document.bgColor='white'">イエロー</a></td></tr>
背景色変化のサンプル その2

■ 付記: window オブジェクト一覧表

Button
Anchor Checkbox
Frame Applet FileUpload
history Area Hidden
window
document Form Password
location Image Radio
Link Reset
Text
Textarea
select option

■ 付記: JavaScript 演算子一覧表

演算子例文機能
+a + baとbを足す(足し算)
-a - baからbを引く(引き算)
*a * baとbをかける(掛け算)
/a / baをbで割る(割り算)
%a % baをbで割ったあまりの値を求める
++a = b++bをaに代入してから、bの値を1つ増やす
++a = ++bbの値を1つ増やしてからaに代入する
--a = b--bをaに代入してから、bの値を1つ減らす
--a = ++bbの値を1つ減らしてからaに代入する

ビルトイン演算子については、講座を進める中で適時に解説します。



Copyright(C) 2002-2003 banban@scollabo.com