JavaScriptの使用法

JavaScript の概要 JavaScript の出力

<script> タグ

HTML では、JavaScript コードは <script> タグと </script> タグの間に記述する必要があります。

例

<script>
document.getElementById("demo").innerHTML = "私の最初の段落 JavaScript";
</script>

自分で試してみてください

注:古い JavaScript の例では、type 属性: <script type="text/javascript"> が使用されている場合があります。

注:type 属性は必須ではありません。 JavaScript は HTML のデフォルトのスクリプト言語です。

JavaScript の関数とイベント

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

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

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

<head> または lt;body>

内の JavaScript

HTML ドキュメントにはスクリプトをいくつでも配置できます。

スクリプトは、HTML ページの <body> セクションまたは <head> セクション、あるいはその両方に配置できます。

<head>

の JavaScript

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

この関数は、ボタンをクリックすると呼び出されます:

例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落が変更されました。";
}
</script>
</head>

<body>

<h1>ウェブページ</h1>
<p id="demo">段落</p>
<button type="button" onclick="myFunction()">それを試してみてください</button>

</body>
</html>

自分で試してみてください

<body> の JavaScript

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

この関数は、ボタンをクリックすると呼び出されます:

例

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">段落</p>
<button type="button" onclick="myFunction()">それを試してみてください</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落が変更されました。";
}
</script>

</body>
</html>

自分で試してみてください

ヒント: スクリプトを <body> 要素の下部に配置すると、スクリプトのコンパイルによって表示速度が低下するため、表示速度が向上します。

外部スクリプト

スクリプトは外部ファイルに配置できます。

外部ファイル: myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "段落が変更されました。";
}

外部スクリプトは、同じスクリプトが多くの異なるページで使用される場合に便利です。

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

外部スクリプトを使用するには、<script> タグの src (ソース) 属性にスクリプトの名前を設定します。

例

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

自分で試してみてください

外部スクリプト参照は、<head> または <body> に配置できます。

スクリプトは、<script> タグ内に囲まれているかのように動作します。

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

外部 JavaScript の利点

スクリプトを外部ファイルに配置すると、次のような利点があります。

  • HTML とコードを分離する
  • HTML と JavaScript を読みやすく、保守しやすくする
  • キャッシュされた JavaScript ファイルにより、ページの読み込みが高速化されます

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

例

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

外部参照

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

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

例

<script src="https://w3cstudy.cc/js/myScript1.js"></script>

自分で試してみてください

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

例

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

自分で試してみてください

この例では、現在のページと同じフォルダー内のスクリプトをリンクします。

例

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

自分で試してみてください

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

JavaScript の概要 JavaScript の出力