Skip to main content

今日の日付を表示しよう!

目標#

JavaScriptを使って、日付を取得しそれを自分のウェブサイトに表示しよう!

手順#

index.htmlを確認しよう!#

最初のコードでは、今日の日付として、<p>2021年12月1日</p>と文章で書いてあります。

これだと、ウェブサイトのHTMLを毎日書き換えないといけないですよね。それはとっても大変なので、JavaScriptのパワーを使って毎日自動でその日の日付が入るようにしましょう!!!いよいよプログラミングらしくなってきましたね!

作戦は、

  1. JavaScriptで時間を取得する
  2. Hacking-Time-1 でやったウェブサイトの書き換え方法を使って正しい日付を表示する

で、いきましょう!

1. JavaScriptで時間を取得する#

まずは、JavaScriptを使って、今日の日付を手に入れます

① script.jsを開く#

script.jsを開いたら、以下のコードを追加します。場所は、Hacking-Time1で書いたコードの数行下で大丈夫です。

let today = new Date();
// 今日の 年 を取得したいlet year = today.???;
// 今日の 月 を取得したいlet month = 1 + today.???;
// 今日の 日 を取得したいlet date = today.???;

// 取得した日付を合体するlet info_today = year + "/ " + month + "/ " + date;

② プログラムの ???? を書き換えよう!#

先ほど追加したプログラムの ????? の部分には、以下の表のどれかが入ります。取得したいものと、表の説明を参考にして、????を書き換えてみましょう!

参考

2. ウェブサイトに日付を表示する#

① index.html で表示の準備をする#

index.htmlを開いて、<p>2021年12月1日</p> となっている箇所を変更しよう!

まず、pタグにid名を付けます

<p id="show_today">2021年12月1日</p>

次に、pタグの中身を消します。今、2021年12月1日となっている場所には、JavaScriptで取得した日付が入るので、消しちゃってOKです! 最終的には、こんな感じになれば準備万端です!

<p id="show_today"></p>

② script.jsを開いて、取得した日付を表示しよう#

Hacking-Time1 で習ったことを使ってみよう!!

まずは、script.js を開きましょう。

表示したい場所の pタグ のid名は、show_today です。 まずは、この情報を受け取りましょう!

let show_today = document.getElementById("ここにpタグのid名");

次に、show_today に 変数 info_today に入っている情報を代入します。 show_today.innerTextを使ってチャレンジしてみましょう!

ウェブサイトに日付は表示されましたか??#

今日の日付がウェブサイトに表示されましたか??表示されていたらバッチリです!これで、皆さんは毎日HTMLを書き換えて日付を更新しなくても、自動でその日の日付が表示されるウェブサイトを作ることができました ^^

Challnge: 他の情報も表示してみよう#

表を見ると、時刻や曜日も表示できそうですね! まずは時刻から挑戦してみてください!!

曜日は、0から6の番号で表示されてしまうようです。これを、ちゃんと「月曜日」、「火曜日」、...と表示するには、次にやる if文 を使う必要があります!