第1章 JavaScript導入ガイド

JavaScriptの基礎

2009年8月4日

SCRIPTタグ

HTMLにJavaScriptのスクリプトを記述するには、SCRIPTタグを使います。SCRIPTタグはスクリプトを記述したり、外部スクリプトファイルを読み込んで実行することができます。

SCRIPT要素内にスクリプトを記述する例
<script>
// ここにスクリプトを記述する
</script>
外部スクリプトを読み込む例
<script src="外部スクリプトのURL"></script>

SCRIPTタグの属性のほとんどは外部スクリプトを読み込む際に使います。

SCRIPTタグの属性

SRC
外部スクリプトのURIを指定し、実行します。
ASYNC
外部スクリプトファイルを読み込むときに有効です。この属性を指定すると、非同期でスクリプトを読み込み、即時で実行します。これにより、ページのレンダリングを止めることなくスクリプトを実行できます。

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

SCRIPTタグを記述

SCRIPTタグはHEAD要素内、BODY要素内のどちらかに記述できます。

HTMLファイルは上から下へ向かって読み込まれるので、書いた場所が上であるほど先に実行されることになります。HEAD要素内はBODY要素の解析よりも優先して読み込まれることが保証されているので、最初に実行させたいスクリプトなどは HEAD 要素内に記述します。
逆に、BODY要素内の読み込みの後に実行させたい場合は、閉じBODYタグの上に記述します。

BODY要素内にJavaScriptを宣言する方法
<html>
<body>
<script>
document.write("Hello world");
</script>
</body>
</html>
HEAD要素内にJavaScriptを宣言する方法
<html>
<head>
<script>
console.log("Hello world");
</script>
</head>
</html>

外部スクリプトファイル

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

まず、拡張子が .js のファイルを作成し、そのファイルにスクリプトを記述します。外部ファイルに記述する場合はSCRIPTタグで囲む必要はありません。
ここでは、ファイル名を print_msg.js とします。

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

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

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

スクリプトの実行のタイミング

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

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

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

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

推奨としては、レンダリングの前に先に読み込んでおく必要があるものだけHEAD要素で読み込み、それ以外のすべてのJavaScriptは閉じBODYタグの上にまとめて記述します。

文(ステートメント)

文の区切り

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

console.log("test");

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

a = 1; b = 2; 

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

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

a =
1;
b =
2;

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

コード行の分割

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

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

一行コメントアウト

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

一行コメントアウト

スラッシュ2つ( // )以降の文章をコメントアウトします。

次の行はコメントアウトされているので、実行されません。

// console.log("test");

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

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

複数行コメントアウト

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

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

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

大文字と小文字

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

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

A = 1;
a = 1;

HTML5.0での簡略化

HTML5.0では様々な記述が簡素化されています。JavaSciptも例外ではなく、ここで紹介する書き方はHTML5.0で使うには不適切で、古いブラウザ向けとなっています。 今後使う機会は少ないと思いますが、まだHTML5.0に対応していないサイトが多くあるので、知識として知っておいた方が良いでしょう。

TYPE属性

HTML5以前では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要素の中身が画面に表示されてしまいます。
この問題を回避するために、スクリプト部分をHTMLコメント内に記述しておくことが出来ます。これで、JavaScriptに対応しているブラウザは通常通りスクリプトが実行され、JavaScriptに対応してないブラウザはコメントアウトとして処理します。

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

Content-Script-Type

スクリプトの言語を指定するため、HTML5以前では、HTMLのヘッダ部に、下記のようなMETA記述を行うことを推奨していました。
HTML5.0では不要です。

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<input type="button" value="OK" onclick="~">
</body>
</html>

Comment

コメントを残す

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

関連記事

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

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!