本章要點(diǎn)
1.客戶端編程的常用技術(shù):動(dòng)態(tài)表格,網(wǎng)頁傳值,動(dòng)態(tài)框架,表單驗(yàn)證等
2.發(fā)送Email,繪制圖形,文本上傳
3.編寫國(guó)際化應(yīng)用
3種網(wǎng)頁對(duì)話框
在Web應(yīng)用開發(fā)中,有3種形式的網(wǎng)頁對(duì)話框:
1)使用window.open打開網(wǎng)頁
2)使用Web模式對(duì)話框
3)使用Web非模式對(duì)話框。
程序名稱:8_03.html
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function openNewWindow(szMethod)
{
if(szMethod == "modal")
{
window.showModalDialog("8_01.html");
}
else if(szMethod == "modeless")
{
window.showModelessDialog("8_01.html");
}
else
{
window.open("8_01.html");
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="BUTTON" VALUE="window.open" ONCLICK="openNewWindow('normal');"><BR>
<INPUT TYPE="BUTTON" VALUE="showModalDialog" ONCLICK="openNewWindow('modal');"><BR>
<INPUT TYPE="BUTTON" VALUE="showModelessDialog"ONCLICK="openNewWindow('modeless');"><BR>
</BODY>
</HTML>
3種對(duì)話框的區(qū)別是利用window.open打開的頁面和其他的窗口一樣,可以在幾個(gè)窗口之間的切換:
模式對(duì)話框不能和其他窗口切換焦點(diǎn),只能是當(dāng)前焦點(diǎn)。
非模式對(duì)話框可以和其他窗口切換焦點(diǎn),但那是永遠(yuǎn)在屏幕最前面。
繪畫狂和頁面之間傳遞變量是Web應(yīng)用開發(fā)最常用的技術(shù)。
程序名稱:carry_value.html(3種形式的網(wǎng)頁對(duì)話框的傳值)
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function openNewWindow(method)
{
if(method == "modal")
{
window.showModalDialog("8_06.html",MYFORM.TXT,
"dialogTop:100px;dialogLeft:100px;dialogWidth:200px;dialogHeight:400px;scroll:1;status:0;");
}
else if(method =="modeless")
{
window.showModelessDialog("8_06.html",MYFORM.TXT,
"dialogTop:100px;dialogLeft:100px;dialogWidth:200px;dialogHeight:400px;scroll:1;status:0;");
}
else
{
window.open("8_05.html");
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="MYFORM">
<INPUT TYPE="BUTTON" VALUE="normal" ONCLICK="openNewWindow('normal');"><BR>
<INPUT TYPE="BUTTON" VALUE="modal" ONCLICK="openNewWindow('modal');"><BR>
<INPUT TYPE="BUTTON" VALUE="modelss"ONCLICK="openNewWindow('modeless');"><BR>
<INPUT TYPE="TEXT" NAME="TXT">
</FORM>
</BODY>
</HTML>
利用window.open打開8_05.html,要傳遞變量就要建立連個(gè)窗口之間的關(guān)系,子窗口中利用opener來引用父窗口
這樣可以得到父窗口內(nèi)的元素的值。
程序名稱:8_05.html
<HTML>
<SCRIPT LANGUAGE="JavaScript">
function tran()
{
opener.MYFORM.TXT.value = document.MYFORM.TXT.value;
window.close();
}
</SCRIPT>
<BODY>
<FORM NAME="MYFORM">
<INPUT TYPE="TEXT" NAME="TXT" VALUE="測(cè)試">
<INPUT TYPE="BUTTON" VALUE="傳遞" ONCLICK="tran()">
</FORM>
</BODY>
</HTML>
單擊父窗口的按鈕,打開程序8_05.html,在窗口中輸入一些字符串,單擊按鈕傳遞,值會(huì)顯示在父窗口的文本框中。
模式與非模式對(duì)話框傳遞值方法是一樣的,只要對(duì)window.dialogArguments.value賦值就可以了。
程序名稱:8_06.html
<HTML>
<SCRIPT LANGUAGE="JavaScript">
function tran()
{
window.dialogArguments.value = document.MYFORM.TXT.VALUE;
window.close();
}
</SCRIPT>
<BODY>
<FORM NAME="MYFORM">
<INPUT TYPE="TEXT" NAME="TXT" VALUE="測(cè)試">
<INPUT TYPE="BUTTON"VALUE="傳遞" ONCLICK="tran()">
</FORM>
</BODY>
</HTML>