JavaScriptを読み込む方法

javascript

JavaScriptの記述場所

JavaScriptはHTML文書にscript要素を使って記述します。

<script>JavaScriptコード</script>

head要素とbody要素のいずれにもscript要素は記述可能です。 記述方法は2通りあります。

コードの可読性や管理保守の観点から、外部ファイルに記述する事をお勧めします。 いちいちHTML内に記述すると使いまわしができず、またHTMLファイルの難読化を招きます。 head内で外部ファイルを読み込み、後は必要な箇所で処理を呼び出すのがいいでしょう。

外部JavaScriptファイルを読み込んで使う方法

まず外部ファイルを用意します。内容は以下の通りです。
格納先は「http://hogehoge.net/js/javascript.js」とします。

処理は「Hello World!」とブラウザ上に表示させるだけものものです。

javascript.js

function HelloWorld(){
  document.write("Hello World!");
}

HTMLからJavaScriptファイルを読み込み、HelloWorldメソッドを呼び出します。

HTML

<html>
<head>
<title>例1</title>
<script src='http://hogehoge.net/js/javascript.js'></script>
</head>
<body>
<script>HelloWorld();</script>
</body>
</html>

これで本文中に「Hello World!」と表示されるようになります。

実行結果

HTMLに直接JavaScriptを記述して使う方法

上の処理をjsファイルを使わずに直接HTMLファイルにJavaScriptを記述することもできます。 その場合は以下のようになります。

HTML

<html>
<head>
<title>例2</title>
<script>
  function HelloWorld(){
    document.write("Hello World!!(ヘッダー)<br>");
  }
</script>
</head>
<body>
<script>
  HelloWorld();//headに記述したHelloWorldメソッドを呼び出す
  document.write("Hello World!!!(ボディー)<br>");//直接命令を書くこともできる
</script>
</body>
</html>

これで本文中に「Hello World!!(ヘッダー)」と「Hello World!!!(ボディー)」が表示されるようになります。

実行結果

スクリプト文を直接記述する形はファイル数が少なくなる利点がありますが、ソースが煩雑になり、他のHTMLファイルからHelloWorld関数を呼び出す事もできません。複数のページに同じ処理を記述した場合、管理やメンテナンスが煩雑になってしまいます。

もちろんケースバイケースではありますが、基本的に外部ファイルに書いた方が良いでしょう。

アマルウェブ HOME