:月額1000円、動画の量が豊富なのが魅力。どんなにプログラミングのモチベーションが下がっても戻ってこれるのはドットインストールのおかげ。作る楽しみはここが教えてくれる!
月額料金980円オブジェクト、クラス、メソッド等基本的なことを学べる。おそらく多くのエンジニア志望者はこれから始めると思われる。
:月額1078円とても詳しく説明してくれるがJavascriptを学ぶ講座は少ない。ドットインストール、Progateに続いてやっていいサイトだと思う。
■□━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━□■          SEO対策からビジネス相談まで!500円から買えるココナラ      ■□━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━□■ テレビや新聞、雑誌で注目のココナラ! SEO対策、ビジネス相談、キャリア相談など、登録料は無料で、全て500円~で お願いできる! 価格満足度97%、まだ知らないあなたは損しているかも? あらゆるお困りごとはココナラにお任せ!  https://px.a8.net/svt/ejp?a8mat=3BM75I+4KBQ22+2PEO+OAWWZ  

new Dateのパターンをいくつかまとめてみた(カレンダー編)

new Dateのパターンをいくつかまとめてみた(カレンダー編)

 

カレンダー作るのにnew Dateわかってないんじゃだめですよね。
でもいまいちよくわかっていない自分のために今回codepenを利用してまとめてみました。少しでも参考になれば幸いです。

今週のお題「好きなおやつ」

インスタグラムでたべたおやつや昼食をよく紹介しています。
ツイッターでもメシ垢があるんですが、どうも私の場合SNS一つ一つに役割を決めたほうが捗るようです。

 
 
 
View this post on Instagram

今日のcafe in Juan valdez

A post shared by Tsuyu Naruhito (@tsuyunaruhito123) on

 

本日のコンテンツ
Javascriptで既に用意されている関数new Date()
〇当月全て表示させる方法コードとは?

Javascriptで既に用意されている関数new Date()

聡明な読者の皆様はすでにご存じの通り、Javascriptには最初から組み込まれている関数がいくつかあります。そのうちの代表例の一つが今回話に上がってきた「Date()」です。

このDate()は日付を扱う際に利用され、生成するときはnew Date()としてやれば生成できます。

では実際下記のCodepenを利用してみてみましょう。

See the Pen Calender by tsuyunaruhito (@tsuyunaruhito) on CodePen.

 万が一Codepenが使用できなくなったら下記ページでも確認できます!

https://cyberjaya.xyz/4/jikken/jikken.html

 

今回ボタンを6つ準備しております。

ボタン「Date Only」

DateOnlyはId「demo」のpタグに対してnew Date();のみ当てております。

こちらの実行結果は今私が執筆している段階では以下の通りとなります。

f:id:tsuyunaruhito:20200929155246p:plain

DateオブジェクトはGMTUTC)を基本として時間値が表示されますが、日付や時刻などを取得するメソッドは、現地のタイムゾーンに応じて動作します。

私はMalaysiaに住んでいますので本時刻となっています。

 

ボタン「getDate」

こちらのボタンでは、id「demo」に対して、new Date().getDate();

を当てています。

これにより、当日の日付の表示することができます。本記事の執筆時は29日なので結果は29日です。日付が変わればもちろん本時間も変わります。

 

ボタン「getMonth」

さて、getDateで日付を表示できるのであれば、getMonthならその当月を表示させられます。しかし注意点が一つありまして、getMonthで月を出す場合、0が1月、1が2月と一つずつずれてきます。だから、getMonthだけだと(new Date().getMonth();だけだと)前月が表示されてしまいます。それ故、当月を出す場合は+1せねばなりません。

ボタン「getMonth1」

本ボタンでは、「new Date().getMonth()+1;」 としており、当日の日付を出しています。

 

注意:なぜgetMonthは0から始まるのか?
Javascriptでavascript言語は日本ではなく英語圏で作られた言語なので、1月が1といった数字と認識されるわけではなく、1月はJanuaryなので、配列で言うところの0から始まっています。[Jan,Feb.....
Dateは日本も英語圏も数字で考えるので1から始まります
納得がいかない方もいるかもしれませんが、次のボタン「getDay」も押してみましょう。ちなみに今日は火曜日です。getDayでは、曜日を出すことができます。

f:id:tsuyunaruhito:20200929172741p:plain

 ボタン「getDay」

本ボタンを押すと、曜日が表示されます。今日は火曜日なのですが3ではなく2が表示されます。Januaryと同じ理屈ですね。僕ら日本人も日曜日を1と考えないように、英語圏の方々も1とは考えず0と考えるようです。

 

■当月全て表示させるコードとは?

さて、2020年9月はもちろん30日までです。こちら1日から30日まで表示するにはどういったコードを書けばいいでしょうか。

6個目のボタンを押すと当月全ての日付を表示させることができます。

ボタン「getThisMonth」

下記CodePenからコードを抜き出しましたので説明いたします。

 

const thisMonth = [];

const finalDate = new Date(2020,09,0).getDate();
for (let i = 1i <= finalDatei++) {

thisMonth.push(i);
    }
//thisMonth;
document.getElementById("demo").innerHTML = thisMonth;

まず、日付を配列に入れていきたいので、thisMonthに空っぽの配列を作っておきましょう。

当月の最終日を出すために「new Date().getDate();」と打ち、引数として「2020,09,0」と打っています。

前から年、月、日付の順番で書いていますが、日付を0とすることで当月の最終日を返すことができます。 

後はfor文で最終日までループで回していきます。

finalDateで最終日である30が入ってきますので、i<=30の条件となるまで、pushで配列thisMonthに入れていきます。

後は、1-30日まで入った配列をid「demo」を通じて操作すれば
当月の日付を全て表示させることができます。

 

■終わりに

 ここまで日付を表示させる方法についていくつかまとめてみましたがいかがでしたでしょうか。自分自身まとめてみることで結構勉強になりました。今もドットインストールを通じてカレンダー作りに励んでいるところです。何か気づきや学びがあったらまたまとめて記事にしようと思います。

 

 

近日中の私の記事は以下の通り。

interier.hatenablog.com

 

interier.hatenablog.com

interier.hatenablog.com

 

 

 

#######################

ツイッターやってます!今1040人のフォローわー様が・・・っと思ったら39名だった!

今後もよろしくお願い致します!

↓↓↓↓↓

 

  

読者登録をしていただけると大変助かります。

 
 本サイトが参考になったらクリックをお願いします。


人気ブログランキング