互动网页技术_第1页
互动网页技术_第2页
互动网页技术_第3页
互动网页技术_第4页
互动网页技术_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、互動網頁技術 用戶端(client) 伺服器端(server)HTML、XMLSML、VRMLVRML、XHTMLCSSFrontpage、Dreamweaver、Flash. CGI介面 資料庫AccessSQL(JSP)(VB)(ASP)(PHP)如果要與網頁瀏覽者進行互動，那麼網頁就必須含有兩種平台需求；即 用戶端(client) 與 伺服器端(server)，而其分叩重點在於網頁內容是否具有資料填寫與傳送的功用，若網頁內容僅須資料顯示畫面，因其只在用戶端電腦顯示，因此只須用前述HTML語言編寫即可。但，若資料內容包含資料填寫與傳送的功能，如會員加入或網路購物等，因為牽涉到資料在用戶端及

2、伺戶器端間相互傳送，因此在伺服器端就必須安裝【含CGI介面的資料處理程式】，如此，資料送及處理才能在伺服器端利進行。CGI(common gateway interface)是一套規範，規定網頁表單與伺服器端的程式的資料送方式，並没有限制撰寫所使用的程式語言，因此，使用C+、VB、Prl等程式語言撰寫CGI介面程式皆可ISAPI(internet Server Application Pragramming interface)是微軟研發出來，用IIS伺服器上的CGI程式解決方案，其所應用的ASP語言比傳統CGI語言淺顯易學，不過ISAPI程式只能用在微軟的IIS或PWS伺服器，並不能用在其他

3、作業平台如Unix上所以，以ASP做為瞭解CGI程式的媒介，倒是一個不錯的漸進方法。ASP執行環境-IIS的安裝步驟一先將Windows XP的原版光碟放入光碟機中，當出現如下圖時，選擇安裝可選擇的Windows元件二在下圖中勾選Internet information services(IIS)後，再點下一步進行安裝啟動IIS環境IIS安裝後，必須啟動才能執行ASP程式，啟動步驟如下：依序點點【開始設定控制台系統管理工具internet information services】後，出現如下畫面點選本機電腦網站預設的網站，若顯示為（已停止），則點選鈕開啟IIS設定預設網站執行環境滑鼠在預設的

4、網站上按右鍵，選擇內容，會出現如下畫面在主目錄標籤頁中可看到，預設的目錄區為（C:inetpubwwwroot）注意：所有的ASP程式都必須放在預設目錄中操作者可自行透過瀏覽(O)變更預設目錄位置設定網站IP位址在網站標籤頁中，可以看到IP位址欄為（全未指定），這是本機模擬伺服器狀態，在此狀態下，我們在I.E.瀏覽器中，輸入http:/localhost/資料夾位置檔案名稱即可瀏覽ASP網頁註：若有申請專用IP，可將專用IP輸入，則在任一部電腦瀏覽器中，輸入http:/I.P.位址/資料夾位置檔案名稱皆可執行ASP網頁程式CGI與ASP在HTML中的應用在HTML程式中，要加入CGI介面程式，

5、必須指明所使用的程式語言，其指令格式如下：<script language=”語言名稱” runat=”伺服器位址”>.</script>如：<script language=”jscript” runat=”server”>response.write “您好嗎“</script>但ASP使用VBScript做為他的預設語言，因此在HTML中，指令格式可簡化為<% %>如上例程式，可寫為<% Response.Write“您好嗎”%>ASP編輯軟體(編寫ASP程式)要編輯ASP程式可用記事本，Frontpage，Drea

6、mweaver.等網頁編輯軟體來撰寫ASP程式，但必須記得，在儲存ASP檔案時，副檔名必須設為【*asp】 必須儲存在IIS預設目錄區中重要觀念ASP程式與HTML程式最主要的差別在於變數的應用，以下例解說：在HTML程式如下：（範例一test.htm）<html> <body> 這是一個測試程式 </body></html>請將上例存在IIS預設資料夾中(C:inetpubwwwroot)、 檔案名稱為: (test.htm)再進入I.E.中輸入(http:/localhost/test.htm)相同的結果，在ASP程式中，應用變數，可寫成如下

7、：(範例二test.asp)<html> <body> <% Dim x x=”這是一個測試程式“Response.Write x %> </body</html>請將上例存在IIS預設資料夾中(C:inetpubwwwroot)、 檔案名稱為: (test.asp)再進入I.E.中輸入(http:/localhost/test.asp)註：response.write 是資料列印指令，詳細說明，在後面單元再來說明ASP程式看起來好像複雜多了，不過，藉由變數的應用，卻可讓程式的功能更加的豐富ASP專有名稱變數：在上例中所用到的 X ，我們稱

8、為變數。變數是指記憶體中【存放資料】的位置名稱（這個位置，由電腦自動設定），因為這個位置中所存放的資料，可視需要而隨時變更，因此，我們就將這一個記憶體中存放資料的位置的名稱，叫做變數名稱，簡稱變數，下面，我們以簡單的敍述指令來加深讀者對變數的印象。Dim score,math 宣告score和math 都是變數放置資料指令變數運算式( 將運算式的運算結果值放入變數所指定的位置 )例：Score=18 在 score這個位置放入資料3Score=25 將 score這個位置資料變成2例：score=score*3 將目前score位置的資料25 乘以3後，再將其結果值75 放入 Score中 本

