第２章 HTML プログラミング
3.4 JavaScript プログラムの応用
}
function OUTproc(){
inc=dir;
} //-->
</script>
<body bgcolor="oldlace" onload="start()">
<CENTER>
<FORM>
<INPUT type="button" value="上方向移動" onClick="UPproc();">
<INPUT type="button" value="下方向移動" onClick="DOWNproc();">
<INPUT type="button" value="画像拡大" onClick="UPSproc();">
<INPUT type="button" value="画像縮小" onClick="DOWNSproc();">
</FORM>
<DIV >
<IMG src="javaimage.jpg" name="image" width=100 onMouseOver="OVERproc();" onMouseOut="OUTproc();"
style="position: absolute;left:0px;top:250px;" alt="移動物体">
</DIV>
</CENTER>
</body>
</html>
補足：
100x100 の画像を、javaimage.jpg という名前で登録してから実行してください。
＜練習課題＞
移動スピード、及び拡大/縮小スピードを現状の２倍にしてください。
3.4.2 JavaScript によるルーレットゲームソフト
Javascript12.htm プログラム
<HTML>
<HEAD>
<TITLE> ユーアイテクノケアのサンプルソフトです。 </TITLE>
<META name="author" content="油井 正明">
</HEAD>
<BODY bgcolor="black" topmargin="100">
<SCRIPT language="JavaScript">
<!-- imgNum=1;
RepeatFlag=0;
function ImgChange(){
InData1=Math.round(9*Math.random());
InData2=Math.round(9*Math.random());
InData3=Math.round(9*Math.random());
document.myImg1.src="WBimage" + InData1 + ".jpg";
document.myImg2.src="WBimage" + InData2 + ".jpg";
document.myImg3.src="WBimage" + InData3 + ".jpg";
if (RepeatFlag==0){
setTimeout("ImgChange()",10);
}else {
RepeatFlag=0;
if (InData1==InData2 && InData2==InData3){
alert("おめでとうございます。次も頑張ってください！ ^o^ ^o^ ");
}else{
if (InData1==InData2 || InData2==InData3 || InData1==InData3){
alert("惜しかったですね。頑張ってください ^o^; ");
}
} } }
function ImgEnd(){
RepeatFlag=1;
} //-->
</SCRIPT>
<CENTER>
<A onMouseOver="ImgChange()" onMouseout="ImgEnd()" >
<IMG src="WBimage10.jpg" width="50" border="0"
name="myImg">
</A>
<IMG src="WBimage1.jpg" width="100" border="0"
name="myImg1">
<IMG src="WBimage1.jpg" width="100" border="0"
name="myImg2">
<IMG src="WBimage1.jpg" width="100" border="0"
name="myImg3">
</CENTER>
</BODY>
</HTML>
補足：
100x100 の別々の画像を、WBimage1.jpg～WBimage10.jpg の名前で登録を行った後で実行してくだ さい。
＜練習課題＞
1) 開始画像にカーソルが重なった時にルーレットを開始し、開始画像をクリックした時にルー
レットが停止するように変更してください。
2) ４コマのルーレットゲームを完成させてください。
3) 開始画像をクリックした時にルーレットを開始し、再度クリックした時に停止するように変
更してください。（繰り返しが出来るようにします）
3.4.3 JavaScript による衝突ゲームソフト
Javascript13.htm プログラム
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!__ このホームページは、Web プログラムの理解の為に作られたものです。__>
<HTML>
<HEAD>
<TITLE> サンプルプログラムです </TITLE>
</HEAD>
<style type="text/css">
<!--
FONT { font: 10pt/16px "ＭＳ Ｐゴシック", "Osaka"}
-->
</style>
<SCRIPT language="JavaScript">
<!-- leftx=10;
topx=45;
x=10;
y=10;
leftx2=30;
topx2=125;
x2=20;
y2=20;
signx=1;
signy=1;
leftlimit=0;
toplimit=0;
timedata=0;
timeflag=0;
function init1(){
start();
}
function init2(){
start2();
timeflag=1;
}
function start(){
x=Math.round(9*Math.random())+5;
y=Math.round(9*Math.random())+5;
x=x*signx;
y=y*signy;
myImg.style.position="absolute";
myImg.style.left=leftx+"px";
myImg.style.top=topx+"px";
leftx=leftx+y;
topx=topx+x;
if (topx>450){
signx=-1;
}else if (leftx>800){
signy=-1;
}
if (topx<2){
signx=1;
}else if (leftx<100){
signy=1;
}
setTimeout("start()",10);
}
function start2(){
myImg2.style.position="absolute";
myImg2.style.left=leftx2+"px";
myImg2.style.top=topx2+"px";
leftx2=leftx2+y2;
topx2=topx2+x2;
if (topx2>500){
x2=-10;
}else if (leftx2>950){
y2=-10;
}
if (topx2<2){
x2=10;
}else if (leftx2<50){
y2=12;
}
setTimeout("start2()",1);
leftlimit1=leftx+20;
toplimit1=topx+20;
leftlimit2=leftx+60;
toplimit2=topx+40;
if (leftx2>leftlimit1 && leftx2<leftlimit2){
if (topx2>toplimit1 && topx2<toplimit2){
alert("合体成功。おめでとうございます");
leftx2=1;
topx2=1;
window.location.href="game1.html";
} }
}
function gamestop(){
alert("画面を元に戻します");
/*
window.location.href="index.html";
*/
window.close();
}
function timeproc(){
if (timeflag==1){
timedata=timedata+1;
}else {
timedata=0;
}
document.form1.timeout.value=timedata;
setTimeout("timeproc()",1000);
} //-->
</script>
<BODY bgcolor="black" onload="timeproc()">
<DIV >
<IMG src="rimage.jpg" width="100" height="100" border="0" name="myImg" style="position:
absolute;left:10px;top:45px;" onclick="init1();" >
<IMG src="rimage.jpg" width="100" height="100" border="0" name="myImgS" style="position:
absolute;left:10px;top:45px;" onclick="init1();">
</DIV>
<DIV >
<IMG src="rimage.jpg" width="50" height="50" border="0" name="myImg2" style="position:
absolute;left:30px;top:200px;" onclick="init2();">
<IMG src="rimage.jpg" width="50" height="50" border="0" name="myImg2S" style="position:
absolute;left:30px;top:200px;" onclick="init2();">
</DIV>
<DIV >
<IMG src="owari.jpg" border="0" name="myImg3" style="position:
absolute;left:1px;top:270px;" onclick="gamestop();">
</DIV>
<FORM method="post" name="form1">
<FONT color="white" size="2">
時間:
</FONT>
<INPUT type="text" name="timeout" value="0" size="3">
</FORM>
<DIV style="position: absolute;left:5px;top:550px;">
<FONT color="white" size="1">
「親玉」アイコンで親玉が、「小玉」アイコンで小玉が飛び出します。小玉が親玉に早くぶつかるよ
うに操作します。
<BR>
「親玉」アイコンを連続的にクリックすると、親玉の速度が速くなります。小玉も同じです。ぶつ かるまでの時間が表示されます。
</FONT>
</DIV>
</BODY>
</HTML>
補足：
100x100 の画像を、rimage.jpg の名前で、また、50x20 程度の適当な画像を owari.jpg の名前で登 録を行った後で実行してください。
3.4.4 JavaScript が提供する主なオブジェクト（参考）
JavaScript では、以下の示すような、プログラミングを容易にするための各種のオブジェクト（関数）
が提供されています。各々の詳細に関しては、専門書を参照ください。
オブジェクト名 メソッド名 プロパティー名、または意味
Date getDate()
getDay() getHours() getMinutes() getMonth() getSeconds() getTime()
getTimezoneoffset() getFullyear() getYear() parse(日付け) setDate(設定日付け) setHours(設定時刻) 以下略
日付けを求める 曜日を求める 時を求める 分を求める 月を求める 秒を求める 時間を求める 時差を求める 年を求める 年を求める
1970 年 1 月 1 日午前 0 時からの秒を求める 日付けを設定する
時を設定する などなど 使用例：
obj=new date;
dd=obj.getDate();
Document close()
open(MIME タイプ) write(文字列・数式) writeln（文字列・数式）
以下略
ドキュメントを閉じる ドキュメントを開く 文字列・数式を表示する
文字列・数式を改行付きで表示する
プロパティーには以下のようなものがある。
alinkColor,anchors,bgColor,cookie, fgColor,forms,location,title,その他 以下略
使用例：
Document.close();
Math abs(数式)
acos(数式) asin(数式) atan(数式) atan2(X,Y) ceil(数式) cos(数式)
その他（sin,cos,tan,sqrt,,,）
絶対値を求める
アークコサインを求める アークサインを求める アークタンジェントを求める ２つの座標から角度を求める 切り上げて整数にする コサインを求める 使用例：
aaa=math.sin(45*3.14/180);
window alert();
confirm();
警告ダイアログ表示 確認ダイアログ表示
prompt();
open();
close();
focus();
blur();
setTimeout();
clearTimeout();
以下略
文字列入力ダイアログ表示 新ウインド表示
ウインドのクローズ ウインドのフォーカス設定 ウインドからのフォーカス解除 タイムアウトの設定
タイムアウト値のクリア
プロパティーには以下のようなものがある。
status,name,opener,length,closed, defaultStatus
使用例：
window.alert("JavaScript 実行中です");
navigator appName appVersion appCodeName userAgent platform
ブラウザ名
ブラウザのバージョン ブラウザのコード名 ブラウザ名とバージョン ブラウザのプラットフォーム 使用例：
xxx=navigator.appName;
Aarray 配列の宣言
使用例：
obj1=new Aarray(５);
⇒配列のみ定義 obj2=new Aarray(1,2,3,4,5);
⇒初期値付き配列を定義 aaa=obj2[0];
←配列からのデータの取り出し 共通で使えるオブジ
ェクト（関数）
eval(式) isNaN() parseFloat() parseint() toString() 以下略
文字列を数式として評価して値を返す 数値化どうかを判別して返却する 尐数を含む文字列を数値化する 文字列を整数値にする
n 進数値に変換する
使用例：
data=eval(document.form.in.value)+100;
Button Checkbox FileUpload Form Frame Function Hiden History Image Link
Location MimeType Number Password Plugin Radio Reset Select String Submit Text Textarea
詳細省略（参考文献を参照ください）