今回も引き続き,JavaScriptでUIを実装する方法を紹介していきます。今回はやや趣向を変えて,JavaScriptでカレンダーを実装してみます。Dateオブジェクトカレンダーを実装する前に,JavaScriptのDateオブジェクトについておさらいしておきましょう。Dateオブジェクトはnew演算子でインスタンスを作ってから使います。そのとき渡す引数は4つのタイプがあります。28);このように,何か引数を渡すとそれを日時として解釈して,その日時を基点とするDateオブジェクトを作ります。setDateといった,set/getメソッドをセットで持っており,一度作ったDateオブジェクトの日時を操作することができます。多くのブラウザはdate.getYearとdate.getFullYearというメソッドを実装しており混同されがちです。6~8以外のブラウザは1900年から数えた年数(2011年なら111)を返すので,getYearは使うべきでないメソッドのひとつです。getFullYear,getMonth,getDateのうち,getMonthだけは0オリジンであることにも注意が必要です。ちなみに,C/Java/Perlなども月は0オリジンです。英語圏では月をJan,Feb,Marなどのように文字で表記することが多いため,0オリジンのほうが配列との相性がよかったのだと思われます。MonthのほかにDay(曜日)も0オリジンです。曜日を表示するのには,0オリジンのほうが都合がよいことが実感できると思います。ある月の最終日カレンダーを書く上で,一日と晦日を取得する必要があります。よいので簡単ですね(monthにさえ注意すれば!⁠)⁠。いっても,実はちゃんとその方法が用意されていて,日にちに0(もしくはマイナスの値)を渡すとDateオブジェクトは前月に遡ってくれます。すればその月の晦日が取得できます。ようにしなくても大丈夫です)。カレンダーを書くさてカレンダーを書く際にもう一つ考えなければいけないのが,何列書くか,という問題です。いっても,カレンダーは最短で4週(2月1日が日曜で,うるう年でない場合のみ⁠)⁠,最長で6週の3つのパターンしかないので,6列で決め打ちにしてしまってもよいでしょう。行数は当然7行ですから,6回ループする中に7回のループを入れ子にするという処理は見えてきました。あとは,どこから一日を始めて,晦日で終了する条件だけですね。一日は曜日によってどの位置になるかが決定します(曜日によって曜日が決まると言っているようなもので,当たり前のことなのですが⁠)⁠。晦日は加算していった日にちが晦日と一致するところで判断できます。これらの間ではそれぞれの日にちを,それ以外では空白のセルで埋めればシンプルなカレンダーの出来上がりです。tbody.appendChild(tr);}空白のセルには&nbsp;をいれています。これは空白のセルが潰れてしまうことを防ぐための応急処置です。カレンダーの実装ここまででカレンダーはほぼ出来上がりなので,見た目や実装について少し工夫してみましょう。見た目についてはもちろんCSSで制御します。captionやth要素などを使って,なるべく無駄なく装飾します。著者プロフィール太田昌吾(おおたしょうご,ハンドルネーム:os0x)1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。Expertとして活動を開始。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。