第1章 JavaScript導入ガイド

JavaScriptの基礎からはじめよう

2009年8月4日

SCRIPT要素

JavaScriptはSCRIPT要素を使って、HTMLファイルに直接記述、もしくは外部スクリプトを読み込んで実行することができます。

JavaScriptを宣言する方法
<script>
    //ここにJavaScriptプログラムを記述する
</script>

SCRIPT要素はHEAD要素内に書かれた場合はページの解析を続けるより先に、指定したスクリプトの読み込み、もしくは埋め込んだスクリプトを実行します。ページが解析される前に読み込み・実行したい場合はHEAD要素内に、BODY要素内の読み込みを先に実行させたい場合は閉じBODY要素の上に設置します。

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

JavaScript外部ファイル

JavaScriptは外部ファイルとして作成し、HTMLから呼び出すこともできます。外部スクリプトを読み込む場合は src属性を使ってファイルを指定します。

<script src="js/sample.js"></script>

例えば、下記の内容を test.js など、拡張子が .js のファイルに記述しておきます。
外部JSファイルはJavaScript専用のファイルを意味しているので、SCRIPTタグで囲む必要はありません。

function printMsg() {
    alert("Hello!");
}

外部ファイルはSCRIPT要素のSRC属性にファイルのURLを指定することで読み込むことができます。
下記のHTMLファイルを作成し、ブラウザで表示してください。HTMLファイルと同階層にtest.jsファイルがあれば、アラートが表示されるはずです。

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

外部JSファイルを読み込んだ場合、読み込まれたその行に記述されたのと同じように処理されます。
例えば、下記のように複数の外部JSファイルを読み込んだ場合、それぞれのファイルの読み込み速度が違ったとします。

<script src="test1.js"></script>
<script src="test2.js"></script>

後に記載されたtest2.jsのほうが先の読みこまれたとしても、先に記載されたtest1.jsが読み込まれて実行されるまでは実行されません。
外部JSファイル、インラインスクリプト問わず、HTMLコードの上から順番通りにコードが実行されます。

JavaScriptが書かれた順番に処理されるということは、上で処理されているスクリプトが終わるまではHTMLの解析も待ち状態になります。
そのため、先に読み込んでおく必要があるスクリプト以外は閉じBODY要素の上に書いたほうが良いといえます。

推奨としては、jQueryなど先に読み込んでおきたいものはHEAD要素で読み込んでおき、それ以外のHEAD要素に書く必要がないすべてのJavaScriptは閉じBODY要素の上に記述します。

CHARSET属性

charset属性は、外部スクリプトファイルの文字コードを指定する際に使用します。
指定しなくてもほとんど問題ありませんが、呼び出し元のHTMLファイルと外部JavaScriptファイルで文字コードが違う場合にはエラーの原因となることがあります。その際は外部JavaScriptファイルの文字コード指定が必要になります。

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

文(ステートメント)

文の区切り

JavaScriptの文 (ステートメント) はセミコロン (;) によって区切られます。

console.log("test");

セミコロンで区切れば、1行に複数の文を記述できます。

a = 1; b = 2; 

1行に1文しか記述しない時はセミコロンを省略できますが、明示的に終了のセミコロンを入れことをおススメします。

ステートメントは単一行に記述することがほとんどですが、複数行に記述することもできます。

a =
1;
b =
2;

長い文になる際などに有効です。

コード行の分割

文字列を複数行にしたい場合、バックスラッシュを末尾に追加します。

document.write("Hello \
World!");

コメントアウト

コメントアウトとは、命令文として解釈されたくない行を無効化することで、JavaScriptにも一行コメントアウトと複数行コメントアウトの2種類の方法が用意されています。

一行コメントアウト

// 以降の文章をコメントアウトします。
次の行はコメントアウトされているので、実行されません。

// console.log("test");

命令文の後にコメントアウトを追加することもできます。
次の行はセミコロンまでの命令文が実行され、//以降の文字列はコメントアウトとして扱われます。

console.log("test"); // コメント

複数行コメントアウト

複数行のコメントは /* で始まり */ で終ります。

/*
console.log("test");
*/

複数行コメント内に複数行コメントがあると、構文エラーが発生するので注意してください。埋め込まれた複数行コメントの終わりを示す */ が、複数行コメント全体の終わりとして解釈されてしまうからです。

大文字と小文字

JavaScriptは大文字と小文字を区別します。

たとえば、下記の変数はいずれも別の変数として扱われます。

A = 1;
a = 1;

HTML5.0での簡略化

HTML5.0は様々な記述が簡素化されています。JavaSciptも例外ではなく、ここで挙げる書き方はHTML5.0では不要で、古いブラウザ向けとなっています。

TYPE属性

HTML4.01 ではTYPE属性が必須属性として定義されました。値には "text/javascript" を指定します。

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

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

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

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

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

<script>
<!---コメントの始まり
     document.write("Hello,JavaScript!!")
//--->コメントの終わり
</script>

Content-Script-Type

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

<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>

Comment

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。