集結渦漩法在小板顫振分析之應用

Size: px

Start display at page:

Download "集結渦漩法在小板顫振分析之應用"

莨邬
6 years ago
Views:

1 工程科技與教育學刊第 11 卷第 1 期第 24~29 頁民國 103 年 3 月 JavaScript 表單於購物網站之應用羅逸文鄭瓊茹鄭文昌劉雯鵑中華醫事科技大學資訊管理系 kevin@mail.hwai.edu.tw 摘要 HTML 表單一是種專為網頁及瀏覽者所設計的互動式溝通介面, 為互動式網頁設計不可或缺的重要部分網際網路上越來越多的網站, 透過互動式網頁和使用者溝通, 如網路購物意見討論及訪客留言板等等, 都是透過表單的應用, 達到互動的效果由於 HTML 僅提供基本的表單輸入功能, 必須透過 JavaScript 的流程控制與標記物件觀念讓 HTML 表單發揮最大的功效並提供更彈性與人性化的輸入介面本論文主要探討如何用 JavaScript 的網頁特效來增加 HTML 表單的功能性, 進而提升表單與使用者之間的互動性, 並以購物網站中之實際範例加以說明關鍵詞 :form JavaScript 標籤 1. 前言表單在 HTML 中是一種讓使用者輸入資料最基本與重要的標籤, 它包含了文字選單按鈕下拉式清單等多種資料輸入功能, 並將使用者所輸入的資料送至伺服器端, 做後續的資訊處理換言之表單是一種專為網頁及瀏覽者所設計之最基本互動式溝通介面這種基本的溝通介面無法檢查使用者所輸入資料之正確性, 因此往往造成伺服器後端資料處理問題主要原因為 HTML 表單標籤沒有彈性且無法做流程與判斷控制 JavaScript 主要特點除了具有流程控制功能外, 最重要是可以取得和更改 HTML 標籤屬性和樣式值換言之, 網頁設計師可以撰寫 JavaScript 程式碼於表單資料送至伺服器前, 檢查所輸入之資料格式範圍等是否正確鄭文昌 [1] 於研究線上購物之互動性時, 指出利用 JavaScript 與 HTML 所設計網頁的特效可以增強網頁與使用者的互動性, 並實作出可以增進各戶與購物網站之互動性表單在 JavaScript 於改善表單輸入之設計上, 羅逸文 [2] 利用 JavaScript 的流程控制與標記物件觀念, 讓只提供基本表單輸入方式的 HTML 標記發揮到最大的功效並提供更彈性與人性化的輸入介面, 並結合 CGI 程式語言 ASP 和 ASSCES 資料庫實作出前端使用與後端管理都具人性化之線上電腦故障通報系統 Al Fernandez[3] 在網路互動性研究中同樣指出利用 JavaScript 與 HTML 可以設計網頁特效並增強網頁與使用者的互動性 Kazuhiro[4] 與 Flanagan[5] 在 JavaScript 相關著作中亦明確表示透過 JavaScript 所內建的方法可讓表單 submit 功能更有彈性與判斷功能 Paul Kerry[6] 在 Web Page Design 中亦明確指出 JavaScript 與 HTML 的交互使用讓表單設計更多樣化上述研究得知, HTML 提供最基本的表單輸入方式而 JavaScript 的標記物件觀念和流程控制功能, 可以很有彈性的控制 HTML 標籤屬性, 讓 HTML 表單標記發揮最大功效換言之, 可以使購物網站之表單更具變化與使用性若再搭配 CGI 程式語言 ( 如 ASP 或 PHP) 與資料庫 ( 如 MySQL) 更可以新增修改和刪除表單選項讓商業表單之設計在使用者與管理端更多樣化並增加使用方便性與彈性 Journal of Engineering Technology and Education, ISSN

