劉逸的留意世界

很多人對於網頁程式語言(如：JSP、ASP、PHP)、HTML、CSS、javascript之間的關聯性有很多問號，我想在這邊先跳脫HTML5，拉回到之前網頁程式設計相關技術之間的關係。

就從web的溝通說起吧！在web的世界中，會有client side跟server side，client就是你個人的瀏覽器，而servier就如同google跟yahoo等提供服務的平台。而client跟server之間是採用HTTP的協定來進行傳輸，一般而言執行的順序如下所述：

• 會由client啟動一個request
• server收到後找到對應的網頁程式加以執行，產生動態HTML
• 接著在發送response訊息回給client。

一個動態網頁有哪些東西涵蓋其中？通常我們用的web programming language如下：ASP、JSP或PHP，來寫一個網頁。以JSP為例，在寫的過程這個網頁程式內會包含：HTML tag、JSP語法跟javascript三大塊。其中，HTML tag是靜態網頁內容想要呈現的資料就直接寫在這裡；JSP語法是控制著需要隨著不同條件動態產生的HTML資訊，使得網頁得以進一步依據不同角色、不同權限進行不同的呈現方式；最後，javascript其實作用跟JSP類似也是去動態控制HTML達到網頁的互動效果。雖說JSP跟javascript都有動態產生或控制HTML的效果，但JSP是在後端執行，javascript是在前端執行。

如果以下圖來看整體的概念如下。

• 1.1：會由client啟動一個request
• 1.2：Server找到對應的網頁程式，交由web programming language的直譯器(eg：ASP就是IIS、PHP就是Apache、JSP就是Tomcat)執行。最後經過一連串的動作，動態將用程式產生出HTML跟javascript。
• 2.1：之後將這個檔案傳回給client端。
• 2.2：Client接收到server的response之後，在你的瀏覽器中將收到的資料包含了有：HTML、javascript。此時，瀏覽器能解譯javascript的語法開始執行之，如此就能在前端控制HTML的內容跟動態增減HTML的區塊。注意，在此階段的互動效果僅跟前端有關係，已經跟後台無關，故反應的速度會比傳給後台執行後再傳回來的速度快很多。故若能善用javascript將可以大幅地提高互動的靈敏性，也可藉此降低client、server之間傳輸的頻率，進而降低來往的傳輸量。當然，有些跟安全相關的東西，必須繞到後台檢查或取database的資料，所以也不盡然全部都適合交給javascript處理。

CSS又是個什麼玩意？其實我們通常這樣形容，若說HTML是網頁內容的描述語言；那CSS就是網頁外觀形態的描述語言。CSS就如同是衣服，當HTML穿上不同的衣服，風貌就會自然的改便，這樣的抽離也可以使得網頁風格變動時，負責內容呈現的HTML不需再重新調整。藉由CSS+javascript+HTML可以使得網頁的呈現具彈性調整之效，一般成為DHTML也就是Dynamic HTML的三大要素。這些都是在前台(也就是瀏覽器執行的語法，此時已經與後台無關)。

一個網站的開發，光牽連的語法就多的嚇人，在此都還沒介紹到關於後續開發時，可以套用的一些經典的框架，但記得框架其實只是用來幫助你快速的實做出需要的網頁效果跟便利於後續的維護而產生。重點還是要先把基本的觀念釐清，哪些在server side執行？哪些在client side執行？以及執行的前後順序為何？如果囫圇吞棗我想應該沒多久就會在網頁設計的大海中迷航！