JavaScriptによるプログラミング入門
制作・著作: 生物工学科 星 岳彦
オンライン版編集：生物工学科 佐藤 大輔・篠田 績
16.ifの使用例とちょっと大きなプログラム
西暦と年号の変換プログラムを作成した。関数が複数定義されていて、さらに、いろいろな要素が使われている。それらがどのように使用されているかよく理解する。
[作業手順]
(1)次のプログラムをif1.htmとして入力し、NetscapeNavigatorで実行してみよ。
<HTML>
<HEAD>
<TITLE>JavaScript if1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
/* ifの練習、年号の計算 */
var radio = 1988 ;
function rcheck(rb) {
if(rb.value == "M") radio = 1867 ;
if(rb.value == "T") radio = 1911 ;
if(rb.value == "S") radio = 1925 ;
if(rb.value == "H") radio = 1988 ;
}
function calc(f) {
if(f.SNEN.value == "") sCalc(f) ;
else gCalc(f) ;
}
function sCalc(f) {
f.SNEN.value = eval(f.GNEN.value) + radio ;
}
function gCalc(f) {
y = f.SNEN.value ;
if(y <= 1867) f.GNEN.value = "" ;
else {
if(y <=1911) {
f.GENGO[0].click() ; f.GNEN.value = f.SNEN.value - 1867 ; }
else {
if(y <=1925) {
f.GENGO[1].click() ; f.GNEN.value = f.SNEN.value - 1911 ; }
else {
if(y <=1988) {
f.GENGO[2].click() ; f.GNEN.value = f.SNEN.value - 1925 ; }
else {
if(y <=2050) {
f.GENGO[3].click() ; f.GNEN.value = f.SNEN.value - 1988 ; }
else f.GNEN.value = "" ;
}
}
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=RADIO NAME="GENGO" VALUE="M" onClick="rcheck(this)">明治
<INPUT TYPE=RADIO NAME="GENGO" VALUE="T" onClick="rcheck(this)">大正
<INPUT TYPE=RADIO NAME="GENGO" VALUE="S" onClick="rcheck(this)">昭和
<INPUT TYPE=RADIO NAME="GENGO" VALUE="H" onClick="rcheck(this)"CHECKED>平成
<INPUT NAME="GNEN" SIZE=3 onFocus="this.form.SNEN.value='' ;">年<BR>
上下どちらかに値を記入し、
<INPUT TYPE=BUTTON VALUE="計算" onClick="calc(this.form)">
を押してください。<BR>
西暦<INPUT NAME="SNEN" SIZE=5 onFocus="this.form.GNEN.value='' ;">年<BR>
</FORM>
</HTML>
ここには、いくつかの新しい要素が含まれている。
a) 関数が、4つ定義されている。このように、複数の関数を定義してプログラムを行うことが可能である。それぞれ、rcheck()はラジオボタン(後述)で押された値を西暦の換算値に変換してセットする関数、calc()は西暦から年号への変換か、年号から西暦への変換かを、テキストボックスが空かどうかで判断して、適切な変換関数を実行する関数、sCalc()は、年号から西暦を計算する関数、gCalc()は西暦から年号を計算する関数である。
b) eval()という関数が使用されているが、これは、括弧の中を数値とみなして計算する関数である。テキストボックスから得られた値をコンピュータが文字列として理解してしまって困るときに使用する。
c) フォームの新しい要素ラジオボタンが使用されている。ラジオボタンは、年号の選択など、複数の項目からひとつを選択するときに便利である。TYPEはRADIOにする。同じ項目の選択に使用する場合には、NAMEを同じにする。ここでは、GENGOにしている。さらに、VALUEで実際にそれが押されたボタンで得られる文字を設定する。画面上に表示される文字は、そのラジオボタンの定義の後に書く。
d) テキストボックスで、新しい要素onFocusが使われている。これは、そのテキストボックスにカーソルを移動して操作が始まったときに実行されるプログラムを指定する。ここでは、もう一方のテキストボックスの内容を消去するように、this.form.xxx.value=""
; を入力している。しかし、その両側でダブルコーテーションを使ってしまっているので、この場合は、""をシングルコーテーションに変えて入力する決まりになっている。
(2)結果
| ←戻る | 目 次 | 進む→ |
|---|
Copyright (c) 1997 Takehiko Hoshi