トップ
言語
JavaScript
入門編
JavaScriptの外部ファイル化
トップ
言語
JavaScript
入門編
JavaScriptの外部ファイル化
jsファイル作成、htmlのjsファイル読み込みなど。JavaScriptの外部ファイル化をテーマに、jsファイルの作り方、読み込み方法、jQueryなどのライブラリの使い方についてまとめています。
この記事の目次です。
1. JavaScriptの外部ファイル化
2. JavaScriptの外部ファイルの作り方
3. 外部ファイルにしたJavaScriptコードをhtmlで読み込む例
4. jQueryの外部ファイル化の例
htmlファイルに記述していたJavaScriptのコードを別ファイルに記述して、htmlで読み込んでJavaScriptを実行することができます。
JavaScriptの外部ファイルの作り方は以下の通りです。
scriptタグに記述している内容を拡張子が「.js」となるファイルに保存します。 htmlタグは含めないで記述します。
htmlファイル側にscriptタグを追加します。 htmlファイル側でscriptタグのsrc属性で「.js」ファイルのURLまたはリソースパスを指定します。
scriptタグはhtmlの任意の場所に記述できます。
htmlファイルは、ファイルの先頭から読み込まれて表示されます。 scriptタグを読み込むタイミングも記述位置によって変わってきます。
例えば、htmlのページを表示してから使うJavaScriptコードであれば、 htmlの最下部に記述することでページを表示するまでの時間が短縮できてユーザに早くページの内容を見てもらえます。 どのタイミングでJaveScriptファイルを読み込むかは考慮ポイントになります。
外部ファイルにしたJavaScriptコードをhtmlで読み込む例です。
JavaScriptコードを拡張子が「.js」になる外部ファイルを作成します。 ここでは、「hello.js」とします。
function hello(){
document.write("Hello JavaScript");
}
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など、ブラウザで開けば表示できます。 表示した結果は次のようになります。
少々応用的な例になりますが、jQueryの外部ファイル化の例です。 jQueryができれば、他のJavaScriptライブラリを追加するときも同様にできると思います。
JavaScriptライブラリのjQueryに関連した技術情報を掲載しています。
jQueryはダウンロードしてきたjsファイルをWebスペースにアップロードして、Webページで使用することができます。 jQueryのjsファイルは、http://jquery.com/download/より、ダウンロードできます。
jQueryは、Rroduction版とDevelopment版が用意されています。 Rroduction版は軽量にソースコードを整理したライブラリファイル1つだけが配布されるものです。 通常は、軽量なProduction版で十分と思います。
ダウンロードしてきたjsファイル使用する例です。
<head> <script src="jquery-3.4.1.min.js"></script> </head>
Googleなどが提供しているjQueryのCDNを利用してWebページでjQueryを使用することもできます。
CDNのメリットとしては、CDNを利用しているサイトは多く、ブラウザが他のサイトで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を使用する例です。
<head> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> </head>
JavaScriptの入門から応用まで。JavaScript言語についてまとめています。
更新履歴になります。
スポンサーリンク
サイト内のページ
言語
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インフラセキュリティ
公開サーバーのセキュリティ
SI
ホームページの作り方
スポンサーリンク
関連サイト内検索ツール
zealseedsおよび関連サイト内のページが検索できます。
IPアドレス確認ツール
あなたのグローバルIPアドレスは以下です。
18.116.28.79
HTMLの表示色確認ツール
パスワード生成ツール
文字数のプルダウンを選択して、取得ボタンを押すと「a～z、A～Z、0～9」の文字を ランダムに組み合わせた文字列が表示されます。
ここに生成されます。
スポンサーリンク
Copyright (C) 2007-2024 zealseeds. All Rights Reserved. Loarding…