JavaScript/Calendar
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2023
?
データサイエンス/2023
?
3DCG演習/2023
?
情報デザイン概論/2023
?
情報デザイン研究/2023
?
卒業研究/2023
?
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
* Calendar
万年カレンダーのサンプル
~
-DEMO:https://koichi-inoue.github.io/JS_Calendar/
-CODE:https://github.com/koichi-inoue/JS_Calendar
~
***サンプルのディレクトリ構成
-index.html
-style.css
-script.js &small(ネイティブ JavaScript です。ライブラ...
~
***付記
-HTMLでは、年・月を選択する SELECT も、カレンダーそのもの...
~
***プログラムの解説
''西暦XXXX年XX月のカレンダー''は、以下の2つがわかれば作...
-当該月の1日が何曜日であるか
-当該月の日数が何日であるか
このサンプルでは、西暦年と月を<select> から取得し、当該年...
-はじめに monthsOfTheYear[]、daysOfTheWeek[] の2つの配列...
-その後、年と月の select 部分に option を登録、また表のヘ...
-年・月と、prev ( < ) / next ( > ) ボタンにイベントリスナ...
いずれも選択された年 year と 月 month をもって、カレンダ...
-本日の日付情報を取得
let today = new Date();
-本日が何月かを取得
let thisMonth = today.getMonth();
0から11の整数で返されるので、数字として表示する場合は +1 ...
月名が配列にある場合は、monthsOfTheYear[0] が1月で都合が...
-本日の西暦年の値を取得する
let thisYear = today.getFullYear();
-本日を含む年月のカレンダーを表示
setCalendar(thisYear, thisMonth);
ページ読み込み後の主たる処理は以上です。
~
以下、関数です。
-''displayDate() '' は、日付の数字がクリックされたときの...
-''setCalendar() ''は、年 thisYear と 月 thisMonth をもっ...
--当該年月の日数を取得
let days = new Date(year, month+1, 0).getDate();
ちょっと面倒で「当月末日 = 翌月の0日 が何日か」という方法...
getDate() は日の値を 1 から 31 の数値で返します。 1 :1 ...
--当該年月の 1日の曜日を取得
let firstDay = new Date( year, month ).getDay();
getDay() は曜日を0 から 6 の数値で返します。0 :日曜、 1...
--続く for の2重ループでカレンダーを生成
---行のループ(最大6行)で <tr> を追加(appendChild)
---列のループ(7回)で <td> すなわち cell を追加(appendC...
---1日の曜日までは空送り
---もし、当該cell が「本日」であった場合は id を "today" ...
---行内で最終日を超えたら、その行が埋まるまでから送り
--DOMが完成したところで(HTML要素が登録されたところで)次...
-''moveNext()'' は Nextボタン(>)のクリックに対するイベ...
-''movePrevious()''は Prevボタン(>)のクリックに対するイ...
-''changeView()'' は年月が選択された場合のイベントハンドラ
~
***参考 Date()オブジェクト
本日の日時情報は、以下のようにして console に表示すること...
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
console.log( year + '年' + month + '月' + day + '日');
~
~
**APPENDIX
***万年カレンダーの一般的なアルゴリズム
プログラミング学習では万年カレンダーは定番の課題。既存の...
''西暦XXXX年XX月のカレンダー''は、以下の2つがわかれば作...
-当該月の日数が何日であるか
-当該月の1日が何曜日であるか
''当該月の日数が何日であるか''は基本的には決まっているの...
西暦が 4 で割り切れる年を閏年とする
ただし 100 で割り切れる年は平年とする
ただし 400 で割り切れる年は特別に閏年とする
''当該月の1日が何曜日であるか''は、「過去の基準日の曜日...
カレンダーの1行目は、1日の曜日まで「空送り」して、そこ...
~
~
終了行:
* Calendar
万年カレンダーのサンプル
~
-DEMO:https://koichi-inoue.github.io/JS_Calendar/
-CODE:https://github.com/koichi-inoue/JS_Calendar
~
***サンプルのディレクトリ構成
-index.html
-style.css
-script.js &small(ネイティブ JavaScript です。ライブラ...
~
***付記
-HTMLでは、年・月を選択する SELECT も、カレンダーそのもの...
~
***プログラムの解説
''西暦XXXX年XX月のカレンダー''は、以下の2つがわかれば作...
-当該月の1日が何曜日であるか
-当該月の日数が何日であるか
このサンプルでは、西暦年と月を<select> から取得し、当該年...
-はじめに monthsOfTheYear[]、daysOfTheWeek[] の2つの配列...
-その後、年と月の select 部分に option を登録、また表のヘ...
-年・月と、prev ( < ) / next ( > ) ボタンにイベントリスナ...
いずれも選択された年 year と 月 month をもって、カレンダ...
-本日の日付情報を取得
let today = new Date();
-本日が何月かを取得
let thisMonth = today.getMonth();
0から11の整数で返されるので、数字として表示する場合は +1 ...
月名が配列にある場合は、monthsOfTheYear[0] が1月で都合が...
-本日の西暦年の値を取得する
let thisYear = today.getFullYear();
-本日を含む年月のカレンダーを表示
setCalendar(thisYear, thisMonth);
ページ読み込み後の主たる処理は以上です。
~
以下、関数です。
-''displayDate() '' は、日付の数字がクリックされたときの...
-''setCalendar() ''は、年 thisYear と 月 thisMonth をもっ...
--当該年月の日数を取得
let days = new Date(year, month+1, 0).getDate();
ちょっと面倒で「当月末日 = 翌月の0日 が何日か」という方法...
getDate() は日の値を 1 から 31 の数値で返します。 1 :1 ...
--当該年月の 1日の曜日を取得
let firstDay = new Date( year, month ).getDay();
getDay() は曜日を0 から 6 の数値で返します。0 :日曜、 1...
--続く for の2重ループでカレンダーを生成
---行のループ(最大6行)で <tr> を追加(appendChild)
---列のループ(7回)で <td> すなわち cell を追加(appendC...
---1日の曜日までは空送り
---もし、当該cell が「本日」であった場合は id を "today" ...
---行内で最終日を超えたら、その行が埋まるまでから送り
--DOMが完成したところで(HTML要素が登録されたところで)次...
-''moveNext()'' は Nextボタン(>)のクリックに対するイベ...
-''movePrevious()''は Prevボタン(>)のクリックに対するイ...
-''changeView()'' は年月が選択された場合のイベントハンドラ
~
***参考 Date()オブジェクト
本日の日時情報は、以下のようにして console に表示すること...
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
console.log( year + '年' + month + '月' + day + '日');
~
~
**APPENDIX
***万年カレンダーの一般的なアルゴリズム
プログラミング学習では万年カレンダーは定番の課題。既存の...
''西暦XXXX年XX月のカレンダー''は、以下の2つがわかれば作...
-当該月の日数が何日であるか
-当該月の1日が何曜日であるか
''当該月の日数が何日であるか''は基本的には決まっているの...
西暦が 4 で割り切れる年を閏年とする
ただし 100 で割り切れる年は平年とする
ただし 400 で割り切れる年は特別に閏年とする
''当該月の1日が何曜日であるか''は、「過去の基準日の曜日...
カレンダーの1行目は、1日の曜日まで「空送り」して、そこ...
~
~
ページ名: