(旧姓)タケルンバ卿日記避難所

はてなダイアリーからの避難所

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

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

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

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

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

今回は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();

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

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

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

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時間多く表示されるはず。

でけた。確かに「+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時間の国、つまり中国とかの時間が表示されることになる。

エス! なるほど、ここで調整できるのね。ということは「-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>

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

へっへっへ、大成功。ほぉおお、こういうことができるのか。なるほどね。
ただ、昭和世代としては「今、何時?」と聞かれるとこう答えてしまいたくなる。

勝手にシンドバッド」。

お題は、今、何時?  (そうねだいたいね)

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つのボタンの設定をそれぞれにしないとうまくいかん。
ただ、これを見てわかった。

処理の中身として、function を用いて自作した関数を指定することで、イベント処理を簡潔に記述できます。
以下の例では、change_label という関数を用意しておき、それをクリック時の処理として指定しています。

http://www.ime.cmc.osaka-u.ac.jp/~kiyo/class/Katsuyou/2006/JavaScript/chap2.html

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>

ボタンを増やしても、2回使うものはそれを指定すればよく、新たに書く必要はねえと。そういうわけね。なるほど。このパターンは応用ができて良さげだ。こりゃいいこと覚えた。
今回もいろいろわかって、なかなかようございました。3限目もおしまい。