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

今週のおさらいバックナンバーはこちらから
第１号  第２号  第３号  第４号  第５号  第６号  第７号  第８号  第９号  第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講座　第２回

■ プロパティ

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>

背景色変化のサンプル　その２

■ 付記： 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 + b	ａとｂを足す（足し算）
-	a - b	ａからｂを引く（引き算）
*	a * b	ａとｂをかける（掛け算）
/	a / b	ａをｂで割る（割り算）
%	a % b	ａをｂで割ったあまりの値を求める
++	a = b++	ｂをａに代入してから、ｂの値を１つ増やす
++	a = ++b	ｂの値を１つ増やしてからａに代入する
--	a = b--	ｂをａに代入してから、ｂの値を１つ減らす
--	a = ++b	ｂの値を１つ減らしてからａに代入する

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