JavaScriptを用いたホームページ[テキストボックス]

ポイント1)フォームおよび部品の名前を定義する。

ポイント2)JavaScriptを記述する。

ポイント3)アクションの追加 onClick="2)のファンクション名"


作成場所: X:ドライブのフォルダー「学籍番号f」 ファイル名:rei3.htm (あらかじめ画像ファイルは同フォルダーにコピーしておくこと)

例題3完成品はここをクリック

Step1)フォームおよび部品の名前を定義する。

例題におけるフォーム名:F1 (注意:フォームは1つ。2つ以上に分けないこと。)

部品type button text
name push P1

また、画像の名前を"img1"としておく。初期のファイルはback.gif(サイズの記入は削除)

Step2)JavaScriptを記述する。

document.F1.P1.valueは、フレームF1の部品P1の値、すなわち上で定義したテキストの部品P1に入力した文字のことです。よって、P1にファイル名、up.gifなどを入力した後で、この関数を呼べば、画像Imgに、そのファイル名の画像を見せられることになります。

Step3)アクションの追加 onClick="2)のファンクション名"

部品type button
name push
アクション onclick="func()"

[プログラムの改良]

なお、Java Scriptの文 3行目に、+".gif"を追加し、
     document.images["Img"].src = document.F1.P1.value+".gif";
とすれば、次の様になる。 例題3dはここをクリック。

このScriptにある”+”は、文字と文字を足す(つなげる)意味で、上の場合部品P1の文字に、.gifを追加してくれます。よって、P1に、upのみ、downのみを入力すれば、".gif"を足し(つなげて)、画像Imgには、ファイル名up.gif、down.gifの画像を見せられることになります。

課題では、こちらを使いますので、課題3を完成させ、動くことを確認した後、上の文を追加し、別名(rei3d.htm)で保存してください。(rei3.htmはそのままで残しておくこと。)