Sc283(1) 情報科学応用演習I 資料 (Part 11)　

[解説] フォーム（その2） - 種々のフォーム部品（例）

※ 汎用ボタンとテキストフィールドについては（その1）とその例のページを参照してください．

入力部品 <input>

チェックボックス (type="checkbox") (例)

true，false の2つの状態を取る部品． document.フォーム名.部品名.checked で，チェックボックスのチェック状態を検査・変更できる．

例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>checkbox sample</title>
<script type="text/javascript">
<!--
function handler() { alert(document.f.chk1.checked); }
//-->
</script>
<body>
<form name="f">
<input type="checkbox" name="chk1" onclick="handler();"> チェックボックス<br>
<input type="button" value="チェックボタンの値" onclick="handler();">
</form>
</body>

ラジオボタン (type="radio") (例)
複数の選択肢の中から一つを選ぶための部品．同じグループ (その中から一つだけ選ぶ) の部品は同じ名前にしておき，個々の部品は，配列の要素のように番号で指定する．

document.フォーム名.部品名[番号].checked で，チェック状態を検査・変更できる．また， document.フォーム名.部品名.length で，そのグループに属する部品の数が得られる．あらかじめ，value 属性で値を与えておくこともできる．

取り消しボタン (リセット部品) (type="reset")

フォームの状態を，(ページ読み込み直後の) 最初の状態に戻すボタン．

例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>radio button sample</title>
<script type="text/javascript">
<!--
function handler1(rad) { alert(rad.value); }
function handler2() {
    var i, val;
    for (i=0; i<document.f.rad1.length; i++) {
        if(document.f.rad1[i].checked) val=document.f.rad1[i].value;
    }
    document.bgColor = val;
}
//-->
</script>
<body>
<form name="f">
<input type="radio" name="rad1" value="red" onclick="handler1(this);" checked> 赤
<input type="radio" name="rad1" value="green" onclick="handler1(this);"> 緑
<input type="radio" name="rad1" value="blue" onclick="handler1(this);"> 青<br>
<input type="button" value="ラジオボタンの値" onclick="handler2();">
<input type="reset" value="リセット">
</form>
</body>

テキストエリア <textarea> (例)

複数行のテキストを入力編集できる部品． cols 属性と rows 属性で，幅と高さを指定できる．テキストフィールドと同様に， document.フォーム名.部品名.value で値を読み取ったり書き込んだりできる．また，(テキストフィールドも同様であるが) readonly 属性を値なしでつけておくと，編集できないテキストエリアになる．

例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>textarea sample</title>
<script type="text/javascript">
<!--
function handler1() { alert(document.f.txt1.value); }
function handler2() {
    document.f.txt1.value = "(" + document.f.txt1.value + ")";
}
//-->
</script>
<body>
<form name="f">
<textarea name="txt1" rows="5" cols="20">
ここでテキストが
編集できます
</textarea><br>
<input type="button" value="テキストエリアの値" onclick="handler1();">
<input type="button" value="カッコつけ" onclick="handler2();">
<input type="reset" value="リセット"><br>
<textarea name="txt2" rows="5" cols="20" readonly>
これは編集
できません
</textarea><br>
</form>
</body>

リストボックス (セレクト部品 <select> とオプション部品 <option>) (例)

複数の選択肢を表わしたリストから1個 (あるいは複数個) を選ぶための部品．詳細は下の例と参考リンクを参照すること．

例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>listbox sample</title>
<script type="text/javascript">
<!--
function handler1() {
    alert(document.f.sel1.selectedIndex);
    alert(document.f.sel1.options[document.f.sel1.selectedIndex].value);
}
function handler2() {
    alert(document.f.sel2.options[document.f.sel2.selectedIndex].value);
}
function handler3() {
    var i;
    for (i=0; i<document.f.sel3.options.length; i++) {
        if (document.f.sel3.options[i].selected)
            alert(document.f.sel3.options[i].value);
    }
}
//-->
</script>
<body>
<form name="f">

