第２章 HTML プログラミング
3.3 JavaScript プログラミング例
3.3.2 JavaScript による対話処理
JavaScript を使って対話を行う任意のプログラムを実行する例です。
javascript02.htm プログラム
<HTML>
<HEAD>
<TITLE>
任意のプログラムを実行する JavaScript プログラムです。
</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
<!--
function exc_program(){
window.location.href=myform.name.value;
} //-->
</SCRIPT>
<BODY bgcolor="BLUE">
<CENTER>
<FORM name="myform">
<B>実行したいプログラム名：
<INPUT type="text" name="name" size=80 align="right" value="">
<INPUT type="button" value="プログラム実行" onClick="exc_program()">
</FORM>
</CENTER>
</BODY>
</HTML>
3.3.3 JavaScript の実行タイミング
HTML プログラムと Javascript プログラム部分の実行順番を確認する為のプログラムです。
Javascript03.htm プログラム
<HTML>
<HEAD>
<TITLE>
JavaScript プログラムを挿入した HTML のサンプルプログラムです
</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
<!--
alert("JavaScript プログラム１が実行されました。");
//-->
</SCRIPT>
<BODY>
<BR>
HTML プログラム部分１が実行されました。
<BR>
<SCRIPT language="JavaScript">
<!--
alert("JavaScript プログラム２が実行されました。");
//-->
</SCRIPT>
<BR>
HTML プログラム部分２が実行されました。
<BR>
</BODY>
</HTML>
補足：
JavaScript 構文は HTML プログラムの中に何回登場しても正しく処理されます。また、
Javascript 構文に遭遇すると、その部分を実行し、その後で続きの処理を行います。
JavaScript で HTML タグを実行させたり、任意のメッセージを出力する場合は、以下のよう な構文を使用します。
document.write("document.write で表示しました<BR>");
document.write("<FONT size='7'>最初の Javascript です</FONT>");
<練習課題＞
JavaScript プログラムの中で、document.write を使って何らかのメッセージを表示するように 改良してください。
3.3.4 JavaScript による関数定義と、HTML 連携
Javascript04.htm プログラム
<HTML>
<HEAD>
<TITLE>
JavaScript プログラムを挿入した HTML のサンプルプログラムです
</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
<!--
function input_java(){
res=document.myform.kosu.value*document.myform.tanka.value;
document.myform.total.value=res;
}
//-->
</SCRIPT>
<BODY bgcolor="BLUE">
<FORM name="myform">
個数：
<INPUT type="text" name="kosu" size=10 align="right" value="0">
単価：
<INPUT type="text" name="tanka" size=10 align="right" value="0">
<INPUT type="button" value="合計金額" onClick="input_java()">
合計：
<INPUT type="text" name="total" size=10 align="right">
</FORM>
</BODY>
</HTML>
補足：
HTML の<INPUT>タグにより入力されたデータは、<FORM>構文と<INPUT>構文の中で設定された 名前で修飾することにより、JavaScript プログラムの中で参照することができます。
<練習課題＞
例題で計算された合計金額に消費税５％を上乗せした額を合計金額として出力してください。
3.3.5 JavaScript プログラミングにおける制御構文
JavaScript は、他の一般言語同様に処理の流れを制御する制御構文が提供されています。以下にこの制 御構文を使った事例を紹介します。
Javascript05.htm プログラム
<HTML>
<HEAD>
<TITLE>
JavaScript プログラムを挿入した HTML のサンプルプログラムです
</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
<!--
function input_java(){
var indata;
indata=document.myform.in1.value;
document.myform.in1.value="";
if(indata=="aaa")
alert("IF 構文で aaa を検出しました");
else if(indata=="bbb"){
alert("IF 構文で bbb を検出しました");
} else
document.write("IF 構文では一致しませんでした<BR>");
for(i=1; i<=5; i++){
document.write(i+"回目の FOR です<BR>");
} i=1;
while(i<=10){
document.write(i+"回目の WHILE です<BR>");
i++;
if (i==3){
break;
} }
} //-->
</SCRIPT>
<BODY bgcolor="BLUE">
<FORM name="myform">
入力：
<INPUT type="text" name="in1" size=10 align="right" value="">
<INPUT type="button" value="実行" onClick="input_java()">
</FORM>
</BODY>
</HTML>
補足：
制御構文は基本的には C 言語の構文に同じです。
＜練習課題＞
1) FOR 構文、及び While 構文において、入力した文字をそれぞれ１０回ずつ表示するプロ グラムを作成してください。
2) if 構文の部分を switch 構文に置き換えて、同じ動作をするように変更してください。
3.3.6 JavaScript プログラミングにおける画像表示切替
Javascript06.htm プログラム
<HTML>
<HEAD>
<TITLE>
JavaScript プログラムを挿入した HTML のサンプルプログラムです
</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
<!-- imgNum=1;
stopflg=0;
function img_sview(viewimg){
document.myImg.src=viewimg;
}
function img_cview(){
document.myImg.src="sample" + imgNum + ".jpg";
imgNum=imgNum+1;
if (imgNum==6){
imgNum=1;
}
if(stopflg==0){
setTimeout("img_cview()",500);
}else stopflg=0;
}
function img_stop(){
stopflg=1;
} //-->
</script>
<BODY bgcolor="BLUE">
<H3>画像切り替えに関するサンプルプログラムです。</H3>
<INPUT type="button" value="単発表示" onClick="img_sview('sample3.jpg')">
<INPUT type="button" value="連続表示" onClick="img_cview()">
<INPUT type="button" value="表示中断" onClick="img_stop()">
<HR>
<img src="sample.jpg" name="myImg">
</BODY></HTML>
＜練習課題＞
単発表示、及び連続表示処理において、画像が切り替わるごとに、画面全体の背景色が切り 替わるプログラムに変更してください。背景色の切り替えは以下の構文で行います。(切り替 える色は任意とします)
document.bgColor=色の指定
3.3.7 JavaScript プログラミングにおける日付け関数操作
Javascript07.htm プログラム
<HTML>
<HEAD>
<TITLE>
JavaScript プログラムの中で日付け関数を使ったプログラムです。
</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
<!--
function start(){
indate=new Date();
yy=indate.getYear();
mm=indate.getMonth();
mm++;
dd=indate.getDate();
hh=indate.getHours();
mn=indate.getMinutes();
document.write("今は、",yy,"年",mm,"月",dd,"日です。");
document.write("<BR>");
if(hh<12)
document.write("おはようございます");
else if(hh<18)
document.write("こんにちは");
else
document.write("こんばんは");
} //-->
</script>
<BODY onLoad="start();">
</BODY></HTML>
＜練習課題＞
年月日表示の次の行に以下のメッセージを追加してください。
現在の時刻は、XX 時 xx 分 yy 秒です。