Smart

For Professional Web Designers and Developers

MENU

JavaScriptの基礎からはじめよう

2009年8月4日 コメントの追加
CATEGORY: 第1章 JavaScript導入ガイド TAGS: ,

JavaScriptはウェブブラウザに搭載されたスクリプト言語で、HTMLでページを作成できる人なら誰でも簡単に使えるほど簡単です。

<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(...) を直訳すると「文書として指定された文字列を書け」ということになります。

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

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

Welcom to Smart!!

TYPE属性

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

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

HTML5.0ではTYPE属性の初期値がtext/javascriptですので、JavaScriptの場合は属性の指定は不要になりました。 

<script>
<!--
document.write("Welcom to Smart!!");
// -->
</script>

CHARSET属性

charset属性は、外部スクリプトファイルのエンコードを指定する際に使用します。 

<script src="***" charset="UTF-8"></script>

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

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

<script>
<!---コメントの始まり

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

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

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

<script>
<!-------------
     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 printMsg() {
    alert("Hello!");
}

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

<html>
<head>
<title>JavaScript Sample</title>
<script src="test.js"></script>
</head>
<body>
   :
<input type="button" value="OK" onclick="printMsg()">
   :
</body>
</html>

コメントを残す

Jump to the top