JavaScript初心者がやりがちなミス3つ

~目次~

  1. JavaScriptでやろうとしたこと
  2. ミスその1:JavaScriptの記述場所
  3. ミスその2:JavaScriptの実行順番
  4. ミスその3:ブラウザのディベロッパーツールのキャッシュ

JavaScriptでやろうとしたこと

これが今僕が作っているツールなんですけど、ここに日付を入力しました。
日付をJavaScriptで自動で今日の日付になるように設定してます。

コードはこんな感じですね。

※Pythonのbottleというフレームワークを使って、さらにjinja2というライブラリで他のHTMLテンプレートファイルを継承しています。

ここにそのフォームのコードがあって、その下に JavaScript のコードを書いています。

ミスその1:JavaScriptの記述場所

まずは、JavaScriptの記述場所について説明します。
今のコードは正しいコードなのですが、JavaScriptのコードとHTMLのフォーム部分のコードを逆にして保存するとこんな感じですね。

そうすると、日付が入らなくなりました。こんな感じでJavaScriptのコードが無効になるということなんですね。
これエラーコード見ると「Cannot set property ‘value’ of null」というって言うものが表示されています。
これがどういうことかって言うと、そのJavaScriptのコードで指定した”date”っていうものが見つかりませんでしたと。
このgetElementByIdという関数で指定してるんですけど、dateっていうようなidが見つかりませんでしたと。でもフォーム部分に”date”ってありますよね。
なんでこういうことが起きるのかって言うと、JavaScriptは先にHTMLのソースコードを読み込んだ後にスクリプトが動かないとこのgetElementByIdという関数が動かないんですね。

(参考ページ)
[jQuery] [HTML] えっ!? <script>にも読み込み順序とかあんの?

って言うので僕は結構苦労しました。でもねコードを戻してあげると日付が入るようになるんですよ。
これは基本的な事らしいんですけど JavaScriptをあまり知らない人が触ると、同じようなエラーに遭遇する方もいると思います。

ミスその2:JavaScriptの実行順番

二つ目行きます。
二つ目がですね、外部のJavaScriptのファイルを作って、JavaScriptのコードを読み込む場合ですね。これもさっきと同じような感じなんですけど、以下に示しているように外部のJavaScriptファイルを読み込むのを有効にしました。

で、外部のJavaScriptファイルの1行目と8行目のところをコメントアウトします。

そうすると、日付のところに値が入らなくなりました。

エラーコード見るとね、さっきと同じ「Cannot set property ‘value’ of null」というエラーコードが出てます。
これが何でかって言うとそのこれもさっきと同じで、先にHTMLを読み込んだ後にJavaScriptが動かないといけないんですけど、読み込む順番が正しくないということでエラーが出てます。

で、そのJavaScriptが動くのを後にするために、先程コメントアウトしたところのコードを記述しています。「window.onload」というものですね。

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

このコードによって、読み込む順番を最後にしてます。
更新するとこんな感じね、ちゃんとね日付が自動で入るようになるんですよ。

はいこれが二つ目のミスですね。

ミスその3:ブラウザのディベロッパーツールのキャッシュ

最後三つ目。
僕は、Google Chromeのデベロッパーツールを使ってるんですけど。
ちょっと分かりにくいかもしれませんが、「Disable cache」って言うねところのチェックを今入れてます。ディベロッパーツールの「Network」のところを開けばあるはずです。

このチェックを外します(デフォルトでは外れています)。
この状態で、HTMLやJavaScriptのソースコードを変えても、ソースコードの変更が反映されない場合があるんですね。このために少し時間を無駄にしました。

(参考ページ)
変更したjsのファイルがchromeだと更新されない

はい、ということで以上三つですね。
僕が JavaScript やっていて詰まったところ三つ。
JavaScriptを始めたばっかの方だと結構熱ある方多いような気がするので、何かの参考になれば幸いです。ありがとうございました。

コメント

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