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

                  毎週金曜日配信 What's New 2002/11/15
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第27号>

             banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。

 時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら、ご遠慮なくメールください。

 当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。

 今週の課題 ■ JavaScript講座 第2回

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆JavaScript入門 --- プロパティ
今回が2回目のJavaScript講座となります。前回では、スクリプトの記述法や、
オブジェクト、メソッド、引数、変数について解説しました。それを踏まえて今
回は、オブジェクトのプロパティ、及びそのイベントについて解説します。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆documentオブジェクトのプロパティ
プロパティというのは、オブジェクトの属性に当たります。たとえば documennt
オブジェクトには背景色や文字色、ドキュメントの URL、タイトル、ドメインな
どの属性があります。
 これらをスクリプトを使って参照、または設定することによって、ページに変
化を表現します。

 document.bgColor = "#ffffcc";

 ドキュメントオブジェクトの bgColorプロパティで、ページの背景色をクリー
ム色に設定しています。
 このように、あらかじめ設定されているプロパティを使うことにより、難しい
プログラムを記述することなく、変化に富んだページを表示させることが簡単に
できます。なお、大文字と小文字は厳格に区別されます。

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

 プロパティ    機能
 -----------------------------------------------------------------------
 alinkColor    アクティブなリンクの表示色
 anchors       画面上に表示されている全アンカーの内容の持つオブジェクト
        の配列
 bgColor    背景色
 cookie        クッキー。ちょっとした情報を入れるための文字列型オブジェ
        クト
 fgColor       表示色
 forms     画面上に表示されている全フォームの内容を持つオブジェクト
                の配列
 lastModified  最終更新日
 linkColor   リンクの表示色
 links         画面上に表示されている全アンカーの内容の持つオブジェクト
        の配列(anchors と同じ)
 location   表示中のURL
 referrer   呼び出したURL
 title     ドキュメントのタイトル
 vlinkColor  訪問済みのリンクの表示色
 -----------------------------------------------------------------------

 これらを踏まえて、簡単なスクリプトを表示するHTMLを作ってみましょう。
テキストエディタ(SimpleText、メモ帳など)を起動して下記のようにタイプし
ます。コロン「:」、セミコロン「;」また、ダブルコートを間違えないように
注意してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>JavaScript講座/オブジェクトのプロパティ</title>
<style type="text/css">
<!--
div { margin: 10px 50px; 
      font-size: medium }

