あんな事がしたいをカタチに－ホームページの作り方・ウェブサイト作成制作ウェブ造は、ホームページ簡単作成・制作辞典

JavaScript解説

日付時刻表示 JavaScript

サイト内検索

カスタム検索

今日の日付と時間を表示させたい！『JavaScript』

日付時刻を表示　JavaScript

　3.Javaのアナログ時計及びデジタル時計表示プログラムの読み込みに多少時間を要し、訪問直後、画面更新直後など「一時的に」マウスホイールが効かなくなる場合があります。

JavaScriptによる日付時刻表示／日時表示

　ホームページに日付と時刻を24時間表示させてみましょう。

1.JavaScript / DHTML デジタル時計
現在日付時刻	訪問日時

このデジタル時計を表示するには、ブラウザの設定でJavaScriptが有効になっている必要があります。
DHTML / Dynamic HTMLとは
2.ECMAScript / JavaScript & SVG アナログ時計
このアナログ時計を表示するにはSVG対応ブラウザやプラグイン、対応ビューワ等が必要です。この時計にはECMAScriptを使用の為、ブラウザ設定でJavaScriptが有効になっている必要があります。 SVG / Scalable Vector Graphicsとは
3.Java Applet アナログ時計 & デジタル時計
iframe未対応ブラウザ用リンク[<a href="http://www.webzoit.net/hp/it/internet/homepage/script/java/date/analog_clock.html">【Java Applet】アナログ時計＆デジタル時計</a>] Java Appletとはこのアナログ時計及びデジタル時計を表示するにはJava実行環境JRE/Java Runtime Environment、各種HTML/XHTMLタグに対応するブラウザが必要です。

　1.のデジタル時計はJavaScriptとCSS、2.のアナログ時計はJavaScript/ECMAScriptとSVGのセットをSVGタグでHTML/XHTMLファイルに直接埋め込み、3.のアナログ時計及びデジタル時計はJavaScriptではなくJavaアプリケーションを各種HTMLタグ/XHTMLタグで埋め込んでいます。

　よって全ての環境でこれら全てのプログラムの実行状態を確認できるとは限りません。

　尚、3.のJavaアプリケーションでも2.のSVGサンプルと同程度のクォリティを持つ時計を作成することもできますが、圧倒的にSVGの方が。。。

JavaScriptで日付と時間を表示するには

　ここでは1.の『現在日付時刻』及び『訪問日時』を表示するJavaScriptのコーディング方法について見ていきます。

　JavaScriptの設定と実行方法にはいくつかの種類がありますが、ここでは『現在日付時刻』は外部ファイル、『訪問日時』は<body></body>部に直接コーディングによる方法を使って実装してみます。

　リアルな世界の実用的なものとしての時計とは違ってウェブ上の時計はページを開いた時に動いていればよいので時計が動き始めるのは電池を入れた時ではなく、まさにページを開いた時でOKということになります。

　刻一刻と時を刻み現在日付時刻をリアルタイムに表示するデジタル時計やアナログ時計は、ページが読み込まれたと同時に動き出し、ページを移動したり、タブを閉じた時やブラウザを終了するその時まで黙々と時に愛くるしく健気なまでに？時を刻み続けます。

　一方、訪問日時・アクセス日時(や時に更新日時など)の表示は、読み込まれたその瞬間そのものが一世一代の一大イベントであり、存在意義をいかんなく発揮すべき並々ならぬ貴重なビックチャンスであるそのタイミングをサボることなく几帳面にまじめに正確につかみ取り、それだけの偉業を成し遂げた割には？その日時を記録するだけして後は、なんともあっけなく終了します。

現在日付時刻と訪問日時の相違点・ポイント

　この現在日付時刻表示アプリケーションと訪問日時表示アプリケーションの何が違うかと言えば、実はJavaScriptのタイマー関数またはインターバル設定関数を利用するかしないかだけの差です。

　前者は1秒ごとのタイマーまたはインターバルを設定、後者は、ただ、その時、その瞬間の日時を記録するだけということです。

JavaScriptの日時表示関数の呼び出し／ファンクションコール

　その瞬間の日時を書き込む訪問日時のサンプルプログラムでは関数も何も定義せずにそのままコードを書いているのでページが読み込まれるだけでソースが一行ずつ読まれて結果的に日時が表示されます。

