Comments
Transcript
Webプログラミング演習 JavaScript クライアントサイドスクリプト 演習
Webプログラミング演習
JavaScript
HTML内に埋め込まれるオブジェクト指向スクリプト言語
–
ＳＴＥＰ１０
JavaScriptを使った
入力チェック
–
名前にJavaが入っているが，プログラミング言語のJavaとは別物
スクリプト言語の国際規格ECMAScriptの一実装
–
ブラウザが解釈実行する
ＦｌａｓｈのActionScript, MicrosoftのJScriptも同様
クライアントサイドスクリプト
フォーム操作に対応した処理
ページ遷移先の動的決定
動的HTML生成
時限処理
参考ページ
http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Guide
クライアントサイドスクリプト
クライアント（＝ブラウザ）内で手続き的な処理を実行する
ことで，Webサーバの負担を軽減する
–
–
JavaScriptが主流，他にVBScript（IEのみ）：ブラウザ標準
より高機能なもの（Flash，Silverlightなど）：専用プラグインが必要
演習
% cd myblog/mng
ユーザ
入力
CGI
新規エントリーの登録時に，タイトルと本文がどちらも空で
ないことをチェックする．どちらかが空なら登録できない．
JavaScriptを記述したファイル（entry.js）を作成する
entry.htmlの修正
–
–
ブラウザ
入力値のチェック機能
Webサーバ
entry.js
function registcheck(form){
if(form.title.value == "" || form.body.value == ""){
alert("タイトルまたは主文が空です。");
return false;
}
return true;
}
function registcheck(form){...}
registcheck関数を定義する．引数formはこの関数を利用するフォーム
form.title.value
formに含まれるtitleという名前のフォーム部品の値
form.body.value
formに含まれるbodyという名前のフォーム部品の値
alert("...") 警告文を表示する
return
戻り値を設定して関数を終了する
entry.jsを読み込む
エントリーを登録する時に，チェック機能を呼び出す
entry.htmlの修正
<head>
追加
....
<script language="JavaScript" src="entry.js">//</script>
</head>
....
<form action="regist.cgi" method="POST" onSubmit="return registcheck(this)">
....
<script language="JavaScript" src="entry.js">//</script>
•JavaScriptが記述されたファイルentry.jsを読み込む
•開始タグと終了タグの間の//（1行コメント）はダミーで入れておく
（HTMLでは<script ... />は正しく機能しない）
onSubmit="...."
•そのフォームのサブミット（確定）操作をした時に実行されるスクリプトが記述できる．
•<head>...</head>でJavaScriptを読み込んでいるので，ここに記述されるスクリプトも
JavaScriptとして解釈実行される．
•thisはこのフォーム自身をあらわす．
•onSubmitのスクリプトがfalseを戻り値とした場合，サブミットは中止される．
1
デプロイ後，ブラウザで確認
http://webdesign.center.wakayama-u.ac.jp/~ユーザID/myblog/mng/entry.html
タイトルまたは主文を
入力せずに確定
日付の初期値を今日にする
entry.jsに次のsetdate関数を追加
function setdate(form){
var now = new Date();
form.y.value = now.getFullYear();
form.m.value = now.getMonth()+1;
// form.m.value = ("0"+(now.getMonth()+1)).slice(-2);
form.d.value = now.getDate();
// form.d.value = ("0"+now.getDate()).slice(-2);
}
警告文を表示して登録中止
月や日が一桁の場合に頭に"0"をつけるなら，コメントアウトしている方を使う
entry.htmlの修正
<body onLoad="setdate(myform)">
追加
....
<form name="myform" action="regist.cgi" method="POST" onSubmit=....
演習（チャレンジ）
registcheck関数の中で，日付が正しいこともチェックせよ
ヒント
–
–
<body onLoad="...">
•
–
HTMLの読み込みが終わった時点で実行されるスクリプトが記述できる．ここではsetdate関数
を呼び出す．
–
<from name="....">
•
フォーム領域に名前をつける．onLoadで呼び出すsetdate関数の引数としてフォームを指定で
きるようにするため．
月の値：form.m.value
日の値：form.d.value
条件判定の例
もし月の値が11，かつ，日の値が30より大きければ警告
さらなるチャレンジ：閏年のチェック
さらなるチャレンジ２：時分の初期値の設定
–
ブラウザで日付の初期値が今日となることを確認
例：11/31は存在しない
年の値：form.y.value
次回の予定
クリスマス特別編
2