毎週金曜日配信 What's New 2003/9/26
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第68号＞
wfb-org@jcom.home.ne.jp
（初心者のホームページ作り臨時制作委員会）
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座ではHTML4.01及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようになり
ます。
今週のコンテンツ
■ JavaScript講座 第13回 --- 時間の計算
■ インターネット用語解説 第２回 --- Java仮想マシン
■ お知らせ
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆JavaScript講座（第13回） 時間の計算
JavaScriptでは、あらかじめ用意されている Dateオブジェクトを扱うことで
時間や日時をコントロールすることができます。
また Frameオブジェクトのタイマー機能を使い、時間経過を計ることによって
ストップウォッチなどを作成します。
■Dateオブジェクトの作成の際のパラメータ
・パラメータなし
現在の日付、時刻のオブジェクトを作成 例：today = new Date();
・Month, day, year, hours, minutes, second の作成
例：myBirth = new Date("April,28,2002 06:30:00");
・年、月、日を表す１組の整数
例：myBirth = new Date (2002,4,28);
■Frameオブジェクトのタイマーのメソッド
・setInterval 指定した時間毎に繰り返し処理をするタイマーを設定。
・setTimeout 指定した時間に命令を実行するタイマーを設定
・clearInterval setIntervalでセットされたタイマーを解除
・clearTimeout setTimeoutでセットされたタイマーを解除
メソッドの引数
setInterval(関数名,ミリ秒)、clearInterval(タイマー名)
今回は上記に掲げた、Dateオブジェクト、及び Frameオブジェクトのメソッ
ドを使って幾つかのスクリプトを作成します。
◆ストップウォッチ
現在の時刻と、ストップを押した時刻を参照し、その差を計算することで、簡
単なストップウォッチを作成することができます。
計算には、Mathオブジェクト（計算用オブジェクト）を利用します。
以下のスクリプトをHTML文書のヘッダ部 <head> 〜 </head> に挿入します。
<script type="text/javascript">
<!--
myButton = 0;
function myWatch(flug){
if (myButton == 0){
Start = new Date();
myButton = 1;
document.myForm.myFormButton.value = "Stop!";
myInterval = setInterval("myWatch(1)",1);
}else{
if (flug == 0){
myButton = 0;
document.myForm.myFormButton.value = "Start";
clearInterval( myInterval );
}
Stop=new Date();
T = Stop.getTime() - Start.getTime();
H = Math.floor(T / (60 * 60 * 1000));
T = T - (H * 60 * 60 * 1000);
M = Math.floor(T / (60 * 1000));
T = T - (M * 60 * 1000);
S = Math.floor(T / 1000);
Ms = T%1000;
document.myForm.myClick.value = H + ":" + M + ":" + S+":" + Ms;
}
}
// -->
</script>
以下は、ストップウォッチを表示するフォームの HTMLです。これは body部に
書きます。
<body>
<form name="myForm">
<div>
<input type="text" size="20" name="myClick">
<input type="button" value="Start" name="myFormButton"
onclick="myWatch(0)">
</div>
</form>
</body>
実行結果（スタイルシートを利用しています）
http://www.scollabo.com/banban/magazine/mmsample/sample_68-1.html
◆解説
■myButton = 0;
変数 myButton の初期値を設定しています。
■function myWatch(flug){
関数を定義しています。関数とは１つのプログラムの集まりで、任意に何度で
も呼び出して利用することができます。(flug) は、関数の引数を表します。
■if (myButton == 0){ Start = new Date(); myButton = 1;
もし、変数 myButton が 0 の場合には、変数 Start に現在の時刻を格納しる
という if構文を設定しています。
同時に、変数 myButton の値を 1 に変更します。
■document.myForm.myFormButton.value = "Stop!";
if構文の続きで、画面に表示されているボタンの値を「Stop！」に変えます。
■myInterval = setInterval("myWatch(1)",1);
setInterval とは、指定した時間毎に繰り返し処理をするタイマーを設定しま
す。このメソッドで指定したタイマーは、clearInterval() メソッドで解除さ
れない限り停止することがありません。 引数は（関数名, ミリ秒) です。
■ }else{
if構文の中で、条件にマッチしなかった場合、つまり「そうでない場合は〜」を
表わし、次のブロックを実行します。
■if (flug == 0){ myButton = 0;
フラグの値が 0 の場合、変数myButton に 0 を代入します。
■document.myForm.myFormButton.value = "Start";
フォームのボタンの値を「Strat」に設定し、その値を表示します。
■clearInterval( myInterval );
muInterval で設定されたタイマーを解除します。
■Stop=new Date();
変数 Stop に、現在の時刻を参照して格納します。
■T = Stop.getTime() - Start.getTime();
変数 Start で格納した時間と、変数 Stopで格納した時間の差を計算し、
変数 T に代入します。
■ H = Math.floor(T/(60*60*1000));
変数 T に格納された値を計算し、変数 H に格納します。
ここでは、値に 60Ｘ60Ｘ1000 と蒸散して、「時」を求めています。
スクリプトで扱う時間の最小単位はミリ秒であるため、こうした計算が必要
になります。アスタリスク（*）は乗算（掛け算）の記号です。
Math.floor は、引数で示される数値、あるいは式の結果について、小数点以
下を切り捨てるメソッドです。
■M = Math.floor(T/(60*1000));
変数 T に格納された値を計算して、変数 M に格納します。
ここでは、「分」を求める計算を行っています。
■T = T-(H*60*60*1000);
変数 T に格納された値を計算しなおして、改めて変数 T にその値を代入して
います。（数学的には妙な式となりますが、JavaScriptではこのような記述が
許されています。）
■S = Math.floor(T/1000);
変数 T に格納された値を 1000で割って、変数 S に格納します。
ここでは、「秒」を求める計算を行っています。
■Ms = T%1000;
変数 T に格納された値を計算して、変数 Ms に格納します。
ここでは、「ミリ秒」を求める計算を行っています。
■document.myForm.myClick.value = H + ":" + M + ":" + S+":" + Ms;
それぞれ計算して各変数に代入された値を、フォームの入力フィールドに出力
しています。
■<form name="myForm">
フォームに名付けられた名前は、スクリプトで参照されます。
■<input type="text" size="20" name="myClick">
スクリプトの結果が、この入力フィールドに出力されます。
■<input type="button" value="Start" name="myFormButton"
onclick="myWatch(0)">
ボタンを構成する入力フィールドで、初期値として「Start」をボタンに表示
します。ボタンをクリックすると、スクリプトの関数が呼ばれ実行します。
ストップウォッチのポイントは、現在の時間と停止したその時の時間を取得し
て、その差を計算することによって簡単に作成することができます。時間は60進
法を利用しています。
◆ある期日までの日数を求める
ストップウォッチと同じように、現在の時間と、目的の時間を取得し、その差
つまり、日数を数えることで、目的の日数を算出します。
例えば、来年開催予定のアテネオリンピックは、2004年８月13日です。現在の
日付とその開催日までの差を求めれば、あと何日までかを知ることができます。
次のスクリプトは、単に日数だけでなく時間、分、秒、ミリ秒などをカウントダ
ウンします。
以下のスクリプトを、body要素内に記述し、アテネオリンピックまでのカウン
トダウンを表示します。
<body>
<script type="text/javascript">
<!--
y = 2004;
m = 8;
d = 13;
msg1 = "アテネ五輪まで、あと";
msg2 = "です。";
m -= 1;
olympic = new Date(y,m,d)
function get_time() {
nowdate = new Date();
n = (olympic.getTime() - nowdate.getTime());
dd = Math.floor(n / (24 * 60 * 60 * 1000));
temphh = n % (24 * 60 * 60 * 1000);
hh = Math.floor(temphh / (60 * 60 * 1000));
tempmm = temphh % (60 * 60 * 1000);
mm = Math.floor(tempmm / (60 * 1000));
ss = Math.floor((tempmm % (60 * 1000)) / 1000);
if (dd < 10) dd = "00" + dd;
else if (dd < 100) dd = "0" + dd;
if (hh < 10) hh = "0" + hh;
if (mm < 10) mm = "0" + mm;
if (ss < 10) ss = "0" + ss;
val = dd + "日と" + hh + "時間" + mm + "分" + ss + "秒";
document.myForm.get_time.value = val;
setTimeout("get_time()",1000);
}
document.write("<form name='myForm'><div>",msg1,
"<input size='25' name='get_time'>",msg2,"<\/div><\/form>");
get_time();
//-->
</script>
</body>
実行結果（スタイルシートを利用しています）
http://www.scollabo.com/banban/magazine/mmsample/sample_68-2.html
◆解説
■y = 2004; m = 8; d = 13;
基準となる年月日をそれぞれの変数に格納しています。
■str1 = "アテネ五輪まで、あと"; str2 = "です。";
文字列をそれぞれの変数に格納しています。
■m -= 1;
-= とは、指定された値を減算して変数に代入する演算子です。
ここでは変数m に 1 を減算して格納しています。
■olympic = new Date(y,m,d)
変 数plympic に、最初に設定した基準となるそれぞれの値を格納しています。
■function get_time() {
関数を定義しています。変数名は get_time() になります。
■nowdate = new Date();
変数nowdate に、現在の時間を格納しています。
■ n = (olympic.getTime() - date.getTime());
変数 n に、変 数 olympic で格納された値から 変数 nowdate に格納された
値を引き算して格納しています。
■dd = Math.floor(n / (24 * 60 * 60 * 1000));
変数 dd に、変数 n に格納された値を計算し代入しています。
ここでは、日数を割り出すためにミリ秒から24時間＝１日を算出し、その値
を変数に格納します。
■temphh = n % (24 * 60 * 60 * 1000);
仮の時間を計算するために変数 temphh に、変数 n で求められた数値を時間
に計算しなおしています。
■mm = Math.floor(tempmm / (60 * 1000));
変数 tempmm の値を「分」に変換するための計算を行っています。
■ss = Math.floor((tempmm % (60 * 1000)) / 1000);
変数 tempmm を元に「秒」に変換するための計算を行っています。
■if (dd < 10) dd = "00" + dd;
変数 dd が 10よりも小さい場合には、その数値の前に「00」を添えます。
これによって、変数 dd の数値は文字列に変換されます。
つまり、数値 + "00"(文字列）＝文字列 となります。ダブルコートで囲ま
れた値は数値ではなく、文字列として認識します。
■ else if (dd < 100) dd = "0" + dd;
変数 dd が 100よりも小さい場合には、その数値の前に「0」を添えます。
これも、変数の値が文字列に変換されます。
■if (hh < 10) hh = "0" + hh; if (mm < 10) mm = "0" + mm;
if (ss < 10) ss = "0" + ss;
これらの if構文も同様に、その値が 10よりも小さい場合に、それらの数値
に「0」を添えます。
■val = dd + "日と" + hh + "時間" + mm + "分" + ss + "秒";
変数 val に、各変数の文字列を連結して１つの値として格納します。
■document.myForm.get_time.value = val;
myFormと名付けられたフォームの入力フィールドに、変数 val の内容が適用
されます。
■setTimeout("get_time()",1000);
この関数はタイマーによって、１秒ごとに実行させています。
setTimeout はタイマーを設定し、clearTimeoutメソッドでタイマーが解除さ
れます。ここでは、タイマーを解除していないため、永遠にこの関数が繰り返
し実行されます。
■ document.write("<form name='myForm'><div>",msg1,
"<input size='25' name='get_time' disabled>",msg2,"<\/div><\/form>");
スクリプト中で直接HTML文を記述しています。
平たく記述すれば、
<form name="myForm">
<div>アテネ五輪まで、あと
<input size="25" name="get_time" disabled>
です。
</div>
</form>
このような感じになります。
スクリプトでは、終了タグを <\/div> と記述します。
これは、終了区切り子 </ をスクリプトがその構文の終わりと判断させない
ための、一種のエスケープとして <\/ としています。
<\/div>、</\form> としたのは、そのためです。
なお、input要素の disabled属性は、ユーザがこの入力フィールドを選択で
きないように設定したものです。
◆まとめ
Dateオブジェクトのメソッドや、時間の単位を理解することができると、簡単
に時間を制御することができます。
ターゲットタイムを変更して、自分なりのカウントダウンを作成してください。
ポイント ■ today = new date() 現在の日付を参照する
today = Math.floor(n / (24 * 60 * 60 * 1000)); 日数の計算
H = Math.floor (H / (60 * 60 * 1000)); 時の計算
M = Math.floor(T / (60 * 1000)); 分の計算
S = Math.floor(T / 1000); 秒の計算
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆インターネット用語解説 Java仮想マシン
このコラムは、初心者向けにインターネットの仕組みや専門用語について、シ
リーズで掲載しています。リクエストがありましたらメールにてお願いします。
■Java仮想マシン（JVM：Java Virtual Machine）
Java仮想マシンを一言で説明すると、Javaコンパイラによって生成された中間
コード（Javaバイトコード）によるプログラムを解釈、実行する環境を提供し
ます。Java仮想マシンでは、中間コードを逐次解釈しながら、Javaプログラム
の実行を制御することができます。
通常 Web上で提供されているJava言語で開発されたプログラムコードは、コ
ンパイルという手続きが必要になってきます。
コンパイルとは、プログラムをコンピュータの実行ファイルに変換するため
ソフトウェアで、バイナリ（２値の）ファイルを作成します。
Java仮想マシンは、そのバイナリファイルを実行できるために存在します。
■Javaコンソール
プログラムソースをデバッグ（エラーの修正や変更）するためのプログラムで
Javaコンソールと呼ばれ、広く提供されています。
有名なのは、サン・マイクロシステムズ社から提供されている JDK（Java言
語 Develop Kit）があり、自由にダウンロードすることができます。
また、MSIEにも独自仕様ながら標準装備しています。
Java言語はクライアント（ユーザ）の環境に依存しないオブジェクト指向の
開発言語です。Webで提供される Javaアプレットの作成にも必要な言語です。
■マイクロソフト社のJava仮想マシン（MSJVM）
マイクロソフト社が提供しているJava仮想マシンは、MSIEに標準で添付されて
います。ただし、2004年１月には、サポートを打ち切る予定です。
Javaを巡ってのサン・マイクロシステムズ社との裁判によるためです。マイ
クロソフト社では、独自の仕様でJava言語を開発し、MSIEに搭載しました。
しかし、サン・マイクロシステムズ社はそれをJavaとは認めず、「Java」と
いう言葉やロゴの使用を停止し、ユーザの環境から削除するように求めたので
す。また、莫大な損害賠償も請求しています。
先の１審判決はサン・マイクロシステムズ社が勝訴していますが、マイクロ
ソフト社は上級審に控訴しています。
以下、マイクロソフト社の Webページからの抜粋です。
「マイクロソフトでは、控訴しこの裁定の停止を求める構えですが、控訴裁
判所によって当社の訴えが処理されるまでは、地裁の差止め命令の条件に従う
方向です。
したがって、再配布版の Microsoft仮想マシン (Microsoft VM) は、直ちに
この当社サイトから削除されます。
Microsoft Visual J++ 開発システムまたは Microsoft SDK for Javaを使用
してアプリケーションを構築したデベロッパー各社は、それぞれのエンドユー
ザー使用許諾契約の条件条項に従って、引き続きカスタマに Microsoft VM を
再配布することができます。」
Nescape社が提供している Javaの開発キットは、正真正銘のサン・マイクロ
システムズ社製です。Java言語を学びたい方はこれを手に入れましょう。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆お知らせ ＜編集後記を兼ねて＞
今回が、私たち臨時制作委員会による最後のメールマガジン配信になります。
このメールマガジンを通して学んだことがたくさんあり、また読者の皆様ともコ
ミニケーションを図ることができました。
メールマガジン制作の面白さと難しさを存分に味わうことができましたが、特
に多人数での作業は困難を極めました。
意見の食い違いや、スキルの差によって締め切りが守れないなど、実にたくさ
んの問題を抱えながらも何とかやってこれました。不満足な内容で多くの読者を
失いましたが、今はとりあえず、自分たちの仕事をやり終えたことに満足してい
ます。
当分は締め切りを気にすることもなく少しだけ「ホッ」としています。短い期
間ではありましたが、ご愛読いただき本当にありがとうございました。
ばんばん氏は、今週の始めに退院し現在自宅で静養中です。一時の危機的な症
状から考えると、本当に奇跡的な回復を見せたことは感慨深いものがあります。
次回より、復帰予定のばんばん氏がメールマガジンを配信します。本来の姿に
戻ることになりました。ただし、まだ完全回復ではありませんので、なにかと不
備な点が目立つことが予想されます。その点については予めお許しください。
また、どうか末永いお付き合いの程を心よりお願いいたします。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_068.html
来週は勝手ながらお休みさせていただきます。ばんばん氏の準備が整い次第に
順次刊行しますので、しばらく時間をください。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
質問・ご意見ははこちらまで→ wfb-org@jcom.home.ne.jp
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなると
思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答えて
くれると思います。
発行者 ばんばん、初心者のためのホームページ作り臨時制作委員会
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
当方は著述業やテクニカルライターではないため、誤字・脱字・変換ミス・表
現欠乏などには、平にご容赦願います。
なお、記事に重大な誤りがある場合、叱咤と罵声と共に委員会まで突きつけて
いただくと幸いに思います。
バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/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
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
＜えでぃた〜ず・る〜む＞
ご無沙汰しております、ばんばんです。
現在は退院して自宅で静養しています。10月から仕事にも復帰できるので、
少しずつ体を慣らしています。また久しぶりにメールマガジンの原稿執筆も再
開しました。これからもよろしくお願いします。
メールマガジンを作るということも、ある種のリハビリになるのではないか
という私独自の見解から、無謀にも次回からまた１人で配信することになりま
した。ご迷惑をおかけするかもしれませんが、忍耐と寛容でお読みください。
また、臨時制作委員会には、言葉で尽くせない感謝を表します。本当に留守
中の配信、ご苦労様でした。
病気のことやリハビリについては、折々このコラムでご紹介します。今後も
引き続きメールマガジンのご愛読をお願いします。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002-2003 www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
最新更新日 2003/9/30
Copyright(C) 2002-3003 banban@scollabo.com