目次
外部ファイルを読み込む方法
外部ファイルを読み込むには、<script>タグにファイル名を指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>外部ファイルを読み込む方法</title>
</head>
<body>
// ファイルを指定して読み込む
<script src="./js/script1.js"></script>
</body>
</html>記述する位置について
外部ファイルを読み込むのは、HTMLファイルのどの位置でも問題ありません。
ですが、<body>タグの閉じタグの直前に読み込むことが多いです。
理由としてHTMLはファイルの先頭から読み込まれていくため、<head>～</head>内に記載するとJavaScriptを読み込んでからその後<body>～</body>内を読み込む順番になります。
そうなるとページが表示されるまでに時間がかかってしまいます。
なので、<body>タグの閉じタグの直前に読み込むことが多いです。
その時の状況によって異なるので読み込む位置は案件によって考慮しましょう。
外部ファイルを複数読み込む場合
外部ファイルを複数読みこませたい場合は、下記のように記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>外部ファイルを複数読み込む場合 | 外部ファイルからJavaScriptを読み込む | バナナのキモチ</title>
</head>
<body>
<script src="./js/script1.js"></script>
<script src="./js/script2.js"></script>
</body>
</html>実行順番はどうなるの？
実行順番は、HTML内に記載された順番に読み込まれていきます。
他の外部ファイルで宣言された変数は違う外部ファイルで読み込めるのか？
script3.jsで宣言された変数（fruit）はscript4.jsで読み込めるのかやってみます。
まずscript3.jsで変数（fruit）を宣言して値を入れます。
script3.js
let fruit = "banana";次にscript4.jsから読み込んでみます。
script4.js
console.log(fruit);んで、HTMLはこう記述します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>他の外部ファイルで宣言された変数は違う外部ファイルで読み込めるのか？ | 外部ファイルからJavaScriptを読み込む | バナナのキモチ</title>
</head>
<body>
<script src="./js/script3.js"></script>
<script src="./js/script4.js"></script>
</body>
</html>結果
読み込めました。
外部ファイルで宣言された変数はインラインスクリプト内で読み込めるのか？
今度はscript3.jsで宣言した変数（fruit）をインラインスクリプト内で読み込めるのかやってみます。
script3.jsは先程ど同じです。
script3.js
let fruit = "banana";んで、HTML内にインラインスクリプトを記述します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>外部ファイルで宣言された変数はインラインスクリプト内で読み込めるのか？ | 外部ファイルからJavaScriptを読み込む | バナナのキモチ</title>
</head>
<body>
<script src="./js/script3.js"></script>
<script>
console.log(fruit);
</script>
</body>
</html>結果
読み込めました。
まとめ
外部ファイルからJavaScriptを読み込む方法でした。
基本大事！
学び直しを頑張ります。
では、今回はこの辺で。
またね。