気の向くままに辿るIT/ICT/IoT
webzoit.net
JavaScript

日付時刻表示 JavaScript

ウェブ造ホーム前へ次へ
サイト内検索
カスタム検索
今日の日付と時間を表示させたい!『JavaScript』

日付時刻を表示 JavaScript

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

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

JavaScript日付時刻表示サンプル

1.JavaScript / DHTML デジタル時計
現在日付時刻訪問日時
DHTML / Dynamic HTMLとは
2.JavaScript & SVG アナログ時計
SVG Analog Clock webzoit XII III VI IX
このアナログ時計を表示するにはSVG対応ブラウザやプラグイン、対応ビューワ等が必要です。

これらの時計は全てJavaScriptを使用している為、ブラウザ設定でJavaScriptが有効になっている必要があります。

JavaScriptデジタル時計の作り方

 1.の『現在日付時刻』及び『訪問日時』を表示するデジタル時計って、JavaScriptでは、一体どうやってコーディングするのでしょうか?

ちなみに Java Applet 日付時刻表示サンプル

3.Java Applet アナログ時計 & デジタル時計
Java Appletの時計
このアナログ時計及びデジタル時計を表示するにはJava実行環境JRE/Java Runtime Environment、各種HTML/XHTMLタグに対応するブラウザが必要です。

 1.のデジタル時計はJavaScriptとCSS、2.のアナログ時計はJavaScriptと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を記述する場合

<script type="text/javascript">
<!--
    today=new Date();
    weeks=new Array("日","月","火","水","木","金","土");
    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;
    sec=today.getSeconds();
    if(sec=="59") sec="00";

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

//-->
</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のバージョン3以前は未対応。
※[getYear()]は、西暦から1900を引いた値を表示する関数。
 2000年以降は、ブラウザによって対応が分かれ西暦を返すものと1900を引いた値を返すものがあります。
※全てのブラウザに対応する場合には、ブラウザによって分岐が必要になります。

『getMonth()』は、月の値を取得するJavaScript固有の組み込み関数
※[getMonth()]は、0~11を返し、通常の月から1引いた値となります。
 サンプルは、[getMonth()+1]と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(スクリプト)」というものに慣れてきましたか?

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

次は

タイマーを使いたい!

ECMAScript ECMA-262 第5.1版ベースのJavaScript

【ECMAScript / ECMA-262 Edition 5.1 訳】

 尚、下記リンクは、多くの場合、ページ情報量の過多を回避する為、場合によって更に章、節、句ごとに、任意に細分化し、ネストしている部分があります。

旧来掲載のJavaScript

ウェブ造ホーム前へ次へ