JavaScript の場所

❮ 前章へ 次章へ ❯

<script> タグ

HTMLでは、JavaScript コードを <script> タグと </script> タグの間に挿入しなければなりません。

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Try it Yourself »

古い JavaScript の例では、次のような type 属性を使用していることがあります:<script type="text/javascript">。
type 属性は必須ではありません。JavaScript は、HTML のデフォルトのスクリプト言語です。


JavaScript関数とイベント

JavaScript 関数 は、呼び出すと実行される JavaScript コードのブロックです。

例えば、ユーザがボタンをクリックしたときなど、イベントが発生したときに関数を呼び出すことができます。

関数やイベントについては、後の章で詳しく説明します。


JavaScript は <head> か <body> か

幾つものスクリプトを、HTML 文書に配置することができます。

スクリプトは、HTML ページの <body> セクションか <head> セクションに、またはその両方に置くことができます。


<head> 内の JavaScript

この例では、HTML ページの <head> セクションに JavaScript 関数を配置しています。

この関数は、ボタンをクリックしたときに呼び出されます(invoke、call):

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

Try it Yourself »

<body> 内の JavaScript

この例では、HTML ページの <body> セクションに JavaScript 関数を配置しています。

この関数は、ボタンをクリックしたときに呼び出されます(invoke、call):

<!DOCTYPE html>
<html>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>
Try it Yourself »

スクリプトのコンパイルによって表示速度が低下するため、<body> 要素の最下部にスクリプトを配置すると、表示速度が改善されます。


外部 JavaScript

スクリプトは、外部ファイルに配置することもできます:

外部ファイル:myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}

外部スクリプトは、同じコードが多くの Web ページで使用する場合に役立ちます。

JavaScript ファイルの拡張子は .js です。

外部スクリプトを使用するには、スクリプト・ファイルの名前を <script> タグの src(source)属性に指定します:

<!DOCTYPE html>
<html>
<body>

<script src="myScript.js"></script>

</body>
</html>
Try it Yourself »

外部スクリプトの参照を、<head> や <body> に置くことができます。

スクリプトは、<script> タグが置かれた場所に正確に配置されているかのように動作します。(何のことか?)

外部スクリプトに <script> タグを含めることはできません。


外部 JavaScript の利点

スクリプトを外部ファイルに置くことにはいくつかの利点があります:

1 ページに複数のスクリプトファイルを追加するには、複数のスクリプトタグを使用します:

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

外部参照

外部スクリプトは、完全な URL か、現在の Web ページからの相対パスで参照できます。

この例では、完全な URL を使用してスクリプトにリンクしています:

<script src="http://www.w3schools.com/js/myScript1.js"></script>

Try it Yourself »

この例では、現在の Web サイト上の指定されたフォルダにあるスクリプトを使用しています:

<script src="/js/myScript1.js"></script>

Try it Yourself »

この例は、現在のページと同じフォルダにあるスクリプトにリンクしています:

<script src="myScript1.js"></script>

Try it Yourself »

ファイルパスの詳細については、 HTML ファイルパスの章をご覧ください。


❮ 前章へ 次章へ ❯