毎週金曜日配信 What's New 2003/1/24
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
初心者のためのホームページ作り
http://www.scollabo.com/banban/
＜第36号＞
banban@scollabo.com
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
当講座は、初心者や中級者が正しい文法と作法を身につけて、 プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座ではHTML4.01及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようになり
ます。
今週の課題 ■ JavaScript講座 第５回
■ HTML タグの解説 --- meta要素
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆JavaScript講座 第５回 サンプルを例示として
既に、過去４回の講座で簡単なスクリプトを作ることができます。
今回は、実際のスクリプトのサンプルを用いて、具体的な意味や動作の仕方を
詳しく解説します。今までのおさらいの意味もありますが、新しく登場するオブ
ジェクトについても学びます。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆Dateオブジェクト
Dateオブジェクトとは、JavaScriptでは、日付や時間などを扱うためのメソッド
が定義されていて、このメソッドを用いることで、時間や日付の計算が容易にで
きます。
下記のスクリプトを参照してください。日付けや曜日を自動的に取得するスクリ
プトです。
<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>
サンプル実行URI
http://www.scollabo.com/banban/magazine/review_036.html#date
span要素はあらかじめスタイルシートで、次のように設定します。
span { font-size:large; color: #060; font-weight: bold }
◆解説
weeks=new Array("日","月","火","水","木","金","土");
変数 weeks を配列宣言し、曜日を割り当てています。
（配列については前回の JavaScript講座で解説しました。）
today=new Date();
today という変数に、new Date() を代入します。
new Date() は、Dateオブジェクトを利用する際に使用するものです。
y=today.getFullYear();
変数 y に getFullYear()メソッドを使って西暦年を取り込みます。
m=today.getMonth()+1;
変数 m に getMonth()メソッドを使って月数を取り込みます。
このメソッドで返される月数は、実際よりも１つ少ないため、１を加えます。
d=today.getDate();
変数 d に getDate()メソッドを使って今日の日にちを取り込みます。
w=weeks[today.getDay()];
変数 w に、０〜６までの、どれかの値を取り込みます。
getDate()メソッドで返される値を取り込んで、配列のインデックスから指定さ
れた曜日を w に返します。
document.write("今日は、<span>",y,"<\/span>年");
documentoオブジェクトの writeメソッドによって、（）で囲まれた引数を画面
に表示します。<\/span> は </span> とすると終了区切子と判断されるのをエ
スケープさせる意味で、\ を使っています。
なお、write と writeln の違いは画面に現れません。どちらを使っても問題
ありません。本来は、 writeln は改行を指示していますが、実際には変化があ
りません。
Dateオブジェクトとそのメソッド一覧
http://www.scollabo.com/banban/magazine/backnm_030.html#dateobject
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆if構文と関数を使う
if構文とは、条件によってブロック内のスクリプトを繰り返し、関数とは繰り返
し使われるスクリプトを関数名にして呼び出すというものです。
（メールマガジン第30号、第33号参照）
次のスクリプトでは、ヘッダ部に記述し、ページのロード時にエフェクトをかけ
るものです。
<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>
◆解説
function effect
関数を設定します。ブロック内のプログラムが effect に読み込まれます。
if ( idx < 17)
if構文で、idx の値が16になるまで繰り返され、値が 16を超えるとループを
脱します。
setTimeout('effect(), 50)
setTimeout はタイマーのメソッドで、ここでは、effect関数が 0.05秒毎に繰
り返されます。（１秒＝1000）
document.bgColor
documentオブジェクトの背景色の指定です。
(((((idx*16+idx)*16+idx)*16+idx)*16+idx)*16+idx)
if構文で生成された値（0〜16）に基づいて計算します。
最大値が256になり、16進数のffに変換し、RGBの値を生成しています。
通常、関数はHTML内で呼ばれることがありますが、ここでは、スクリプトで直
接、effect() を呼び出して実行しています。
そのため、<body onLoad="effecf()"> は不要です。
サンプル実行URI
http://www.scollabo.com/banban/magazine/sample/mmsample_066.html
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆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>
HTMLの記述
<body onLoad="effect()">
◆解説
function effect()
effect() を関数として宣言しています。この変数にブロック内のプログラム
が読み込まれます。
r_col = "00123456789abcde"
変数 r_col に16個の文字列が代入されます。以下、b_col、g_col 同様です。
for ( n = 0; n < 16; n++ )
for構文です。n の初期値は 0、n が16を超えるまでブロックを繰り返します。
r = r_col.charAt(n);
for構文のブロック内のプログラムで、r という変数に、r_colに代入されてい
る値の n 番目の文字を取り込みます。
以下、b、g も同様に forで指定された n 番目の文字を取り込みます。
document.bgColor="#" + r +r + g + g + b + b;
背景色の指定を取り込まれた文字を数値として評価し、ブラウザに表示します。
<body onLoad="effect()">
ページがロード（読み込まれたとき）されたときに発生するイベントで、ここ
では、関数 effect() が実行されます。
サンプル実行URI
http://www.scollabo.com/banban/magazine/sample/mmsample_067.html
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆windowオブジェクトが持つ下位オブジェクト
windowオブジェクトは、トップレベルのオブジェクトで、全ウィンドウに当ては
まるリソースを含んでいます。以下にwindowオブジェクトの下位オブジェクトの
機能について解説します。
locationオブジェクト
現在表示しているドキュメントに関する情報を取得するために利用します。
historyオブジェクト
ユーザが過去に訪問したページの URIのリストのプロパティを表示します。
documentオブジェクト
タイトルを始めとする現在表示中の文書の背景色、形式などのプロパティを表
示します。
Frameオブジェクト
ウィンドウに含まれるフレームで、基本的に HTMLにおける Framesetと同じ機
能を有しています。
■windowオブジェクト
windowオブジェクトとは、画面上に表示されているすべてのオブジェクトの親と
なるオブジェクトです。
Windowオブジェクト一覧
http://www.scollabo.com/banban/magazine/backnm_027.html#winobject
windowオブジェクトのプロパティ
defoultStatus ステータスバーに表示されるデフォルトのメッセージ
status ステータスバーに表示中のメッセージ
windowオブジェクトのメソッド
open ウィンドウを開く（引数の省略は可能）
close ウィンドウを閉じる
下記のHTML文は、サブウィンドウを開くスクリプトです。
<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>
ボタンがクリックされると、幅400ピクセル、高さ250ピクセルのサブウィンド
ウが表示されます。
サンプル実行URI
http://www.scollabo.com/banban/magazine/review_036.html#window
◆解説
<form name="sample">
フォームを設定しています。name属性は任意です。
input type="button" value="Click!"
入力コントロールを汎用ボタンに設定し、ボタンの名前を「Click！」に設定。
onclick="window.open('sample.html', 'detailWindow',
ボタンがクロックすると発生するイベントで、サブウィンドウに呼び出す URI
と、サブウィンドウの名前を指定しています。シングルコートを利用している
のは、既にダブルコートが使われているために区別しています。
'resizable=yes,scrollbars=yes,toolbar=no,width=400,height=250')"
サブウィンドウの横幅を400ピクセル、高さを250ピクセルに指定し、ウィンド
ウのツールバーを非表示とし、サイズの変更を許可しています。
■locationオブジェクト
locationオブジェクトは、現在表示中のドキュメントに関する情報を取得するた
めに利用できます。
locationオブジェクトのプロパティ
hash 現在のアンカーを参照、または指定したアンカーへ移動
host URI中のホスト名
hostname URI中のドメイン名＋ホスト名
href URI
pathname URI中のパス名
port ポート番号
protocol プロトコル名（通信手順名）
search "?" 以降の URI名
以下のスクリプトは、現在表示中のドキュメントの情報を表示するサンプルです。
<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>
サンプル実行URI
http://www.scollabo.com/banban/magazine/review_036.html#location
（注：ファイルとしてオープンしている時、host等のポート番号を指定していな
い場合には、port番号の情報は空になります。）
■historyオブジェクト
historyオブジェクトは、ページ参照の履歴を操作したり、画面上に表示してい
るページを移動したりする操作に使われます。
履歴とは、ブラウザが起動して幾つかの Webページを見たときに自動的にキャ
ッシュされる一時ファイルを参照します。起動したばかりでは、当然のことなが
ら履歴は何もありません。
historyオブジェクトのプロパティ
length 現在持っている履歴の数
historyオブジェクトのメソッド
back 前のページに戻る
fowrd 次のページに進む
go 指定された番号のページに進む
以下は、簡単な historyオブジェクトを使ったアンカーの記述です。
<a href="javascript:history.back(1)">１つ前に戻る</a>
<a href="javascript:history.forward(2)">２つ先に進む</a>
<a href="javascript:history.go(-2)">２つ前に戻る</a>
どのサイトから来てもこのリンクでは、必ずその場所に戻ることを指定します。
ただし、履歴が無ければどこにも移動しません、当たり前の話ですが・・
この記述は、他のページから参照されて、元のページの位置に戻したい場合
には有効に働いてくれますが、ブラウザによっては、元のページに戻れても、
元の位置には戻らない場合もあります。
また、JavaScriptが実行できない環境の場合もあるので、他のリンクも併記
することが望まれます。
■Frameオブジェクト
Frameオブジェクトの上位オブジェクトは Windowオブジェクトです。
Frameオブジェクトでは、タイマーを扱うメソッドが用意されています。
setTimeout 一定時間ごとに処理を行うタイマーの設定
clearTimeout 指定したタイマーの解除
これを利用して、簡単なタイマーを作ることができます。
<script type="text/javascript">
<!--
var enable=false,startDate;
function toggleCounter() {
enable = !enable;
startDate = new Date()
if (enable) {
watch();
}
}
function watch() {
var now, mySec;
if (enable) {
setTimeout('watch()', 1000);
now = new Date();
mySec = parseInt(3*60-(now.getTime()-startDate.getTime())/1000);
if (mySec > 0) {
document.watch.watch.value = mySec;
} else {
enable = false;
document.watch.watch.value = "完成!!";
alert("時間です。カップラーメンが完成しました！");
}
}
}
//-->
</script>
タイマー関数を呼び出すHTML文
<form name="watch">
<p>カップラーメン完成まで、あと <input name="watch" size="5">秒。</p>
<p>
<input type="button" value="Start/Stop" onClick="toggleCounter()">
</p>
</form>
サンプル実行URI
http://www.scollabo.com/banban/magazine/review_036.html#watch
◆解説
タイマーを呼び出す関数自身が再度設定することにより、任意の時間のインター
バルを置き、同じ関数を連続して呼び出すことを設定しています。
１秒毎にカウンタダウンし、３分経った時点でアラートを表示します。
最初の関数では、タイマーの起動を設定し、タイマーが起動されたら別の関数
（watch関数）を呼び出します。
var enable=false,startDate;
変数 enable にカウンターがまだ設定していないことを示しています。
ここのカウンターはスタートボタンが押された日時が無いという設定。
function toggleCounter() {
タイマーを呼び出す関数（toggleCounter）を設定しています。
var now, mySec;
toggleCounter()関数に用いるブロック内での変数の設定。
if (enable) { setTimeout('watch()', 1000); now = new Date();
mySec = parseInt(3*60-(now.getTime()-startDate.getTime())/1000);
if構文で、初期値は、toggleCounter()関数で設定された「今」の時間を設定し、
その時間から180秒後までをカウントダウンします。
if (mySec > 0) { document.watch.watch.value = mySec;
カウントダウンしている時間が 0 になるまでその数値を表示します。
else { enable = false; document.watch.watch.value = "完成!!";
alert("時間です。カップラーメンが完成しました！");
時間が 0 になった瞬間に「完成！」と表示され、同時にアラートダイヤログ
ボックスでユーザにラーメンができたことを知らせます。
<form name="watch">
フォーム内に watch関数を呼び込んでいます。form要素における name属性は、
スクリプトと併用する場合が一般的です。
<input type="button" value="Start/Stop" onClick="toggleCounter()">
ユーザの入力コントロールにボタンを設定し、ボタンが押された瞬間に発生す
るイベントハンドラ onClick属性で toggleCounter() 関数が実行されます。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆navigatorオブジェクト
windowオブジェクトとは別に独立したオブジェクトで、この機能を利用すること
で、ブラウザの動作環境などや種類に関する情報を取得できます。
■navigatorオブジェクトのプロパティ
appCodeName ： ブラウザのコード名
appName : ブラウザのアプリケーション名
appVersion : ブラウザのマージョン名
userAgent : サーバに送られるユーザのエージェント名
（ブラウザやプロキシを含む）
これらのプロパティを利用することにより、ユーザのブラウザや環境などが、
簡単に取得して表示させることが可能です。
下記スクリプトは、ユーザのブラウザなどを取得して表示します。
<script type="text/javascript">
<!--
document.write("Engin ："+navigator.appCodeName+"<br>")
document.write("Browser ："+navigator.appName+"<br>")
document.write("Versi0n ："+navigator.appVersion+"<br>")
document.write("UserAgent ："+navigator.userAgent)
//-->
</script>
サンプル実行URI
http://www.scollabo.com/banban/magazine/review_036.html#navigator
◆オブジェクトについて
ここまで講座では、window、document、history、location、Date、Frame、また
navigator などのオブジェクトを紹介してきました。
JavaScriptで利用できるオブジェクトは、この他にもたくさん存在しています。
それらについては、JavaScript講座を進める中で順次お伝えします。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML タグの解説 --- meta要素
HTMLのメタ情報を記述し、HTTPサーバ、あるいは Webブラウザに受け渡します。
この要素の記述場所は、ヘッダ部 <head> 〜 </head>内でのみ使われ、body要素
内には配置することができません。空（エンプティ）要素。
属性：http-equiv
メタ情報を、HTTPサーバのレスポンスヘッダとしてサーバから送信さ
せたい場合に、name属性の代わりに用います。ただし、すべてのサー
バが必ずしもHTTPヘッダとして送信するわけではなく、実際にはブラ
ウザ側でこの内容をチェックすることに使われています。
content
メタ情報のプロパティに対する値を指定します。ここでのプロパティ
とは、meta要素に、http-equiv属性、あるいは、name属性が設定され
た場合に、その値を指定します。
name
メタ情報のプロパティ名を指定し、HTTPサーバに送信します。
記述法
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta name="author" content="banban and Suzuki Collaboration">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="初心者のためのホームページ作成">
<meta name="keywords" content="CSS,DTD,HTML,XHTML,ホームページ">
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_036.html
次回は、XHTML講座 第３回 XMLについて解説します。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
質問・ご意見ははこちらまで→ 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
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
＜えでぃた〜ず・るーむ＞
久しぶりに SVG や MathMLに取り組みました。両者とも XMLで使われるマークア
ップ言語ですが、講座で解説する上でも自分なりに理解しておく必要があり、訳
も分からず苦闘しています。そういえば、先週、SVG が、バージョンアップして
います。また勉強しなおさなくてはいけないようです。
次週は XMLのさわりの部分を予定していますが、奥の深い言語です。いじり出
すと止まらなくなって、何度夜更かししたでしょうか。でも、非常に面白い！
この面白さが読者に伝えられるような紙面構成にと思うのですが、思うだけで
なかなか難しいようです。さて、どうなりますか・・
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスクリプト、スタイルシート、HTMLをご自分のページ作成に自
由に使っていただいても差し支えありません。
Copyright(C) 2002-2003 www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
Copyright(C) 2002-3003 banban@scollabo.com