基于javascript的電子商務網(wǎng)站開發(fā)

1、JavaScript課程設計設計題目 基于javascript的電子商務網(wǎng)站開發(fā) 專業(yè)班級 11軟1 學生姓名 于亞萍 學 號 4 指導教師 陳鳳萍 日 期 2012.12.242012.1.11 成 績 課程設計任務書院系： 軟件學院 專業(yè)： 軟件技術 班級： 11軟1 學號： 4 一、課程設計時間2012年12月24日至2013年1月11日，共計3周。二、課程設計內(nèi)容使用html+javascript+css 完成以下任務：1、能夠熟練使用css結合html實現(xiàn)網(wǎng)頁布局。2、熟練使用文檔對象模型和事件驅動，能夠很好的實現(xiàn)web表單的交互式操作。3、熟練使用javascrip中的對象，實現(xiàn)網(wǎng)

2、頁的動態(tài)效果。三、課程設計要求1. 課程設計質量： 貫徹事件驅動的程序設計思想，熟練使用javascript中的對象，實現(xiàn)網(wǎng)頁特效。 網(wǎng)頁設計布局合理，色彩搭配合理，網(wǎng)頁操作方便。 設計過程中充分考慮瀏覽器兼容等問題，并做適當處理。 代碼應適當縮進，并給出必要的注釋，以增強程序的可讀性。2. 課程設計說明書：課程結束后，上交課程設計報告書和相關的網(wǎng)頁。課程設計報告書的格式和內(nèi)容參見提供的模板。四、指導教師和學生簽字指導教師： 學生簽名： 于亞萍 五、教師評語：基于javascript的電子商務網(wǎng)站開發(fā)摘要隨著電子商務的不斷發(fā)展，人們已經(jīng)逐漸改變傳統(tǒng)的消費習慣，越來越多的人開始在網(wǎng)絡上購物、消費

3、。在過去，由于網(wǎng)絡購物的安全性、費用支付的不方便等因素，使得人們對于網(wǎng)上購物還心存疑慮。現(xiàn)在，隨著網(wǎng)絡技術的不斷發(fā)展，在線支付方式的不斷完善，人們也漸漸開始習慣于這種新的消費方式了。因此，電子商務市場正在以幾何級數(shù)的速度增長。目前，市面上大部分的電子商務網(wǎng)站開發(fā)教材對讀者都有一定的要求，如要求讀者有HTML語言基礎、VBScript語言基礎或數(shù)據(jù)庫基礎，這樣學生在學習其中的案例時會有些困難，需要配合其他的一些參考書來進行學習。而那些沒有任何基礎的讀者希望能夠有一本適合他們學習的書。我們正是以此為切入點，試圖編寫一本一看就懂、一學就會的電子商務網(wǎng)站開發(fā)教材。關鍵字：浮動廣告、javascript

4、、html、目錄一、前言11.1課程設計思路11.2課程設計目標1二、關鍵技術12.1HTML相關概念12.2css32.3javascript3三、總體設計43.1網(wǎng)站總體架構43.2網(wǎng)站軟件結構43.3網(wǎng)站功能設計5四、詳細設計64.1主要代碼7五、課設總結12六、參考文獻12一、 前言1.1課程設計思路電子商務網(wǎng)站基本組成部分包括廣告推薦、商品瀏覽、電子購物車、用戶注冊，采用JavaScript實現(xiàn)的大部分是客戶端邏輯部分，與數(shù)據(jù)庫打交道基本上是由服務器端腳本語言來進行的。JavaScript在創(chuàng)建電子商務網(wǎng)站的過程中如果運用得當將使網(wǎng)站的效率得到很大的提高，同時也將提高網(wǎng)站的人性化程度

5、。1.2課程設計目標1.能夠熟練使用css結合html，通過咨詢和考察，最終確定并實現(xiàn)網(wǎng)頁布局。同時使用動態(tài)樣式表甚至可以讓圖片的切換獲得多種轉場效果。2熟練使用javascript和DIV實現(xiàn)廣告推薦的浮動廣告，從而提高網(wǎng)頁訪問速度。3熟練使用javascript中的內(nèi)建對象最終實現(xiàn)一個電子商務網(wǎng)站的雛形。二、關鍵技術2.1HTML相關概念1.HTML語言HTML語言(HypertextMarkupLanguage，中文通常稱為超文本置標語言或超文本標記語言)是一種文本類、解釋執(zhí)行的標記語言，它是Internet上用于編寫網(wǎng)頁的主要語言。用HTML編寫的超文本文件稱為HTML文件。在WWW上

6、，通常使用的發(fā)布語言是HTML，即超文本標識語言。當用瀏覽器打開網(wǎng)頁時，瀏覽器讀取網(wǎng)頁中的HTML代碼，分析其語法結構，然后根據(jù)解釋的結果顯示網(wǎng)頁內(nèi)容，正是因為如此，制作網(wǎng)頁的時候，如果不涉及HTML語言，幾乎是不可能的。如圖：WWW三個組成部分圖2-1WWW的組成2.HTML文件結構 元素出現(xiàn)在文檔的開頭部分。與之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。 元素定義HTML文檔的標題。與之間的內(nèi)容將顯示在瀏覽器窗口的標題欄。 HTML 文件的正文/元素表明是HTML文檔的主體部分。在與之間，通常都會有很多其它元素；這些元素和元素屬性構成HTML文檔的主體部分。 元素

7、：是HTML語言的基本部分。元素總是成對出現(xiàn)，每一對元素一般都有一個開始的標記（如），也有一個結束的標記（如）。元素的標記要用一對尖括號括起來，并且結束的標記總是在開始的標記前加一個斜杠。HTML元素屬性:HTML元素可以有自己的相關屬性，每一個屬性還可以由我們網(wǎng)頁編制者賦一定的值。元素屬性出現(xiàn)在元素的內(nèi)，并且和元素名之間有一個空格分隔；屬性值用“”引起來。2.2css1.css簡介級聯(lián)樣式表（Cascading Style Sheet）簡稱“CSS”，它是用來進行網(wǎng)頁風格設計。通過設立樣式表，可以統(tǒng)一地控制HTML中各標簽的顯示屬性。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，

8、可以擴充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。2.css文件當要在站點上所有或部份的網(wǎng)頁上一致地應用相同樣式時，可使用外部樣式表。在一個或多個外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁，便能確保所有網(wǎng)頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表中作一次更改，而該更改會反映到所有與該樣式表相鏈接的網(wǎng)頁上。通常外部樣式表以 .css 做為文件擴展名，例如 Mystyles.css。2.3javascript 1javascript語言JavaScript是一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言。同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML

9、網(wǎng)頁添加動態(tài)功能，響應用戶的各種操作。2.JavaScript嵌入HTML文件JavaScript代碼可直接嵌入HTML文件中，隨網(wǎng)頁一起傳送到客戶端瀏覽器，然后通過瀏覽器來解釋執(zhí)行。1)、JavaScript 語句插入 HTML的方式：（1)使用 標簽將語句嵌入文檔（2)將 JavaScript 源文件(.js)鏈接到 HTML 文檔中2)、JavaScript 語句插入 HTML的位置：（1)body部分的JS（2)head部分的JS：當腳本被調(diào)用、事件被觸發(fā)時執(zhí)行，可保證在調(diào)用函數(shù)前，腳本已載入三、總體設計3.1網(wǎng)站總體架構本系統(tǒng)的實現(xiàn)采用典型的B/S結構來實現(xiàn)，不同的客戶端程序通過IE

10、共同訪問WEB服務器的發(fā)布頁面、WEB服務器訪問數(shù)據(jù)庫服務器進行數(shù)據(jù)存取，系統(tǒng)結構如圖3-1：INTERNETIIS WEB SERVERSQL SERVER圖3-1系統(tǒng)結構圖3.2網(wǎng)站軟件結構登錄網(wǎng)站瀏覽網(wǎng)站會員登錄會員注冊購買商品瀏覽信息填寫個人信息瀏覽商品提交個人信息圖3-2軟件結構圖3.3網(wǎng)站功能設計在本網(wǎng)站中包括動態(tài)切換廣告條、浮動廣告、中文小日歷、電子時鐘、數(shù)學計算器、購物車、樹形結構菜單、用戶注冊等，并進行一定的美化和整理，基本完成商務網(wǎng)站的雛形結構。顯示的樣式要求如下： 圖 33商務網(wǎng)站樣式1.廣告推薦：一般有動態(tài)切換廣告條、浮動圖片和文字滾動等幾種方式，通過動態(tài)樣式表甚至可以

11、讓圖片的切換獲得多達20多種轉場效果。2商品瀏覽：一般用HTML表格顯示商品的圖片、價格、規(guī)格等信息，大部分網(wǎng)站都采用數(shù)據(jù)庫和動態(tài)腳本語言來自動生成商品的列表。3電子購物車：電子購物車一般有兩種方式來實現(xiàn)，一種是在服務器端存儲每個用戶的每一次電子購物操作，還有一種是采用客戶端cookie來實現(xiàn)電子購物車，cookie是網(wǎng)站存儲在客戶端的少量數(shù)據(jù)，可以讓網(wǎng)站的不同網(wǎng)頁之間共享相同的變量。4用戶注冊功能：創(chuàng)建用戶注冊程序，需要輸入的信息包括注冊用戶名、口令、姓名、出生年月日、身份證號碼、住址、郵編。重點體現(xiàn)在格式驗證通過客戶端，無須將數(shù)據(jù)提交到服務器端，從而提高了程序的效率，也可以避免程序提交數(shù)據(jù)

12、的過程中重復輸入的過程。5.電子時鐘設置：通過JavaScript模仿液晶顯示板的形式創(chuàng)建一個電子時鐘，要求按照12小時制進行時間顯示，如果是上午則顯示AM，如果是下午則顯示PM。6.中文日歷：編寫一個中文小日歷程序，可以在網(wǎng)頁中顯示出當前客戶端的日期信息，同時也可以顯示出本月其他日期的星期。必須采用中文星期表示來顯示星期，如果是閏年則必須在年份的旁邊注明。7.樹形結構菜單：創(chuàng)建一個樹形菜單，要求可以展開多級分類菜單，在包含內(nèi)容的文件夾前顯示加號圖片，在展開后則顯示減號圖片，對于不包含內(nèi)容的葉節(jié)點則用葉節(jié)點圖片來表示。四、詳細設計4.2主要代碼 制動浮動的DIV廣告層 .op1 filter:

13、progid:DXImageTransform.Microsoft.Alpha(opacity=30); !- var oldx; var oldy; var movediv; document.onmousemove = move; function down() movediv = document.all.my; oldx = event.x - movediv.style.pixelLeft; oldy = event.y - movediv.style.pixelTop; movediv.style.cursor = Move.ani; function up() if(movedi

14、v) movediv.style.cursor = default; movediv = null; function move() if(movediv) movediv.style.left = event.x - oldx; movediv.style.top = event.y - oldy; function showdiv() var old = document.getElementById(my); if(old != undefined) return; /產(chǎn)生一個背景層 var bodyheight = document.body.scrollHeight document.body.clientHeight ? document.body.clientHeight : document.body.scrollHeight; var bodywidth = document.body.scrollWidth 運行結果如下：五、課設總結這套程序經(jīng)過我們小組的一起努力終于完成，通過這次課程設計，我也感覺到自己的水平還有待提高。這次課程設計終于順利完成了，在設計中遇到了很多問題，最后在同學和老師的教導下，終于游逆而解。這次課程設計讓我感觸很深。使我對抽象的理論有了具體的認識.。我認為，在