日付時間

ん～24日ぶりの　交信　ですね～(んっ?　何か?)

今回は日付と曜日を表示してみましょう。
あんまり役立たないかもしれませんが、
オブジェクト指向というものの
理解のヒントになるかもしれません。(あまりならんなぁ　ごめんちゃい)

自身もあまり理解してませんし、
詳しく解説するには長くなりすぎるでしょうから、
興味のある方は、色々調べてみてください。(んっ?　何か?)

今回は<span>～</span>の所だけがHTMLで、
他は全てJavascriptです。
今回の要点は、
配列、Dateオブジェクト、DOM、タイマー
といったところでしょうか。

以前にご紹介したHTMLを活用しまして、
<ol>オーダードリストを使用していますので、
IE6、Firefox3.5、Opera10、Chrome3.0で確認しましたが、
Firefox愛用者の方はソースをコピペすると、
数字のある行の初めに#が入りますので除いてくださいませ。

行1でyohbi『よーび』という名の配列を宣言し8つ分確保しています。
配列というのは番号の付いた入れ物的なイメージで、
数や文字などを記憶させておくときに変数というものを使いますが、
同じ扱いで番号が付いているので色々利用しやすくなりますね。
varはグローバル変数という意味で、ローカル変数の反対です。
ごめんなさい。勘違いしてました。
古いネスケでは消した部分で間違いないのですが、
IEではvarを付けようが付けまいが、
関数の外で宣言した変数は、グローバル変数で、
その中で宣言した変数はローカル変数になります。
ローカル変数は1つの関数などの中でしか通用しないものでした。
つまり他の関数などから参照しても知らないよっていわれたり、
意図しない値になってしまいます。
ちなみに、yohbi[0]のように入れ物の番号を指定します。
8つ分ですが0～7番と1つずれてる事にご注意ください。

行2でhegcan『ひーじーかん』にDateオブジェクトのデータを代入しておきます。
Dateオブジェクト〔以下Date〕と言っても唐突ですが、関数と思ってください。
Date()とおなじみのカッコが付いてますよね。
じつは関数もオブジェクトなんですけどね。
いきなり書込む(表示する)変数に代入してもいいんですが、
わかり易くする為にhidujikaにいったん各値を代入しておきます。

その行3のhidujika『ひづ(け)じか(ん)』に、
hegcanで得られた各値を足していきます。
足していきますといいましたが、最初のyohbiは文字配列(変数)です。
hegcanはオブジェクトで、
hidujikaは(数値)変数のようですが、"年"などの文字を足していますので、
全体としてローカルの文字列(文字変数)になります。
といいいますかJavascriptがそう変換します。
一見かしこいんですが、本格的な場合、逆に取り扱いにくいんですよね。
Javascriptの変数の扱いは
自身もザックリとしか理解してませんでした。(ごめんちゃい)
変数についてはまたの機会にでもと思います。

Dateの各値はパラメータという呼び名ですが、
プロパティの参照やメソッドの指定の仕方と同じ書き方で、呼び出します。
つまり．〔ドット演算子〕を用いて、パラメータを操作します。
hegcan．～で表すわけですね。
DateにはUTC(世界時)で1971年1月1日00:00:00を基準に
ミリ秒数で-100,000,000日から100,000,000日までの範囲で保持されます。
通常は地方時(日本時)でUTCを意識しなくても大丈夫です。
Dateにはプロパティはありません。
このDateはご自身のパソコンの時計から取得していますので、
どこかの時刻サーバーの値ではないことに注意してください。
つまり、ご自身の時計がずれていると、そのとおりになります。

プロパティやメソッドというのが、
オブジェクト指向言語たる所以を特徴付けていますが、
以前、関数はプログラマーの意図した動作をするように、
単純な命令を束ねたようなものといいました。(いったかなぁ?　ごめんちゃい)
オブジェクト指向な言語になるとザックリとですが、
オブジェクトが関数に対応し、オブジェクトは関数のみでなく、
変数などもひとかたまりに取り扱うことが出来ます。
つまり、目に見えるオブジェクト(物)は形があり、色など性質があります。
すなわち、オブジェクトのプロパティ(性質)です。
同値ではありませんがメンバ(要素)と言ったりもします。
そして、そのプロパティをどうするかを決めるのがメソッドになります。
今回の場合、hegcanオブジェクトには、パラメータがあり、
月のパラメータを取り出すメソッドが、getMonth()です。
これは0～11の値を返しますので＋1としているわけです。
その他のメソッドはもうお分かりですよね。
ほかにミリ秒をとりだすgetMilliseconds()などもあります。

DOMというのはDocument Object Modelの略で
静的なHTMLを書き換えたりすることが出来ます。
(あんまり詳しくは聞かないでね～)
行4でそれをやってるんですが、
その下<span>タグ間には何も書かれていません。
しかし、行4でそこにhidujikaを表示してねっとすると、
実際のブラウザ上には日付などが表示されています。
つまり、元の部分を書き換えたわけです。
DOMって何か大げさな名前ですが、
まあ、やってることは単純ですよね。

最後に行5です。タイマー処理ですよね。
setInterval()で関数を1000ミリ秒ごとに呼び出します。


例


ソース

---

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

1. var yohbi = ["日","月","火","水","木","金","土","曜日"];


function hiduketojikan(){

2.  hegcan = new Date();



3.  hidujika = hegcan.getFullYear() + "年"
      + (hegcan.getMonth() + 1) + "月"
      + hegcan.getDate() + "日("
      + yohbi[hegcan.getDay()] + yohbi[7] +")"
      + hegcan.getHours() + "時"
      + hegcan.getMinutes() + "分"
      + hegcan.getSeconds() + "秒";



4.  document.getElementById("yobegcan").innerHTML = hidujika;
   }
   //--></script>
   
<span id="yobegcan"></span>
<script type="text/javascript"><!--

5. setInterval("hiduketojikan()",1000);
   //--></script>

---

ソース自体は短いのに、けっこう説明が長いなぁ～(くどい?)
アニメーションGIFがないとさみしぃ～なぁ～

タグ：日付 曜日 オブジェクト指向 JavaScript HTML 配列 Dateオブジェクト DOM タイマー オーダードリスト IE Firefox Opera Google Chrome 変数 文字変数 グローバル変数 ローカル変数 パラメータ プロパティ メソッド ドット演算子 時刻サーバー 関数 メンバ ブラウザ