まとメモ

29才でエンジニアに転職したエンジニアのメモ

JavaScript 記述場所・実行順

PHP

JavaScriptの記述

記述する場所
  • head要素の中
  • body要素の中
  • bodyタグの閉じタグの直前
HTMLへのスクリプトの埋め込み

  • <script>と</script>の間に記述する … インライン スクリプト

    • HTML5の場合はデフォルトのtype属性がJavaScriptなのでtype属性 (type="text/javascript")を特別記載する必要はない

  • bodyタグの閉じタグの直前にscriptタグを記述するのが一般的

    • すべてのブラウザではJavaScriptを読み込んで処理している間は他のレンダリング(HTML要素の読み込み)を中断するという処理になっているから
<script>
  // ここにスクリプトを記述
</script>
  • <script>のsrc属性に指定して、外部ファイルから読み込む … 外部スクリプト
    • インラインの時と同じようにbodyタグの閉じタグの直前に書くというのが一般的
<script src="./sample.js"></script>
<a href="javascript:（ここにスクリプトを記述）">クリック</a>

<input type="button" value="Click!" onclick="ソース記入">
- 直接 外部
メリット 読み込みが早い HTMLとJavaScriptが分離され再利用しやすい、管理しやすい
デメリット HTMLとJavaScriptが混在しコードが乱雑になる、管理しにくい ファイルが増えると、読み込みが遅くなる
記述する場所によってエラーになる
<head>
<script>
    var memo = document.getElementById(‘memo’);
    memo.textContent = ‘こんにちは！’;
</script>
</head>
<body>
    <p id=”memo”></p>
</body>

上記のコードは「pタグ」が存在していないのに文字列を代入しようとしているためエラーとなる。

JavaScriptの実行

すべてのDOMツリー構造及びCSS・画像などの関連リソースが読み込まれたあとにJavaScriptが実行されるようにする方法
window.onload = function() {
    // 実行したい処理 
}
  • head要素内でDOMを扱うプログラムを書いてもエラーにはならない
    ※ 複数の「onloadイベント」書いてしまうと上書きされてしまい、最後に書いたイベントだけが実行される →複数人でプログラムを書いている場合に誤って「onloadイベント」を上書きしてしまうリスクがあるので注意が必要
window.addEventListener('load', function() {
   // 実行したい処理
})

jquery

$(window).on('load', function() {
    //実行したい処理
});
  • この書き方だと複数の「onloadイベント」を登録してもすべて実行される
DOMの「ツリー構造」が完了した時点で実行される方法
window.addEventListener('DOMContentLoaded', function() {
    // 実行したい処理
})

jquery

$(document).ready(function(){
    // 実行したい処理
});

$().ready(function(){
    // 実行したい処理
});

$(function(){
    // 実行したい処理
});

まとめ

  • 記述する場所に気をつける
  • JavaScriptの実行順を考える
  • window.onloadは上書きされる

参考

【JavaScript基礎】JavaScriptの実行順序について - KDE BLOG

JavaScriptの記述場所 | JavaScript入門編 - ウェブプログラミングポータル

【JavaScript】記述方法別の実行タイミングについて - Qiita

JavaScriptの記入場所-JavaScript入門

ブラウザのアドレスバーからJavaScriptのコードを実行する方法 (JavaScript疑似プロトコル)

【備忘録】ページの各読み込みタイミングにスクリプトを実行する方法まとめ【javascript】 - Qiita

ページ読み込み時のJavaScriptの実行タイミング - ばしぶろ

なぜhead要素内で外部JavaScriptファイルを読み込むのが良くないのか？

jQueryの読込み「ready」と「load」と「function」の順番について | web-wizardry

【JavaScript】window と document の違い

【JavaScript入門】onloadイベントの使い方とハマりやすい注意点とは | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

【超初心者向け】JavaScriptの基本的な書き方講座

&lt;script&gt; タグに async / defer を付けた場合のタイミング - Qiita