読者です 読者をやめる 読者になる 読者になる

JavaScript① 時刻表示

JavaScriptを用いて現在時刻を表示するWebページを作っていきます。今月読了した吉岡直人ほか『非エンジニアのためのプログラミング講座』(リックテレコム、2015年)を参考にしました。

非エンジニアのためのプログラミング講座

非エンジニアのためのプログラミング講座

 

 

1.現在時刻を表示する

f:id:shika16:20170126024117j:plain

 

まずは、組込み関数「Date.now」を使ってコードを書いていきます。こちらのコードでWebページを表示すると・・・

 

f:id:shika16:20170126024148j:plain

 

一応数字自体は表示されましたが、これでは何が何やら分からないためより時計らしく見えるために加工を施します。

 

2.今は西暦何年?

f:id:shika16:20170126024423j:plain

 

今度は、関数「getFullYear」を用いてコードを書いていきます。これを元にWebページを表示させると・・・

 

f:id:shika16:20170126024509j:plain

 

きちんと今年の西暦が表示されました。この要領で、日付も分かるようにコードを書き加えます。

 

3.今は西暦何年何月何日?

f:id:shika16:20170126024625j:plain

 

関数「getMonth」と「getDate」を書き加え、Webページを表示させます。

 

f:id:shika16:20170126024658j:plain

 

現在の西暦に加え日付も表示されるようになりました。そして最後に、時間も見えるようコードを書き加えます。

 

4.現在の年月日と時刻は?

f:id:shika16:20170126024857j:plain

 

同様に関数「getHours」、「getMinutes」、「getSeconds」を加え、これらを表示するコードを完成させます。これをWebページにて表示させると・・・

 

f:id:shika16:20170126024938j:plain

 

最初の段階とは打って変わって、普段見慣れた現在時刻が表示されるようになりました。

 

次の記事では、じゃんけんゲーム作りに挑戦します。