HTMLのformタグを利用したJavaScriptに挑戦してみようと思う。テキストボックスに打ち込んで表示ボタンを押せば、指定箇所にその内容が表示される仕組み。onsubmitというイベントハンドラーを用いて、表示ボタンを押したとき入力内容を指定箇所に表示するというプログラムを書いてみたが、入力した途端、文字が消えてしまう。

これはいったいなぜなのか。よく調べてみると、表示ボタンが押されると、画面がリロードされるため、消えてしまうらしい。そこでリロードしないようにしなければいけないようだ。preventDefault()を使用するらしい。

入力した文字「」

2020-12-19

Dateオブジェクト

Dateオブジェクトを使用すると、指定の日時データが取れるらしい。

Dateオブジェクトのメソッドを利用して、それぞれを変数に代入したあとに、それをhtmlに表示させてみると下記の通り。

今の日時は

表示できている。が、更新しても日までしか表示できていないため、本当に現在の日時が表示されているのか、わからなかったので、秒まで表示させることにした。

今の日時は

これでおそらく秒まで表示できているので、更新すれば本当に現在日時が表示されているのかわかるはず。

しかし、またふと思った。時間を24時間制ではなくam、pmで表示させれないだろうか。ネットで検索すればすぐに見本が出てくるのだろうが、とりあえず自分で試してみることにした。

当初getHours()で取得した時間から-12を引けばいいと思ったが、1～12時までの時間はマイナスになってしまうし、そもそもam/pmを付けられない・・・。ということは、if文で条件分岐するしかないのかと思いやってみた。

if文で13～24時の際は時間を収めた変数から12を引いて代入し直して…。なぜかエラー。よく見ると、これまでconstで時間を代入する変数を宣言していたのので、変数の宣言をletに変更。あとは適当に表示の仕方を変えて…。少し脱線するが、10年以上前にJavaScriptを少しかじった際には、変数の宣言はvarを用いていたけれど、調べてみるとどうもそれは古いらしい。

今の日時は

うまくいった。本当はリアルタイムで時間が更新されるようにしたいが、まだ自分にはその知識がないので、とりあえず今回はこれまで。やり方がわかるようになったら、もう一度戻ってこよう。

2020-12-18

新たなチャレンジ

プログラミング Javascript

新型コロナウイルスによって、悪しくも働き方や生き方を見つめ直す機会が生まれました。この機会に何かにチャレンジしたいという思いから、プログラミングに挑んでみようとこのブログを開設しました。

過去にHTMLやCSS程度は少しかじったことのあるレベルの私が、プログラミングに挑戦してみることで、どれだけ成長できるのか。それをこのブログにアウトプットしながら勉強し、それを私自身のモチベーション維持にも繋げたいと思っています。

Web系なら抵抗が少ないというのと、まずは簡単な言語からということで、JavaScriptを選択しました。ほとんど0からのスタートですので、わからないことばかりですがやってみようと思います。