JS

【js】javascriptを外部JSファイルにして読み込んで使おう！

javascriptを外部JSファイルにして読み込んで使おう！

javascriptは外部ファイルにできる！

javascriptはHTMLに直接書いて動作させる事ができます。
ですが、HTMLコードが複雑になってしまう、サイト全体で使いたいscriptはどうしたらいい？などの問題もあります。
色々なシチュエーションに対応する為にjsを「外部ファイル」にして読み込んで使ってみましょう。

基本的な構文

<script src="js/sample.js"></script>

HTML5で外部jsファイルを読み込むパスです。
上記例では「jsフォルダ」から「sample.jsファイル」を読み込んでいます。

読み込みファイルはどこに書けばいい？

外部ファイルのパスの記述はどこに書けばいいのでしょう。

js外部ファイルは
●headタグ内
●bodyタグ内
のどちらかに記述する事で読み込む事はできます。
では、どちらがより良いのでしょうか。

それは、「bodyタグ終了の1つ前」です。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>内部スタイルシート</title>
 </head>
 <body>
 コンテンツ～
 
 <script src="js/sample.js"></script>
 </body>
</html>

理由はファイルを読み込む順番です。
Webページが表示される時には、HTMLの上から順に読み込んで表示されていきます。
その際に途中で重いファイルなどあると、それを読み込むまでその下の表示が遅れます。
jsは記述が多いのでどうしても読み込みに時間がかかる場合があります。bodyタグ終了前であれば、ページの全てを読み込んで表示してからjsを読み込む事になりますので、ユーザビリティを考えるとこちらが最適かと考えます。

実戦的に書いてみます

window.openwを4つ程設定してみます。

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>内部スタイルシート</title>
 </head>
 <body>
 <div onclick="link()">新規Windowで開く</div>
 <div onclick="link2()">新規Windowで開く</div>
 <div onclick="link3()">新規Windowで開く</div>
 <div onclick="link4()">新規Windowで開く</div>
 
 <script src="js/sample.js"></script>
 </body>
</html>

外部js（sample.js）

function link() {
 window.open("https://www.google.co.jp/maps/");
}

function link2() {
 window.open("https://www.google.co.jp/maps/","name","width=800,height=500");
}

function link3() {
 window.open("https://www.google.co.jp/maps/","name","width=800,height=500,resizable=yes");
}

function link4() {
 window.open("https://www.google.co.jp/maps/","name","width=800,height=500,resizable=yes,top=100,left=100");
}

jsの書く量が増えれば増える程、外部ファイルの方が良さが倍増しますね。

RECOMMENDこちらの記事も人気です。