　一方、リアルタイム表示の方は、モニターをえいっ！やぁ～！とぉ～！！とばかりに揺らしてみたり、叩いてみたりしたところでモニターが壊れることはあっても時計が動くはずもなく、こうした時計を動かす為には、JavaScriptコードが、ある種自発的に関数をコールするように仕込むか、イベントハンドラを利用してコールするといった方法によってJavaScriptの関数を呼ぶ必要があります。

　この日付時刻表示アプリの場合、どちらの方法を利用しても同じ結果を得ることができますが、アプリケーションによっては使い分ける必要が出てくることもあるでしょう。

日付と時間を表示するJavaScriptコーディング

　ここでは『現在日付時刻』は外部ファイル、『訪問日時』はページ内に直接JavaScriptコードが書かれているわけですが、実際にどうなっているのかプログラムの中身を見ていきましょう。

【共通の手順】

・HTML/XHTMLファイルにJavaScript用metaタグ追加
・script開始タグのtype属性に値"text/javascript"を指定

<script type="text/javascript">
</script>

【JavaScript専用外部ファイル設定手順】
[現在日時／リアルタイム表示サンプル]

A1.JavaScriptの外部ファイル作成
A2.HTML/XHTMLファイルで外部ファイルの読み込み設定
A3.JavaScriptの関数を呼ぶ
A3-1.JavaScriptコード先頭でタイマーを使って関数をコール
A3-2.body開始タグにイベント属性onLoadを設定、関数を呼ぶ

<script type="text/javascript" src=""></script>

*script開始タグのsrc属性にJavaScript外部ファイルパスを指定
*src属性とtype属性の設定順序はどちらが先でもOK
*A3-1は後段のサンプルソースコード参照

【HTML/XHTMLファイル内に直接JavaScriptコードを記述する手順】
[訪問日時表示サンプル]

B1.script開始タグと終了タグ内にJavaScriptコードを記述

<body>
...
<script type="text/javascript">
// ここにJavaScriptコードを記述
</script>
...
</body>

ちなみにtype属性ではなくlanguage属性による設定は非推奨です。
<script src="" language="JavaScript"></script>(非推奨)

　それではサンプルソースファイルを見ていきます。

　まず、JavaScriptの専用外部ファイルで実装する現在日付時刻表示アプリのプログラムは次のようになり、これにお好きな名前を付けてを拡張子は(何でもよいですが、一般には).js(ここではdatetime.js)として保存します。

◆JavaScript専用外部ファイルdatetime.js

timerID=setTimeout("お好きな関数名()",1000);
function お好きな関数名(){
  clearTimeout(timerID);
  weeks = new Array("日","月","火","水","木","金","土");
  today = new Date();
  y = today.getFullYear();
  m = today.getMonth() + 1; if(m < 10) m = "0" + m;
  d = today.getDate(); if(d < 10) d = "0" + d;
  w = weeks[today.getDay()];

  h = today.getHours();
  if(h < 10) h = "0" + h;
  if (h == 24) h = "00";
  s = today.getMinutes();
  if(s < 10) s = "0" + s; else if(s=="60") s="00";
  sec = today.getSeconds();
  if(sec < 10) sec="0"+sec; else if(sec=="60") sec="00";

  document.form1.text1.value=(y+'/'+m+'/'+d+'('+w+') '+h+':'+s+':'+sec);
  timerID = setTimeout("お好きな関数名()",1000);
}

　このdatetime.jsをHTML/XHTMLファイルに読み込みます。

<script type="text/javascript" src="datetime.js"></script>

　次にHTML/XHTMLファイル内に直接記述することにした訪問日付表示アプリのプログラムは次のようになります。

◆<body></body>内に直接scriptを記述する場合

　関数を使わずコードを書いているのでページが読み込まれると同時に一行ずつ順に実行されdocument.writeの結果が表示されます。

　早速この内容について見てみましょう。

【外部ファイル】

[1行め]>>  timerID=setTimeout("お好きな関数名()",1000);

読み込み時に自動的に実行されるようにタイマー関数によって日時出力関数をコール
この代わりに前述の[A3-2.]の設定でも可

[3行め]>>  clearTimeout(timerID);

関数内処理が完了するまで念のためタイマーを解除

[最終行]>>  timerID = setTimeout("お好きな関数名()",1000);

関数内処理が完了したためタイマーを再設定

【共通】

