第1章網頁程式設計概論

Download Report

Transcript 第1章網頁程式設計概論 

第一章 網頁程式設計概論
在本書的第一章中，我們將介紹幾個關於網頁程式設計
有關的專有名詞，例如：『HTML』、『JavaScript』、
『XML』、『ASP.NET』等等。同時因為ASP.NET屬
於.NET Framework的一環，故本章也會介紹.NET
Framework的觀念，本章內容將有助於讀者快速建立網
頁程式設計的整體概觀。
1
大綱
• 1.1 WWW與HTML
– 1.1.1
– 1.1.2
– 1.1.3
WWW
Web 2.0
WWW網站架構
• 1.2 網頁相關技術
– 1.2.1
– 1.2.2
•
•
•
•
客戶端技術
伺服器端技術
1.3 .NET Framework與Visual Studio
1.4 ASP.NET與VWD
1.5 類別／物件
1.6 本章回顧
2
1.1 WWW與HTML
• 在Internet上有著各式各樣的服務及應用，例如：Email、
FTP、WWW等等。其中影響最大的就是WWW。『WWW』
是World Wide Web的縮寫，中文翻譯為全球資訊網。
3
1.1.1
WWW
• WWW是由歐洲核子研究中心(CERN)所研發的一種搜尋結構，於1993年
正式對外開放，它取代了傳統電腦與網路採用樹狀結構搜尋資訊的方式，
重新定義了一種網狀的資料搜尋結構，如此一來，便免除了樹狀結構搜尋
資料失敗時，必須返回原搜尋點再往下搜尋的缺點。
• 除此之外，WWW可以連結各種Internet的其他種類服務（例如HTTP、
FTP協定），並由於我們可以在WWW之上，建立起圖文並茂的超文件
(HyperText)及超媒體(HyperMedia)網頁，透過超鏈結（HyperLink）功能，
建立起網頁與網頁溝通的橋樑，因此帶動了網路的流行，現在大家使用瀏
覽器來瀏覽的網路服務就是建構在WWW的基礎之上。
• 近年來，以Google為首的各種廠商逐漸推出以瀏覽器為執行環境的Web
軟體（例如Web Mail），搭配雲端運算架構的流行與網路頻寬的加大，
使得未來所有的桌面軟體都可能出現Web模式的類似軟體。因此，WWW
對於資訊產業而言，它是不斷在成長與轉變的。
4
1.1.2
Web 2.0
• 全球資訊網歷經10年演變，其中包含了.com網站公司的崛起與泡沫化。
現今，全球資訊網正進行著新型態的演化，在『聚沙成塔』的觀念下，符
合Web 2.0精神的網站逐漸成為次世代全球資訊網的主流，也提供了每個
人參與網路的無限想像空間。
• 『Web 2.0』一詞在2004年首度出現，它代表著WWW上的新型態，其中
包含了一些新型態的網站、內容及服務，也包含了一些新的技術。事實上，
Web 2.0在W3C（管理WWW標準的機構）並無明確的定義，但實際上已
被大眾所接受。Web 2.0最主要的精神是『參與、互動、分享』，例如現
在流行的部落格(Blog)、影音分享網站YouTube、眾人聯合編輯的維基百
科等等，都是Web 2.0典型的範例。
5
1.1.3
WWW網站架構
• 在WWW上最常見的架構就是Client/Server架構，一個最簡單的
Client/Server架構如圖1-1，瀏覽器(Browser)代表的是客戶端（Client），
網頁伺服器(Web Server)代表的就是伺服器端（Server）。
圖1-1 網頁伺服器架構一（只負責傳送HTML網頁）
6
1.1.3
WWW網站架構
• 瀏覽器具有解讀HTML文件，並將之轉換為HTML網頁的能力；HTML是
一種網頁設計語言，一份HTML文件其實就是一個網頁，換句話說，我們
所看到的網頁就是HTML文件經由解讀後的結果。
• 最簡單的網頁伺服器至少必須具備以下3種能力：
– 可接收透過HTTP協定所傳來的網頁要求。
– 能夠搜尋與讀取伺服器端所存放的HTML檔案。
– 具有透過HTTP協定將網頁回傳給客戶端（瀏覽器）的能力。
• 當網頁伺服器安置妥當後，一旦我們在瀏覽器網址列中輸入所要求的網址
及網頁名稱，瀏覽器便建立連線並發出HTTP需求，請求遠端的網頁伺服
器回傳網址所標示的HTML檔案。網頁伺服器接收到此需求後，便搜尋檔
案系統，並將所要求的HTML檔案以HTTP方式回傳給瀏覽器，接著切斷
此次連線。最後，瀏覽器依據所取得的HTML檔案內容加以解讀成為我們
所看到的網頁，這就是使用者瀏覽網頁時，瀏覽器與網頁伺服器的工作流
程。
7
1.1.3
WWW網站架構
圖1-2 網頁伺服器架構二（先執行傳統ASP程式，再回傳HTML網頁）
• 除了提供HTML檔案傳輸的陽春網頁伺服器外，有些功能比較強大的伺服
器，還可以執行PHP、ASP、ASP.NET、JSP、CGI等伺服器端的程式，
其網頁伺服器結構則如圖1-2。
8
1.1.3
WWW網站架構
• 通常要求我們在瀏覽網頁時必須輸入使用者代號與密碼的網站大多屬於這
一類型的網頁伺服器，其原理與單純的網頁伺服器類似，同樣是透過
HTTP協定來要求伺服器做某些事並回傳一個HTML格式的封包。只不過
此時所要求的服務，可能不只是一個單純的HTML檔案，而是一個ASP、
ASP.NET、PHP或JSP檔案，伺服器會先執行這個ASP、ASP.NET、
PHP或JSP檔案內的程式碼或編譯後的程式碼
– 例如程式碼中可能要求從資料庫中取得使用者代號與密碼等資料，所
以此類網頁伺服器通常具有與資料庫連接的能力，無論如何，當這些
程式碼執行完畢之後，必須產生一個HTML格式的資料，並交由網頁
伺服器透過HTTP協定傳回這些HTML格式的資料，這是因為瀏覽器除
了HTML格式的資料外，其他格式的資料一律無法解讀。
• 在上述的範例中，我們可以瞭解2件事
– (1)瀏覽器可以解讀HTML格式的資料
– (2)有些程式碼必須由伺服器端執行。
9
1.1.3
WWW網站架構
• 事實上，並非任何形式的程式碼都無法被瀏覽器解讀或執行，為了減
輕伺服器的負擔，專家們發展了一些可以由瀏覽器執行的程式，此類
程式最著名的有Java Script/JScript與VBScript等，不過，由於這些程
式是交由客戶端瀏覽器來執行，為了保障每一個瀏覽者的電腦安全，
因此這類程式必須取消部分功能（例如：不允許建立檔案），雖然如
此，Java Script/VBScript程式仍然造就了網頁多樣化的效果，尤其是
JavaScript搭配新的AJAX技術可完成的網頁功能與效果更為豐富，不
但降低了網站伺服器的負擔，也使得Web 2.0型態的網站更容易製作。
•
• 除此之外，為了使得伺服器端能夠獲得客戶端的某些資料，因此瀏覽
器也必須具有送出表單(form)資料的能力。我們將瀏覽器與網頁伺服
器的功能整理如表1-1。
10
1.1.3
WWW網站架構
– 表1-1 網頁架構軟體分析
11
1.1.3
WWW網站架構
【Web 2.0常用的技術】
Web 2.0常使用到的技術為syndication與AJAX兩種。使用這兩種技術建置的網站，且
該網站符合Web 2.0主要精神『參與、互動、分享』，則一般都將之視為Web 2.0網
站。
• 聯合化資訊交換(syndication)
– 聯合化資訊交換（syndication）是一種資訊傳播方法，透過feeds格
式與REST架構（WWW採用的建構模型）進行傳送，它的優點是改善
閱讀的時間與效率。
– 目前較普遍syndication規格有兩種，分別是2002年推出的RSS 2.0與
2003年／05年推出的Atom 0.3／1.0，兩種格式都使用XML做為資料
傳輸格式。Atom擁有比RSS更強大的支援功能和更嚴謹的定義，但由
於推出時程較晚，目前syndication分享仍以RSS 2.0為主。
12
1.1.3
WWW網站架構
– 在各大新聞網站或部落格都可以見到使用RSS的應用。例如當您訂購
了某個新聞網站的RSS之後，則它會自動下載新聞的標題，您若對該
標題感興趣，則可以瀏覽該篇新聞，而不用瀏覽一些不感興趣的新聞，
使得我們得以節省閱讀新聞的時間。
• AJAX
– AJAX(Asynchronous JavaScript and XML)，全名是『非同步
JavaScript和XML』，它是一種互動式的網頁開發技術。AJAX也可
以看成是一種撰寫網路應用程式的新思維，它使得不用打斷使用者的
操作（傳統上會因為等待伺服器回應而被打斷），就能動態地更新網
頁內不同區塊的內容，而不需更新整個網頁。我們將於第18章深入介
紹AJAX以及利用工具製作包含AJAX技術的網頁。
13
1.2 網頁相關技術
• 網頁技術可分客戶端與伺服器端技術，我們將在本節中分別
加以簡介。
14
1.2.1
客戶端技術
• 客戶端代表的是瀏覽器，此處所指的客戶端技術代表可由瀏
覽器解讀的格式或可由瀏覽器執行的程式。
15
1.2.1
客戶端技術
• HTML標示語言
– HTML是一種標示語言（Markup Language），也是一種標籤語言
（Tag Language）。HTML的標示碼以標籤來表示，利用標籤形容所
包含的資料要顯示哪種格式或哪種效果（例如<a>標籤代表超鏈結效
果、<b>標籤代表粗體格式）。而瀏覽器能夠解讀這些標籤所代表的
意義，將之轉換為實際所看到的網頁效果。
– 瀏覽器可以直接解讀本地端的HTML網頁，也能夠解讀由網頁伺服器
下載的HTML網頁，下面是HTML文件經由瀏覽器轉換成網頁型式的範
例。
– 【註】：
• 若欲閱讀由伺服器端回傳給客戶端瀏覽器的HTML格式碼，可以利
用【快顯功能表】的【檢視原始碼】指令來達成。
16
17
1.2.1
客戶端技術
– 撰寫HTML網頁可使用純文字編輯器（例如：記事本），因為HTML文
件本身是一個文字檔，但一般我們使用專業的網頁編輯器來編輯
HTML（例如Dreamweaver），因為透過所見即所得的方式配置網頁
內容比較快速也比較容易。單純的HTML文件，其副檔名為『.htm』
或『.html』，而不是『.txt』，若設定為『.txt』，則瀏覽器會將之視
為單純的純文字檔，而顯示標籤與內容。只有在設定為『.htm』或
『.html』檔時，瀏覽器才會將之視為網頁檔，顯示內容與標籤效果而
不會顯示標籤原文。
18
1.2.1
客戶端技術
• XML與XHTML
– XML(eXtensible Markup Language)中文翻譯為可延伸標記語言。
1998年，W3C正式公佈XML的Recommendation 1.0版語法標準，由
表面上看來，XML是標記語言的一種，但是嚴格來講，XML最大的用
途為定義其他語言的語法系統。這也正是XML功能強大，受到各方重
視的緣故。透過結構和資訊導向，它為不同領域（產業界、學術界和
研究單位）的文件，提供統一的描述語法，讓不同領域之間資訊交換
的效率大大提升，並且能夠跨平臺進行資訊的整合與資源的共用。
– XML特別適用於電子商務應用，因為XML擁有自我定義的機制，使得
資料在網路傳輸時能夠很容易地在傳送端與接收端做資料交換。此外，
由於XML也可使用於資料描述，因此，您可以將它視為一種資料描述
語言(meta language)。例如:用它來制定元件、記錄以及其他種類的資
料結構（例如另一個語言）。
19
1.2.1
客戶端技術
– XML也和HTML一樣屬於標示語言(Markup Language)，但XML不同
於HTML對於所有的標籤都定義了顯示格式的意義，對於XML而言，
顯示格式並不是最重要的，相對地，資料所代表的意義才是最重要的，
因此，XML並不負責標籤顯示的格式。因為XML與HTML是由兩種不
同的設計目的所衍生發展的兩套語言。使用XML，您可以透過標籤來
描述資料的結構，並且它還允許使用者視描述資料的需要，隨意地制
定不同名稱的標籤，這和HTML有著極大的差別。
– XML身為資料描述語言(meta language)，因此常用來制定各類文件格
式。有些軟體使用XML取代原本使用ini檔來描述文件。例如新版
Office、NET Framework的web.config檔都是以XML作為基礎設定的
描述格式，其他軟體無法理解該XML檔案內容，但軟體本身可以理解
該XML檔案內容。除此之外，XML也可以制定軟體間的資料傳送格式，
只要雙方軟體能夠解讀標籤意義即可，例如製作web service以及RSS。
20
1.2.1
客戶端技術
<configuration>
<system.web>
<membership>
<providers>
<add name="WebAdminMembershipProvider"
type="System.Web.Administration.…………" />
</providers>
</membership>
<httpModules>
<add name="WebAdminModule"
type="System.Web.Administration.…………"/>
</httpModules>
<authentication mode="Windows"/>
<authorization>
<deny users="?"/>
</authorization>
<identity impersonate="true"/>
</system.web>
</configuration>
表1-2 使用XML製作的web.config檔（.NET Framework軟體懂得各標籤意義）
21
表1-3 使用XML製作
的新聞RSS（只有
Yahoo網站與RSS閱
讀器懂得各標籤的意
義）
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http:// /..../Atom" xmlns:cf="http://.../rss/core/2005"
xmlns:blogChannel="http://backend....../blogChannelModule">
<channel xmlns:cfi="http://....../rss/core/2005/internal" cfi:lastdownloaderror="None">
<title cf:type="text">Yahoo!奇摩新聞-運動</title>
<link>http:// /...............tw.news.yahoo.com/sports/</link>
<description cf:type="text">Yahoo!奇摩新聞-運動</description>
<language>zh-tw</language>
<lastBuildDate>Wed, 01 Jun 2011 14:55:01 GMT</lastBuildDate>
<atom:updated>2011-06-01T14:55:01Z</atom:updated>
<ttl>20</ttl>
<image>
<url>http://tw.yimg.com/i/tw/news/v2/mh_small.gif</url>
<title>Yahoo!奇摩新聞-運動</title>
<link>http://...............tw.news.yahoo.com</link>
<width>144</width>
<height>28</height>
</image>
<item>
<title xmlns:cf="http://..." cf:type="text">NBA總決賽首場 熱火8分之差(中廣)</title>
<link>http:/......................../2sk61.html</link>
..................................................................
..................................................................
</item>
<item>..................................................................</item>
<item>..................................................................</item>
</channel>
</rss>
22
1.2.1
客戶端技術
– 除了用來制定文件格式之外，XML甚至可以用來制定另一種語言，例
如早期的HTML（HTML 4.01版之前）都是採用SGML描述語言制定，
而新版的XHTML則是以XML來制定。目前大多數的瀏覽器與網頁編輯
軟體都能夠正確解讀XHTML標籤的意義，因為XHTML與HTML標籤的
意義相同，只不過XHTML規定的更嚴格而已。
•
• 本書使用Visual Web Developers工具開發的網頁，實際回傳
到瀏覽器的HTML標籤都是以XHTML為標準的。而ASP.NET
的標籤則符合XML的規定。
– 【註】簡而言之，XHTML就是新版的HTML，也是規定較嚴格的
HTML。
23
1.2.1
客戶端技術
• Java Applet
– Java是一種物件導向程式語言，由Sun公司開發，執行Java程式是將
Java程式先編譯為中間碼（即Byte Code）的類別檔，待執行時，再
透過Java虛擬機器(Java Virtual Machine；簡稱Java VM或JVM)加以
執行，由於Sun提供了各種平台的Java虛擬機器，因此，Java是一種
跨平台的程式語言。
– Java提供了Applet機制，程式設計者可以將程式設計並編譯為類別檔
後獨立於HTML文件外，使用者可以從遠端下載到瀏覽器並在網頁中
加以執行，唯一的前提是，瀏覽器必須先安裝Java虛擬機器(JVM)。
– 當瀏覽器向Web伺服器要求一個包含Java Applet的HTML網頁時，首
先會將該HTML網頁下載到客戶端，解讀HTML後發現有<applet>標籤，
代表要執行一個Java Applet，接著依照標籤屬性的指示向伺服器要求
下載Java Applet的類別檔，下載完畢，最後由瀏覽器中的JVM在網頁
中執行Java Applet的類別檔，如下圖所示。
24
1.2.1
客戶端技術
圖 1-3 Java Applet由客戶端瀏覽器執行
25
1.2.1
客戶端技術
【Java Applet與ActiveX】
早期Java Applet與ActiveX都是在網頁中執行複雜程式的機制，其中Java Applet為Sun發展
的Java所支援，而ActiveX則是由微軟提出的對應機制。換句話說，兩者原處於競爭對手。
初期，Java Applet的普及領先ActiveX，因為各類瀏覽器都可以執行Java Applet，而只有
在IE瀏覽器中可同時支援兩種機制。
後來微軟自行修改了IE中的JVM，只支援以Microsoft J++（一種極類似於Java的程式語言）
方式開發成的Java Applet，而這種程式無法在非IE的瀏覽器上正確執行，並且IE的JVM也
無法完全支援以Sun版本開發的Java Applet。在此同時，IE瀏覽器的市佔率持續提高，使
得大多數開發「網頁中程式」的程式設計師採用了ActiveX機制。此時，Java Applet大多只
用在網頁中顯示動畫的應用。
隨著Flash的流行與普及，Java Applet連製作動畫的市場也逐漸失去，並且在Windows XP
之後，微軟又不主動提供Java VM的下載。這使得Java Applet幾乎完全退出市場。
26
1.2.1
客戶端技術
• JavaScript/VB Script/JScript
– Script有人將之翻譯為『腳本』，事實上，它與直譯程式的概念更為
接近，Script其實指的是一份未經編譯的程式原始碼，只有在需要被
執行時，才透過翻譯程式針對Script中的每一個指令進行解讀及執行。
Script程式並未限制使用於客戶端或伺服器端，但一般我們若只講
Script程式，通常指的是客戶端使用的Java Script、VB Script或
JScript。
– JavaScript看似與Java有關，但實際的功能則比Java精簡許多，我們
應該將兩者視為不同的語言，JavaScript比Java簡單很多，使得一般
非程式專精的網頁開發者也能夠透過JavaScript強化網頁的功能。
27
1.2.1
客戶端技術
– VBScript與JScript都是由微軟發展，VB Script是由傳統VB語法精簡而來，而
JScript則是微軟為了與Sun的Java抗衡所自行設計的Java-like語法，就現實面
來說，幾乎所有的瀏覽器都支援JavaScript，而IE則支援JavaScript、VB
Script及JScript。而這三種Script都可以內嵌在HTML文件中，也可以獨立存在，
再透過特殊的HTML標籤引入。目前大多以JavaScript為主，尤其是AJAX流行
後，JavaScript已經站穩客戶端程式的重要地位。
【VB與VBScript】
本書所提之VB與VBScript可能有三種，其中，VBScript是IE瀏覽器可直譯執行的程式語言。
VB或傳統VB則指的是舊版Visual Basic 6程式語言，VB.NET則指的是架構在.Net
Framework的新版VB程式語言。
【JavaScript為物件基礎語言】
JavaScript雖然也可以使用物件的屬性與方法，但它不提供繼承機制，所以JavaScript只能
算是物件基礎語言，而非物件導向語言。
28
1.2.1
客戶端技術
• CSS
– CSS（Cascading Style Sheet）是一種樣式表，由W3C制定標準，
目前的標準為CSS3，不過最新的IE8/9只支援部份的CSS3，因此大
多數網站仍使用CSS2來設計樣式。CSS樣式表可以彌補HTML的不足，
所謂『樣式表』其實是一堆網頁效果設定的集合，透過HTML的特殊
標籤或屬性就可以引用這些事先定義好的設定值，享受相同設定重複
使用的優點。在本書中，我們將會發現，ASP.NET大量使用CSS來設
計網頁元件的顯示細節。例如按鈕或文字標籤的位置、以及文字的大
小等等。
29
1.2.1
客戶端技術
• AJAX
– AJAX也屬於客戶端的技術之一，但它並不是單一的技術，而是一系列相關技
術的總稱，包含XHTML、CSS、JavaScript、XML、DOM、
XMLHttpRequest等等，其主要程式皆由JavaScript開發，搭配某些特殊的元
件來完成。其中大多數的技術已經在前面解釋過了，而DOM與
XMLHttpRequest的解釋如下：
• DOM：DOM是一種文件模型，提供了以樹狀結構與節點的存取模式，使
得JavaScript的程式碼更精簡，並更有效率地存取文件資料。例如存取
XML檔案就可以透過XML DOM來完成。
• XMLHttpRequest：XMLHttpRequest是一個物件，可用來與Web伺服器
進行非同步數據交換。
– 暫時我們對AJAX的解釋到此為止，其餘的介紹留待第18章時再進行詳盡的介
紹，現在您只要先理解AJAX是一些客戶端技術的總稱即可。事實上，
ASP.NET 2.0並未包含AJAX，而是另外以ASPNET AJAX存在，直到
ASP.NET 3.5才將之納入。但AJAX嚴格來說，仍屬於客戶端技術。
30
1.2.2
伺服器端技術
• 伺服器端代表的是網頁伺服器(Web Server)，此處所指的伺服器技術代表
由網頁伺服器執行的各類技術，但實際上不論您採用的是哪一種技術，其
最後產生的結果都是HTML（可內嵌其他客戶端技術）格式的文件，然後
將此文件回傳給瀏覽器，解讀為我們看到的網頁型式。
• CGI
– CGI(Common Gateway Interface)被翻譯為『共同閘道介面』，它是
早期由伺服器端執行程式的一種策略。嚴格來說，CGI是一種介面，
用來在HTTP伺服器與閘道程式之間進行溝通，因為每個傳送到伺服
器的資料都會由一個閘道程式來處理，CGI就是負責這兩者之間的資
料傳輸介面。
– 在使用CGI技術的伺服器網站中，CGI程式屬於一種外部程式，您可以
使用熟悉的語言（例如C/C++）進行開發，而這個程式同樣必須先經
過編譯為執行檔，存放在伺服器端以備執行。
31
1.2.2
伺服器端技術
– 以C/C++語言所開發的CGI程式為例，傳統C/C++程式的標準輸入裝置
(stdin)為鍵盤，標準輸出裝置(stdout)為螢幕，而CGI程式由於是透過CGI
介面傳輸資料，因此，標準輸出入裝置(stdin與stdout)則改為CGI介面，程
式可以由CGI介面取得使用者透過表單(Form)傳送過來的資料，也可以透
過CGI介面取得相關的環境變數(Environment Variables)，同時也會將回傳
的HTML文件寫入到CGI介面，然後由網頁伺服器回傳給瀏覽器。其架構如
圖1-4所示。
圖1-4 CGI運作架構圖
32
1.2.2
•
伺服器端技術
ASP/JSP/PHP/ASP.NET
– 相對於CGI而言，ASP/JSP/PHP是中期比較流行的伺服器網頁程式技術。
JSP(Java Server Page)使用的是Java語法，並且能夠匯入(import)眾多Java
的類別函式庫；而PHP則使用的是C或C++語法，並且提供大量存取MySQL
資料庫的函式庫。至於ASP.NET則可以說是最新的伺服器網頁程式技術。
– ASP(Active Server Page)是由微軟所發展，正如同前面所說的，廣義的Script
並不侷限於客戶端或伺服器端，在ASP中，您可以選擇使用VB Script或
JScript語法來撰寫程式，但大多以VB Script語法來撰寫ASP網頁程式。ASP
最終的版本為3.0（本書稱之為傳統ASP），而新一代的ASP則改為ASP.NET，
版本則由1.0,1.1,2.0,3.5，發展到現今的ASP.NET 4.0版（也就是本書重
點）。
– ASP.NET能夠使用VB.NET、C#等由.NET Framework所提供的程式語法來開
發。在副檔名方面，傳統ASP使用的是『.asp』，而ASP.NET使用的則是
『.aspx』。
33
1.2.2
伺服器端技術
– 在這裡還是要提醒讀者，無論您在伺服器端使用哪一種技術來撰寫程
式，其結果都必須回傳給瀏覽器，而回傳給瀏覽器的內容則必定為
HTML格式（當然也可以內附一些由客戶端執行的JavaScript/VB
Script程式碼），因為瀏覽器只認得HTML標籤與屬性。例如下面的
ASP範例(ch1_01.asp)將會回傳與1-7頁相同的HTML標籤與屬性。
34
<%
Response.write("<html>")
Response.write(" <head>")
Response.write(" <title>HTML網頁效果示範</title>")
Response.write(" </head>")
Response.write(" <body bgcolor='PINK' style='BACKGROUND-COLOR: #FFFFCC'>")
Response.write(" <b><font size='5' color='#0000FF'>陳錦輝的著作</font></b>")
Response.write(" <ul>")
Response.write("
<li><b><font color='#9966FF' size='4'>程式設計類</font></b></li>")
Response.write("
<ul>")
Response.write("
<li><font color='#CC0066'>C語言初學指引</font></li>")
Response.write("
<li><font color='#CC0066'>C/C++初學指引</font></li>")
Response.write("
<li><font color='#CC0066'>Java初學指引</font></li>")
Response.write("
<li><font color='#CC0066'>資料結構初學指引</font></li>")
Response.write("
</ul>")
Response.write("
<br/>")
Response.write("
<li><b><font color='#9966FF' size='4'>網頁設計系列
</font></b></li>")
………………………………………………………
………………………………………………………
Response.write(" </ul>")
Response.write(" </body>")
Response.write("</html>")
%>
表1-4 傳統ASP(ch1_01.asp)文件內容【回傳的資料同1-7頁】
35
1.3 .NET Framework
與Visual Studio
• ASP.NET屬於.NET Framework
的一環，而.NET Framework則是
一個程式開發與執行的環境架構，
它能夠同時包含視窗程式與網頁
程式的開發。長期以來，C++與
Java佔據絕大多數的物件導向程
式語言市場，Microsoft為了增加
市場佔有率，在2002年提出
了.NET Framework，目前的版本
為4.0版或稱為2010版，其架構如
下圖。
圖1-5 .NET Framework的視窗程式與網頁程式架構圖
36
1.3 .NET Framework
與Visual Studio
– 在圖1-5中，我們可以發現，對於一般Windows環境而言，執行的程式
為視窗應用程式，而.NET Framework以Windows Forms（Form代表
表單）提供此功能。至於網路作業環境，則透過網路傳輸，在伺服器
端執行ASP.NET程式為主，它會產生一些格式回傳給客戶端，這些格
式又分為包含HTML的Web Forms以及不包含HTML的Web Services
兩種。其中，瀏覽器可解讀HTML，因此通常在瀏覽器中要求讀取
的.aspx網頁就是採用Web Forms來開發。
– 至於如何產生Windows Forms、Web Forms、Web Services等成果，
則是透過.NET Framework的類別庫以及CLR來完成，實際與作業系
統進行溝通的為CLR，它可以視為一種虛擬機器，提供各類.NET
Framework程式的執行環境。
• 事實上，.NET Framework一共包含三個層次，第一層為Windows Form
與ASP.NET，第二層則為類別庫，最底層則為CLR，其中各層所包含的
元件如下圖所示。
37
1.3 .NET Framework
與Visual Studio
圖1-6 .NET Framework架構圖
38
1.3 .NET Framework
與Visual Studio
• .NET Framework的元件配置如圖1-6，而.NET Framework的
視窗應用程式(Windows Forms)又應該以何種程式語言的語
法來撰寫呢？
– 答案是沒有限制，因為.NET Framework採用兩段式翻譯方式（與
Java類似），它會先將原始程式（各種語言的程式碼）編譯為微軟的
中間碼MSIL(Microsoft Intermediate Language)，這個中間碼與組合
語言的格式類似，可將之視為.NET平台CLR上的組合語言，這些
MSIL格式的程式碼以及一些中繼資料將被置於可攜式執行檔(portable
executable file；PE檔)中。當真的要執行時，再由執行環境以
JIT(Just in Time)的方式將PE檔內的MSIL程式碼編譯成可執行的原生
碼(native code)來執行。其過程如圖1-7所示，而後半段的編譯行為由
ilasm.exe(MSIL Assembler)來執行，微軟將此軟體稱之為組譯器
(Assembler)，這是因為MSIL比較像是CLR上的組合語言。
39
1.3 .NET Framework
與Visual Studio
圖1-7a .NET 程式的開發流程
40
1.3 .NET Framework
與Visual Studio
圖1-7b .NET 程式的開發流程
41
1.3 .NET Framework
與Visual Studio
•
微軟在推出.NET Framework時，保
證這是一個跨語言與跨平台的架構，
因此，理論上.NET Framework的視
窗應用程式可以使用各種語言來開發，
同時能夠在各種平台上執行
– 但實務上則大多以VB.NET與C#語法
為最多，這是因為微軟提供的開發工
具Visual Studio.NET僅提供將Visual
Basic .NET（簡稱VB.NET）、Visual
C#、Visual J#、Visual C++ .NET等
幾種語言的緣故。換句話說，Visual
Studio.NET僅提供某幾種程式語言轉
換為MISL中間碼的功能（也就是
VB.NET編譯器/vbc.exe與C#編譯器
/csc.exe），而非各種程式語言的編
譯器。
圖1-8 Visual Studio.NET架構圖
42
1.3 .NET Framework
與Visual Studio
– 在跨平台上的實作上，微軟提供的CLR也只能運行於Windows作業系
統（包含XP、Server、Vista等），而不能運行於Unix-like與Mac-OS
的作業系統。但有一個名為Mono的Open Source Project則實際完成
了跨語言與跨平台的目標。
【Mono: Open Source Project】
Mono提供了C#、Java、Visual Basic.NET、JavaScript、PHP、Object Pascal、Python以
及其他語言的編譯器，並且也能夠安裝在Linux、Sun Solaris(Unix)、BSD（含FreeBSD）、
Mac OS X（含iPhone OS）、Microsoft Windows甚至是Wii等機器上。但由於是Open
Source Project，故本書不多加介紹，有興趣的讀者可以連至下列網址查詢。
http://www.mono-project.com/
43
1.3 .NET Framework
與Visual Studio
• Visual Studio是微軟提供程式設計師開發程式的一套IDE整合開發環境，
對於開發.NET Framework的程式而言（例如VB.NET、C#、ASP.NET），
使用的是Visual Studio.NET版本。而Visual Studio.NET又分為Express版、
使用者端版（含專業版、企業版、企業旗艦版）、品管人員版與伺服器端
及其他產品版（含TEAM FOUNDATION SERVER/TEAM EXPLORER
EVERYWHERE/LAB MANAGEMENT版）等。
– 其中，Express版是提供給初學者（例如學生）使用，是一個免費的
版本並且可以由微軟網站下載，網址如下：
http://www.microsoft.com/express/
44
1.3 .NET Framework
與Visual Studio
請下載
圖1-9 http://www.microsoft.com/express/（下載VWD Express 2010中文版）
45
1.3 .NET Framework
與Visual Studio
• 本書使用的為Express 2010中文版
– 而Express版包含四種開發軟體，Visual Basic、Visual C#、Visual
C++以及Visual Web Developer等。要開發ASP.NET程式則請安裝
Visual Web Developer 2010（簡稱VWD2010）。
• 註：下載完畢，請一同下載最新的Service Pack。
46
1.4 ASP.NET與VWD
• 除了視窗應用程式之外，Web應用程式也被包含在.NET Framework的規
範中，也就是ASP.NET。ASP.NET包含開發Web Forms與Web Services
兩類，在本書開發的ASP.NET網頁程式都屬於Web Forms。要開發
ASP.NET程式則請安裝Visual Web Developer 2008（簡稱VWD2008）。
•
• 簡言之，本書所使用的工具包含IDE、.NET Framework（含CLR）、
SQL Server Express資料庫、Web伺服器等，其中IDE即為VWD2010，
而在安裝VWD完成後，也同時安裝了.NET Framework與SQL Server
Express資料庫（需勾選）。至於Web伺服器，在VWD2005以前都必須
搭配IIS Web伺服器來執行，但Visual Studio或VWD2008以後的版本則本
身已經內建虛擬的Web伺服器（稱之為ASP.NET程式開發伺服器），因
此不需要安裝IIS也能夠開發Web應用程式。
47
1.4 ASP.NET與VWD
• ASP.NET的編譯與執行
– ASP.NET可以使用VB.NET或C#語法來開發程式，本書使用的是
VB.NET語法。ASP.NET程式碼的副檔名為.aspx，當使用者第一次要
求網站執行ASP.NET網頁（.aspx檔）時，會自動使用編譯器編譯為
中間碼組件檔。通常它會對每個應用程式目錄 (例如 App_Code) 建立
組件，也會為主目錄建立一個組件(若使用不同程式設計語言所撰寫，
則會為每一種語言建立不同的組件)，這些組件檔會被存放在暫時目錄，
此動作稱之為自動編譯，速度較慢一些。
48
1.4 ASP.NET與VWD
– 當編譯完成後，實際執行時，則由CLR執行中間碼產生HTML格式碼
回傳給客戶端（其流程如圖1-10a所示）。至於之後其他使用者欲連
上此ASP.NET網頁時，則不必再進行編譯，CLR可直接執行中間碼產
生HTML格式碼回傳給客戶端，因此速度較快（而這些已編譯的中間
碼則被視為快取檔案），流程如圖1-10b。而傳統ASP網頁，則必須
每一次都經由asp.dll直譯ASP原始碼，故ASP.NET的平均效率比單純
直譯的ASP與PHP還要好。
49
1.4 ASP.NET與VWD
圖1-10a ASP.NET執行過程（第一次執行ASP.NET）
50
圖1-10b ASP.NET執行過程（非第一次執行ASP.NET）
【ASP.NET的彈性部署】
由於第一次會自動進行編譯的特性，因此，若您想要將ASP.NET網頁部署到其他的Web 伺
服器（例如IIS），直接複製原始程式檔即可。不過如果您可以選擇先行編譯，也就是在部
署網站前，使用ASP.NET編譯器工具(ASPNET_Compiler.exe)先行編譯網站，就可以部署
組件取代原始程式碼。而ASP.NET編譯器工具提供了包含就地編譯、非可更新的完全先行
編譯、可更新的先行編譯等選項。
51
1.5 類別／物件
• VB.NET或C#都是物件導向程式語言（OOPL；Object-Oriented
Program Language），而ASP.NET由於採用這兩種語法，因此
ASP.NET是一個物件導向型式的網頁程式設計，所謂物件導向的設計理
念，就是利用軟體模擬現實生活中實體所擁有的特性與行為，這些實體就
是物件，而每一個物件都擁有各自的屬性（Property）、方法（Method）
及事件（Event），物件導向程式設計就是依照物件的方法產生互動以完
成要求。
• 由於ASP.NET採用物件導向式設計，因此在繼續之後的學習之前，我們
應該先對物件導向程式設計有基本的認識，重點說明如下：
52
1.5 類別／物件
• 物件 (Object)
– 真實世界中所有具體或抽象的事物，都可以將之視為一個『物件』。
例如：您可以把一架戰鬥機想像成是一個物件（Object）；而戰鬥機
的零件（例如：座椅、引擎、操縱桿）則是較小的物件，明顯地，這
些物件仍舊可以再細分為更小的物件（例如：螺絲釘）。
– ASP.NET的物件則是一些程式碼和資料組合，物件必須能夠單獨成為
一個完整單元，也可以組合成更大的物件。例如：一個按鈕或一個
Page都是一個物件，但Page網頁物件內可以包含按鈕物件。
• 屬性 (Property)
– 物件擁有許多特性，這些特性代表了一個物件的外觀或某些性質，例
如：戰鬥機物件的最高速度就代表了該戰鬥機的一種特性。這些特性
在物件導向程式設計中稱之為屬性（Property）
53
1.5 類別／物件
– 事實上，有的時候在取得物件的某些屬性時，所得到的也可能是另一
個（子）物件。例如：戰鬥機的引擎也是一個物件，而且它仍舊可以
由更多更小的零件來組成，同時引擎物件也存在自己的方法
（Method），例如：引擎點火。
– 本書的ASP.NET網頁使用VB.NET語法，而在VB.NETT中，每個物件
同樣也具備某些特性，這些特性亦稱為欄位或屬性，例如：按鈕物件
的屬性包含按鈕長寬大小、按鈕背景顏色、按鈕文字等等。大多數物
件的欄位都有某些預設值，在程式設計或執行階段，我們可以藉由改
變欄位值來改變整個物件的某些特性，完成我們想要的物件表示形式。
例如：將飛機物件的機殼漆成紅色，將按鈕背景顏色設為藍色。
• 註：VB.NET的屬性除了具有欄位資料的特性之外，也可以設定set
與get程序的內容以進行該項資料的存取。
54
1.5 類別／物件
• 類別 (Class)
– 不同的物件也可以擁有相同的屬性，而我們可以依照物件所擁有的屬
性將物件加以分類，此分類的結果稱之為『類別』。事實上，在物件
導向程式設計中類別與物件的關係，是先有類別，然後才有該類別下
衍生出來的各個物件，而同屬一個類別的物件擁有相同的屬性（定義
於類別中），透過屬性值的不同，就可以製造該類別下各種型式的物
件。例如：『飛機』是一個類別，而「民航機」和「戰鬥機」都是該
類別下所衍生的物件，因為兩者都具有速度、爬升力、重量、載重
量…等等的屬性，但由於屬性值的不同，因此我們可以區分出民航機
物件與戰鬥機物件。
55
1.5 類別／物件
– 以ASP.NET程式設計而言，假設某一個Page網頁中包含許多按鈕，
則每一個按鈕都是一個物件，隸屬於按鈕類別之下，但是由於按鈕的
名稱不同，因此視為不同且獨立的物件，而按鈕類別並不需要由我們
來設計，因為它屬於ASP.NET內定類別庫的類別。在本書中，我們幾
乎不會自行設計類別，只會使用現成的類別產生物件，並且控制項類
的物件也是以拖拉方式來完成宣告，而不需要自行撰寫宣告物件的語
法。
56
1.5 類別／物件
•
方法 (Method)
– 每個物件都擁有不同數量的『方法』（同一類別下的物件則擁有相同
名稱的方法，但方法的細節內容則可以不同）。所謂方法 (Method)，
就是為了完成該物件某些目標的處理方式。例如：戰鬥機物件有許多
方法使得戰鬥機變得有些用途，這些方法如起飛、降落、逃生等等。
每個方法都有許多的細節，例如起飛，可能包含『發動引擎、、、、
直到拉動操縱桿』，這些就是起飛方法的細節。
– ASP.NET提供了許多物件的方法（ASP.NET完成了這些方法的細
節），這樣的好處就在於我們並不需要了解這些方法的細節，就能夠
完成目標，例如亂數物件（Random Object）提供了取亂數的Next方
法，我們只要指定執行『Next(1,42)方法』就可以取得一個介於1~42
的亂數，而不需要了解該亂數是如何取得的。而當我們使用VB.NET
語法開發ASP.NET網頁時，物件或類別的方法又稱之為物件或類別的
程序。
57
1.5 類別／物件
• 事件 (Event)
– 有些物件可能包含某些事件（Event），例如：逃生鈕物件，會有一
個事件稱為『被按下』。而當逃生鈕真的被按下時，就會自動執行某
些已經事先設定好的程序，例如：彈出座椅。當然同一類別下的物件
也應該擁有相同名稱的事件，但事件所對應的程式可以不同。
– ASP.NET不但提供了許多物件，同時也定義了該物件所擁有的事件，
而所謂事件的發生，則可能是按下該物件、將滑鼠游標移動到該物件
上、在該物件上按下滑鼠右鍵、、、等等的動作。當實際發生屬於該
物件的事件時，就會根據此事件做出適當的處理，也就是執行該事件
相對應的程式碼，這些程式碼稱之『事件方法』或『事件程序』。
58
1.5 類別／物件
• 事件驅動 (Event driven)
– 事件驅動(Event driven)是源自於視窗程式設計的一種新觀念，在傳
統的命令列式程式設計中（例如Unix/Linux/Dos等），整個程式的執
行流程完全由程式撰寫者來主控，並且以循序方式加以執行。使用者
只能夠被動地在程式執行到某個階段時，被程式要求輸入某些數值或
文字。視窗程式設計則將此種狀況完全改變，而採用了事件驅動方式
來執行程式。
– 換句話說，當沒有事件被驅動時，整個視窗程式將處於待命狀態而不
會執行任何動作，只有當某個事件發生時（例如：某一個按鈕被按
下），才會去執行相對應的事件程序，如此一來，也讓使用者可以主
導整個程式的運作流程。
59
1.5 類別／物件
– VB.NET是一種『事件驅動』的視窗程式設計語言，當我們執行
VB.NET所撰寫的程式時，整個程式就處於待命狀態，依靠著不同的
事件發生，然後執行其相對應的事件處理程序（或簡稱事件程序）程
式碼。而程式設計師所撰寫的程式，就是在撰寫這些事件程序的程式
碼。這樣子來設計程式的方式，可以大幅度縮短開發應用程式的時間。
– ASP.NET不但可採用VB.NET與C#作為語法，同時也採用了事件驅動
的觀念，對於ASP.NET的網頁而言，在設計時，您可以將按鈕等相關
元件視為可產生事件的物件，並且同樣先撰寫相關事件處理程序的程
式碼，則在編譯之後，就可以達到同樣的功能。
60
1.5 類別／物件
• 雖然ASP.NET也採用事件驅動的方式來撰寫程式，但網頁程
式設計由於牽涉到客戶端與伺服器端的運作，其運作原理與
一般視窗程式有所不同，故ASP.NET的編譯器必須透過一些
技巧（例如AutoPostBack）來完成此一功能。
– 而不論您是否理解這些技巧，在設計ASP.NET網頁程式時，都請先將
之視為一般視窗程式來開發（若您已具備傳統ASP、PHP等
Client/Server的觀念，請暫時放下這些傳統的網頁設計觀念。）
61
1.6 本章回顧
• 在本章中，我們釐清了許多關於網際網路(Internet)的相關名
詞，例如Client/Server、Web2.0等等。
– 所有的網頁技術又可以分為客戶端技術（如HTML、Java Applet、
JavaScript/VB Script/JScript、CSS、DHTML）與伺服器端的技術
（如CGI、ASP/JSP/PHP、ASP.NET）兩大類。
• ASP.NET屬於.NET Framework的一環，它可以使用VB.NET
或C#語法來開發程式。
• 開發ASP.NET網頁程式，我們可以透過Visual Web
Developer(VWD)來開發。
– 安裝VWD Express時，可以選擇同時安裝SQL Server Express。並且
VWD提供了ASP.NET程式開發伺服器以便於測試ASP.NET的輸出效
果。
62
1.6 本章回顧
• 如同.NET Framework的Win Forms視窗程式，ASP.NET程式也採用兩段
式翻譯，並且在第一次執行ASP.NET網頁時，會進行自動編譯，產生
MSIL格式的組件檔（存放在暫時目錄），當第二次執行時，就不必再進
行編譯的動作，只需要由CLR執行中間碼產生HTML格式碼回傳給客戶端
即可。
• ASP.NET是一種物件導向式的網頁程式設計，具備物件導向功能，例如
物件、屬性、方法、事件等等，同時ASP.NET也如同視窗程式，採用了
事件驅動方式來構思程式的執行流程。而為了完全達到事件驅動的方式，
ASP.NET的編譯器有時必須同時利用客戶端與伺服器端的程式合作來完
成，不過這是ASP.NET編譯器的工作，設計者並不需要了解過多的細節。
【HTML與CSS補充說明】
由於網頁設計最後的輸出是HTML格式碼，當中可能也包含JavaScript與CSS，若讀者未具
備相關基本知識，可以參閱筆者所著的「HTML初學指引」一書。
63
本章習題
64