Download presentation
Presentation is loading. Please wait.
1
張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 多媒體檢索實驗室
第十二章 ASP基本介紹 張智星 台大資工系 多媒體檢索實驗室
2
本章大綱 大綱 主題 本章介紹 ASP 的基本概念，同時說明如何使用 JScript 來實作基本的 ASP 網頁。 12-1：背景及特色
12-2：測試 IIS 及 ASP 環境 12-3：如何使用 ASP 於 HTML 12-4：時間與日期 12-5：網路資源
3
12-1：背景及特色 本小節介紹ASP的概念與提供的內建物件。
4
ASP概念 ASP是Active Server Pages 的簡稱。 由微軟公司所開發的一種環境，適用於微軟的 Web 伺服器 IIS。
屬於直譯式的語言。 在伺服器端執行(Server-side scripts)。 伺服器將資料送出前，先執行 HTML 中的 ASP 程式碼，並將執行結果連同 HTML 送回客戶端。
5
特色 瀏覽器預設語言是JavaScript。
IIS伺服端的Scripting Engine可執行 ASP 程式碼（含JScript 和 VBScript），不需Compile或Link 。 瀏覽器無法直接接觸 ASP 的程式碼。 ASP 與任何滿足 ActiveX Scripting 標準的語言相容，安裝相關直譯器後，可執行其他語言。 ASP 的程式碼不傳到客戶端，可以保護智慧財產權。 可經由ActiveX Server Component擴充 ASP 的功能。 是一種以物件為基礎（Object-based）的程式語言。
6
內建物件 ASP內建物見可列舉如下： Request 物件：取得客戶端傳送至伺服器的相關資訊。
Response 物件：取得伺服端傳送至客戶端的資訊（網頁資料等）。 Server 物件：提供與伺服器相關的各種性質（Properties）與方法（Methods）。 Application 物件：提供一個應用程式在不同使用者之間交換資訊的管道。 Session 物件：提供一個使用者在不同應用程式（或網頁）之間交換資訊的管道。 ObjectContext 物件：提供交易處理（Transactions）。
7
CGI (Common Gateway Interface)
ASP vs. CGI 比較列表： ASP簡單易學且與資料庫整合容易。 內嵌式伺服器程式碼（如 PHP、ASP等）已經取代傳統的 CGI。 ASP CGI (Common Gateway Interface) 夾雜於 HTML 之中 獨立於 HTML 之外 直譯式的語言，不需編譯 可以是直譯式或編譯式的語言 只適用於微軟的伺服器 適用於大部分的伺服器 簡單易學 較 ASP 複雜
8
12-2：測試 IIS 及 ASP 環境 本小節將一步步介紹 IIS 及 ASP 的環境安裝與使用。
9
WINDOWS對IIS支援情況 內建IIS： 需另外安裝IIS： 除了Home Edition外，其它 XP 版本。
Windows Vista Home Premium Edition、Windows Vista Professional Edition、Windows Vista Ultimate Edition。 需另外安裝IIS： Windows XP Home Edition Windows Vista Home Basic Windows 7, Windows 8
10
檢查是否有安裝 IIS ？ 以XP舉例，網頁瀏覽器輸入下列網址： 若有安裝會顯示以下畫面：
或 若有安裝會顯示以下畫面：
11
Vista: 安裝IIS IIS 預設是不安裝的，要手動安裝 IIS，流程如下：
點選「控制台 -> 程式集 -> 程式和功能 -> 開啟或關閉 Windows 功能」，依照樹狀目錄展開，啟用 Internet Information Services。 確定後等候系統安裝。（需要Windows Vista 安裝光碟。） 安裝完成後，打開瀏覽器輸入網址 IIS7 預設畫面：
12
以 IIS 開啟本機網頁(1) IIS 的預設根目錄是「C:\Inetpub\wwwroot」
在此目錄下放置一個簡單的網頁helloWorld.htm 程式碼 經由 看到此網頁在瀏覽器呈現的效果。 <html><body>Hello World!</body></html>
13
以 IIS 開啟本機網頁(2) 說明： *.htm 或 *.html 的網頁
直接點選檔案，即可使用瀏覽器開啟此檔案，並執行JavaScript 程式碼，顯示網頁於瀏覽器。 *.asp 的網頁 無法直接點選來顯示其結果於瀏覽器 必須經由網頁伺服器的運算，才能將結果呈現於瀏覽器。 必須經由 localhost （本機網頁伺服器）的作用，才能顯示結果。
14
本書範例目錄設定 方法一： 方法二（建議）：
將範例光碟的主目錄 jsBook 拷貝到預設根目錄（C:\Inetpub\wwwroot）之下。 輸入以下網址，即可看到對應範例網頁。 方法二（建議）： 將jsBook設定網頁伺服器的虛擬目錄，並指到jsBook所在的實際目錄（操作方法如後述）。 我們可以將虛擬目錄看成是在根目錄之下的子目錄。 此方法彈性較大，也是本投影片採用的方式。
15
設定虛擬目錄(1) 準備：拷貝範例光碟中的目錄 jsBook 到本機目錄 d:\jsBook。 步驟
桌面「我的電腦」按右鍵，選取「管理」開啟「電腦管理」。 右鍵點選「電腦管理（本機）/服務及應用程式/Internet Information Services/網站/預設的網站」，選取「新增/虛擬目錄...」，按「下一步」可開啟畫面如右：
16
設定虛擬目錄(2) 請輸入 aspExample 並按下「下一步」。 此時輸入此虛擬目錄所對應的實際目錄名稱，開啟畫面如右上。
再選擇虛擬目錄的屬性，如右下。 按下「下一步」及「確定」後，即完成 IIS 虛擬目錄的設定。 完畢後設定目錄權限，讓網路上其他使用者能瀏覽此目錄下的網頁。
17
設定目錄權限 步驟 在剛剛指定的資料夾上按右鍵選取「內容/安全性」，開啟視窗如右上。 此時點選「新增」並輸入「Everyone」，如右下。
連續按下兩次「確定」，即完成虛擬目錄的權限設定。 回「電腦管理」介面，以右鍵點選「電腦管理（本機）/服務及應用程式/Internet Information Services/網站/預設的網站」，選取「重新啟動」，以便啟用新設定值。
18
設定虛擬目錄(Vista版) 步驟 設定虛擬目錄的權限，其方法如同前述。 在桌面「我的電腦」按右鍵，選取「管理」來開啟「電腦管理」。
右鍵點選「電腦管理（本機）/服務及應用程式/Internet Information Services/網站/預設的網站」，選取「新增/虛擬目錄...」，按下「下一步」可開啟視窗，輸入虛擬目錄的別名以及對應的實體路徑，如右圖。 設定虛擬目錄的權限，其方法如同前述。
19
測試範例：hello01.asp (1) 完成虛擬目錄的設定，就可直接經 localhost 瀏覽 asp 網頁。 測試步驟
輸入下列網址： 可瀏覽畫面如下。
20
測試範例：hello01.asp (2) 說明 能顯示畫面，代表IIS和ASP的工作環境沒有問題。
如無法出現上述畫面，可以將錯誤訊息貼到 Google（ 網頁伺服器的預設連接埠（Port）是 80，如果有其它軟體也佔用此連接埠（如 skype），就會發生網頁伺服器無法正常工作的情況。此時移除佔用連接埠 80 的軟體，IIS 就可正常工作。
21
測試範例：hello01.asp (3) 以此例來說，我們將有兩種連結可供測試：
Localhost： Mirlab.org（位於台灣大學MIR Lab之主機）： 如果你未在本機設定localhost，就可以改用mirlab.org頁面來進行測試。 若 localhost 仍有錯誤，則請參考此連結來對 IIS 進行下列設定： 開放 IIS 錯誤訊息送至瀏覽器。 開放上層目錄。
22
12-3：如何使用 ASP 於 HTML 本小節介紹基本的ASP使用與範例。
23
ASP基本介紹 ASP網頁是一個文字檔，以 asp 為副檔名。
ASP 的程式碼是以 <% ... %> 的標記來和 HTML 區分。 伺服器發覺用戶端要求的檔案是以「asp」為副檔名，就會尋找 ASP 程式碼並執行。 包含 ASP 程式碼的網頁，可以不用 asp 為副檔名(例：.hi)，只要在 IIS 伺服器進行相關設定即可。
24
ASP 的標記 ASP 的標記 <% ... %> 是一個簡寫，若要使用不同的語言，就必須使用完整的表示方式。
例如，若要使用 JScript 來撰寫 ASP，必須使用下述格式： 若刪除「runat=server」，則此程式碼會被直接至用戶端，而非在伺服器執行。 混合使用不同的語言，可直接設定網頁屬性。 在網頁的第一列加入下述程式碼： <script language=jscript runat=server> JScript 的程式碼 </script> language=jscript %>
25
ASP下印出數值 方法一： 方法二： 說明 Response 是 ASP 的內建物件。 Write() 是其中一種方法。
<%Response.Write(x)%> <%=x%>
26
範例12-1 主題：ASP 印出「Hello World!」的四種方法 Webpage: remote host, local host
程式碼重點 說明 head.inc 代表網頁開始的相同部分。 foot.inc 代表網頁結束的相同部分。 <%Response.Write("Hello World!")%> <%="Hello World!"%> <%x = "Hello World!"%><%Response.Write(x)%> <%x = "Hello World!"%><%=x%>
27
範例12-2 主題： 大小不同的「Hello World!」(交叉使用 ASP & HTML)
Webpage: remote host, local host 程式碼重點 說明 使用for 迴圈逐漸增加字體大小。 交叉使用 ASP 的程式碼和 HTML 的原始碼，會造成程式碼效率降低。 <% for (i=1; i<=5; i++) {%> <font size=<%=i%>> Hello World! </font><br> <%}%>
28
範例12-3 主題：大小不同的「Hello World!」(完全使用ASP)
Webpage: remote host, local host 程式碼重點 說明 使用for迴圈逐漸增加字體大小。 單純使用 ASP 可減少程式碼效率的降低。 <% for (i=1; i<=5; i++){ Response.Write("<font size=" + i + "> Hello World! </font><br>"); } %>
29
<script> 標籤的預設語言
在 Client Script，<script> 標籤的預設語言即為 JavaScript 或 JScript。 在 Server Script，<script runat=server> 標籤的預設語言即為 VBScript。 Client-side Scripts Server-side Scripts JavaScript (JScript) <script>...</script> <script runat=server language=jscript>...</script> VBScript <script language=vbscript> (For IE only) <% ... %> 或 <script runat=server>...</script>
30
JScript 和 VBScript 的不同 JavaScript 或 JScript 程式碼會分辨大小寫，VBScript 程式碼則不分大小寫。 在 JavaScript 或 JScript 加入註解的方法： 單行註解：// 單行程式碼 多行註解：/* 多行程式碼 */ VBScript 只支援單行註解，其在註解行加入「'」（單引號）或「rem」（代表 remark）。 本小節範例，也提供少數範例的VBScript 程式碼（例如 hello01.asp 使用JavaScript，則 hello01_vbs.asp 使用 VBScript，以此類推）。
31
12-4：時間與日期 本小節使用 JScript 內建的 Date 物件，對時間和日期進行各種處理。
32
範例12-4 主題：伺服器和用戶端的時間比較 Webpage: remote host, local host 程式碼重點 說明 <%
在伺服器和用戶端的程式碼完全一樣，都使用 new Date() 產生一個日期物件，再使用 toLocaleString() 轉換成當地的日期字串。 <% today=new Date(); Response.Write(“伺服器的時間：<font color=green>"+today.toLocaleString()+"</font>");%> <script> document.writeln(“用戶端的時間：<font color=red>"+today.toLocaleString()+"</font>");</script>
33
範例12-5 主題：依照伺服器時間回傳不同的問候語 Webpage: remote host, local host 程式碼重點 說明
使用new Date()產生一個日期物件，並用toLocaleString() 轉成當地的日期字串，再使用today.getHours( )取得時間。 以IF條件判斷回傳不同問候語。 可看出 JavaScript/JScript 在用戶端和伺服器的共通功能。 <% today=new Date(); %> <%=today.toLocaleString()%> <% time=today.getHours(); if ((12<=time) && (time<2)){……} else if ((2<=time) && (time<4)){……}%>
34
範例12-6 主題： JScript 的 Date 物件的各種方法() Webpage: remote host, local host
程式碼重點 說明 使用for迴圈取出cmd陣列中的字串，並顯示各項Date物件的值。 時間物件的方法，在伺服器和用戶端的 JavaScript 的用法一致。 在伺服器端的 JScript 完全沒有用戶端 DOM (Document Object Model) 的概念。 today=new Date(); for (i=0; i<cmd.length; i++){ thisCmd="today."+cmd[i]; Response.write(thisCmd+" ===> "+eval(thisCmd)+"<br>"); }
35
VBScript提供內建函數 顯示時間 顯示日期 使用 VBScript 來達成「依照伺服器時間的不同回傳不同的問候語」的功能。
範例： time03_vbs.asp <%=time%> <%=date%>
36
12-5：網路資源 本節介紹幾個有關於 JavaScript 的重要網址。
37
網址介紹(1) Microsoft 的官方網站，稱為 MSDN（Microsoft Developer Network），提供了在 Microsoft 出產的平台上，對於程式開發者的所有線上支援，也包含 JavaScript 和 VBScript。在網頁左邊的選單選「Web Development/Scripting/Downloads」，就可在網頁右邊看到腳本引擎、公用程式與說明手冊等。 這是 ECMA（European Computer Manufacturer's Association，歐洲電腦製造商協會）對於各種電腦軟體或協定的標準規範，裡面也包含了對於 ECMAScript 的規範文件。 內容以 Web 程式設計為主的網站，也包含完整的 JavaScript/VBScript/ASP/SQL 說明和範例。
38
網址介紹(2) http://www.w3schools.com/js 這是 W3School 有關於 JavaScript 的教學資料。
這是 W3School 有關於 VBScript 的教學資料。 這是 W3School 有關於 ASP 的教學資料。 這是 W3School 有關於 SQL 的教學資料，還包含了線上測驗。
Similar presentations