today/weeks/today/y/m/d/w/h/s/secは変数(変数名は任意)

newは後に続くオブジェクトのインスタンスを新規作成する演算子

Date()/Array()/getFullYear()/getMonth()/getDate()/getDay()
getHours()/getMinutes()/getSeconds()/write()
はJavaScript組み込み関数

if() は条件分岐

; (セミコロン)はステートメント(文)の区切り

. (ドット・ピリオド)はオブジェクトの子要素・メソッド・プロパティ参照用接続詞

= (イコール1つ)は代入演算子

== (イコール2つ)は比較演算子

+ は(ここでは)文字列結合演算子

>> document.write(y+'/'+m+'/'+d+'('+w+') '+h+':'+s+':'+sec);

ここにあるスラッシュとコロンは日付と時間のセパレータとしての文字列

シングルクォートは固定文字列の前後を括る

ダブルクォートは固定文字列または変数の前後を括る

documentは、JavaScript固有のオブジェクトでスクリプトが書かれている、またはスクリプトを読み込んでいる文書(HTML/XHTMLファイル)

today = new Date();

として「今日の日付」を変数todayに代入

この変数[today]を元に日付や時刻を取り出していきます。

例えば[h=today.getHours();]とすれば時間が取得できることになっています。

weeks=new Array("日","月","火","水","木","金","土");
w=weeks[today.getDay()];

『Array()』は配列関数(構成要素はカンマで区切り)

配列内の各要素はブラケット[ ]を使って添え字付きで参照します。
例：weeks[ 0 ],weeks[ 1 ],weeks[ 2 ]...etc.

getDay( ) 関数は曜日を日曜日から数えた番号[0～6]を取得する関数。
その数値を使って w = weeks[today.getDay()]; とすると配列変数[weeks]の何番目という結果が得られ、[weeks]の中身は0番目が"日"、6番目が"土"と判別でき、これを表示に使用します。

よって変数 w には、今日の曜日が入ります。

y=today.getFullYear();
m=today.getMonth() + 1; if(m < 10) m="0" + m;
d=today.getDate(); if(d < 10) d="0" + d;

『getFullYear()』は西暦4桁を取得するJavaScript固有の組み込み関数
※[getFullYear()]は、IEやNetscapeのバージョン３以前は未対応。
※[getYear()]は、西暦から1900を引いた値を表示する関数。
　2000年以降は、ブラウザによって対応が分かれ西暦を返すものと1900を引いた値を返すものがあります。
※全てのブラウザに対応する場合には、ブラウザによって分岐が必要になります。

『getMonth()』は、月の値を取得するJavaScript固有の組み込み関数
※[getMonth()]は、0～11を返し、通常の月から1引いた値となります。
　サンプルは、[getMonth()+1]と１を足して実際の月と数字を合わせています。

『getDate()』は日の値を取得するJavaScript固有の組み込み関数

半角の『＋』は文字を結合する式(この場合数字も文字とみなされます。
→(例 "0"+"1"の結果は"01")

『getMonth()』と『getDate()』ではそれぞれ1～9の前に0を付加し
1桁の月と日の場合には[01]のように2桁になるよう調整しています。

h=today.getHours(); if(h < 10) h="0" + h; if (h == 24) h="00";
s=today.getMinutes() + 1; if(s < 10) s="0" + s;

『getHours()』は時間を取得するJavaScript固有の組み込み関数
if()文を使用して1～9なら『0』を付加して2桁に調整
『24時の場合』は『00』としています。

『getMinutes()』は分を取得するJavaScript固有の組み込み関数
if()文を使用して1～9なら『0』を付加して2桁に調整

document.write(y+'/'+m+'/'+d+'('+w+') '+h+':'+s+':'+sec);

『write()』は『出力関数』
少しごちゃごちゃしてわかりにくいですが、変数以外のスラッシュや
カッコ、コロンをシングルクォートで括って、プラス記号は文字を連結
しています。
『y,m,d,w,h,s,sec』にはそれぞれ前に取得・加工した値が入ります。
『"年","月"･･･』等は『年,月･･･』とそれぞれ表示されます。

　いかがですか？だんだん「script(スクリプト)」というものに慣れてきましたか？

　あせらずゆっくり取り組んでくださいね。

次は

タイマーを使いたい！

ウェブ造ホームページの作り方・ウェブサイト作成制作

2004-2012