JavaScript【 サンプル 】1 ～ 記述方法の基本
つい忘れがちな JavaScript のサンプルを挙げてみます。
今回は、JavaScript の 基本的な記述方法についてのサンプルを紹介します。
目次
１．script タグの書き方
２．noscript タグ
３．コメントの書き方
４．実行方法
１．script タグの書き方
HTML ファイルに JavaScript を記述する場合には、script 要素内（ <script> ～ </script> ）に記述します。
script タグは、HTML ファイル内の body 要素内（ <body> ～ </body> ）に記述します。
<body>
<script type="text/javascript">
<!--
// ここに JavaScript のソースコードを記述する
//-->
</script>
</body>
script タグの内側の「 <!– 」と「 //–> 」は、script タグに非対応のブラウザ対策です。
「 <!– 」と「 //–> 」を記述していると、ユーザーが script タグに非対応のブラウザを使用した場合に、スクリプト要素内のソースコードが テキストとして表示されるのを防ぎます。
▲目次へ戻る
２．noscript タグ
ブラウザが JavaScript に対応していない場合は、script タグは読み込まれず、script タグ内の javaScript コードは通常「 <!– ～ //–> 」内に記述するため、何も表示されません。
このような事態を想定して、ブラウザが JavaScript に対応していない場合に 何らかのメッセージを表示させたい時は、noscript タグを使用します。
<body>
<script type="text/javascript">
<!--
// JavaScript のソースコード
//-->
</script>
<noscript>
// JavaScript に対応していない場合に表示させたい内容を記述する
</noscript>
</body>
noscript タグ内の内容は、ブラウザが JavaScript に対応している場合は表示されず、JavaScript に非対応のブラウザの場合のみ表示されます。
▲目次へ戻る
３．コメントの書き方
ソースコードの説明や注意書きなど、Webページには表示させず、ファイル上にのみ残しておきたい情報があります。
このような内容は、コメントアウトを使って記述します。
<script type="text/javascript">
<!--
//この行がコメントアウトされる
alert("Hello!"); //この行のこのエリアがコメントアウトされる
/*
スラッシュとアスタリスクで囲まれた部分
全てがコメントアウトされる
*/
//-->
</script>
「 // 」を記述すると、それ以降の 1 行がコメントアウトされます。
それより前の部分はスクリプトとして実行されるので、スクリプトの後ろにコメントを残すことができます。
複数行をコメントアウトする場合は、コメントを「 /* ～ */ 」で囲みます。
▲目次へ戻る
４．実行方法
ページの読み込みと同時に実行
script タグ内に JavaScript の命令を記述することで、ページの読み込みと同時に実行されます。
<script type="text/javascript">
<!--
document.getElementById("msg").innerHTML = "Welcome!";
//-->
</script>
ボタンをクリックした時に実行
ボタンをクリックした時に実行したい場合は、次のように記述します。
<script type="text/javascript">
<!--
function disp() {
alert("Hello!");
}
//-->
</script>
<form>
<input type="button" value="実行" onClick="disp()">
</form>
実際にボタンをクリックしてみて下さい。
ボタンをクリックするというイベント（ 動作 ）をきっかけにスクリプトを呼び出すため、「 onClick 」というイベント処理を使用しています。
onClick イベントによって、ボタンがクリックされたら実行する という ユーザーの動きに合わせた処理が可能になります。
ユーザー定義関数を使用せず、次のように スクリプトを直接記述することもできます。
<form>
<input type="button" value="実行" onClick="alert('Hello!')">
</form>
直接記述する場合は、引用符の使い方に注意をします（ 外側をダブルコーテーションで囲んだら、内側はシングルコーテーションを使用。逆も可 ）。
リンクをクリックした時に実行
リンクをクリックした時に実行したい場合は、次のように記述します。
<script type="text/javascript">
<!--
function disp() {
alert("Hi!");
}
//-->
</script>
<a href="javascript:disp()">実行</a>
実際にリンクをクリックしてみて下さい。
実行
ユーザー定義関数を使用せず、次のように スクリプトを直接記述することもできます。
<a href="javascript:alert('Hi!')">実行</a>
直接記述する場合は、引用符の使い方に注意をします（ 外側をダブルコーテーションで囲んだら、内側はシングルコーテーションを使用。逆も可 ）。
▲目次へ戻る
