HTMLでは、JavaScript コードを <script> タグと </script> タグの間に挿入しなければなりません。
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
古い JavaScript の例では、次のような type 属性を使用していることがあります:<script type="text/javascript">。
type 属性は必須ではありません。JavaScript は、HTML のデフォルトのスクリプト言語です。
JavaScript 関数 は、呼び出すと実行される JavaScript コードのブロックです。
例えば、ユーザがボタンをクリックしたときなど、イベントが発生したときに関数を呼び出すことができます。
関数やイベントについては、後の章で詳しく説明します。
幾つものスクリプトを、HTML 文書に配置することができます。
スクリプトは、HTML ページの <body> セクションか <head> セクションに、またはその両方に置くことができます。
この例では、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 »
この例では、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> 要素の最下部にスクリプトを配置すると、表示速度が改善されます。
スクリプトは、外部ファイルに配置することもできます:
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> タグを含めることはできません。
スクリプトを外部ファイルに置くことにはいくつかの利点があります:
1 ページに複数のスクリプトファイルを追加するには、複数のスクリプトタグを使用します:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部スクリプトは、完全な URL か、現在の Web ページからの相対パスで参照できます。
この例では、完全な URL を使用してスクリプトにリンクしています:
この例では、現在の Web サイト上の指定されたフォルダにあるスクリプトを使用しています:
この例は、現在のページと同じフォルダにあるスクリプトにリンクしています:
ファイルパスの詳細については、 HTML ファイルパスの章をご覧ください。