概要
このチュートリアルは、HTMLページにJavascriptコードを埋め込む方法について示します。
HTMLページにJavascriptを記述するには<script>要素を使用します。
HTMLページにJavascriptを記述する方法は、以下の2つがあります。
- HTMLページに直接Javascriptコードを埋め込む
- 外部にJavascriptコードを記載したファイルを作成し、それを参照する
HTMLページへのJavascriptコードの埋め込み
HTMLページに直接Javascriptコードを埋め込むことは、推奨されていません。
この方法で記載する場合は、検証目的にみにするべきであります。
<script>要素に記載されたJavascriptコードは、上から下まで解釈されます。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
<script>
alert('Hello, World!');
</script>
</head>
<body>
</body>
</html>
上の例では、<script>要素の中でalert()関数を使用することによりHello, World!メッセージを画面に表示します。
外部Javascriptファイルの読み込み
以下に、外部Javascriptファイルを使用する方法を記載します。
１．拡張子.jsのファイルを作成する(例：main.js)
２．jsファイルを保存するフォルダーを作成し、１で作成したフィアルをその中に保存する
３．HTMLファイルの<script>タグ内にsrc属性で２で作成したファイルを指定する
HTMLファイルの記載例
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Example</title>
<script src="js/mail.js"></script>
</head>
<body>
</body>
</html>
main.jsファイルに以下の内容を記載し、default.htmlを開くと"Hello, World!"とメッセージが表示される。
alert('Hello, World!');
１つのページに複数のJavascriptファイルを読み込ませる場合、表示されている順に実行される。
<script src="js/main1.js"></script>
<script src="js/main2.js"></script>
この例では先にmain1.jsが実行されその後、main2.jsが実行される。
Javascriptファイルを読み込ませる記述は、</body>タグの直前に記載するほうがよい。
それは、ページのレンダリングフェーズにおいてブランクページが表示されるからです。
async及びdefer属性
Javascriptコードのロードと実行する方法を変えるために、<script>要素内にasync及びdefar属性を使用することができます。
これらの属性はJavascriptファイルを外部に置く場合のみ作用します。
async属性は、Webブラウザに非同期にJavascriptを実行するように指示するものです。
この属性は、Javascriptファイルを順番に実行することを保証しないものです。
以下の例で言えば、必ず最初にmain.jsが実行されるわけではないということになります。
<script async src="main1.js"></script>
<script async src="main2.js"></script>
defar属性を使用すると、ドキュメントが全て解析された後にJavascriptファイルが実行されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript defer demonstration</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
このページでは、HTMLファイルの中でJavascriptを使用する方法について記載しました。