JavaScriptのプログラムは,HTML文書と一緒にブラウザに読み込まれて実行されます。特別なプログラム開発環境や動作環境を用意することなしに,手軽に作成して動かせます。JavaScriptはHTML文書に埋め込むことも,HTML文書とは別のファイルに書くこともできます。まずは,ごく基本的な文法を押さえるところから始めましょう。

 JavaScriptは,ブラウザ上で動作するプログラミング言語です。C++やJavaなどの本格的なプログラミング言語よりも手軽に使えるという意味で「スクリプト言語」と呼ばれることもあります。

 JavaScriptの良いところは特別なプログラム開発環境や動作環境を用意しなくてもいいことです。JavaScriptのプログラムはブラウザさえあれば動作します。プログラム作成は,Windows付属ソフトの「メモ帳」などのテキスト・エディタがあれば十分です。

プログラムの基本的な書き方

 JavaScriptのプログラムはHTML文書と一緒にブラウザに読み込まれて実行されます。したがって,JavaScriptのプログラムを実行するには一般にHTML文書を用意する必要があります。

<a name="quiz01"></a>

 HTML文書にJavaScriptのプログラムを埋め込んで書くには,次のように<script>タグを使います。

<script type="text/javascript"><!--
 JavaScriptのプログラム
// --></script>

「<!--」と「// -->」で囲んでいるのは,JavaScriptに対応していない,あるいは設定でJavaScriptの機能を無効にしているブラウザ向けの対策をするためです。「<!--」「-->」はHTMLでコメント(ブラウザに表示させない文章)を入れるための仕組みです。「-->」ではなく「// -->」となっているのは,JavaScriptのプログラムを実行したときにエラーを発生させないためです。「//」から行末までは,JavaScriptのプログラム実行時に無視されます。理屈は以上の通りですが,いったん理解したら「<!--」「// -->」は決まり文句として覚えてしまうのがよいでしょう。

 HTML文書にJavaScriptのプログラムを埋め込む方法はもう一つあります。それはイベントが発生したときに,特定のプログラムを実行させるもので,書き方は以下のようになります。

<タグ名 イベント名="JavaScriptのプログラム">

 JavaScriptをHTML文書に埋め込むのではなく,HTML文書とは別のファイルに書くこともできます。例えば,計算をするJavaScriptのプログラムを「calc.js」というファイルに書いたとしましょう。このファイルに書いたプログラムをHTML文書で使うには,文書内で

<script language="JavaScript" src="calc.js"></script>

と指定します。こうしておけば,HTML文書に続いてsrc属性で指定したファイルに記述したJavaScriptのプログラムがブラウザに読み込まれます。なお,JavaScriptのプログラムを格納したファイルには拡張子「.js」を付けます。一つのHTML文書で複数のJavaScriptのプログラム・ファイルを指定して読み込むこともできますから,計算用や画像入れ替え用などの用途別にプログラムをまとめたファイルを作っておけば,サイトで使い回ししやすくなります。

JavaScriptにおける変数と配列

 変数は,JavaScriptに限らずすべてのプログラミング言語で基本になる概念です。JavaScriptでは,変数名に「先頭は英文字で,2文字以降は英数字とアンダーバーの組み合わせ」という決まりがあります。日本語を使うことはできません。JavaScriptは大文字と小文字を区別しますから変数「ABC」と「abc」は別のものになります。注意しましょう。

 変数は事前に宣言せずに,いきなり使うこともできますが,宣言をしたほうが後でプログラムを見直したときにわかりやすくなります。変数宣言はvarキーワードを付けて行います。

var 変数名;

宣言と同時にデータを格納(「代入」と呼びます)することもできます。

var 変数名 = データ;

JavaScriptではセミコロン(;),あるいは改行で文の区切りを表します。セミコロンを付けたうえで改行しても構いません。

 データには数字,文字列などいくつかのタイプ(型)があり,プログラミング言語によっては,変数の宣言によって代入できるデータのタイプが決まっているものがあります。JavaScriptでは基本的に,変数にどんなタイプのデータを代入しても構いません。

 同じ種類の多数のデータを変数に格納したいときには,配列と呼ばれる特別な変数を使うと便利です。例えば,あるクラスで実施したテストの点数を変数に格納するとき,クラスの生徒おのおのに異なる変数名(例えば氏名など)を付けてもよいのですが,それでは,平均値を出す場合の処理などでいちいち氏名を書く必要があるので面倒です。そこで,変数名は一つにして,その後ろに番号を付けることによって変数を区別しようというわけです。出席番号で生徒を区別するのと同じ考え方ですね。具体的には

seito[0] = 80;
seito[1] = 73;
seito[2] = 92;

のように書きます。JavaScriptの配列の番号は0から始まります。また,配列を使う際には,普通の変数と異なり,以下のように記述して,事前に用意しておく必要がありますから注意してください。

配列変数名 = new Array();

この先は会員の登録が必要です。有料会員(月額プラン)は登録月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら