HTMLページ内でなく別ファイルに分離し読み込ませる
現在では特に例外的な事情
*1を除けばHTMLファイル、CSSファイル、JavaScriptファイルは、それぞれ別にし必要に応じて読み込ませて使うようになっています。HTML内にスクリプトが記述されているとメンテナンスの問題も発生します。HTML内にスクリプトが書かれていると、HTMLファイルを「HTMLコーダー」と「プログラマ」が、それぞれ編集することになります。複数人で編集すると整合性が撮れなくなったり不具合の原因になります。このため、HTML（構造）部分とJavaScript部分（動作）を分離しておくわけです。
それでは実際に分離させてみましょう。以下のスクリプトはHTMLページ内にプログラムが入っています。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<script type="text/javascript"><!--
alert("JavaScript");
// --></script>
</head>
<body>
<p>ページが読み込まれるとアラートダイアログを表示します</p>
</body>
</html>
これをHTMLファイルとJavaScriptファイルに分離しますが、まずプログラム部分だけを抽出し別ファイルとして保存します。この時保存するファイル名の拡張子は.jsにしてください。他の拡張子では読み込みません。
次にscriptタグでsrc属性に読み込むスクリプトファイルのパス（ファイル名）を指定します。スクリプトファイルは他のドメインのサーバー上にあるものでも問題なく読み込む事ができます。また、src属性にCGIファイル名を指定し、サーバー側で必要に応じてスクリプトやデータ（JSON形式など）を読み込ませることもできます。
実際に分離したものは以下のようになります。
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<script type="text/javascript" src="message.js"></script>
</head>
<body>
<p>ページが読み込まれるとアラートダイアログを表示します</p>
</body>
</html>
■.jsファイル
alert("JavaScript");
1つのscriptタグで読み込ませることができるファイルは1つだけです。このため、複数のスクリプトファイルを読み込ませるには、読み込ませるファイルの数だけscriptタグを列記しなければなりません。
*1
HTML内にCSSを書かないと駄目な場合もあります。例えばカーナビなどでは別ファイルになっているCSSファイルがデフォルトでは読み込まないようになっています（設定を変更すれば外部CSSファイルの読み込みはできます）。