2 JavaScript 表單於購物網站之應用表單輸入方式 HTML 表單的主要輸入方式分兩大類, 一為選項性表單, 有選擇按鈕核取方塊下拉式清單 ; 另一為輸入式表單, 有文字方塊文字區塊選擇按鈕與下拉式清單常用於單項選擇, 複選則使用核取方塊或複選式下拉式清單, 文字方塊或區塊可讓使用者實際輸入其所想表達之敘述選項性表單必須清楚的告訴使用者所選擇的項目, 優點是使用者可快速點選而無需做打字動作缺點是選項是固定的無法隨時做變更輸入式表單之缺點在於使用者必須花時間在 key in 的動作透過 JavaScript 能將此兩種輸入方式結合, 當選項性表單中無適合使用者之選項時, 還能於文字方塊中輸入資料 HTML 下拉式清單另一缺點是只能做單一選項清單, 若選項有階層關係時, 例如先選擇產品類別再點選各類別下之相對產品名稱, 就必須利用 JavaScript 做出階層式下拉式清單表單在送出資料至伺服端做處理時通常必須先做資料格式檢查, 例如是否有欄位未填或格式檢查, 這些功能也能透過 JavaScript 所提供物件與方法做進一步的處理 2.1 範例一要做出階層式下拉式清單, 最常見的方式是在 <select> 標記中加入 onchange 與 onfocus 方法, 然後呼叫函式將第一層清單所選擇項目細項顯示在第二層清單中如此, 無論是使用者或管理端都可以很清楚知道分類細項若再將下拉式清單之選項以資料庫建立, 管理者便可於後端新增或修刪清單資料 ( 圖一 ) 說明利用 <select> 標記的 onchange 與 onfocus 呼叫 ItemList( ) 函式來顯示出下一層清單選項, 管理端更可利用 php 與 MySQL 來建立清單選項 <script language="javascript"> function ItemList() document.form1.item.selectedindex=0; switch(form1.area.value) case '0': document.form1.item.length=0; break; case '1': document.form1.item.options[0]=new Option(' 酸鹼度測試 ',' 酸鹼度測試 '); document.form1.item.length=3; break;

3 26 羅逸文鄭瓊茹鄭文昌劉雯鵑 case '2': document.form1.item.options[0]=new Option(' 一氧化碳測量 ',' 一氧化碳測量 '); document.form1.item.length=5; break; case '3': </script> <select name="area" id="select3" onchange="itemlist();" onfocus="itemlist();"> <option value="0" selected> 請選擇產品分類...</option> <option value="1"> 水質測量 </option> <option value="4"> 監測用儀器 </option> </select> 圖一程式碼示意圖圖一在 <select> 標記中加入 onchange 與 onfocus 方法, 然後呼叫函式將第一層清單所選擇項目細項顯示在第二層清單中 2.2 範例二下拉式清單必須清楚的告訴使用者所選擇的項目, 但隨這資訊的改變, 清單選項可能無法滿足使用者需求為了讓使用者同時能利用下拉式清單和文字方塊輸入資料, 必須在點選下拉式清單選項時讓內容同時出現在文字方塊中常見的方式是在 <select> 標記中加入 onchange 方法, 然後呼叫函式將所選擇資料顯示在文字方塊上最後在將文字方塊上的資料送出如此, 當下拉式清單無適當選項時, 使用者還能利用文字方塊輸入資料再者, 更進一步用資料庫建立下拉式清單之選項, 後端之管理者更可隨時隨地新增或修刪清單資料圖二說明利用 <select> 標記的 onchange 呼叫 getmoney( ) 函式將 selectedindex 的值取代 currency 文字方塊中的值, 而 <select> 的選項則是利用 php 與 MySQL 所建立 <script Language="JavaScript"> function getmoney(selobj)

JavaScript 表單於購物網站之應用 27 document.f.currency.value=selobj[selobj.selectedindex].value; </script> <select size="1" name="option" onchange="getmoney(this)"> <option value=null> 付款幣別 </option> <?

