JavaScript基礎：書き方・読み込むタイミング

こんにちは、たくぞうです。

仕事でJavaScriptは使うことが多いですが、言葉で説明しようとするとうまく説明できないことが多かったので、
自分の勉強を兼ねて、基礎中の基礎からまとめたいと思います。

JavaScriptとは

Webページに動きをつけれれるプログラミング言語でHTMLとCSSのコードを動的に書き換えることができます。
ちなみに、業界ではJavaScriptを略して「JS(ジェーエス)」と読んでいます。

html

<script>
  alert("テスト");
</script>

html

<p onlick="alert("テスト")";>
　　クリックすると「テスト」と書かれたウィンドウが表示されます。
</p>

headタグかbodyタグに外部ファイルを読みこむ記述を書く。

html

<script type="assets/js/app.js"></script>

MEMO

記述が長くなる場合jsの処理はまとまっていた方がわかりやすいので、
外部ファイルに記述するやり方がほとんどです。

scriptタグの記述場所は別にどこでも構わないのですが、下記の理由でbodyタグの終端に記述されることが多いです。

scriptファイルを読み込んでいる間は、HTMLファイルを読み込まないため、ページのレンダリングを行わせてからjavascriptファイルを読み込むことで表示速度を早くする。
CSSはheadタグ中に、javascriptはbodyタグの下にまとめて記述することでわかりやすくなる。

HTMLとCSSで人間が理解出来るページがほぼ大多数を占めています。
最初に見る画面としてはJavaScriptは存在する必要はありません。

また、3秒以内にページが表示されないとユーザーの4割は直帰してしまうという統計データがあるようなので、 SEO的にもscriptの読み込みはbodyの終端がベストです。

MEMO

DOM読み込み前に読み込みたいScriptがある場合は、head内とbody終端の2箇所で記述を分けましょう。

JavaScriptを勉強するなら絶対にブックマークするべきサイトを5つ紹介しときます。
参考にしてください。