9、指令執行後，score位置己變成75範例三：變數測試(vartest.asp)<html> <html><title>變數測試</title></head> <body> <% Dim score score=18 Response.Write "score中的資料為: " & score score=25 Response.Write "score中的資料已經變成為: " & score score=score*3 Response.Write "s

10、core中的資料已經變成為: " & score %> </body></html>有關變數運算式指令的詳細用法，稍候再來敍述，下面先說明變數的相關規則1. 變數名稱的命名規則：名稱可以用英文字母、中文字、數字、底線(_)任意組合例：x、F4、Mathscore、N2K3、id_no、_num 都是正確名稱B&Q ( 錯誤，不可用 & 符號 ) Good Luck ( 錯誤，中間不可有空白)b變數名稱不可用關鍵字（保留字）或中文字2. Dim宣告指令： 例：Dimx,y宣告x、y 都是變數註：在VBScript中，變數名稱可直接使

11、用，並不一定要經過宣告）不過，若在程式最前頭加上Option Explicit敍述，則表示程式中的所有變數，在使用前都要宣告。常數：與變數相反，在程式中，可能碰到有某些固定資料會經常使用，就可透過常數的宣告來固定資料值，常數在宣告的同時，就必須設定其資料，格式如下const 常數名稱設定值例：const PI=3.14159使用常數宣告有二項好處： 避免在某次輸入該常數資料時，不小心輸入錯誤的情形 若在程式中，有數十處會用到該資料，若想更改該項資料內容時，僅需更改告值即可識別項:就像變數和常數一樣，在程式中還有結構、模組、函式、程序、類、件及屬性等在使用時都必須先命名，這些在程式中所用到名稱，

12、就稱為識別項。識別項的命名規則如下：1.名稱的第一個字必須是英文字母，第二個字以後可以是英文字母、數字或底線，但中間不有空白，且最好不用中文字（某些中文字的內碼含有控制符號）2.名稱長度不可超過255 byte3.識別項的名稱應儘量以資料性質命名（方便記憶），但不可用到保留字4.若識別項名稱由多個單字組成，在單字間最好用底連結例： a、score、TaxRate、id_no、F4、t_test 上面都是正確的識別項名稱7eleven不可數字開頭 $money不可由$開頭 +sum不可由+開頭 tax rate中間不可有空白 a+b中間不可有+號 B&Q 不可含&符號保留字: 指

13、程式中，各項功能所使用到的單字，例如判斷指令IF.thenelse使用到的if 及 then 及 else 己有其特定功能，因此不可再拿來宣告為變數或常數特殊符號: 在撰寫VBScript程式時，有些字元符號具有特定的用途，說明如下：1.( )：小括號 在函式或方法或事件處理程序後面加上小括號，將欲傳送的參數（資料）放入此一小括號內例：Cstr(“12345”) 註：將括號內的運算結果值轉換字串後再回傳2._：行接續符號當一敍述過長以致要寫成兩行時，在第一行最後一字後面，先空一格再打入（底線），程式就會自動將言兩行連在一起例：Sub BubbleSort(A, _ B)3.： 合併敍述符號原則

14、上，一行只寫一個敍述（指令），但有些連續指令都很短時，透過：分隔，就可將這些連續指令寫在同一行例：Num1=15 Num2=24 合併Num1=15 ：Num2=24 4. ：註解符號經常，設計者會在程式中加入說明資料，以幫助程式的維護能夠利進行，或讓閱讀者能容易瞭程式內容，而這些註解文字是不能被執行的，註解符號就是針對這項功能而設計。程式執行時，會自動忽略註解符號後面的文字資料例：本程序在執行兩數相加Sub Add() Num1=15:num2=24 兩行敍述合併成一行Response.Write num1+num2End Sub5. ：字串符號 被兩個雙引號括起來的文數字資料稱為字串，定義

15、為文字資料例：我愛HTML&ASP、abc、6. ：連接符號要將兩項資料併成一個字串，就必須用連接符號例：我愛HTML&ASP” 我愛HTML&ASP” 3+5 8 3&5 35 3&” 號3 號 7. .：從屬符號每個物件都有其屬性方法（後面會說明），欲在程式中使用某個物件的某個方法，只要在該物件名稱及其屬性之間插入一個 . 從屬符號即可例：esponse.Write “我愛HTML&ASP”8. #：日期時間符號欲將日期或時間的資料放入變數時，前後須加上符號例：Birthday=#2/2/2006 11:34:56PM#9. 算術運算符號運算