4 JavaScript 表單於購物網站之應用 27 document.f.currency.value=selobj[selobj.selectedindex].value; </script> <select size="1" name="option" onchange="getmoney(this)"> <option value=null> 付款幣別 </option> <? $sql="select * from currencytable order by currency"; $result=mysql_query($sql); while ($row=mysql_fetch_row($result)) echo "<option value=$row[1]>$row[1]</option>";?> </select> 圖二程式碼示意圖 2.3 範例三使用者從表單所輸入之資料常會出現格式錯誤或未輸入欄位, 若直接送至伺服器端做處理, 往往會造成程式執行結果錯誤或將不正確的資訊寫入資料庫中這都是網頁程式設計師所必須設法避免的, 因為我們無法預期所有的使用者都能完全遵循所規定之輸入方式因此, 在使用者按下表單送出時必須先做資料格式檢查, 若資料格式無誤才可將資料進一步送至伺服器做處理圖三說明在 onsubmit 後加 CheckData( ) 函式來檢查是否有指定欄位尚未輸入, 若有任一指定欄位未輸入資料, 表單資料不會送出並將游標停留在未輸入欄位 <script Language="JavaScript"><!-- function CheckData()

5 28 羅逸文鄭瓊茹鄭文昌劉雯鵑 errmsg =""; if (document.f.user.value ==null document.f.user.value =="" ) errmsg +=" 尚未輸入帳號!\n"; document.f.user.focus(); if (document.f.password.value ==null document.f.password.value =="" ) errmsg +=" 尚未輸入密碼!\n"; document.f.password.focus(); if (errmsg =="") alert(" 資料已送出!"); return true; else alert(errmsg); return false; // --></script> </head> <body> <p> <form name=f method="post" action="getdata.php" onsubmit="return CheckData();"> 帳號 :<input type="text" name="user" size="16"> 密碼 :<input type="text" name="password" size="16"> <p><input type="submit" value=" 送出 " name="b1"> <input type="reset" value=" 重新設定 " name="b2"></p> </form> </body> 圖三程式碼示意圖 3. 討論下拉式清單在表單設計中能讓使用者明確且快速的選者所需資料, 並可設計成階層式下拉式清單讓所點選資料更具結構性如 ( 方法一 ) 中將第一層清單所選擇項目細項顯示在第二層清單中當下拉式清單選項無法滿足使用者需求, 則必須讓使用者於文字方塊輸入資料,( 方法二 ) 之設計符合這種需求若再將

6 JavaScript 表單於購物網站之應用 29 選單項目連結資料庫去做選項之更新, 更加提升上述兩種方法之彈性與擴充性再者, 在送出使用者所輸入資料前, 對格式或空白欄位之檢查亦會常重要因為錯誤的格式或空白欄位往往會造成伺服器處理資料運算之誤差或錯誤, 也會使資料庫之存取產生混淆透過 ( 方法三 ) 可有效解決此類風險 JavaScript 的流程控制與標記物件觀念能讓 HTML 標記發揮到最大的功效再搭配 CGI 程式如 PHP 或 ASP 與資料庫如 MySQL, 在表單的輸入與後端的管理皆能提供更彈性與人性化的輸入介面而 JavaScript 與 PHP 的交互使用更使網頁具彈性化因此,JavaScrip 在網頁互動與多元性設計中扮演了最重要的角色參考文獻 [1] 鄭文昌 Using DHTML to Implement the Interactivity in Online Shopping,Journal of Engineering Technology and Education, Vol. 8, No.3, 第 -386 頁,2011 年 9 月 [2] 羅逸文,JavaScript 於改善表單輸入之應用, 華醫學報, 第 32 期 45~51,99 年 6 月 [3] Al Fernandez, OnlineInteractivity, Encyclopedia of Educational Technology. SDSU, [4] 最新 JavaScript 完整語法參考辭典 2005 Kazuhiro Furuhata 著柯志杰譯 [5] JavaScript 大全 2003 David Flanagan 著陳建勳黃吉霈編譯 [6] Paul Kerry., Web Page Design: Interactivity, Encyclopedia of Educational Technology. SDSU.

Microsoft PowerPoint - P766Ch09.ppt

Microsoft PowerPoint - P766Ch09.ppt PHP5&MySQL 程式設計第 9 章在網頁之間傳遞資訊 9-1 蒐集網頁上的資訊 9-1-1 建立表單一決定要蒐集的資訊二建立表單三撰寫表單處理程式單行文字方塊多行文字方塊選擇鈕核取方塊下拉式功能表按鈕密碼欄位 ... 標籤 ACCEPT-CHARSET="... CHARSET="... ACCEPT="... ACTION="URL URL"