教材ドットコムオリジナル教材

(1)

５．関数を駆使して

いろいろなＦＯＲＭを攻略しちゃおう

メソッド

button checkbox radio select text textarea

ボタンチェックボックスラジオボタンセレクトテキストテキストエリア

blur blur blur blur blur blur click click click focus focus focus

focus focus focus select select

プロパティ

form checked checked form defaultValue defaultValue

name defaultChecked defaultChecked length form name

type form form name name type

value name length options type value

type name selectedIndex value

value type type

value

イベントハンドラ

onBlur onBlur onBlur onBlur onBlur onBlur onClick onClick onClick onChange onChange onChange onFocus onFocus onFocus onFocus onFocus onFocus

onmousedown onkeydown onmousedown onkeydown onkeydown

onmouseup onkeypress onmouseup onkeypress onkeypress

onkeyup onkeyup onkeyup

onSelect onSelect

その他のイベントハンドラ

(2)

【問題１】「押してね！」というボタンを押したら、「ありがと！」とアラート表示するＨＴＭＬ文書を作成しなさい。【ワンポイント！】フォーム「JavaScript ではフォームと呼ばれるオブジェクトがあります。「これはユーザーに文字を入力してもらったり、メニューからあるひとつを選んだりと、利用者との接点に関するプログラムの部品群のことを言います。」「ホームページ利用者はアンケートなどに答えるとき、テキストボックスに氏名を入力し、生別を表すラジオボタンをクリックします。そうすることで利用情報を送信します。その際に、いろいろな場所を利用しましたね。それらがそうなのです。」「前述の表を見て下さい。」「それぞれの項目に、ボタン、チェックボックス・・・、などフォームが列挙されています。これから説明しますスクリプトから各自解釈してみてください。」【ワンポイント！】イベントハンドラ「ホームページ利用者はアンケートに答えると最後に送信ボタンをクリックします。これは入力された情報をそうインさせるプログラムを動かさなくてはならないからです。そのプログラムを起動させるきっかけとなる行為が送信ボタンのクリックです。」「このように利用者の何かしらのアクションによって連動するコンピュータ側の処理の総称をイベントハンドラといいます。 <HTML> <HEAD> <TITLE>TEST51!</TITLE> </HEAD> <BODY BGCOLOR="#ffffff"> <FORM NAME="form_a">

</BODY> </HTML>

(3)

【問題２】「押してね！」というボタンを押したら、（最初は「なんか入れてね」と書いてある）テキストボックスに「ありがと」と表示するＨＴＭＬ文書を作成しなさい。 <HTML> <HEAD> <TITLE>TEST52!</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <BODY BGCOLOR="#ffffff"> <FORM NAME="form_a">

</BODY> </HTML>

(4)

【問題３】「占う」というボタンを押したら、テキストボックスに 3 分の１の確率でそれぞれ「大吉」「吉」「凶」と表示するＨＴＭＬ文書を作成しなさい。 <HTML> <HEAD> <TITLE>TEST53!</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <BODY BGCOLOR="#ffffff"> <FORM NAME="form_a">

</BODY> </HTML>

(5)

【問題４】「１ＭＣ、１ＳＥ、２ＭＣ、２ＳＥ」というセレクトメニューを選び、学科名ボタンを押すと、テキストボックスに学科の正式名称が表示されるＨＴＭＬ文書を作成しなさい。 <HTML> <HEAD> <TITLE>TEST54!</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <BODY BGCOLOR="#ffffff"> <FORM NAME="form_a"> <SELECT NAME="select_a"> <OPTION VALUE="1MC">1MC <OPTION VALUE="1SE">1SE <OPTION VALUE="2MC">2MC <OPTION VALUE="2SE">2SE </SELECT>

</BODY> </HTML>

(6)

【問題５】[ABCDEF]の文字列に対して、何文字目という指定をメニューから選び、「文字目」ボタンをクリックするとその文字数の文字がテキストボックスに表示される HTML を作成せよ。 <HTML> <HEAD> <TITLE>TEST55!</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <BODY BGCOLOR="#ffffff"> <FORM NAME="form_a"> <FONT SIZE=+2>[ABCDEF]の</FONT><BR> <SELECT NAME="select_a"> <OPTION VALUE="1">1 <OPTION VALUE="2">2 <OPTION VALUE="3">3 <OPTION VALUE="4">4 <OPTION VALUE="5">5 <OPTION VALUE="6">6 </SELECT>