<select name="sel1">
<option value="red">赤</option>
<option value="green">緑</option>
<option value="blue">青</option>
</select>
<input type="button" value="色" onclick="handler1();">

<select name="sel2" size="3">
<option value="cyan">シアン</option>
<option value="magenta" selected>マゼンタ</option>
<option value="yellow">イエロー</option>
</select>
<input type="button" value="色2" onclick="handler2();">

<select name="sel3" size="5" multiple>
<option value="ne">子</option>
<option value="ushi" selected>丑</option>
<option value="tora" selected>寅</option>
<option value="u">卯</option>
<option value="tatsu">辰</option>
<option value="mi">巳</option>
<option value="uma">午</option>
<option value="hitsuji">未</option>
<option value="saru">申</option>
<option value="tori">酉</option>
<option value="inu">戌</option>
<option value="i">亥</option>
</select>
<input type="button" value="干支" onclick="handler3();"><br>

<input type="reset" value="リセット">
</form>
</body>

[解説] JavaScript 外部ファイル

(参考: JavaScript 外部ファイル in とほほのJavaScriptリファレンス)

通常，JavaScript のコードは，<script> ～ </script> の間に書かれる (→ JavaScript の書き方) が，その代わりに，別のファイルに JavaScript のコードだけを書いておき，そのファイル名を <script> タグの src 属性で指定しても良い．この場合，<script> ～ </script> の間には何も書かない．したがって，仮にJavaScriptのコードを書いたファイル名を code.js とすると，

のように書くのが一般的である．なお，JavaScript のコード(だけ)を書いたファイルの拡張子は，通常，.js とするのが一般的である．以下に例を示す．

(myrandom.js の内容)

// 0 ～ n-1 の乱数を返す関数
function myRandom(n) {
    return Math.floor(Math.random() * n);
}

(js11-b.html の内容)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>JavaScript Sample 8-B</title>
<!-- myrandom.js の引用 -->
<script type="text/javascript" src="myrandom.js"></script>
<script type="text/javascript">
<!--
function init() {
  var n, m;
  n = myRandom(10)+1;   // myRandom(…) の利用
  m = myRandom(10)+1;   // myRandom(…) の利用
  document.f.prob1.value = n + " + " + m + " =";
}
//-->
</script>
<body onload="init();">
<form name="f" action="">
<input name="prob1" size="9" type="text" readonly>
</form>
</body>

下記リンクに実行可能なページを用意しておく．(別ウィンドウで実行される)

実行可能な例

[タスク] データベース (1)

概要

「だれが」「いつ」「どこを(どこに)」「出た(着いた)」かの情報を，一般オブジェクトの配列として，外部ファイルでリテラルとして定義しておき，それを引用して検索するプログラムを作成する，検索の問い合わせは，「だれが」「どこを(どこに)」「出た(着いた)」かを入力し，該当する「いつ」を答えるものとする．

詳細

「だれが」「いつ」「どこを(どこに)」「出た(着いた)」かの情報を格納したファイルは js11-1.js という名前で作成するものとし，以下のようなものを想定する．

