GO BACK

JavaScript教室　その１

「JavaScriptの基本とHTMLフォーム」



■JavaScriptとHTMLの関係

　ホームページで何か動きを与えたい、計算をしたい、そういうことを考えている人は多いことでしょう。そんな場合、どうするでしょうか。CGIを使うという手もあります。また、Javaでアプレットを作るという手もあります。しかし、CGIは全てのWebサーバーで同じように動作するというわけではないですし、Javaはプログラミング未経験者には少々荷が重いでしょう。

　従来ならばこういうことは諦めるしかなかったのですが、今ではHTMLから呼び出して使えるスクリプティング言語がいくつか登場しており、これらを使って実現することができるようになりました。その代表的なものが「JavaScript」です。

　JavaScriptは、NetScape社が考案したスクリプティング言語です。NetScape NavigatorやInternet Explorerでサポートされたため、現在急速に普及しつつあります。「JavaScript」という名前で想像するように、これはJavaのプログラミング仕様に似た形になっています。ただし、Javaと比べるとはるかに簡単ですので、本格的なプログラミング言語を使ったことがなくても覚えられると思いますよ。

　では、JavaScriptはどのように使うのでしょうか。そもそも、ホームページはHTMLという言語で書くはずなのに、どうやってプログラムを組み込めばいいんでしょう。

　これには、実際にプログラムを見ながら説明するのが一番ですね。

<SCRIPT LANGUAGE="JavaScript">
<!--

function Hello () {
	alert ("Hello JavaScript World !")
}

//-->
</SCRIPT>

<HTML>
	<HEAD></HEAD>
	<BODY>
		<p>JavaScriptのテストです。</p>
		<FORM NAME="MyFrame">
			<INPUT TYPE="Button" NAME="MyBtn" VALUE= "please Click !" onClick="Hello ()">
		</FORM>
	</BODY>
</HTML>
　これをNetScape Navigatorなどで開いてみましょう。画面に「please Click !」というボタンが現われます。これをクリックすると、「Hello JavaScript World !」というアラートウィンドウが現われます。ね？　HTMLなのにちゃんとプログラムが動いているでしょう？

　では、このリストをよく見てみましょう。これは、単純化するならこういう形になっていますね。

<SCRIPT LANGUAGE="JavaScript">
<!--
	…プログラムがある…
//-->
</SCRIPT>

<HTML>
	…いろいろ書いてある…
	<FORM>
		<INPUT TYPE="Button" …いろいろ書いてある…>
	</FORM>
</HTML>
　つまり前半の<SCRIPT>というタグ部分と、後半の<HTML>タグで囲まれた部分の２つの部分からなっているわけです。<SCRIPT>タグの内部では、JavaScriptのプログラムが記述され、<HTML>タグの内部では更に<FORM>というタグを使って、JavaScriptのプログラムを呼び出すためのボタンが作られているわけです。

　整理するなら、JavaScriptの利用方法は以下のようになります。


１．基本的に全てのプログラムはHTMLのファイル内に記述する。

２．JavaScriptのプログラムは<SCRIPT>というタグに書く。

３．プログラムの呼び出しは、<FORM>というタグを使ってインターフェイスを作り、そこから２のプログラムを呼び出す。


　それでは、各部分をもう一度詳しく見てみましょう。まず、最初の<SCRIPT>タグからです。ここは、このようになってますね。


<SCRIPT LANGUAGE="JavaScript">

まず最初に、このタグで、「これより先はJavaScriptのプログラムですよ」ということを宣言します。<SCRIPT>タグは、このように、<SCRIPT LANGUAGE="言語名">という形で記述します。


<!--

これは何かというと、コメント文の開始を示すものなのです。HTMLは、<!--と-->で囲んだ部分をコメントとして無視するようになっているのです。

　なぜ、ここから先がコメントになっているかというと、JavaScriptに対応していないブラウザのことを考えているのです。JavaScriptに対応していないブラウザでは、これより先はコメントとして扱われ、無視されるのです。

function Hello () {
	alert ("Hello JavaScript World !")
}
これがJavaScriptのプログラムです。プログラムについては後に改めて説明しましょう。


//-->

コメントの終わりを示します。JavaScriptに対応していないブラウザでは、ここまでは無視されるわけです。


</SCRIPT>

<SCRIPT> タグの終わりを示します。これでJavaScriptのプログラムの終了です。


　では、次にHTML部分に目を向けましょう。HTMLの基本的なところは省略し、インターフェイスを作ってJavaScriptを呼び出している部分だけにしぼります。


<FORM>

これは「フォーム」と呼ばれるタグで「これより先はフォームの定義ですよ」ということを示しています。フォームというのは、ユーザーインターフェイスを作成するときの基本部分だと思ってください。全てのユーザーインターフェイスは、この<FORM>タグの中で定義をします。


<INPUT TYPE="Button" …以下略…>

これは「ボタン」というインターフェイスを定義している部分です。これは<INPUT>というタグですね。このタグは、ユーザーから何かの入力をしてもらうインターフェイスを示すものです。この場合はボタンというインターフェいうを用意しているわけです。

　このタグにはオプションがたくさんありますね。これらは以下のようなものを定義しています。

「TYPE="Button"」−−INPUTの種類を示します。ここでは Buttonですね。

「NAME="MyBtn"」−−この部品の名前を設定します。

「VALUE= "please Click !"−−この部品の値を設定します。ボタンの場合はこれがボタン名として表示されます。

「onClick="Hello ()"」−−クリックしたときに呼び出すルーチンを設定しています。この場合は、クリックしたらHello ()というルーチンを実行するわけです。


</FORM>

最後にフォームタグの終了を示すタグを記述して、終わりです。


　どうでしょう、全体の流れがわかってきましたか？

　JavaScriptは、このようにHTMLのプログラムの中にJavaScriptのプログラムが融合し埋め込まれた形をしています。このため、慣れないうちは非常に構造がわかりにくいかもしれません。基本的に「インターフェイスはHTMLのフォームで、実行するプログラムはJavaScriptで作る」という基本的な形をしっかりと頭にいれておいてください。これがわからないと、JavaScriptを使うことはできないのですから。

　では、次回よりJavaScriptのプログラムを本格的に説明していきましょう。


GO NEXT

GO HOME