16、式中的計算符號有+ - * / mod 加減乘除整數除指數 餘數 例：Sum=num1+num210. 比較運算符號運算式中的比較符號 有 等於不等於大於小於大於等於小於等於 比較運算式之結果值只有true(正確)與false(錯誤)兩種 例：Num1=18 : num2=20 If num1 <= num2 then Response.write num1 End if基本指令運算式 運自式是指算術運算或比較運算的公式，例如：設定變數資料值指令：變數運算式就是指將運算式的結果值放入變數中運算式含運算元及運算子兩項元素運算元：被用來運算的資料運算子：運算的方法符號例：total=5*3+

17、2*6/no 其中5,3,2,6,no 是運算元而* + / 是運算子ASP常用物件提供許多內建物件，下面先介紹其中個物件，詳細用法在後面章節再來敍述。物件說明equest要求取得用戶端(client)的資訊Response將伺服器端(server)的資訊傳送給用戶端Server使用伺服器端相關的功能與資訊。如伺服器端的的變數或是ActiveX元件Seesion用來記錄用戶端(client)個別的資訊Application用來記錄所有用戶端共有的資訊一 Request物件集合 取得從用戶端表單所輸入的資料Request物件提供了5個集合(子物件),這裏先介紹最常用的兩個集合1. Request

18、.Form(“fieldname”):Fieldname是表單欄位名稱，傳送方式是post ，(即form method=”post”>)2. Request.QueryString(“fieldname”):Fieldname是表單欄位名稱，傳送方式是get，(即form method=”get”>)註：上述二種方法若只寫成Request(“fieldname”)，則第二項優先權較高二 Response物件常用方法1. Response.write：將伺服器端欲顯示的資料傳送到用戶端Response.write也可以直接以代替2. Response.End：結束ASP程式的執行範

19、例四： 使用Response物件傳送伺服器的時間到用戶端瀏覽器<% ' c7_11_1a.asp Response.Write "<html>" Response.Write "<head><title>Response物件範例</title></head>" Response.Write "<body>" Response.Write "現在的時間是" & Now Response.Write "</bo

20、dy>" Response.Write "</html>"%>註：記得將ASP程式存放在 C:inetpubwwwroot 資料夾內上題可看出純粹以ASP語法所的程式太過複雜，實際上，ASP程式可以溶入HTML中，一併書寫範例五：將程式直接放入HTML程式中，設計與上題相同的要求<!-c7_11_1b.asp-><html><head><title>Response物件範例</title></head><body>現在的時間是<% = Now %>

21、;</body></html>表單資料應用處理方式簡介當使用Request(“fieldname”)取得用戶端資料，經處理後，欲再顯示給用戶端瀏覽時，一般常用的有下列三種方法1. HTML網頁的表單資料傳送到ASP程式處理，再由ASP程式將用戶端的結果顯示出來。此一做法須有（*.htm）與(*.asp)兩個程式，方法較為麻煩2. HTML標記與ASP結合，表單資料傳送給本身的ASP程式處理，此種方法只須一個(*.asp)程式即可3. 使用框架方式，主框架分為上、下兩框架，在上框架輸入資料後，透過傳送鈕的方式，經過計算後，再於下框架顯示結果。此種方法，必須有三個檔案，一個

22、為主框架網頁，一個為HTML網頁，另一個為處理表單資料的ASP程式。下面直接以範例做說明：範例六：（6_1與6_2） 製作一個可輸入國文及英文的成績表單網頁(*.asp)，然後按下計算按鈕之後，再由(*.asp)顯示成績及平均<!-c7_12_1.htm-><html><head><title>成績計萛</title></head><body><form method="post" action="c7_12_1.asp"> 國文：<input type

23、="text" name="txtChi" value="0"><br> 英文：<input type="text" name="txtEng" value="0"><p> <input type="submit" value="計算"></form> </body> </html><!-c7_12_1.asp-><html>

24、;<head><title>成績計算結果</title></head><body><% chi = CInt(Request("txtChi") eng = CInt(Request("txtEng") ave = (chi + eng) / 2%>國文成績為 <% = chi %><br>英文成績為 <% = eng %><p></p>平均成績是 <% = ave %></body></htm

25、l>範例七： 將上面兩個程式融合成一個ASP程式，依上例，將結果顯示在表單中<!-c7_12_2.asp-><html><head><title>成績計算</title></head></body><% chi = CInt(Request("txtChi") eng = CInt(Request("txtEng") ave = (chi + eng) / 2%><form method="post" action="

26、c7_12_2.asp"> 國文：<input type="text" name="txtChi" value="<%=chi%>"><br> 英文：<input type="text" name="txtEng" value="<%=eng%>"><br> 平均：<input type="text" readonly name="txtAve"

27、; value="<%=ave%>"><p> <input type="submit" value="計算"></form> </body></html>範例八：(Main .htm、c7_12_3.htm、c7_12_3.asp) 設計一個框架網頁，主框架網頁分別放置上框架(c7_12_3.htm)及下框架(c7_12_3.asp)，當按下計算鈕後，計算結果會在下框架頁中顯示<!-Main.htm-><html><head><title>計算成績</title></head><frameset rows="50%,50%" framespacing="20" bordercolor="blue"> <frame name="fraTop" src="c7_12_3.htm"&g

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论