トップ 言語 JavaScript 入門編 JavaScriptの外部ファイル化

JavaScriptの外部ファイル化―jsファイルの作成とhtmlでjsファイルを読み込む方法など

jsファイルの作成とhtmlでjsファイルを読み込む方法など。JavaScriptの外部ファイル化についてまとめています。

JavaScriptの外部ファイル化

htmlファイルに記述していたJavaScriptのコードを別ファイルに記述して、htmlで読み込んでJavaScriptを実行することができます。

やり方

JavaScriptコードの外部ファイル化のやり方は以下の通りです。

htmlで読み込まれるタイミングとscriptタグの記述位置

scriptタグはhtmlの任意の場所に記述できます。

htmlファイルは、ファイルの先頭から読み込まれて表示されます。 scriptタグを読み込むタイミングも記述位置によって変わってきます。

例えば、htmlのページを表示してから使うJavaScriptコードであれば、 htmlの最下部に記述することでページを表示するまでの時間が短縮できてユーザに早くページの内容を見てもらえます。 どのタイミングでJaveScriptファイルを読み込むかは考慮ポイントになります。

外部ファイルにしたJavaScriptコードをhtmlで読み込む例

外部ファイルにしたJavaScriptコードをhtmlで読み込む例です。

jsファイルの作成

JavaScriptコードを拡張子が「.js」になる外部ファイルを作成します。 ここでは、「hello.js」とします。

function hello(){
  document.write("Hello JavaScript");
}

htmlファイルにscriptタグを記述

htmlファイルにscriptタグを記述して外部ファイル化したJavaScriptコードを読み込んで使用するコードを追加します。

<html>
<head>
</head>
<body>
<script type="text/javascript" src="hello.js"></script>
<script type="text/javascript">
  hello();
</script>
</body>
</html>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。 表示した結果は次のようになります。

外部ファイルにしたJavaScriptコードをhtmlで読み込む例

もっと知識を広げるための参考

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Bcc /Eclipse /gcc /gdb /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /CORBA /Java EE(旧称J2EE) /JNI

ライブラリ/Framework/CMS
jQuery /Lucene /MyBatis /RESTEasy /Spring /Struts /Seasar2 /WordPress

ITインフラ OSとミドルウェア
Linux /Windows /シェル
Apache/Tomcat /MySQL /Redis /Solr /vsftpd

ITインフラ PC 製品
ZOTAC

ITインフラ サーバー
Web公開サーバー構築

ITインフラ ネットワーク
プログラミング /機器 /構築

ITインフラ セキュリティ
公開サーバーのセキュリティ

SI
ホームページの作り方 /小さな会社のISMS

その他
IT用語 /ITスキル体系 /トレンド履歴

スポンサーリンク