(cache) javascriptはじめました - 3限目日付と時間の表示その2

2008-07-28

■javascriptはじめました - 3限目日付と時間の表示その2

こんばんは。つい先日まで「java」と「javascript」は同じものだと思っていたタケルンバです。

「javascript」を略したものが「java」だと思っていたんだなあ。みつを

です。まったく似て非なるモノだとは。実にややこしいですなあ。名前は似てるのに。「五十さん」と「五十嵐さん」くらい違うとはねえ。……例えが悪いな。同じモノだと思っていたヤツは反省するように。……反省します。まずオレが。

Excelの関数をイメージするとわかりやすい

今回は2限目の日付・時間を続けてみる。ちょっといじり足りないのと、わからんことがあるので。

今、何時？2

これだが、

<script type="text/javascript">
var whattime = function() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth()+1;
  var day = now.getDate();
  var hh = now.getHours();
  var mm = now.getMinutes();
  var msg = "現在" + year + "年" + month + "月" + day + "日";
  msg += hh + "時" + mm +"分です。" ;
  document.getElementById("click_here").innerHTML = msg;

};
</script>

こうなってる。で、まあそんな知識はなくてもなんとなく構造的に「年とか月とかの情報をまとめて、組成する指示になっているんだろうなあ」というのは推測できるわけですよ。「getFullYear」「getMonth」「getDate」「getHours」「getMinutes」って言葉がありますから。そういう情報をgetするんだろうなあと。FullYearゲットだぜ！（ポケモン的に）

で、この話はExcelに置き換えると非常にわかりやすいわけで。日常的に書類をExcelで作成する身には、このあたりの考え方はわかる。Excelでも似たようなことを関数で処理するからね。

例えば今日の日付をExcelで出すときは「TODAY 関数」を使うわけですよ。

=TODAY()

って入れる。そうすると、そのセルにはその日の日付が出されるわけですな。

2008/7/28

と。

で、この情報から年・月・日の情報を抜き出す場合は、それぞれ「YEAR関数」「MONTH関数」「DAY関数」を使う。TODAY 関数をA1のセルに入れれば、それぞれの関数をA1に参照させるだけ。

=YEAR(A1)

=MONTH(A1)

=DAY(A1)

こうすると、

2008

7

28

となるわけよね。

  var msg = "現在" + year + "年" + month + "月" + day + "日";
  msg += hh + "時" + mm +"分です。" ;

ここも表示のさせ方と考えるとわかりやすい。それぞれの数字に「年」とか「分です」とかをつけることで「現在 2008年 7月28日1時56分です。」と表示させようと。これもExcelでよくやること。Excelだと各セルの情報を「&」でくっつけて、「"」で表示させたい文とかを囲むのよね。

例えばB1に「=YEAR(A1)」、B2に「=MONTH(A1)」、B3に「=DAY(A1)」と入力し、他のセルに次のように入力。

=B1&"年"&B2&"月"&B3&"日です。"

そうすると、

2008年 7月28日です。

ってなるわけですな。こういう原理と理解しました。ふむふむ。

こういう流れ。これをjavascript的に処理すると、ああいう構文になると。

getMonthの「+1」の意味は？

しかし、だとするとひとつわからない点がある。

  var year = now.getFullYear();
  var month = now.getMonth()+1;
  var day = now.getDate();
  var hh = now.getHours();
  var mm = now.getMinutes();

なんで「now.getMonth」だけ「+1」なの？　他はいいの？　年・日・時・分はいいのに、なんで月だけ？

ここに引っかかった。試しにこの「+1」を外してみる。

  var month = now.getMonth();

で、アップしたのがこれ。

今、何時？3

ありゃ、表示が1ヶ月手前になってる。「+1」じゃないと都合が悪いのか。……なんでや。

ググったら答えがあった。

404 Not Found

getMonth は0～11の１つ少ない数値で月を返すため使用するときは+1する必要がある。
404 Not Found

あ、なるほど、そういうことか。

1月 → 0

2月 → 1

3月 → 2

4月 → 3

5月 → 4

6月 → 5

7月 → 6

8月 → 7

9月 → 8

10月 → 9

11月 → 10

12月 → 11

ってことか。月を数えるときに「1、2、3……」じゃなくて、「0、1、2……」だから「+1」するってことね。うむ、納得。

時差表示もできるはず

後ろに「+1」をつけることで答えを調整できる。ということは、意図的にそれを使うことで利用する方法もあるってこった。例えばこういう方法もあるわけだな。

  var hh = now.getHours();+1

時間に「+1」を加えてみる。ということは1時間多く表示されるはず。

今、何時？4

