インタラクティブな Web ページ

インタラクティブな Web ページ
インタラクティブな Web ページ作成の基礎として, ダイアログボックスを用いた方法とフォームによる方法を説明する.

ダイアログボックスを出すことにより, Web ページの閲覧者に対して, 警告, 確認などのメッセージを伝えることができる.

ページを開くことにより, ダイアログを自動的に出す
<HTML>
<TITLE> alert 1 </TITLE >
<BODY >
　<SCRIPT Language="JavaScript">
　　 alert()
　</SCRIPT>
</BODY>
</HTML>
(ブラウザでの表示結果)

(練習) alert() の引数を "こんにちは" としてみましょう.
(ブラウザでの表示結果)
リンクをクリックしたときダイアログを出す. この場合には onClick イベントハンドラに alert() メソッドを利用する.
<HTML>
<TITLE> alert 2 </TITLE >
<BODY >
　<A HREF="#" onClick="alert()"> 確認 </A>
</BODY>
</HTML>
(ブラウザでの表示結果)

alert() は本来, 警告を発するために用いられるが, ページ表示の一時停止にも利用できる.
<HTML>
<TITLE> alert3 </TITLE >
<BODY >
<p> 読み込みが続きます.</p>
　<SCRIPT Language="JavaScript">
　　 alert("続けますか?")
　</SCRIPT>
<p> まだまだ, 続きます.</p>
</BODY>
</HTML>
(ブラウザでの表示結果)

confirm() メソッドを利用すると, 「OK」と「キャンセル」の 2 つのボタンを備えたダイアログを出すことができる. if 文と組み合わせることにより, ボタンクリックにより内容処理を変更することができる.
<HTML>
<TITLE> Confirm </TITLE >
<BODY >
　<SCRIPT Language="JavaScript">
　　 if(confirm("続けますか?")){
　　　　 document.write("<p> まだまだ, 続きます.</p>");
　　 }
　　 else{
　　　　 document.write("<p> おしまいです.</p>");
　　 }
　</SCRIPT>
</BODY>
</HTML>
(ブラウザでの表示結果)

(参考) confirm メソッドでは「OK」ボタンをクリックすると, true「キャンセル」ボタンを押すと false という戻り値が返ってくる. 戻り値とは関数やメソッドの実行結果が入る特殊な変数のことである.

prompt メソッドを利用すると, Web ページの閲覧者がテキストを入力できるダイアログを出すこともできる. 関数をうまく利用することにより, 閲覧者が入力したテキストに対する処理が可能になる.
<HTML>
<TITLE> Prompt </TITLE >
<BODY >
<p>
「<font color="teal"> 何か伝言することがおありですか? </font>」と私は聞いた.
</p>
　<SCRIPT Language="JavaScript">
　　 YourMessage=prompto("メッセージをどうぞ")
　　 YourMessage="<p> 「<font color=blue>"+ YourMessage +" </font>」とあなたは答えた. </p>"
　　 document.write(YourMessage)
　</SCRIPT>
</BODY>
</HTML>
(ブラウザでの表示結果)

(練習) if 文を利用して, テキストが入力されなかった場合にも適切なメッセージが入るようにしてみましょう. null と論理演算子 OR ( || ) を利用します.
(ブラウザでの表示結果)

HTML にはフォームと呼ばれる機能があり, ボタンや選択リスト(プルダウンメニュー) テキスト入力ボックス等を利用して, 双方向のデータ交換 (= インタラクティブ) を可能にしている. 通常はフォームは CGI (Common Gateway Interface; サーバ上で動くプログラム) と組み合わせて利用されるが, Java Script を利用するとサーバ側の仕組みを理解していなくても利用することが可能である.
HTML におけるフォーム

(書式) 　<FORM>
　　　　　　　 <INPUT>
　　　　　</FORM>
フォームの指定は <FORM>・・・ </FORM> タグを用いる. (注) フォームは入れ子構造にはできない. つまり, <FORM> タグの中には <FORM> タグは入れられない. <FORM> は 2 つの属性 METHOD と ACTION をとる. METHOD 属性は GET または POST のいずれかである. ACTION 属性はフォームが提出された時に呼ばれるスクリプトを指す.
　フォームの要素は <INPUT> タグにより指定される. <INPUT> は通常は, 少なくとも, 2 つの属性をとる; TYPE と NAME である. TYPE 属性はこの要素の種類を示す. たとえば, テキスト入力の場合には "text", ラジオボタンの場合には "radio", チェックボックスの場合には "check", 提出ボタンの場合には "submit" となる. NAME 属性はこの要素の名前を表す. また, 選択メニューを利用する場合には <SELECT>, <OPTION> タグを利用する.

Java Script におけるフォーム

Java Script でフォームを扱う場合にはオブジェクトの階層構造が重要である. 概念的には下図のような構成になっている.

