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

JavaScriptの外部ファイル化―jsファイル作成、htmlのjsファイル読み込みなど

jsファイル作成、htmlのjsファイル読み込みなど。JavaScriptの外部ファイル化をテーマに、jsファイルの作り方、読み込み方法、jQueryなどのライブラリの使い方についてまとめています。

▲記事トップへ

目次

この記事の目次です。

1. JavaScriptの外部ファイル化
2. JavaScriptの外部ファイルの作り方
3. 外部ファイルにしたJavaScriptコードをhtmlで読み込む例
4. jQueryの外部ファイル化の例

もっと知識を広げるための参考
更新履歴

1. JavaScriptの外部ファイル化

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

2. JavaScriptの外部ファイルの作り方

JavaScriptの外部ファイルの作り方は以下の通りです。

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

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

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

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

3. 外部ファイルにした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で読み込む例

4. jQueryの外部ファイル化の例

少々応用的な例になりますが、jQueryの外部ファイル化の例です。 jQueryができれば、他のJavaScriptライブラリを追加するときも同様にできると思います。

jQueryとは

JavaScriptライブラリのjQueryに関連した技術情報を掲載しています。

詳細

jQuery.comからダウンロードして使用

jQueryはダウンロードしてきたjsファイルをWebスペースにアップロードして、Webページで使用することができます。 jQueryのjsファイルは、http://jquery.com/download/より、ダウンロードできます。

jQueryは、Rroduction版とDevelopment版が用意されています。 Rroduction版は軽量にソースコードを整理したライブラリファイル1つだけが配布されるものです。 通常は、軽量なProduction版で十分と思います。

ダウンロードしてきたjsファイルを使用する例

ダウンロードしてきたjsファイル使用する例です。

<head>
<script src="jquery-3.4.1.min.js"></script>
</head>

CDNを使用

Googleなどが提供しているjQueryのCDNを利用してWebページでjQueryを使用することもできます。

CDNのメリット

CDNのメリットとしては、CDNを利用しているサイトは多く、ブラウザが他のサイトでCDNのjQueryをキャッシュしている可能性が高く、表示の高速化が期待点が挙げられます。

CDNのディメリット

ディメリットとしては以下の懸念点が考えられます。

GoogleのCDNを利用してjQueryを使用する例

GoogleのCDNを利用してjQueryを使用する例です。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

MicrosoftのCDNを利用してjQueryを使用する例

MicrosoftのCDNを利用してjQueryを使用する例です。

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>

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

更新履歴

更新履歴になります。

戻る

スポンサーリンク

サイト内のページ

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

開発環境
Ant /Burp /Eclipse /Fiddler /gcc /gdb /Git /g++ /JDK /JMeter /JUnit /Teraterm /ZAP

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

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

Web API
Google Maps

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

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

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

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

PC製品
ZOTAC

SI
ホームページの作り方

その他
IT用語 /ITスキル体系

スポンサーリンク

関連サイト内検索ツール

zealseedsおよび関連サイト内のページが検索できます。

IPアドレス確認ツール

あなたのグローバルIPアドレスは以下です。

35.170.64.185

HTMLの表示色確認ツール

パスワード生成ツール

文字数のプルダウンを選択して、取得ボタンを押すと「a~z、A~Z、0~9」の文字を ランダムに組み合わせた文字列が表示されます。

ここに生成されます。

スポンサーリンク