JavaScript どこで
<script>タグ
HTMLでは、JavaScriptコードは<script>タグと</script>タグの間に挿入されます。
古いJavaScriptの例では、type属性を使用する場合があります。<script type="text/javascript">.type属性は必須ではありません。JavaScriptはHTMLのデフォルトのスクリプト言語です。
JavaScript関数とイベント
JavaScriptの関数は JavaScript コードのブロックであり、「呼び出された」ときに実行できます。
たとえば、ユーザーがボタンをクリックしたときなど、イベントが発生したときに関数を呼び出すことができます。
関数とイベントについては、後の章で詳しく説明します。
<head>または<body>内のJavaScript
HTMLドキュメントには、スクリプトをいくつでも配置できます。
スクリプトは、HTMLページの<body>セクション、<head>セクション、あるいはその両方に配置できます。
<head>内のJavaScript
この例では、JavaScriptの関数がHTMLページの<head>セクションに配置されます。
ボタンがクリックされると、関数が呼び出されます。
例
<body>内のJavaScript
この例では、JavaScriptの関数がHTMLページの<body>セクションに配置されています。
ボタンがクリックされると、関数が呼び出されます。
例
スクリプトの解釈によって表示が遅くなるため、<body>要素の下部にスクリプトを配置すると、表示速度が向上します。
外部ファイルのJavaScript
スクリプトは、外部ファイルに配置することもできます。
外部ファイル: myScript.js
外部スクリプトは、同じコードが多くの異なる Webページで使用されている場合に実用的です。
JavaScript ファイルのファイル拡張子は.jsです。
外部スクリプトを使用するには、スクリプトファイルの名前を<script>タグのsrc(source)属性に入力します。
<head>または<body>に配置できます。
スクリプトは、<script>タグが配置されている場所とまったく同じように動作します。
外部スクリプトには<script>タグを含めることはできません。
外部JavaScriptの利点
スクリプトを外部ファイルに配置すると、いくつかの利点があります。
- HTMLとコードを分離します
- HTMLとJavaScript の読み取りと保守が容易になります。
- キャッシュされたJavaScriptファイルは、ページの読み込みを高速化できます
複数のスクリプトファイルを1つのページに追加するには、複数のスクリプトタグを使用します。
例
外部ファイル参照
外部スクリプトは、次の3つの方法で参照できます。
- 完全なURL(完全なWebアドレス)を使用する
- ファイルパス(/js/など)を使用する
- パスなし
この例では、完全なURLを使用してmyScript.jsにリンクします。
この例では、ファイルパスを使用してmyScript.jsにリンクします。
この例では、パスを使用せずにmyScript.jsにリンクします。
ファイルパスの詳細については、HTMLファイルパスの章を参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。