つまり, (2) では element オブジェクトの focus メソッドを用いて passwd1 にフォーカスを合わせ, (4) では再度入力されたパスワードを select メソッドを用いて選択させたのである.

以下にいくつかの例題を示す. 各自で自習してみなさい.

HTML のみの場合ラジオボタンで選択させる.
<HTML>
<TITLE> FORM HTML only </TITLE >
<BODY >
　<FORM>
　お元気ですか?　
　　 <INPUT TYPE="radio" NAME="myAnswer"> はい
　　 <INPUT TYPE="radio" NAME="myAnswer"> いいえ
　</FORM>
</BODY>
</HTML>

(ブラウザでの表示結果)

ボタンを選択させ, その結果を表示する.
フォームにonClick イベントハンドラを組み合わせる.
<HTML>
<TITLE> Button Click </TITLE >
<BODY >
　<FORM>
　背景色を何色にしますか?　
　　 <INPUT TYPE="button" VALUE="そらいろ" onClick="document.bgColor='skyblue'">
　　 <INPUT TYPE="button" VALUE="きみどりいろ" onClick="document.bgColor='yellowgreen'">
　　 <INPUT TYPE="button" VALUE="ももいろ" onClick="document.bgColor='pink'">
　</FORM>
</BODY>
</HTML>

(ブラウザでの表示結果)

(練習) ボタンをチェックボックス (checkbox) に変えてみましょう.
(ブラウザでの表示結果)
　　(参考) チェックボックスとラジオボタンの場合で書式の違いを確認せよ!.

(問題) 赤, 青, 黄色のチェックボックスを用意し, 2 つ以上チェックを入れた場合にはチェックされた色が混色となって背景色に表れるような Java Script を書きなさい.

選択リストから選択し, その結果に合わせて処理を変える.
フォームにonChange イベントハンドラを組み合わせる.
(参) 選択リスト (pull down menu) の表示には, フォーム中で <SELECT> タグと <OPTION> タグを利用する.
<HTML>
<HEAD>
<TITLE> Pull Down Menu </TITLE >
　<SCRIPT Language="JavaScript">
　function YourColor(){
　　 if(document.myForm.myMenu.value == "mySkyblue"){
　　　　 document.bgColor="skyblue";
　　 }
　　 else if(document.myForm.myMenu.value == "myYellowgreen"){
　　　　 document.bgColor="yellowgreen";
　　 }
　　 else if(document.myForm.myMenu.value == "myPink"){
　　　　 document.bgColor="pink";
　　 }
　}
　</SCRIPT>
</HEAD>
<BODY >
　　<FORM NAME="myForm">
　　背景色を何色にしますか?　
　　　　 <SELECT NAME="myMenu" onChange="YourColor()">
　　　　　　 <OPTION VALUE="mySkyblue"> みずいろ
　　　　　　 <OPTION VALUE="myYellowgreen"> きみどりいろ
　　　　　　 <OPTION VALUE="myPink"> ももいろ
　　　　 </SELECT>
　　</FORM>
</BODY>
</HTML>

(ブラウザでの表示結果)

テキストボックスにテキストを入力し, その結果に合わせて処理を変える.
フォームにonBlur イベントハンドラを組み合わせる.
<HTML>
<HEAD>
<TITLE> TextBOX </TITLE >
　<SCRIPT Language="JavaScript">
　function myColor(){
　　 if(document.myForm.myText.value == "skyblue"){
　　　　 document.bgColor="skyblue";
　　 }
　　 else if(document.myForm.myText.value == "yellowgreen"){
　　　　 document.bgColor="yellowgreen";
　　 }
　　 else if(document.myForm.myText.value == "pink"){
　　　　 document.bgColor="pink";
　　 }
　　 else{ 　　　　 document.bgColor="gray" 　　 }
　}
　</SCRIPT>
</HEAD>
<BODY >
　　<FORM NAME="myForm">
　　背景色を何色にしますか? (skyblue?, yellowgreen? or pink?)　
　　　 <INPUT TYPE="text" NAME="myText" onBlur="myColor()">
　　</FORM>
</BODY>
</HTML>

(ブラウザでの表示結果)

フォームを利用して, メールを送る
<HTML>
<TITLE> A mail used a form </TITLE >
<BODY >
このフォームを利用すると Web ページの作者宛にメールを送ることができます.
<FORM name="form1" method="POST"
　　　 action="mailto:webmaster@bi1.stud.kumamoto-u.ac.jp"
　　　 onSubmit="document.form1.encording='text/plain'">
　　　 <TEXTAREA rows="10" cols="50" name="mail">
　　　 </TEXTAREA>
<BR>
　 <INPUT type="Submit" value="Send Mail">
</SCRIPT>
</BODY>
</HTML>

(ブラウザでの表示結果)

目次へもどる　 Java Script の基礎　

matsuba@cc.kumamoto-u.ac.jp