JavaScriptの基礎からはじめよう


JavaScriptはウェブブラウザに搭載されたスクリプト言語です。HTMLでページを作成できる人なら誰でも簡単に使えるほど簡単で、それでいてブラウザ、プラグイン、Javaアプレットを操作することができます。

<SCRIPT>タグ

JavaScriptは<SCRIPT>タグを使って、HTMLファイルに直接記述できます。

JavaScriptを宣言する方法

<SCRIPT>
    //ここにJavaScriptプログラムを記述する
</SCRIPT>

<SCRIPT>タグをどこにでも記述できますが、通常は次の2つの場所になります。

  • <HEAD>~</HEAD>の間:命令文、関数を使用するとき
  • <BODY>~</BODY>の間:イベントハンドラーを使用するとき

HTMLファイルは上から下へ向かって読み込まれるので、書いた場所が上であるほど先に実行されることになります。最初に実行させたいスクリプト、または関数などは<HEAD>ブロックに記述しましょう。

<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>

<SCRIPT>
      //ここにJavaScriptプログラムを記述する
      document.write("Welcom to Smart!!")
</SCRIPT>

</BODY>
</HTML>

上のサンプルですが、<SCRIPT>タグに document.write(...) という命令文があります。documentは日本語で「文書」という意味ですが、ここでの document は括弧の中にある文字列を「文書」というオブジェクトとして扱うということです。write は「書く」という命令。ですから、 document.write(...) を直訳すると「文書として指定された文字列を書け」ということになります。

ちなみに、ここでは文字列を扱いましたが、括弧内は文字列でも変数または関数でもかまいません。文字列を扱うときはダブルクォーテーション(")で囲こむことをお忘れなく。

実行結果は下記のとおりです。

 

TYPE属性

HTML4.01 では後述のLANGUAGE属性が却下され、代わりにTYPE属性が必須属性として定義されました。HTML4.01に準拠する場合は、LANGUAGE属性の代わりにTYPE属性を指定するようにしましょう。値には "text/javascript" を指定します。

<SCRIPT TYPE="text/javascript">
<!--
document.write("Welcom to Smart!!");
// -->
</SCRIPT>

LANGUAGE属性

HTML4.01で使われなくなった属性です。<SCRIPT> タグのLANGUAGE属性で、使用するJavaScriptのバージョンを指定することもできます。例えば、次のようにすると、JavaScript 1.2をサポートしているブラウザでのみ動作させることができます。

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
document.write("JavaScript 1.2 をサポートしてるよ");
// -->
</SCRIPT>

JavaScriptに対応していないブラウザ

JavaScriptに対応していないブラウザでJavaScriptを読み込むと、<SCRIPT>タグブロックの中身が画面に表示されてしまいます。
この問題を回避するために、<SCRIPT>タグをコメント中に記述しておくことが出来ます。ただし、コメントの終了タグ(-->)はSyntaxErrorになってしまうので 、この部分はJavaScriptのコメント(//)にします。

<SCRIPT LANGUAGE="JavaScript">
<!---コメントの始まり

     document.write("Hello,JavaScript!!")

//--->コメントの終わり
</SCRIPT>

また、JavaScriptに対応していないブラウザのユーザーにJavaScriptを使っていることを知らせたいときには、コメントの後にさらにメッセージを書きます。

<SCRIPT LANGUAGE="JavaScript">
<!-------------

     document.write("Hello,JavaScript!!")

//------------>
JavaScript対応のブラウザを使えば、このページをより楽しめます。
</SCRIPT>

「JavaScript対応のブラウザを使えば~」の部分はJavaScript対応のブラウザではコメントであるために無視されますが、JavaScript未対応のブラウザではコメント外となり 、"-->"以降のメッセージが表示されます。

Content-Script-Type

イベントハンドラ(onXxxx="~")に記述したスクリプトの言語を指定するため、HTML4.01では、HTMLのヘッダ部に、下記のようなMETA記述を行うことを推奨しています。

<HTML>
<HEAD>
<TITLE>JavaScript Sample</TITLE>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
</HEAD>
<BODY>
   :
<INPUT TYPE="button" VALUE="OK" onClick="~">
   :
</BODY>
</HTML>

JavaScript外部ファイル

JavaScriptのスクリプトを外部ファイルとして作成し、HTMLから呼び出すこともできます。例えば、下記の内容を test.js など、拡張子が .js のファイルに記述しておきます。

function ohayou() {
    window.alert("Hello!");
}

これを、例えば次のように呼び出すことができます。

<HTML>
<HEAD>
<TITLE>JavaScript Sample</TITLE>
<SCRIPT TYPE="text/javascript" SRC="test.js"></SCRIPT>
</HEAD>
<BODY>
   :
<INPUT TYPE="button" VALUE="OK" onClick="ohayou()">
   :
</BODY>
</HTML>

PAGE TOP

新着記事

タグクラウド

Smartからのお知らせ

関連サイト