PR

 HTMLとCSSを使えば様々なデザインのWebページを作成できます。ただ,それだけでは何となく物足りないと感じる人がいるかもしれません。それは,おそらくページに“動き”がないからです。

 マウスの動きに反応してアイコンや画像が変化するようなページは見栄えがしますし,うまく使えばユーザー(閲覧者)の使い勝手も向上します。ユーザーがフォームに何らかの入力をすると,入力したデータに基づいて何らかの処理や計算をするような仕組みや,ユーザーがブラウザ上で遊べるようなゲームをページに載せてもおもしろそうです。

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

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

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

 先ほど,JavaScriptのプログラムはブラウザ上で動作すると書きましたが,もう少していねいに言うと,JavaScriptのプログラムはHTML文書と一緒にブラウザに読み込まれて実行されます。したがって,JavaScriptのプログラムを実行するには一般にHTML文書を用意する必要があります。

 JavaScriptのプログラムを書く方法は二つあります。一つはHTML文書内に直接プログラムを埋め込む方法,もう一つはHTML文書で指定した別ファイルにプログラムを書く方法です。特定のページで使うプログラムを書くのであれば,前者のHTML文書に埋め込む方法が良いでしょう。一方,プログラムをサイト内の様々なページで使用する場合には,後者の別ファイルにプログラムを書く方法が良いでしょう。HTML文書からそのファイルを指定するだけで,様々なページで使い回せるからです。例えば,サイト内のページで共通に利用するメニューをJavaScriptのプログラムで書くのであれば,別ファイルにしておいた方が後々の修正の際に便利です。メニューを表示するプログラムをすべてのページに埋め込んだ場合には,メニューの修正があったときに,すべてのページのプログラムを直さなければならないからです。

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

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

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

 なお,古いブラウザなどではscriptタグでtype属性を指定しただけではJavaScriptのプログラムを認識しないことがあります。そうした場合には,以下のようにlanguage属性を使って指定します。両者を併記することも可能です。

<script language="JavaScript"><!--
 JavaScriptのプログラム
// --></script>

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

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

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

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

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

 HTML文書へ埋め込む方法と,別ファイルに書く方法は,状況に応じて使い分けることになります。短いプログラムやサイト内の1カ所でしか使わないようなプログラムをいちいち別ファイルにするとかえってめんどうです。なお,別ファイルとHTMLへの埋め込みで,同じ関数(後で説明します)を定義している場合は,埋め込んだ方の関数定義が有効になります。汎用的な処理を行う関数のプログラムを別ファイルにしていて,特定のページでだけ異なる処理を行いたい場合に便利な方法です。

 以下では,JavaScriptのプログラミングについて,基本的な概念を説明していきます。この説明を読んでおけば,このパートの後半で紹介するJavaScriptのプログラムはおおよそ理解できるはずです。