インタラクティブな Web ページ
インタラクティブな Web ページ作成の基礎として, ダイアログボックスを用いた
方法とフォームによる方法を説明する.
ダイアログ出す (alert, confirm, prompt)
ダイアログボックスを出すことにより, 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 ( || ) を利用します.
(ブラウザでの表示結果)
目次へ戻る
FORM による質問
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 でフォームを扱う場合にはオブジェクトの階層構造が重要である.
概念的には下図のような構成になっている.
つまり, フォームは様々なオブジェクトの下にいるのである.
ここで, forms はフォーム全体を表し,
elements
はフォームの構成要素のオブジェクトを指している.
フォームやフォーム要素は 1 つの Web ページ内で複数ある可能性があり,
それぞれが区別される必要がある.
区別の仕方は 2 通りあり, 「添え字」と「名前」を使った方法がある.
(注) 名前の方が理解しやすいので, 例では名前によるフォーム及びフォーム要素の
区別を行った.
(例) フォームを利用して, パスワードをチェックする
パスワードをチェックするスクリプト.
document.form1.passwd1.focus()/select() により,
パスワードが一致するかどうかを確認する.
ここで, form1 は form オブジェクト名であり,
passwd1, passwd2 は element オブジェクト名である.
<!-- Java Script -->
< SCRIPT language="JavaScript">
<!--
function PasswdCheck(){
if(document.form1.passwd1.value == ""){ <--- (1)
alert("パスワードを入力してください");
document.form1.passwd1.focus(); <--- (2)
document.form1.passwd2.value == "";
}
else if(document.form1.passwd1.value != <--- (3)
document.form1.passwd2.value){
alert("パスワードが一致しません"); <--- (4)
document.form1.passwd1.select();
document.form1.passwd2.value == "";
}
else{
alert("パスワードが一致しました"); <--- (5)
}
}
//-->
</SCRIPT>
<h3>
<font color="blue">
パスワードを入力してください.
</font>
</h3>
<FORM action="test.html" method="POST" name="form1">
<INPUT type="password" name="passwd1"> <BR> <--- (6)
<INPUT type="password" name="passwd2"> <BR>
<INPUT type="button" value="チェック" onClick="PasswdCheck()">
<INPUT type="Reset" value="リセット"> <--- (7)
</FORM>
(ブラウザでの表示結果)
PasswdCheck 関数における処理の流れ
(1) passwd1 にパスワードが入力されているかどうかをチェックする.
(2) passwd1 が空の場合は「パスワードを入力してください」と警告を出す.
(3) passwd1 と passwd2 が一致するかどうかをチェックする.
(4) 一致しない (passwd1 != passwd2) の場合は警告を出す.
(5) それ以外 (一致する) の場合には「パスワードが一致しました」という警告を出す.
フォームにおける処理
まず, このフォームを form1 と名付け, 何かを提出する (POST)
タイプのフォームであると定義する.
(6) passwd1 passwd2 と名付けたボックスを用意する.
(7) 「チェック」と「リセット」のボタンを用意する.
onClick 属性により
「チェックボタン」がクリックされた場合には PasswdCheck 関数
を利用しパスワードをチェックし,
「リセットボタン」がクリックされた場合には Passwd1 と Passwd2 の中身を消去
させるように設定する.
(2), (4) の構造は 次の用になっている.
つまり, (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 の基礎
Copyright (c) 2002 Kumamoto University
matsuba@cc.kumamoto-u.ac.jp