/* db は，一般オブジェクト{who,when,action,where} の配列 */
var db = [
{who: "太郎", when: "07:30", action: "出た",   where: "家"},
{who: "太郎", when: "08:45", action: "着いた", where: "教室"},
{who: "花子", when: "10:00", action: "出た",   where: "家"},
{who: "花子", when: "10:30", action: "着いた", where: "教室"},
{who: "次郎", when: "12:00", action: "出た",   where: "家"},
{who: "太郎", when: "12:30", action: "出た",   where: "教室"},
{who: "太郎", when: "12:40", action: "着いた", where: "食堂"},
{who: "次郎", when: "12:50", action: "着いた", where: "教室"},
{who: "太郎", when: "13:30", action: "出た",   where: "食堂"},
{who: "太郎", when: "13:40", action: "着いた", where: "部室"},
{who: "花子", when: "14:40", action: "出た",   where: "教室"},
{who: "次郎", when: "14:40", action: "出た",   where: "教室"},
{who: "花子", when: "15:10", action: "着いた", where: "家"},
{who: "次郎", when: "15:30", action: "着いた", where: "バイト先"},
{who: "太郎", when: "17:00", action: "出た",   where: "部室"},
{who: "次郎", when: "17:20", action: "出た",   where: "バイト先"},
{who: "花子", when: "17:40", action: "出た",   where: "家"},
{who: "次郎", when: "17:40", action: "着いた", where: "レストラン"},
{who: "花子", when: "18:00", action: "着いた", where: "レストラン"},
{who: "太郎", when: "18:30", action: "着いた", where: "家"}
];

このファイルは下記リンク先に置いておくので，保存して用いるとよい．

js11-1.js

また，プログラムの雛形を以下に示す，

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>JavaScript Sample 11-1 a</title>
<!-- db の定義の引用 -->
<script type="text/javascript" src="js11-1.js"></script>
<script type="text/javascript">
<!--
function search() {
    // ここで検索をする．

    // db のデータ数は db.length で得られるので，
    // 変数 i を 0 ～ db.length-1 と1ずつ変化させて，
    // db[i] で得られる各一般オブジェクトのうち，
    // 入力条件に合うものがあれば，その時刻 (when) を出力する．

    // 例えばi番の一般オブジェクトの who のデータは，
    // db[i].who のようにして得られる．
}
// -->
</script>
<body>
<form name="f">
<input type="text" name="who"> が
<input type="text" name="where"> を(に)
<input type="text" name="action"> のはいつ?<br>
<input type="button" value="検索" onclick="search();"><br>
<input type="text" name="when" readonly>
</form>
</body>

以下に例を示す．リンクをクリックすれば実行できる．(別ウィンドウで実行される)

js11-1a.html （雛形，例のコードと流れ図）

[課題] データベースプログラムの改良

課題番号：	11-1
課題名：	データベースプログラムの改良
ファイル名：	task11-1.html, task11-1.doc
締切：	（別途指示する）

内容

先のタスクの「データベース (1)」のプログラムを改良する．改良は自由に創意工夫をほどこして行ってよい．例えば，以下のような改良が考えられる．

同じ条件のデータが複数ある場合 (例えば，js11-1.js のデータでは，「花子」は「10:00」と「17:40」に2回「家」を「出て」いる) それらを全て表示するようにする
人物と場所(と出入り)から時刻を検索するだけではなく，人物と時刻から，そのときにいる場所を検索したり，場所と時刻から，その時そこにいる人物を検索できるようにする
ユーザーが使いやすいようにインターフェースを工夫する
データの一覧・追加・削除・変更などをできるようにする
データベースの内容をファイルに保存したり復帰したりできるようにする

など．なお，データベースは上記タスク「データベース (1)」と同様に， js11-1.js を使用すること．

提出物

作成したプログラムのファイルと (task11-1.html)， MSワードで作成したレポートのファイル (task11-1.doc) を提出する．レポートには，以下の内容を含めること．

プログラムの改良点
各改良点について
- その内容
- その考え方・アルゴリズム(手順)など
- 工夫した点
改良したプログラムの流れ図
改良したプログラムの，ユーザ向けの使い方解説

また，課題レポート提出に関する諸注意に従い，レポートの第1ページは表紙として，必要な事項を記載すること．

Sc283(1) 情報科学応用演習I 資料 (Part 11)

[解説] フォーム（その2） - 種々のフォーム部品 （例）

[解説] JavaScript 外部ファイル

[タスク] データベース (1)

概要

詳細

[課題] データベースプログラムの改良

内容

提出物

Sc283(1) 情報科学応用演習I 資料 (Part 11)　

[解説] フォーム（その2） - 種々のフォーム部品（例）