JavaScript

■ JavaScript とは

JavaScript の特徴として、次のようなことがあげられます。

■ JavaScript を HTML 文書内で実行する方法

スタイルシートの CSS の設定内容を HTML 文書に反映させる 場合と同様に、つぎの３つの方法で、HTML ファイルから JavaScript を実行することができます。　（これらの方法のうち２つ以上を併用することも可能です。）

  1. JavaScript のコードを独立した別のファイルに保存して HTML 文書から読み込む。
  2. HTML 文書の先頭部分の <head> ～ </head> の間にまとめて書く。
  3. HTML 文書内の個々の要素に対してJavaScript を書く。

３つの方法のうち、方法 1 は、長い JavaScript のコードを記述する場合に適しているといえます。　また、JavaScript による同じ処理を複数の HTML 文書で使用する場合にも便利です。　一方、同じ処理を行う HTML 文書が他にない場合は、方法 2 でもかまいません。

方法 3 は、イベントハンドラ とともに、方法 1 や方法 2 で記述した JavaScript の関数を呼び出す 際に、よく使われます。

■ JavaScript を HTML 文書内で実行する方法１: 独立したファイルに保存し読み込む

JavaScript のコードを HTML 文書ファイル内ではなく、独立したファイルに保存した場合には、適用したい HTML ファイルの <head> ～ </head> の間に、<script> 要素を用いて以下のように記述します。　たとえば、JavaScript を sample.js というファイル名で保存した場合では、

HTMLソース
<head> ～ </head>

　<script type="text/javascript" src="sample.js"></script>

のように書きます。　この方法では、HTML 文書内での記述は <head> ～ </head> 間の１行のみですので、HTML 文書と JavaScript のコードが、ほぼ完全に分離された形となり、両者を別々に管理することが可能です。

また、この方法は、 <head> ～ </head> の間に、<script> の単一要素を記入をするだけでよいので、複数の HTML 文書で同じ JavaScript を使用する場合には便利 です。　ただし、<script> はペアタグですので、終了タグ </script> は省略できません。

■ JavaScript を HTML 文書内で実行する方法２: <head> ～ </head> の間にまとめて書く

JavaScript のコードを HTML 文書ファイル内の <head> ～ </head> の間にまとめて書く場合は、<script> 要素を用いて、　

HTMLソース
HTMLファイル 
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>JavaScriptサンプル</title>
      <script type="text/javascript">
         function hello() {
            document.form1.output.value="こんにちは！";
            return false;
         }
      </script>
   </head>
   <body>
      <form name="form1">
         <input type="text" name="output" 
         value="マウスポインターを置いてください"
         onMouseover="hello();" style="width: 20em;">
      </form>
   </body>
</html>

ブラウザー 表示例

のように書きます。　この方法には、HTML 文書の作成中に JavaScript の処理内容を簡単に確認できる利点があります。　したがって、HTML 文書の作成中に JavaScript のコーディングを同時に行う場合には便利です。　しかし、設定した JavaScript を他の HTML 文書でも使用する可能性がある場合には、JavaScript のコードを汎用性のある形で記述するとともに、JavaScript のコーディングが完成した時点で、方法１に移行する方がよいと思います。　その際には、 <script> ～ </script> の間にある JavaScript の記述を ".js" を拡張子としてもつファイル名で保存します。

■ JavaScript を HTML 文書内で実行する方法３: 各要素ごとにイベントハンドラの値として書く

JavaScript のコードを HTML 文書ファイル内の各要素ごとに イベントハンドラ を用いて指定する場合は、　

HTMLソース
<body> ～ </body> 
<form name="form2">
   <input type="text" name="output" value="クリックして！"
   onMousedown="document.form2.output.value = 'こんにちは！';"
   style="width: 20em;">
</form>

ブラウザー 表示例

のように書きます。　この方法では、HTML 文書内の個々の 要素 の イベントハンドラ（属性）として JavaScript を記述するため、長いスクリプトは書けません。

■ 複数のページで JavaScript を共有するには

上の方法 1 を用いて。　JavaScript のコードを 独立したファイルに保存した場合 は、容易に複数のページで JavaScript を共有することが出来ます。

保存された JavaScript のコードを利用する HTML 文書で、<script> 要素を用いて、この JavaScript のファイル名を指定するだけでよいのです。

■ 長い文字列を自動でスクロールするには

次のようにすると、type="text" を指定した <input>要素内の文字列が自動的にスクロールします。

HTMLソース
<head> ～ </head> 
<script type="text/javascript">
   strMsg = "長い文字列を自動でスクロールします．";
   strMsg = strMsg + strMsg;
   iCount = 0;
   function strMarquee(){
     document.msgBox.TextString.value 
        = strMsg.substring(iCount,strMsg.length);
     iCount 
        = ( iCount == (strMsg.length/2)-1 ) ? 0 : iCount+1;
   }
</script>
<body> ～ </body> 
<form name="msgBox">
   <input type="text" size="16" name="TextString">
</form>
<script type="text/javascript">
   setInterval("strMarquee()",200);
</script>

ブラウザー 表示例