何故にー２なのか

質問

<script language="JavaScript"><!--
baseURL = "image/";
ext = ".gif";
dt = new Date();
h = "0" + dt.getHours();
h = h.substring(h.length-2,h.length);
m = "0" + dt.getMinutes();
m = m.substring(m.length-2,m.length);
document.write("<img src='"+baseURL+h.charAt(0)+ext+"'>");
document.write("<img src='"+baseURL+h.charAt(1)+ext+"'>");
document.write("<img src='"+baseURL+"hour.gif'>"); //　時
document.write("<img src='"+baseURL+m.charAt(0)+ext+"'>");
document.write("<img src='"+baseURL+m.charAt(1)+ext+"'>");
document.write("<img src='"+baseURL+"minute.gif'>"); //　分
// --></script>

本当に質問ばかりですみません。
自分でも一応考えに考えて、それでも分からないからここに書いているという事だけはご理解して頂きたいと思う次第です。
それで、肝心な質問は、
h = "0" + dt.getHours();
h = h.substring(h.length-2,h.length); と
m = "0" + dt.getMinutes();
m = m.substring(m.length-2,m.length); の
substringの部分で
h.lengthとm.lengthにそれぞれー２している事です。
getHours()メソッドからは、０～２３の値が
getMinutes()メソッドからは、０～５９の値が得られますよね。
という事は、h.lengthは２４、m.lengthは６０となるんでしょうか。
絵は０から９までしかありません。
ちなみにsubstring(△，▲)メソッドは△から▲までの文字列を返します。
時計の場合時間を表す１０の桁は１か２．
同じく分を表す１０の桁は１～５ですよね。
そこで何故ー２をしなければいけないのでしょうか。
これがどういう意味を現しているのか。
謎が謎を呼んで、推理しているような気分ですけど、真面目に考えています。
どなたかこのソースコードの意味が分かる方がいましたら、アドバイスをどうぞ宜しくお願い致します。

回答No.1

nda23 · ベストアンサー

結論から言うと、時分秒を必ず２桁の文字で表すためです。
(1) h = "0" + dt.getHours();
　h の内容は "00","01","02",・・・"010","011",・・・"022","023"の
　いずれかになりますね。"00"～"09"はこのままでよいのですが、
　"010"以降は右の２文字、言い換えると２文字目から後ろ全部が
　必要ということです。
(2) h = h.substring(h.length-2,h.length);
　h.length は文字数数（値ではない）を表します。
　もし、"00"～"09"ならlength = 2 ですから、先の式は次のように
　なります。h = h.substring(0,2);
　つまり、先頭(0オリジンなので）から最後までの部分列、即ち、
　全体を取り出すことになります。"010"～"023"ではlength=3に
　なります。式は h = h.substring(1,3); になり、２文字目から
　最後までの部分列ということになります。
(3)分と秒も同じ理屈です。
(4)以下のようになっていれば分かり易かったですか？
　h = dt.getHours(); //時刻を取り出す
　if ( h < 10 ) {
　　　h = "0" + h; //10未満なら前ゼロを付ける
　}
　else {
　　　h = "" + h; //10以上ならそのまま文字列化する
　}

お礼

凄く明快なアドバイスを頂き、ありがとうございます。
ただ、頭の部分がまだ付いていってないのでじっくり何度も読み返しながら理解していこうと思っています。
まず何故時間の変数hに０を足すのか、と思ったんですけどダブルクォーテーションで括られているので文字扱いになるんですよね。
それで０～９までは０が頭にくるためにh.lengthが２になるから、substring(2-2, 2)でその結果h.substring(0, 2)になり、charAt()メソッドによって最初の０番目＝１文字目から２文字目までが返されると。
だから０９になるまでは最初が０になるという事ですね。鸚鵡返しみたいですけど。
それで、１０～２３までになると今度はh.lengthが３になり、h.substring(3-2, 3)で結果的にh.substring(1, 3)だから２文字目から３文字目が返されると。それで再びcharAt()メソッドにより０番目＝２文字目から３文字目までが返される事になるんですね。
でも、まだ疑問があります。
h = "0" + dt.getHours();により、"0"が追加されたために時間の概念が無くなってしまうのではないですか。
そうはならないですね。そうはならない。
これは、分や秒でも同じ事であるので、省略していいと。
こんな解釈でいいんですかね。
(４)のソースコードはよく理解できました。ただし、グラフィックを使うのには適さないということですね。
これで、本当に完璧に理解しているのか。
一度こんがらがると中々収拾がつかなくなるバカな頭なために本当に申し訳ありません。
数式の公式とかも変なところで躓いてしまうんですよね、全く。
プログラマーには向いていない頭かもしれませんね。
最後にsubstring()メソッドで1番目から2番目を返した場合、charAt(0)が1番目の文字に当たるわけですよね。
相当悩みながら書いたので、ここまで書くのに随分時間が取られました。
ここで書いた文章があっていれば、理解した。そうでなければ、バカは死ねって感じですかね。
本当にnda23さんには感謝します。解釈が間違いなく理解できていた場合はですけどね。

回答No.3

nda23

ちょっと間違えました。

h = "" + dt.getHours(); //仮に10時なら h は文字"10"が設定される
h = h + 2; //ｈは"102"になる。（文字の結合）

少し補足すると、おそらくグラフィックの０～９があって、それぞれ
xxx0、xxx1、xxx2 というURLになっているのでしょう。それで、
文字列に対応したイメージが表示されるということだと思います。

お礼

修正のレス、ありがとうございます。
やはりnda23さんぐらいになると、どういう仕組みか分かってしまうんですね。
凄いの一言です。

回答No.2

nda23

だいたい合ってます。

>"0"が追加されたために時間の概念が無くなってしまうのではないですか。
DateオブジェクトからgetHours()メソッドで時間を取り出した時点で
0～23の単なる整数値になり、"0"を付けたために、整数から文字列に
なったと解釈しているなら正解です。

h = dt.getHours(); //仮に10時なら h は整数値10が設定される
h = h + 2; //ｈは 12 になる。（数値としての加算）

h = "" + dt.getHours(); //仮に12時なら h は文字"12"が設定される
h = h + 2; //ｈは"102"になる。（文字の結合）

>グラフィックを使うのには適さないということですね
？？？
別にどう書いても、結果が正しければよいのであって、「適す」とか
「適さない」という話ではないと思いますが・・・
単にソース行を短くしただけじゃないですか？
私なら次のように書きます。

h = dt.getHours();
h = ( h < 10 ? "0" : "" ) + h;

お礼

再度のレス、ありがとうございます。
もう1度お話が聞きたかったので、嬉しい限りです。
"0"をプラスする事により文字列になるんですね。
ここは随分考えました。そういう解釈でいいのかどうか、という点でですが。
文字の結合と言うのですね。覚えておきます。
最後のソースコードは偉く短いですね。
こんな簡単でオーケーなんですか。
？の意味とか理解しているのでソースコードの意味が分かります。
何かソースコードが読めるってのが何か嬉しいですね。