でけた。確かに「+1」。プラス1時間。ということは、ここをいじくると時差に応用できるわけだ。

<script type="text/javascript">
var whattime = function() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth()+1;
  var day = now.getDate();
  var hh = now.getHours();-1
  var mm = now.getMinutes();
  var msg = "現在中国は" + year + "年" + month + "月" + day + "日";
  msg += hh + "時" + mm +"分です。" ;
  document.getElementById("click_here").innerHTML = msg;

};
</script>

時間を「-1」にする。こうするとマイナス1時間になるので、日本と時差1時間の国、つまり中国とかの時間が表示されることになる。

今、何時？5

イエス！　なるほど、ここで調整できるのね。ということは「-2」にすればタイとかになる。ここで時差をプラマイ調整すれば如何様にもなるわけね。

これをさらに応用し、これを並べると各地の時間を表示させたりもできると。

<script type="text/javascript">
var whattime = function() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth()+1;
  var day = now.getDate();
  var hh = now.getHours();
  var mm = now.getMinutes();
  var msg = "現在東京は" + year + "年" + month + "月" + day + "日";
  msg += hh + "時" + mm +"分です。" ;
  msg += "北京は"
  msg += hh-1 + "時" + mm +"分。" ;
  msg += "バンコクは"
  msg += hh-2 + "時" + mm +"分です。" ;
  document.getElementById("click_here").innerHTML = msg;

};
</script>

「とりあえずコピペして、後ろにくっつけとけばできるんじゃね？」と思い、いろいろ試してみた結果、なんとかこの方法で表示させることに成功。……見る人が見たら洗練さのかけらもないんだろうな。ま、素人作業ということで許してちょうだい。

今、何時？6

へっへっへ、大成功。ほぉおお、こういうことができるのか。なるほどね。

ただ、昭和世代としては「今、何時？」と聞かれるとこう答えてしまいたくなる。

今、何時？7

「勝手にシンドバッド」。

javascriptはじめました - 2限目 - finalventの日記

お題は、今、何時？　（そうねだいたいね）
javascriptはじめました - 2限目 - finalventの日記

やろうと思っていたネタを先にやられてしまって、ちょっと悔しい。さすがです。＞id:finalvent氏

<script type="text/javascript">
function southern1() {
  alert("そうねだいたいねー♪");
}
function southern2() {
  alert("ちょっと待っててぇー♪");
}
function southern3() {
  alert("まーだ早いー♪");
}
</script>

<TITLE>今、何時？7</TITLE>
</HEAD>
<BODY>
<h1>みんなでせーの！</h1>
<button onclick="southern1();">今、何時？</button>
<button onclick="southern2();">今、何時？</button>
<button onclick="southern3();">今、何時？</button>
</BODY>

ただ、これをやるのは意外と苦労したわけで。

複数のボタンを置くには？

これが思いつかなかった。よくわからんかった。例によってコピペで並べてみたが、それだとエラーが出る。3つのボタンの設定をそれぞれにしないとうまくいかん。

ただ、これを見てわかった。

404 Not Found

処理の中身として、function を用いて自作した関数を指定することで、イベント処理を簡潔に記述できます。

以下の例では、change_label という関数を用意しておき、それをクリック時の処理として指定しています。
404 Not Found

function？　そういやいつも出てくるなあ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lamg="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=urf-8"/>
<script type="text/javascript">
function hello() {
  alert("Hello, world!");
}
</script>
<title>Hello, world!"</title>
</head>

<body>
<h1>Hello, world!</h1>
<button onclick="hello();">ここをクリック</button>
</body>
</html>

あ、あった。

function hello() {

こいつか！　てっきり「hello」という関数かと思っていたけど、これは定義できるのか、指定できるのか。ということは、ここで名前をつけて指定して、それを「button onclick="○○○○」ってやりゃあいいわけだ。……うむうむ納得。

ということは、これをまたまた応用すればこういうこともできると。

<script type="text/javascript">
function x1() {
  alert("感じてみろー♪");
}
function x2() {
  alert("叫んでみろー♪");
}
function x3() {
  alert("すべて脱ぎ捨てろー♪");
}
function x4() {
  alert("心燃やせー♪");
}

</script>

<TITLE>X</TITLE>
</HEAD>
<BODY>
<h1>おまえら裸になっちまえ！</h1>
<button onclick="x1();">エーックス！</button>
<button onclick="x2();">エーックス！</button>
<button onclick="x3();">エーックス！</button>
<button onclick="x1();">エーックス！</button>
<button onclick="x2();">エーックス！</button>
<button onclick="x4();">エーックス！</button>
</BODY>