JavaScriptでカレンダーを作成する方法

この記事は2分で読めます

自分用メモ

随時追記していく

日記0819より

※参考:日記0819。プログラミング学習

カレンダーはJavaScriptメインで作成する方法と、
HTMLの表を設定する方法があるが、前者の方が良さそう

カレンダーの機能は食べログ等で実装されている

カレンダーを作る際は、色々な事を考える必要がある

・tableタグをどう設定するか
・うるう年をどう扱うか
・1ヶ月に何日あるか。4行から6行をどう設定するか。
・曜日をどう正しく設定するか。
・祝日をどう設定するか。
・日付が入らない箇所に空文字をどう設定するか
・onClickを使って前月や翌月にどう移動するか。
・移動範囲は無限にするか。有限にするか。
・CSSで表をどのようにレイアウトするか

カレンダーの作り方は人によって異なる。
以下を参照。



カレンダーの綴り間違いにも注意
後ろから2番目はeではなくaである。

・calendarはOK
・calenderはNG

日記0820より

※参考:日記0820。プログラミング学習

カレンダーを作るには、基本となる用語を抑える必要がある。

getFullYear()
→年を4桁の整数で取得する


getMonth()
→月を0から11の整数で取得する


getDate()
→日を1から31の整数で取得する


getDay()
→曜日を0から6の整数で取得する
→日曜日が0で、土曜日が6になる


Dateオブジェクトについて

JavaScriptで現在の時刻を表示する際は、
new Date()にてDateオブジェクトを作成し、getHour()メソッドなどで呼び出す事で、
日付や時刻の要素を取得できる。

カレンダーを作るにはDateオブジェクトを使った操作が必要。
Dateオブジェクトはnewで生成する。
カレンダーはDateオブジェクトを使って生成する。

うるう年について

4で割り切れる年(2020, 2024, 2028)が該当。
ただし100で割り切れる年には該当しない。
ただし400で割り切れる年は該当する。

日記0821より

※参考:日記0821。プログラミング学習

onClickで遷移する先は、関数がめちゃくちゃあるのでややこしい。
この場合の対応は以下の4通り。

①コードをざっと確認して、未知の用語はググる
②ノートに写経して関連性を調べる
③PCに打ち込んで微妙なズレを確認する
④自分で応用したコードを作成する。

Dateオブジェクトについて(その2)

Date( )は、現在とは限らない。
( )にすると、現在を取得する。

月末を取得するのは難しい
→うるう年があるから。
→lastdates = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 
 これを上手く工夫する必要がある。

alertは、テストとして使うのが良さそう

th系の要素は、これを機会に覚えたいところ。

やること


今回のコードを確認する。
参考ページのonclickを書き写す
今回の課題であるonclickを解く

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。