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

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

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

JavaScriptとは

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

基本的な書き方は3種類

1, <script>タグで囲んで書く。

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

2, hmtlタグの中に書く

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

3, 外部ファイルに記述し、そのファイルを読み込む

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箇所で記述を分けましょう。

まとめ

  • jsはscriptタグで囲んで記述する。
  • jsの処理は外部ファイルにまとめて、そのファイルを読み込む
  • bodタグの終端に書く。

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

参考 JavaScript | MDNJavaScript | MDN 参考 Jquery 逆引きリファレンスJquery 逆引きリファレンス 参考 HTMLクイックリファレンスHTMLクイックリファレンス 参考 ECMAScriptECMAScript 参考 HTML5Experts.jpHTML5Experts.jp

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA