第二章JavaScript 2-1 网页设计导论动态网页与静态网页网页依其资料.PDF

第二章 JavaScript 2-1 網頁設計導論 動態網頁與靜態網頁 網頁依其資料展現性質，大致可分為靜態網頁與動態網頁。所謂靜態網頁是指資料的展現固 定不變，並不能依不同使用者的不同需求而有不同的輸出結果。但是動態網頁是指當使用者 瀏覽該網頁時，才根據使用者的需求，動態產生 HTML 文件，所以每個人的不同輸入值，都 可產生不同的輸出結果。 客戶端程式 vs 伺服端程式 為了減輕伺服器的負擔，動態網頁程式大致可分為客戶端 (Client) 程式與伺服端(Server)程 式。所謂客戶端程式，乃是當使用者連結伺服器下載所需網頁，使用客戶端的電腦直接依照 使用者的需求，產生 HTML 文件。例如，使用者要求計算 34*55 的值，或是按壓某一按鍵， 要讓某一物件上、下、左、右移動等動作，這些事情都可交由客戶端電腦處理即可，不用後 送伺服器，以提高處理效率，且減少網路流量。常見的客戶端程式有 Java Applet、JavaScript、 Jscript、VBScript 等，本書將於本章闡述 JavaScript 網頁設計。伺服端程式是指客戶端電腦無 法處理，必須要求伺服器處理的工作。例如，當使用者查詢資料庫內容時，此時因為資料庫 僅儲存在伺服端電腦，客戶端並無法回應使用者的要求，所以乃將使用者的需求後送伺服器， 伺服器再依使用者的需求送出 HTML 文件給客戶端電腦，最後再由客戶端電腦顯示結果，此 稱為伺服端程式，常見的伺服端程式有 CGI、ASP、JSP 及 PHP。 JavaScript JavaScript 是由微軟公司與網景（Netscape ）公司所聯合發展的網頁描述語言(Script)，他的語 法取自於 Java，所以稱為 JavaScript。因為市面上主要的瀏覽器都支援此一標準，也是目前客 戶端程式市場佔有率最高的 Script 語言，這也是我們選擇以 JavaScript 作為動態網頁設計的主 要原因。 FrontPage 網頁的編輯可以使用微軟的記事本、微軟的 Script Editor 、微軟的FrontPage(備註：如果是 Office2007 ，則其軟體名稱改為SharePoint Designer)或 Adobe 的 Dreamweaver，但是記事本與 Script Editor 都過於陽春，Dreamweaver 的功能又過於龐大，價錢亦貴。其次，因為 FrontPage 的價錢適中，幾乎每台電腦都有安裝，且功能又足夠學習 JavaScript，所以本書乃使用 FrontPage 作為 JavaScript 的編輯工具。進入 FrontPage 的畫面如下圖，共有 4 種頁籤，分別是“設計＂、 “分割＂、＂程式碼＂及＂預覽＂。下圖是進入 FrontPage 時的程式碼頁籤，已寫好一些 HTML 碼。 下圖是設計頁籤，網頁所要顯示的文字與圖片，還有文字與圖片的格式都可在此操作，且都 與 Word 接近。 2-2 JavaScript 基本輸出入 輸出與輸入是撰寫程式的第一步，也是所有語言的第一步，本節即是介紹 JavaScript 的基本 輸出入。 2_2_1 write write 是我們最為常用的輸出方法，他隸屬 document 物件，所以都是以 document.write 呈現。 例如， x=2; document.write(x); 即可輸出變數 x 之值。 範例 e2_2_1a 請編輯一個網頁，可以執行以上結果。 操作步驟 1 、開啟FrontPage。 2 、按一下程式碼標籤，已有現成程式如下： html head meta http-equiv=Content-Type content=text/html; charset=big5 title新增網頁 1/title /head body /body /html 3 、請於body /body 裡面插入以下程式碼。 body script language =javascript var x; x=2; document.write(x); /script /body 4 、按一下“預覽＂標籤，即可瀏覽執行結果，如下圖。 補充說明 1 、以上程式 script language =javascript ，其中的 script language 大小寫不能寫錯，若打錯 了，當然造成程式錯誤，而 javascript 則可寫成”Java