【JavaScript】HTMLファイルからJavaScriptを使う方法！
結論から書くと、下記の２通りの方法があります。
HTMLファイルからJavaScriptを使う方法
- HTML内部にJavaScriptを書く。
- 外部のJavaScripファイルを読み込む。
では、それらの詳細について解説します。
scriptタグを使う。
この記事で紹介する２つの方法は、どちらもscriptタグを使います。
scriptタグを置くことが可能な場所
- headタグの中
- bodyタグの中
HTMLのheadタグ、bodyタグの中の任意の場所にscriptタグは置くことができます。
※HTMLの仕様により、htmlタグの直下には置くことができない点に注意して下さい。
HTML内部にJavaScriptを書く。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="簡単な説明！">
<meta name="format-detection" content="telephone=no">
<title>タイトルを書く。</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script>
console.log('Hello World!');
</script>
</body>
</html>このように、HTMLファイルの内部でscriptタグを使うことによってJavaScripを使うことが可能です。
scriptタグの中に書いたJavaScripは、そのscriptタグが読み込まれる時点で実行されます。
HTMLファイルは上の行から順番に読み込まれます。
scriptタグを置く場所
headタグの中に書かれる場合もありますが、基本的にscriptタグを置く場所はbodyタグの閉じタグの直前に置きます。
なぜなら、JavaScripからHTMLの要素を操作する際に、その操作する対象のHTMLの要素が読み込まれていないと、エラーが起きるためです。
簡易的なプログラムを書く時に使われる。
この書き方は、数行の簡易的なプログラムを書く際に、用いられます。
scriptタグの中のJavaScripが長くなると、HTMLファイルが読みづらくなるので、本格的にJavaScriptを書く場合は、この方法ではなく、外部ファイルにJavaScriptを書いて、それを読み込むという方法を使いますね。
詳細は次に解説します。
外部のJavaScripファイルを読み込む。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="簡単な説明！">
<meta name="format-detection" content="telephone=no">
<title>タイトルを書く。</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="main.js"></script>
</body>
</html>'use strict';
console.log('Hello World!');この様に、scriptタグのsrc属性の値にファイルのパスを書くことで、そのJavaScripで書かれたプログラムを読み込むことができます。
JavaScriptで書かれたファイルの拡張子は「js」です。例えば、「main.js」このように。
主にこの方法が使われますね。
scriptタグを置く場所
scriptタグを置く場所は、bodyタグの閉じタグの直前によく置かれます。
理由は、HTML内部にJavaScriptのコードを書く時と一緒で、操作するHTML要素が読み込まれていないとエラーがでるためです。
HTMLファイルは上の行から順番に読み込まれるので、bodyタグの閉じタグの直前だと、操作する全てのHTMLファイルが読み込まれたということになりますからね。
src属性を設定すると、scriptタグに囲まれた部分は無視される。
<script src="main.js">
alert('hoge');
</script>この様に、src属性によって、外部ファイルを読み込んでいる場合は、scriptタグの中に書かれたコードは無視されます。
上の例では、「alert(‘hoge’);」は無視されます。
分けて書けばOK
<script src="main.js"></script>
<script>
alert('hoge');
</script>この様に、２つのscriptタグに分けて書けば、どちらも上から順番に実行されます。
まとめ
では、この記事の内容をもう一度振り返っておきます。
前提として、HTMLファイルからJavaScriptを使う際は、scriptタグを使う。
scriptタグが置けるのは、任意のheadタグの中か任意のbodyタグの中である。注意が必要なのはhtmlタグの直下には置くことができないこと。
使い方は下記の２通り。
HTMLファイルからJavaScriptを使う方法
- HTML内部にJavaScriptを書く。
- 外部のJavaScripファイルを読み込む。
どちらの方法も、scriptタグはbodyタグの閉じタグの直前に置くのが普通である。なぜなら、HTMLファイルは上の行から順番に読み込まれるので、HTMLの要素をJavaScriptで操作する際に、HTML要素が先に読み込まれていないとエラー起きるから。
という感じですかね。
ではまたっ。