JavaScript を定義する
<script language="JavaScript">
<!--
ここにスクリプトを記述します
// -->
</script>
HTML 4.0 以降は
<script type="text/javascript">
<!--
ここにスクリプトを記述します
// -->
</script>
  1. はじめにここからスクリプトを記述するというタグを記述します。language 属性に JavaScript、HTML 4.0 以降に準拠する場合には type 属性に text/javascript とします。<script language="JavaScript" type="text/javascript"> としても良いと思います。

    ※以前は language 属性と type 属性の2つ記述していましたが、現在は type 属性のみで記述しています。

  2. 未対応のブラウザのために <!-- を記述して改行します。
  3. ここからスクリプトを記述します。
  4. 2番目のコメントの終了です。(<!-- から // --> の中にスクリプトを記述します)
  5. 最後に </script> で閉じます。

JavaScript を記述するページには <head> 〜 </head> 内に以下の meta 要素を追加しておいたほうが良いと思います。

<meta http-equiv="Content-Script-Type" content="text/javascript">
JavaScript 未対応のブラウザや、無効にしている時のためにその趣旨を表示する
<noscript><b>ブラウザの設定で JavaScript を有効にしてください。</b></noscript>

<noscript> 〜 </noscript> のタグを使用してこの間に入れます。

↑に JavaScript 未対応のブラウザや無効の状態のときに表示されます。

コメントを入れる
<script type="text/javascript">
<!--
alert("こんにちは");			// 警告ウィンドウ

document.write("こんばんは");		/* 文字の出力 */

/*
document.open();
document.write("おはようございます");
document.close();
*/
// -->
</script>

HTML においてのコメントは <!-- 〜〜 --> ですが、JavaScript では ///* 〜〜 */ を使用します。もちろんソース自体をコメントとすることも出来ます。

JavaScript を記述する
<script type="text/javascript">
<!--
var i = 0;
if (i == 0) {
	document.write("変数 i は 0 です");
}
// -->
</script>
これは上記と同じことです
<script type="text/javascript">
<!--
var i = 0
if (i == 0) document.write("変数 i は 0 です")

if (i == 0)
document.write("変数 i は 0 です")
// -->
</script>

基本的に1つの文(ステートメント)の最後に「;」(セミコロン)をつけます。ただし、「;」をつけない場合は改行する必要があります。i = 0; のように半角スペースを空けたりインデントしていますが、詰めて記述しても問題ありません。自分が見やすいように記述するのが良いと思います。

if のようにあることに対して他の処理をする時などは、「{...}」(カーリーブラケット/カーリーブレース)を使用します。

ブラケット省略時の処理
<script type="text/javascript">
<!--
var i = 0;
if (i == 1)
document.write("変数 i は 1 です。");				// if (i == 1) の処理になるため表示されない
document.write("変数 i は 1 です。");				// if (i == 1) の範囲外の処理になるため表示される

if (i == 1) {
	document.write("変数 i は 1 です。");			// if (i == 1) {...} の処理になるため
	document.write("変数 i は 1 です。");			// この2つは表示されない
}

document.write("変数 i は 0 です。");				// どの処理にも当てはまらないので表示される

if (i == 1) document.write("変数 i は 1 です。");		// if (i == 1) ... else if (i == 2) ... else ...
else if (i == 2) document.write("変数 i は 2 です。");		// の処理になるため else の処理結果が表示される
else document.write("変数 i は 1 でも 2 でもありません。");	// if (i == 1) {...} else if (i == 2) {...} else {...} と同じ
// -->
</script>

単一の処理の場合はブラケットを省略しても動作します。ただし、直後にあるステートメントのみ処理されますので注意が必要です。

JavaScript を外部ファイルにする(このスクリプトを「test.js」として保存)
window.onload = function() {
	alert("こんにちは");
}
外部スクリプトファイル (.js) を読み込む
<script type="text/javascript" src="./test.js"></script>

JavaScript を外部ファイルにするには、スクリプトの部分を「任意のファイル名.js」として拡張子が .js のファイルとして保存します。 このときにスクリプトタグ(<script> 〜 </script>)とコメントタグ(<!-- // -->)は記述しないようにしてください。(JavaScript のコメント(// や /* 〜〜 */)は問題ありません)

外部スクリプトファイルを読み込むためには <script> に src="" 属性を追加してパスを指定します。

たとえば、上記のスクリプトを test.js として保存します。そして、このスクリプトファイルを読み込むためには test.js のパスを src="" に指定します。

[PR] Yahoo!ショッピング