...

Webプログラミング演習 JavaScript クライアントサイドスクリプト 演習

by user

on
Category: Documents
12

views

Report

Comments

Transcript

Webプログラミング演習 JavaScript クライアントサイドスクリプト 演習
Webプログラミング演習
JavaScript

HTML内に埋め込まれるオブジェクト指向スクリプト言語
–
STEP10
JavaScriptを使った
入力チェック
–
名前にJavaが入っているが,プログラミング言語のJavaとは別物
スクリプト言語の国際規格ECMAScriptの一実装


–
ブラウザが解釈実行する





Flashの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より大きければ警告

さらなるチャレンジ:閏年のチェック

さらなるチャレンジ2:時分の初期値の設定
–
ブラウザで日付の初期値が今日となることを確認
例:11/31は存在しない
年の値:form.y.value
次回の予定

クリスマス特別編
2
Fly UP