javascriptで日付と曜日を表示させる方法
PROGRAMMING
はじめに
自分のサイトに日付と曜日がわかるシステムを実装させたかったので、色々な本やサイトを参考にして表示することができました。我流でなんとかやった部分は大きいですが、今回自分がどんな感じで実装したのかをまとめていこうと思います。
HTMLエディタにjavascriptをコーディングするには
まず基本的なことから説明しますと、ホームページとかで文字などが表示されていますが、これはHTMLというマークアップ言語を使って表示させています（表題の文字列に表題ですと印をつけたり、段落の文字列に段落の印をつけたりできます）。もちろんjavascriptとは一切関係がありませんがjavascriptをHTMLのなかにコーディングすることができます。この際もここは「コーディングする場所」ですよと印を作らなくてはいけません。その印はスクリプトタグを使います。
例）
<script>この中にコーディングする</script>
こんな風にHTMLのなかにコーディングできる場所を作ることができます。今回はこのスクリプトタグの中にコーディングしていきたいと思います。
現在の日付（時刻）を変数に入れる
最初に現在の日付を変数に入れる作業から始まります。
実際のコーディングでは、
var now = new Date();
このようにして現在の時刻をnowという変数の中にしまうことができます。実際にvar nowをブラウザに表示して現在の時刻を表示することもできます。これでコーディングが終わってもいいのですが、自分のサイトのサイドバーのように月、日にち、曜日と一つずつ表示させたい場合もう一手間作業が必要になります。
月と日にちを表示させる
月を表示させる
次に何月であるかを表示させるにはnow.getMonth関数が必要になります。実際にコーディングしてみると、
var month = (“0” + (now.getMonth()+1)).slice(-2)
になります。
一つずつ説明していくと、var monthという変数の中に今が何月かを入れます。
now.getMonth()で現在の月が数字で表示されます。ここで注意しなくてはいけないのが、例えば現在が一月の場合now.getMonthで呼び出される数字は0になります。つまり0から順番にカウントされていくのでnow.getMonth()の隣に１を足す必要があります。
slice(-2)や最初の”0”は入れなくてもいいものですが、一月から九月までの表示を01や09と表示させたい場合は必要になっていきます。簡単に説明していくと、slice(-2)とは下二桁を表示させるときに使います。つまり、九月の場合var monthという変数のなかには09という数字が入ることになります。一方12月の場合は012という数字からslice(-2)の活用で12という数字が入ることになります。この結果現在の月を呼び出せます。
日にちを表示させる
今回も月を表示させる方法と変わらないので説明が被ってしまいますが、
var day = (“0” + now.getDate()).slice(-2)
こんな風にコーディングできます。
var dayのなかに現在の日時を表示していきます。月の時と違うのはnow.getDate関数に+1が入らないことです。あとは月を表示させたい時のコードと変わらないです。
曜日を表示させる
実際に曜日を表示させるには
var week = (now.getDay())
を使います。
var weekという変数の中にnow.getDay()関数を入れることで、各曜日が数値として表示されます。注意するのは数値として表示されることです。
それぞれの数値は０から６まであり、０が日曜日、１が月曜日、２が火曜日、３が水曜日、４が木曜日、５が金曜日、６が土曜日に該当します。
自分はif文を使って曜日に変換しました。
if(week == 0){
week = “Sunday”
}else if(week == 1){
week = “Monday”
}else if(week == 2){
week = “Tuesday”
}else if(week == 3){
week = “Wednesday”
}else if(week == 4){
week = “Thursday”
}else if(week == 5){
week = “Friday”
}else if(week == 6){
week = “Saturday”
}
こんな感じで一個づつコーディングさせていきましたが、もっと簡潔な方法があると思います。
日付を表示させる
実際に日付を表示させるには月や日付、曜日の変数をそれぞれ文字として表示させる必要があります。そこで使われるのがdocument.write関数になります。
document.write(“<h1>” + month + “.” + day + ” ” + “(” + week + “)” + “</h1>”)
かっこの中にそれぞれ変数名を入れて”<h1>”タグや”</h1>”を挟む必要があります。
まとめ
実際に説明をしながら進めていったので、コードがピンとこない人もいると思うのでまとめたものを書き足そうとおもいます。参考にしてみてください。
var now = new Date();
var month = (“0” + (now.getMonth()+1)).slice(-2);
var day = (“0” + now.getDate()).slice(-2);
var week = (now.getDay());
f(week == 0){
week = “Sunday”
}else if(week == 1){
week = “Monday”
}else if(week == 2){
week = “Tuesday”
}else if(week == 3){
week = “Wednesday”
}else if(week == 4){
week = “Thursday”
}else if(week == 5){
week = “Friday”
}else if(week == 6){
week = “Saturday”
}
document.write(“<h1>” + month + “.” + day + ” ” + “(” + week + “)” + “</h1>”);
