Part1で学んだHTMLを使うことで,とりあえずWebページを作成できるようになりました。ただ,いつも同じWebページが表示されるだけでは面白くないですね。ここでプログラミングの出番です! Part2では,JavaScriptという言語を使って,Webページに動きを付けてみることにしましょう。
JavaScriptは歴史のある言語ですが,ここに来て,また注目を集めつつあります。Webアプリケーションの操作性を高めるリッチ・クライアント技術の一つである「Ajax(Asynchronous JavaScript+XML)*1」で利用されているからです。
JavaScriptのよいところは,特別な開発環境を用意しなくても手軽にプログラミングできることです。Webブラウザとテキスト・エディタがあれば,プログラムを作成できます。しかも,作ったプログラムをすぐ動かせるのも利点です*2。
JavaScriptが動作する仕組みを簡単に見ておきましょう(図1)。ここではJavaScriptのプログラムを,Part1で説明したHTML文書に埋め込む形で記述しています。Webブラウザは,HTML文書と一緒にJavaScriptのプログラムを読み込み,実行環境(スクリプト・エンジン)で実行して,その結果をブラウザに表示します。今回は,HTML文書をブラウザが動くコンピュータに置くので,図1の(1)と(2)は実行しません。
JavaScriptをHTML文書内に直接プログラムを埋め込む方法のほかに,HTML文書で指定した別のファイルでJavaScriptを記述して読み込むやり方もあります。
JavaScriptでプログラミング
まずは,HTML文書にJavaScriptのプログラムを埋め込んでみましょう。Part1で説明しましたヘッダー部やボディ部に,<script>タグを利用して,
<script type="text/javascript"><!--JavaScriptプログラムの本体// --></script>
と記述するだけです。「<!--」と「// -->」で囲んでいるのは,JavaScriptに対応していない,あるいは設定でJavaScriptの機能を無効化しているブラウザ向けにエラーを出さないようにする対策になります。
外部ファイルからJavaScriptを呼び出すには,HTML文書とは別に「test.js」のようなJavaScriptのファイルを作成します。なお,JavaScriptのプログラムを格納したファイルには拡張子「.js」を付けます。
このJavaScriptのプログラムをHTML文書から呼び出すには,HTML文書のヘッダー部分に,
<script type="text/javascript" src="test.js"></script>
と指定すればOKです。<script>タグの属性にsrc属性を指定して,指定したファイルに記述したJavaScriptのプログラムを読み込めます。また,ボディ部にリンクの形でHTMLタグの中に埋め込むことも可能です。
それでは,リスト1のプログラムを書いてみましょう。JavaScriptのプログラムは容易に作成できます。HTML文書をテキスト・エディタで直接開いて編集してもいいですし,Part1のようにHTML文書をテキスト・エディタなどで記述して,ファイルの拡張子を「.txt」から「.html」にしても動きます*3。
<html><head>
<title>JavaScriptのテスト</title>
<script type="text/javascript">
alert("Learning JavaScript"); //JavaScriptの本体
</script>
</head>
<body>
JavaScriptを覚えよう
</body></html>