Ｊapanease Only.
１．JavaScriptプログラムの記述について
JavaScriptは、ホームページを記述するHTML(Hyper Text Make up Language)の中に含めるのが一般的です。HTMLは、”<body>”のようなタグを駆使しますが、JavaScriptの記述範囲を次のタグによって表します。
<script language="JavaScript"><!--
(プログラム)
// --></script>
今回のテニスゲームでは、JavaScriptのプログラミングがメインですので以下のHTMLサンプルを使って、プログラムを作成することにします。このサンプルでは<script language="JavaScript">のタグが5行目にあり、13行目の</script>まで(赤部分)がJavaScriptの記述ということになります。
ファイル名：demo.htm (ダウンロード可)
<HTML>
<HEAD>
<TITLE>テニスゲームの制作</TITLE>
<script language="JavaScript"><!--
function kaishi(){
document.ball.style.top = 100;
document.ball.style.left = 60;
}
// --></script>
</HEAD><BODY>
<H2>* テニスゲーム *</H2><p>
<IMG SRC="court.jpg" NAME="court" style="position:absolute;top:50px;left:10px;">
<IMG SRC="ball.jpg" NAME="ball" style="position:absolute;top:70px;left:30px;">
<IMG SRC="racket.jpg" NAME="racket" style="position:absolute;top:100px;left:380px;">
<DIV style="width : 400px;height : 100px;top : 370px;left : 20px;
position : absolute; z-index : 1; visibility : visible;" id="Layer1">
<FORM NAME="myform">
<INPUT TYPE="button" VALUE="スタート" onClick="kaishi()"><P>
↑− [Ｊ] Key <BR>
↓− [Ｎ] Key <P>
SCORE : <INPUT TYPE="TEXT" NAME="tensu"><BR>
MISS : <INPUT TYPE="TEXT" NAME="misu">
</FORM></DIV></BODY></HTML>
HTMLのタグについて
HTMLのタグには、<HTML>と</HTML>のようにペアで使用して範囲を表すものと<BR>のように単独でその機能を果たすものがあります。今回のテニスゲームでは以下のタグを使用しています。
<HTML></HTML> HTMLのファイルであることを表す。最初と最後にあります。 <HEAD></HEAD> ヘッダ(頭)情報を指定します。今回はこの範囲にJavaScriptの記述を含めます。 <TITLE></TITLE> ページのタイトルになります。<HEAD>と</HEAD>の間に記述します。 <BODY></BODY> 画面に表示される内容を指定します。以下のヘッダはすべてこの範囲内で使用します。 <H2></H2> やや大きめの文字を使って文字を表示します。 <IMG SRC=" "> SRC=" "で指定した画像ファイルを読込み表示。今回は、さらにNAME=" "として名前を付け、最初の表示位置をstyle=" "で決めている。 <DIV></DIV> 指定した範囲をブロックとして扱います。今回は主にボタンやテキストボックスの位置を固定するため、利用しています。 <FORM NAME=" "> ボタンやテキストボックスを使用する場合にNAME=" "でフォーム名を指定。 <BR> 改行。 <INPUT TYPE="button"> ボタンを配置。NAME=" "でボタンに名を指定。また、OnClick=" "として、ボタンを押した時の動作を指定しています。 <P> １行スペースを空けて改行。 <INPUT TYPE="TEXT"> テキストボックスを配置。NAME=" "でテキストボックス名を指定。今回は、スコア，ミス回数などを表示するために使用しています。
Up date: 2006/12/25