h1  { margin-bottom: 0px; 
      font-size: large; 
      color: #900 }

p   { margin: 0px }
-->
</style>
</head>

<body>
<div>
<p><a href="http://www.scollabo.com/banban/">ホーム</a></p>
<p><a href="http://www.yahoo.co.jp/">ヤフー</a></p>

<script type="text/javascript">
<!--
document.bgColor="#ffffcc";
document.alinkColor="blue";
document.vlinkColor="purple";
document.writeln("<h1>カラー関係<\/h1>");
document.writeln("<p>背景色:" + document.bgColor + "<\/p>");
document.writeln("<p>未訪問リンク色:" + document.alinkColor + "<\/p>");
document.writeln("<p>訪問済リンク色:" + document.vlinkColor + "<\/p>");
document.writeln("<h1>ドキュメント関係<\/h1>");
document.writeln("<p>最終更新日:" + document.lastModified + "<\/p>");
document.writeln("<p>パス名:" + document.location + "<\/p>");
document.writeln("<p>タイトル:" + document.title + "<\/p>");
document.writeln("<p>クッキー:" + document.cookie + "<\/p>");
document.writeln("<p>呼び出したURL:" + document.referrer + "<\/p>");
//-->
</script>
<noscript>
<p> ここではJavaScriptにより背景色やリンクの文字色を指定し、かつその情報
をブラウザに表示するように記述しています。残念ながら、あなたのブラウザは
スクリプトが実行できません。あしからず。</p>
</noscript>
</div>

</body>
</html>


 入力が終わりましたらHTML文書として保存します。そのためには必ず拡張子を
つけて保存します。ここでは、test_28.html としておきます。「.html」を忘れ
ずに保存してください。なお、保存の際の文書名は任意の名前をつけていただい
ても差し支えありません。

 サンプルHTML実行結果URL
  http://www.scollabo.com/banban/magazine/sample/mmsample_041.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説
<meta http-equiv="Content-Script-Type" content="text/javascript">
 HTTPサーバあるいはブラウザに、文書中スクリプト種類がJavaScriptであるこ
 とを受け渡します。これによって、スクリプトの動作を保証することが期待で
 きます。

div { margin: 10px 50px 10px 50px; font-size: medium }
 汎用ブロックレベル要素 divに対して、左右の余白を50ピクセル、上下の余白
 を10ピクセル、文字の大きさを medium に設定しました。
  
h1 { margin-bottom: 0px; font-size: large; color: #900 }
 第一見出し要素に定義しているのは、下段の余白を無し、フォントの大きさを
large、文字色をマルーンに設定しました。

p { margin: 0px }
 段落要素のすべての余白を無くすように設定しました。

document.bgColor="#ffffcc";
 スクリプトにより、背景色を薄いクリーム色の指定しています。

document.alinkColor="blue";
 スクリプトにより、未訪問リンクの文字色を青色に指定しています。

document.vlinkColor="purple";
 スクリプトにより、訪問済みリンクの文字色を紫に指定しています。

document.writeln("<h1>カラー関係<\/h1>");
 引数内にHTMLを記述しました。<\/h1> としたのは、スクリプト内でのスラッ
 シュは演算子に用いられるので、何らかのエスケープが必要になるため、¥を
 記述し、これにより安全に実行可能となります。
  (これについては、下段の「非HTMLデータの指定」を参照してください。)

document.writeln("<p>背景色:" + document.bgColor + "<\/p>");
 引数にテキストと属性である document.bgColor をつなげるために、+記号を
 用いて記述します。これは文字列演算子と言って、文字列を連結させる場合に
 利用します。結果的に
 <p>背景色:#ffffcc </p> という表示になります。

 以下同じ

<noscript> 〜 </noscript>
 スクリプトに対応していないブラウザへの配慮として、その情報を記述しまし
た。スクリプトをHTMLで実行させる時の作法となります。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆Tips --- JavaScriptで扱う演算子
文字列演算子が登場したので、ついでに演算子について触れます。
  JavaScriptでは下記の演算子が使われます。今後、頻繁に登場しますので、是
非覚えておいてください。
 数値の計算には算術演算子、文字列を連結するのは文字列演算子を使います。

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

 ■演算子の優先順位
 複数の演算子が使われる場合は、一般の四則計算と同じです。カッコ内の計算
 が先に行われ、次に、* / % の計算が、最後に + - の計算が行われます。

 ■数値と文字の自動変換
 JavaScriptでは、数値をダブルコートで囲むと文字列として処理されますが、
 計算式によっては、数(値)または数字(文字列)に自動変換されることがあ
 ります。

 例:
 a = "2" - 6
 この式では、文字列の2は次の 「-」が算術演算子なので、自動的に数値に変
 換され、a = 2 - 6 となって、その答えは「-4」(数値)となります。
  ですが、

 a = "2" + 6
  この式では、2が文字列であるため、次の 「+」は文字列演算子としてみなさ
 れ、数値の「6」が文字列に自動変換され、その答えは「26」(文字列)とな
 ります。a = "2" + "6" 
  ダブルコートの扱いには、こうした予期しない結果になる場合がありますの
 で、注意が必要です。

 (ビルトイン演算子につきましては、講座進行の中で解説します。)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆イベント属性を使う(イベントハンドラ)
HTMLには要素別に使えるイベント属性があります。スクリプトと併用して使用す
るとページに変化を与えることができます。

 HTML4.01属性リファレンス:イベント属性の詳細はこちら
   http://www.scollabo.com/banban/atrr/atr_etc.html
    http://www.scollabo.com/banban/java/jvs_004.html

 ここではイベント属性の中で、onmouseover属性を使って 背景色を変化させて
みます。documentオブジェクトの bgColorプロパティを利用し、マウスが触れた
ら背景色が変わります。
 テキストエディタ(SimpleTex、メモ帳など)を起動して下記のようにタイプし
ます。コロン、セミコロン、シングルコート、ダブルコートを間違えないように
注意してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>JavaScript講座/背景色を変える</title>
<style type="text/css">
<!--
table { margin-top: 10px; 
        margin-left: auto;
        margin-right: auto;
        font-size: large; 
        font-weight: bold }

a:link,a:visited { color: #069 }
-->
</style>
</head>

<body>
<table cellpadding="0" cellspacing="20" summary="背景色の変化">
<tr><td><a href="#" 
onmouseover="document.bgColor='#ffffcc'">クリーム</a></td>

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

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

<td><a href="#" 
onmouseover="document.bgColor='#ffff00'">イエロー</a></td></tr>
</table>

</body>
</html>


 入力が終わりましたらHTML文書として保存します。ここでは、test_29.html 
としておきます。しつこいようですが、「.html」を忘れずに保存してください。

 サンプルHTML実行結果URL
  http://www.scollabo.com/banban/magazine/sample/mmsample_042.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説
table { margin-top: 10px; margin-left: auto; margin-right: auto;
        font-size: large; font-weight: bold }
 テーブルの左右に自動的に余白を与え、テーブル全体が中央に配置されます。
 この記述は、文書型宣言が、Strictでなければなりません。
  文字の大きさを large とし、強調させました。

a:link,a:visited { color: #069 }
 リンクを表わすアンカーの文字色を薄い青に設定しました。未訪問と訪問済み
 のリンクの文字色は同じです。

<tr><td><a href="#" 
onmouseover="document.bgColor='#ffffcc'">クリーム</a></td>
 HTMLの持つ汎用的なonmouseover属性を使って、データセル内のアンカーの上を
 マウスが通過する時に発生するイベントを設定しました。
  JavaScriptのdocumentプロパティによって背景色を指定しています。シング
 ルコートとダブルコートの記述に注意しましょう。

 この記述に、onmouseout属性を利用すると、マウスが離れた時に発生するイベ
 ントが実行できます。

 参考例:
  <tr><td><a href="#" 
  onmouseover="document.bgColor='#ffffcc'" 
  onmouseout="document.bgColor='#ffffff'">クリーム</a></td>

 マウスが触れると、背景色がクリーム色になり、マウスが離れると、白色に変
 化します。お試しください。
  サンプルHTML実行結果URL
   http://www.scollabo.com/banban/magazine/sample/mmsample_043.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆オブジェクトの種類
documentオブジェクトは、前回も述べた通り、windowオブジェクトの持つオブジ
ェクトです。windowオブジェクトには、document以外には、下記のように設定さ
れています。

Windowオブジェクトの階層構造

window ━━┳━━ location
           ┣━━ history
           ┣━━ document ━━┳━━ Form ━━┳━━ Select ━━ option 
           ┗━━ Frame        ┣━━ Layer    ┣━━ Button
                               ┣━━ Link     ┣━━ Checkbox
                               ┣━━ Image    ┣━━ Radio
                               ┣━━ Area     ┣━━ Reset
                               ┣━━ Anchor   ┣━━ Submit
                               ┗━━ Applet   ┣━━ Hidden
                                               ┣━━ Passwod
                                               ┣━━ fileUplaod
                                               ┣━━ Text
                                               ┗━━ Textarea

 今後、講座の中で適時これらのオブジェクトについて取り扱かう予定です。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆Tips --- 非HTMLデータの指定
HTMLでは、JavaScriptやスタイルシートを、要素の内容や属性値に度々出現しま
す。ここでは、HTMLのマーク付けとHTMLでないデータとの境界部分について説明
します。 

 スタイルシートやJavaScriptをHTMLの中に埋め込む場合、それらに対応してい
 ないブラウザへの配慮として、コメントタグを用います。

 スタイルシート <!--    CSS記述    -->
 JavaScript      <!--    スクリプトの記述  //-->

 先週、HTMLの基本的なデータ形式について簡単に説明しましたが、このスタイ
 ルシートやJavaScriptの記述内容は、CDATAとして扱われます。このCDATAでは
 実体参照の使用が許されていません。必ず、実体参照符合を利用しなければな
 らないのです。(実体残照については、先週の第26号をお読みください。)

  スクリプト内で、& や > を用いる場合には、 CDATAとして違反となります。
 この場合、スクリプトを外部に置くように推奨されています。
 (本誌第23号で用いたJavaScriptは、このような理由から外部に置きました。)

  JavaScriptの記述は、その要素の開始タグの直後から始まり、最初のETAGO
 (終了タグ開始区切り子「</」)に続けて名前開始文字([a-z、A-Z])があると
 ころで終わります。
  つまり、スクリプト内で、「</+アルファベット」が出てきた時点でその要
 素の終了のマークアップと判断されてしまう危険があります。
  したがって、「</+アルファベット」を各スクリプトのエスケープ機構によ
 ってエスケープしなくてはなりません。 

 document.writeln("<h1>カラー関係<\/h1>");
 このように、<\/h1> と記述したのはそういった理由があるからです。
  つまり、ETAGOの </+アルファベット>ではなく、</\+アルファベット>と
  することによって終了タグではないことを示しています。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
WebページはHTML分の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。

(今週のおさらい)
http://www.scollabo.com/banban/magazine/backnm_027.html

次回は、枠線の応用について詳しく解説します。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
 ただし、平日の昼間は会社勤めなので、返事が遅れることがあります。ご了承
ください。

発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

誤字・脱字・変換ミス・表現欠乏などには平にご容赦願います。なお、マガジン
のすべての記述に誤りや重大なスペルミスがある場合、叱咤と罵声と共に私まで
突きつけていただくと幸いに思います。

バックナンバー こちらで公開しています。
プレーンテキスト  http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい  http://www.scollabo.com/banban/magazine/
アーカイブ    http://www.scollabo.com/banban/daf/archive.html
講座教材     http://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196

配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

<えでぃた〜ず・るーむ>
 チラホラとクリスマス・ツリーが見え始め、ジングルベルが聞こえてきます。
早いもので、この講座のメールマガジンも半年が過ぎました。

 最初のうちは、「週1回の配信なんて軽いもんだ」とタカをくくっていました
が、何と1週間の早いことか。いつも配信前日には大慌てで、時折大きなミスを
連発することもありました。
 特に、HTMLや CSS、JavaScriptは、たった1文字の記述ミスでも致命的になる
ため、その確認作業ではブラウザ別に行うので、けっこう大変です。

 おかげで、私にとっても勉強になり、新たな知識を積むことができました。来
年早々には XHTMLを予定していますので、現在はそのためのサンプルを作り溜め
しています。御期待ください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
 なお、記事中のスタイルシート、HTML、スクリプトなどをご自分のページ作成
に自由に使っていただいても差し支えありません。

      Copyright(C) 2002  www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■



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