</FORM> </BODY> </HTML>

(7)

【問題６】「MEN」「WOMEN」というラジオボタンをクリックすると、それに対応した日本語がテキストボックスに表示されるＨＴＭＬ文書を作成しなさい。 <HTML> <HEAD> <TITLE>TEST56!</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <BODY BGCOLOR="#ffffff"> <FORM NAME="form_a">

<INPUT TYPE="RADIO" VALUE="man" NAME="radio1" onClick='seibetsu()'>MEN <INPUT TYPE="RADIO" VALUE="woman" NAME="radio2" onClick='seibetsu()'>WOMAN <INPUT TYPE="TEXT" VALUE="?" NAME="text1">

(8)

【問題７】「ボールペン」「バインダー」というチェックボックスを選び、「計算する」ボタンを押すと、ボールペンが 100 円、バインダーが 500 円という料金計算で、合計金額がテキストボックスに学科の正式名称が表示されるＨＴＭＬ文書を作成しなさい。 <HTML> <HEAD> <TITLE>TEST57!</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <BODY BGCOLOR="#ffffff"> <FORM NAME="form_a">

<INPUT TYPE="CHECKBOX" VALUE="100" NAME="check1">ボールペン <INPUT TYPE="CHECKBOX" VALUE="500" NAME="check2">バインダー <INPUT TYPE="BUTTON" VALUE="計算する" onClick='keisan()'><BR> <INPUT TYPE="TEXT" VALUE="?" NAME="text1">

(9)

【問題８】テキストボックスにそれぞれ数値を入力し、「計算する」ボタンをクリックすると、最右のテキストボックスにその合計が計算される HTML を作成せよ。 <HTML> <HEAD> <TITLE>TEST61</TITLE> <SCRIPT Language="JavaScript">  </SCRIPT> </HEAD> <BODY> <FORM NAME="form1">

</BODY> </HTML>

(10)

【問題９】メニューから、Macintosh 、PC/AT 互換機、PC-9801 シリーズのいずれかを選ぶ、テキストボックスにそれに応じて「あなたの機種は○○ですね」と表示される HTML を作成せよ。 <HTML> <HEAD> <TITLE>TEST61</TITLE> <SCRIPT Language="JavaScript">  </SCRIPT> </HEAD><BODY> <FORM NAME="form_a">

<SELECT NAME="select1" onChange='koumoku()'> <OPTION VALUE="Macintosh">Macintosh

(11)

【問題１０】テキストボックスに文字を入力し、「追加」ボタンをクリックする度にテキストエリアに文字列が下方向にどんどんと追加される HTML を作成せよ。 <HTML> <HEAD> <TITLE>TEST62</TITLE> <SCRIPT Language="JavaScript">  </SCRIPT> </HEAD> <BODY> <FORM NAME="form_a">

</BODY> </HTML>

(12)

【問題１１】「見る」「聞く」「移動する」のメニューの項目を選び「実行」ボタンをクリックする度にテキストエリアにそれぞれに対応したメッセージが下方向に追加される HTML を作成せよ。 <HTML><HEAD><TITLE>TEST63</TITLE> <SCRIPT Language="JavaScript">  </SCRIPT></HEAD><BODY> <FORM NAME="form_a" > コマンド： <SELECT NAME="select1"> <OPTION>見る <OPTION>移動する <OPTION>聞く </SELECT>

(13)

【問題１２】テキスト送信時にテキストボックスに何も書かれていなければ、それに対してのアラートが表示される HTML を作成しなさい。 <HTML><HEAD> <TITLE>TEST63</TITLE> <SCRIPT Language="JavaScript">  </SCRIPT> </HEAD><BODY>

氏名：

<INPUT TYPE="TEXT" NAME="text1" VALUE="" SIZE=30><BR> 電話番号：

(14)

【問題１３】メニューを選択するとそれぞれ対応した HTML へジャンプする HTML を作成しなさい。 <HTML> <HEAD> <TITLE>TEST65</TITLE> <SCRIPT Language="JavaScript">  </SCRIPT> </HEAD> <BODY> <FORM NAME="form_a" > 移動先を選んでください：

<SELECT NAME="select1" onChange='jump()'> <OPTION VALUE="">どこに行きますか？ <OPTION VALUE="nikki">日記 <OPTION VALUE="cg">作品集 <OPTION VALUE="link">リンク集 </SELECT> </FORM> </BODY> </HTML>