JavaScriptでフォームのデフォルトの日付を今日にする。

やったこと

前回(Pythonフレームワークbottleにbootstrapを導入してみた。)の続き。

  • HTMLソースコードのフォーム部分にidを付与(JavaScript用)
  • JavaScriptコードを記述し、日付のところのデフォルト値を今日の日付(動的)に設定
  • JavaScriptファイルを作成し、HTMLからJavaScriptファイルを読み込んで実行
  • バックエンド側(Pythonファイル)は変更なし。

以下のページも参考になった。
超絶初心者のためのフロント入門(HTML、CSS、JavaScript)
【超初心者向け】JavaScriptの基本的な書き方講座

JavaScriptの記述において、JavaScript初心者がやりがちなミス3つ に書いていることをやってしまい、作成に時間がかかってしまった。。。

ファイル構成

作成コード

JavaScript用のファイルを作成した。ここに、今日の日付を取得するコードを記述している。

(参考ページ)
input type=”date”を使った日付入力フォーム

ベースとなるHTMLファイルには、外部のJavaScriptファイルを呼び出すコードを追加した。

 

フォーム部分のHTMLコードには、idを付与した。

実行結果

今日の日付が自動で表示されるようになった。

つまづいたところ

以下のコードで試してみたところエラーが出た。

不具合内容

Chromeのディベロッパーツールで確認すると以下のエラーが表示されていた。

Visual Studio Code上では以下のエラーコードが表示されていた。

以下のMicrosoft社の構文エラーコードのページと合わせてみたところ、「 ‘:’ が必要です」とのこと。参考にならない。。。
(参考ページ)
JavaScript 構文エラー

ちなみに、JavaScriptのコードをHTMLファイル内に直接記述し、テストしてみたところ正常に動いた。

原因

  • JavaScriptコードの記述位置
  • JavaScriptの実行順番

解決策

外部のJavaScriptファイルを読み込むのではなく、HTMLファイル内に直接JavaScriptを記述してみたところ動いた。
このとき、JavaScriptのコードは該当のidがあるタグよりも後ろに位置していないと以下のエラーが出る。

以下のコードのように、JavaScriptのコードを該当のidがあるタグよりも後ろに書いておくと正常に動く。

(参考ページ)
javasprictのコードを書く順番について

JavaScriptファイルを外部ファイルに記述する場合は、JavaScriptの実行順番に気をつけないといけない。
今回の場合だと、以下のように、window.onloadを使った。

(参考ページ)
ページ読み込み時のJavaScriptの実行タイミング

やってみた感想

JavaScriptの構文や書き方が全く分かっておらず、いろいろなものを参考にしながら進めた。
時間はかかったが、うまく動いたときはものすごく嬉しい。

Web開発はフロント、バックエンド含め勉強することが多い。
これから先、サーバーにデプロイするときにはまた分からないことが山程出てくるだろうが、エラーコードと向き合っていればなんとか解決できるだろう。

その他参考記事

【Trainer’s Recipe】Pythonのフレームワークのflaskを触ってみた。
HTMLの要素を取得する! JavaScriptのdocumentプロパティの使い方

次のページ()へ進む

コメント

タイトルとURLをコピーしました