覚えたてため、記録に残しておく。
これまではHTMLのbodyタグの1番最後に置いていた
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>title</title>
</head>
<body>
★<script src="./main.js"></script>
</body>
</html>
何故かというとHTMLのheadタグ内に外部JavaScriptファイルを読み込ませようとすると、HTMLのbodyタグ内を読み込む前にJavaScriptの内容を実行しようとするためエラーが発生する。そのため、HTMLのbodyタグ終了直前に外部ファイルを置いていた。そうすると、HTMLを読み込み終わってからJavaScriptが実行されるためエラーが発生しない。
defer属性を追加すると
しかしながら、scriptタグにdefer属性というものを使用すると、外部JavaScriptファイルが非同期でダウンロードされ、HTMLファイルを読み込み終わってから外部JavaScriptファイルが実行されるためエラーが発生しない。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
★<script defer src="./main.js"></script>
<title>title</title>
</head>
<body>
</body>
</html>