[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

コンピュータIIE（HTMLとウェブ・サーバ）第11回

目次
11.1 フォーム（2）
11.1.1 JavaScriptとは
11.1.2 JavaScriptの例
11.1.3 フォームの入力確認
11.2 演習11
11.3 レポート課題
11.4 参考資料
索引
buttonタグ   JavaScript   onclick属性   scriptタグ   組み込みイベント  

11.1 フォーム（2）

11.1.1 JavaScriptとは

JavaScript とは、Netscape社が開発した、ウェブ用のスクリプト言語です。 スクリプト言語とは、簡易プログラミング言語と考えてください。

JavaScriptを用いますと、自動的にウィンドウを開いたり、フォーム入力が適正かを確認したりできます。

JavaScriptプログラムは、サーバ側ではなくクライアント側で実行されます。 つまり、ウェブ・ブラウザの中でプログラムが動くのです。

JavaScriptプログラムは、独立したファイルに格納することもありますが、普通はHTMLドキュメントに埋め込みます。 ウェブ・ブラウザは、JavaScriptプログラムが埋め込まれたHTMLドキュメントを読み込みますと、そのプログラムを実行します。

JavaScriptプログラムが書けるところは、次の3か所です。

属性の値については、組み込みイベントを表す属性の値として、JavaScriptプログラムが書けます。 組み込みイベント （ intrinsic event ） とは、「HTMLドキュメントが読み込まれた」や「マウスがクリックされた」などの、ウェブ・ブラウザ固有の「出来事」です。 つまり、HTMLドキュメントが読み込まれたら何々する、マウスがクリックされたら何々する、というプログラムを書くのです。

<script> タグについては、 <script> 〜 </script> の範囲にJavaScriptプログラムが書けます。 ウェブ・ブラウザは、HTMLドキュメントを読み込みますと、すべての <script> タグの中のプログラムを順次実行します。

外部ファイルについても、 <script> タグを使います。 src 属性で外部ファイルのURLを指定します。 外部ファイルにしますと、複数のHTMLドキュメントで同じJavaScriptプログラムが共有できます。

なお、スクリプト言語JavaScriptとプログラミング言語Javaは別物です。

11.1.2 JavaScriptの例

JavaScriptプログラムの具体例を紹介する前に、 <button> タグについて説明します。

<button> は、押しボタンを表すタグです。 タグに囲まれた部分がボタンのラベルになります。 type 属性でボタンの種類を指定します。 一般的なボタンは type="button" です。

例 11.1  
<button type="button">押す</button>

type 属性については、 type="submit" としますと提出ボタンになり、 type="reset" としますとリセット・ボタンになります。 つまり、 label が単純な文字列の場合、 

<button type="submit">label</button>
<button type="reset">label</button>

は、それぞれ 

<input type="submit" value="label">
<input type="reset" value="label">

と同じになります。

それでは、組み込みイベントとJavaScriptプログラムを紹介します。

組み込みイベントの中でよく使われるのが、マウスがクリックされたということです。 このイベントは onclick で表されます。

また、JavaScriptには、新しくウィンドウを開いてそこに指定されたホームページを表示するという機能があります。 このJavaScriptプログラムは 

window.open(URL);

です。

次の例は、ボタンがクリックされると新しくウィンドウが開いて、Yahoo Japanのホームページが表示されるものです。

例 11.2  
<button type="button" onclick="window.open('http://www.yahoo.co.jp/');">
Yahoo
</button>

JavaScriptを使いますと、ダイアログ・ボックスを開くことができます。 警告用のダイアログ・ボックスについては 

window.alert(message);

と書き、確認用のダイアログ・ボックスについては 

window.confirm(message);

と書き、入力用のダイアログ・ボックスについては 

window.prompt(message);

と書きます。

例 11.3  
<button type="button" onclick="window.alert('問題が発生しました。');">
警告
</button>
<button type="button" onclick="window.confirm('本当に実行しますか。');">
確認
</button>
<button type="button" onclick="window.prompt('入力してください。');">
入力
</button>

このJavaScriptプログラムを <script> タグの中に書きますと、以下のようになります。 ただし、この先はプログラミングの話になってしまいますので、この授業では説明しません。 type 属性でJavaScriptであることが明示されていることと、 <!-- と --> で囲んで、プログラムが表示されないようにしていることに注意してください。

例 11.4  
<html>
<head>
<title>JavaScriptの例</title>
<script type="text/javascript">
<!--
function displayAlert () {
    window.alert("問題が発生しました。");
}
function displayConfirm () {
    window.confirm("本当に実行しますか。");
}
function displayPrompt () {
    window.prompt("入力してください。");
}
// -->
</script>
</head>
<body>
<button type="button" onclick="displayAlert();">
警告
</button>
<button type="button" onclick="displayConfirm();">
確認
</button>
<button type="button" onclick="displayPrompt();">
入力
</button>
</body>
</html>

JavaScriptプログラムを外部ファイルに格納しますと、次のようになります。 この場合は、 src 属性でファイルscript01.javaを指定しています。

例 11.5  
<html>
<head>
<title>JavaScriptの例</title>
<script type="text/javascript" src="script01.js">
</script>
</head>
<body>
<button type="button" onclick="displayAlert();">
警告
</button>
<button type="button" onclick="displayConfirm();">
確認
</button>
<button type="button" onclick="displayPrompt();">
入力
</button>
</body>
</html>
script01.js 
function displayAlert () {
    window.alert("問題が発生しました。");
}
function displayConfirm () {
    window.confirm("本当に実行しますか。");
}
function displayPrompt () {
    window.prompt("入力してください。");
}

11.1.3 フォームの入力確認

ここで、前回のJavaプログラム（FormTest.java）を起動しておいてください。 

b04a001@AsiaA1:~% cd WWW-local
b04a001@AsiaA1:~/WWW-local% cd comp2e
b04a001@AsiaA1:~/WWW-local/comp2e% java FormTest

JavaScriptには色々な機能がありますが、ここでは、フォームの入力確認に利用します。 フォームでは、提出ボタンを押しますと、入力データがサーバに送信されます。 このとき、もし入力に明らかな異常があった場合、サーバに送信せず、警告文を表示すれば、トラブルも避けられるだろうということです。

次の例は、年齢を入力するフォームです。 適正な年齢を0以上129以下とし、

の4つの条件を確認した上で送信しています。

例 11.6  
<html>
<head>
<title>年齢フォーム</title>
<script type="text/javascript">
<!--
function check () {
    var age = document.forms["form1"].age.value;
    if (age == "") {
        window.alert("何か入力してください。");
    } else if (isNaN(age)) {
        window.alert("数を入力してください。");
    } else if (age < 0) {
        window.alert("値が小さすぎます。");
    } else if (129 < age) {
        window.alert("値が大きすぎます。");
    } else {
        document.forms["form1"].submit();
    }
}
// -->
</script>
</head>
<body>
<h1>年齢フォーム</h1>
<form action="http://localhost:8080/" method="GET" name="form1">
<p>
年齢を入力してください。
<input type="text" name="age" size="4"><br>
<button type="button" onclick="check();">OK</button>
<button type="reset">キャンセル</button>
</p>
</form>
</body>
</html>

もう一つの例は、生年月日フォームです。 適正な生まれ年を、1900以上1999以下としています。 なお、この入力確認は、2月30日が認められますので、完全ではありません。

例 11.7  
<html>
<head>
<title>Date of Birth</title>
<script type="text/javascript">
<!--
function check () {
    var year = document.forms["form1"].year.value;
    var month = document.forms["form1"].month.value;
    var day = document.forms["form1"].day.value;
    if (year == "") {
        window.alert("The year is empty.");
    } else if (isNaN(year)) {
        window.alert("The year is not a number.");
    } else if (year < 1900) {
        window.alert("The year is too small.");
    } else if (1999 < year) {
        window.alert("The year is too large.");
    } else if (month == "") {
        window.alert("The month is empty.");
    } else if (isNaN(month)) {
        window.alert("The month is not a number.");
    } else if (month < 1) {
        window.alert("The month is too small.");
    } else if (12 < month) {
        window.alert("The month is too large.");
    } else if (day == "") {
        window.alert("The day is empty.");
    } else if (isNaN(day)) {
        window.alert("The day is not a number.");
    } else if (day < 1) {
        window.alert("The day is too small.");
    } else if (31 < day) {
        window.alert("The day is too large.");
    } else {
        document.forms["form1"].submit();
    }
}
// -->
</script>
</head>
<body>
<h1>Date of Birth</h1>
<form action="http://localhost:8080/" method="GET" name="form1">
<p>
Please input the date of your birth.<br>
Day: <input type="text" name="day" size="3">
Month: <input type="text" name="month" size="3">
Year: <input type="text" name="year" size="6"><br>
<button type="button" onclick="check();">Submit</button>
<button type="reset">Reset</button>
</p>
</form>
</body>
</html>

11.2 演習11

上記の生年月日フォームを日本語化してください。 フォームと警告のテキストを日本語にし、フォームの配列を日本的にします。 何回か異常な入力を行ってみて、警告のダイアログ・ボックスが正しく表示されることを確認してください。 なお、「フォーム・テスト」のページに表示される"year", "month", "day"は、コントロールの名前ですので、日本語にする必要はありません。

11.3 レポート課題

今日の演習11の答案（ホームページのURL）をメールで提出してください。 メールの差出人は学内のアドレス（b04a001@twcu.ac.jpなど）とし、メールの宛先はkonishi@twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日（12月14日）を明記してください。

11.4 参考資料

[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]
2005年12月14日更新
小西 善二郎 <konishi@twcu.ac.jp>
Copyright (C) 2005 Zenjiro Konishi. All rights reserved.