输入元素1.文字栏位Textbox2.卷轴文字栏位Scrollbar.pptVIP

會考今日電腦 1 第十三章 5.1 – 表格(FORM) 輸入元素 : 1. 文字欄位 Text box 2. 捲軸文字欄位 Scrollbar textbox 3. 多選項欄位 Checkbox 4. 單選按鈕 Radio button 5. 多項下拉式選單 (Multiple) Select Menu 6. 遞交按鈕 Submit button 7. 重設按鈕 Reset button 8. 密碼欄 Password 9. 隱藏欄位 Hidden field 10. 檔案欄位 File field 兩種傳遞方法 : GET or POST 範例 靜態html vs 動態html 靜態html (static html): 除非網頁設計者對網頁內容作出修改並再上傳至網站 , 否則, 其內容及外貌永遠不會改變 . 單靠使用不同的網頁標籤寫成 . 例子 : 本科科網 靜態html vs 動態html 動態html (dynamic html): 內容及外貌隨用戶的動作而作出相關網頁回應 . 動態html = 靜態html + 串接樣式表及/或客戶端程序片段 (css) (client-side script) 例子 程序片段(伺服器端vs客戶端)Server-side scripts vs Client-side scripts 根據程序片段之地方作分類 : 在伺服器內執行 - 伺服器程序片段 在用戶的瀏覽器上執行 - 客戶端程序片段 兩類程序片段皆貯存於網頁伺服器內 Client-side scripts 的優點 : 運算交由客戶端進行 = 可令網頁伺服器有較佳表現 (因伺服器要執行的運算減少了) 令網頁變得互動及吸引 可節省 INTERNET 的頻寬供其他上網用戶使用 缺點 : 如網頁內容須牽涉數據庫內數據的存取 , 就要靠Server-side scripts 才可做到 CGI (1) 公共閘道介面 Common Gateway Interface (CGI) 所有以windows及unix作 OS 之網頁伺服器皆支援此介面 可用以下程序語言編寫能使用 cgi 介面 技術之應用程序 : Perl, C, C++, Java CGI (2) – 介紹 Server-side 運作 CGI script 可以是任何一個可執行的程式 (例 : Perl, compiled C, shell script 等) 如何呼叫 CGI script: form action=“CGI_script的URL” method=[get | post] ….. /form 2 種方法 – GET, POST 傳遞數據至伺服器的不同方式 CGI (3) – GET 輸入到表格內之數據, 會加在 URL後才傳送出去 : URL?var1=數值1var2=數值2var3=數值3 所有在 ? 後的數據會被抄至伺服器內之環境變量“QUERY_STRING” 內貯存 . QUERY_STRING = ‘var1=數值1var2=數值2var3=數值3’ CGI script 由 “QUERY_STRING” 中抽取各數值 如輸入的數據含有特殊符號, 在傳送前, 會變成一些 ascii 字符 CGI (4) – GET (續) CGI (5) – Post CGI script 直接接收由表格傅來的輸入數據 環境變數 “CONTENT_LENGTH” 內含數據之總長度 比 GET 更為常用 JavaScript (1) – 介紹 最出名之client-side script, 由 Netscape 開發 提供 3 種效能 : 審核輸入到表格內之數據與及向用戶提供輸入錯誤提示 = 回應較快 處理由用戶觸發之事件, 例如當滑鼠移到一圖案上, 該圖案即由另一圖案所取代 = 網頁變得較互動及吸引 在客戶端進行數學運算 = 減輕伺服器之工作量 JavaScript (2) – 基礎知識 嵌入在 HTML內 (Head 或 Body 部份) 及由瀏覽器翻譯 所有 JavaScript 語句皆被 script language=“JavaScript” ……. /script 所包圍 語句之間要用分號分隔 Javascript 範例 javascript_basic Javascript_event.html Javascript_form.html Javascript