javascript課程設(shè)計說明書陳鳳萍_第1頁
javascript課程設(shè)計說明書陳鳳萍_第2頁
javascript課程設(shè)計說明書陳鳳萍_第3頁
javascript課程設(shè)計說明書陳鳳萍_第4頁
javascript課程設(shè)計說明書陳鳳萍_第5頁
已閱讀5頁，還剩12頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

JavaScript課程設(shè)計課程設(shè)計報告正文書寫要求正文一級標(biāo)題：三號宋體加粗二級標(biāo)題：四號宋體加粗正文內(nèi)容：小四宋體圖、表號：5號宋體1、標(biāo)題如上一行，格式同上；內(nèi)容格式同上；2、內(nèi)容為對題目的分析，及如何使用現(xiàn)有技術(shù)解決，分析過程有針對性有實(shí)際內(nèi)容者為佳；3、如有多項(xiàng)，請使用1．2．?作為小標(biāo)題；如果還有子項(xiàng)，請使用12題；1、標(biāo)題如上一行，格式同上；內(nèi)容格式同上；2、對你整個課程課設(shè)過程的體會和總結(jié)，不要太簡單，按照自己實(shí)際完成情況的進(jìn)行闡述，要求半頁以上。三、1.參考文獻(xiàn)至少5個23JavaScript課程設(shè)計報告書學(xué)號日成期績JavaScript課程設(shè)計課程設(shè)計任務(wù)書院系：專業(yè)：班級：學(xué)號：一、課程設(shè)計時間2012年12月24日至2013年1月11日，共計3周。二、課程設(shè)計內(nèi)容使用html+javascript+css完成以下任務(wù)：1、能夠熟練使用css結(jié)合html實(shí)現(xiàn)網(wǎng)頁布局。2、熟練使用文檔對象模型和事件驅(qū)動，能夠很好的實(shí)現(xiàn)web表單的交互式操作。3、熟練使用javascrip中的對象，實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果。三、課程設(shè)計要求1.課程設(shè)計質(zhì)量：貫徹事件驅(qū)動的程序設(shè)計思想，熟練使用javascript中的對象，實(shí)現(xiàn)網(wǎng)頁特效。網(wǎng)頁設(shè)計布局合理，色彩搭配合理，網(wǎng)頁操作方便。設(shè)計過程中充分考慮瀏覽器兼容等問題，并做適當(dāng)處理。代碼應(yīng)適當(dāng)縮進(jìn)，并給出必要的注釋，以增強(qiáng)程序的可讀性。2.課程設(shè)計說明書：課程結(jié)束后，上交課程設(shè)計報告書和相關(guān)的網(wǎng)頁。課程設(shè)計報告書的格式和內(nèi)容參見提供的模板。四、指導(dǎo)教師和學(xué)生簽字指導(dǎo)教師：學(xué)生簽名：五、教師評語：JavaScript課程設(shè)計基于javascript的電子商務(wù)網(wǎng)站開發(fā)摘要關(guān)鍵字：電子購物車、javascript、cookie、IJavaScript課程設(shè)計目錄1二、關(guān)鍵技術(shù)五、課設(shè)總結(jié)六、參考文獻(xiàn)IJavaScript課程設(shè)計一、前言電子商務(wù)網(wǎng)站基本組成部分包括廣告推薦、商品瀏覽、電子購物車、用戶注冊，采用JavaScript言來進(jìn)行的。JavaScript在創(chuàng)建電子商務(wù)網(wǎng)站的過程中如果運(yùn)用得當(dāng)將使網(wǎng)站的效率得到很大的提高，同時也將提高網(wǎng)站的人性化程度。1.能夠熟練使用css結(jié)合html，通過咨詢和考察，最終確定并實(shí)現(xiàn)網(wǎng)頁布局。同時使用動態(tài)樣式表甚至可以讓圖片的切換獲得多種轉(zhuǎn)場效果。2．熟練使用javascript和cookie實(shí)現(xiàn)電子購物車，從而提高網(wǎng)頁訪問速度。3．熟練使用javascript中的內(nèi)建對象最終實(shí)現(xiàn)一個電子商務(wù)網(wǎng)站的雛形。二、關(guān)鍵技術(shù)2.1HTML相關(guān)概念1.HTML語言HTML語言(HypertextMarkupLanguage語言)是一種文本類、解釋執(zhí)行的標(biāo)記語言，它是Internet上用于編寫網(wǎng)頁的主要語言。用HTML編寫的超文本文件稱為HTML文件。在WWWHTML瀏覽器讀取網(wǎng)頁中的HTML代碼，分析其語法結(jié)構(gòu)，然后根據(jù)解釋的結(jié)果顯示網(wǎng)頁內(nèi)容，正是因?yàn)槿绱?，制作網(wǎng)頁的時候，如果不涉及HTML語言，幾乎是不可能的。如圖：WWW三個組成部分1JavaScript課程設(shè)計圖2-1WWW的組成2.HTML文件結(jié)構(gòu)<HTML><HEAD><head>元素出現(xiàn)在文檔的開頭部分。<head>與</head>之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。<title></title><title>元素定義HTML文檔的標(biāo)題。<title>與</title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄。</HEAD><BODY>HTML文件的正文//<body>元素表明是HTML文檔的主體部分。在<body>與</body>之間，通常都會有很多其它元素；這些元素和元素屬性構(gòu)成HTML文檔的主體部分。</BODY></HTML>元素：是HTML語言的基本部分。元素總是成對出現(xiàn)，每一對元素一般都有一個開始的標(biāo)記（如<body></body>起來，并且結(jié)束的標(biāo)記總是在開始的標(biāo)記前加一個斜杠。HTML元素屬性:HTML元素可以有自己的相關(guān)屬性，每一個屬性還可以由我們網(wǎng)頁編制者賦一定的值。元素屬性出現(xiàn)在元素的<>內(nèi)，并且和元素名之間有一個空格分隔；屬性值用“”引起來。2JavaScript課程設(shè)計2.2css1.css簡介級聯(lián)樣式表（CascadingStyleSheet）簡稱“CSS”，它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計。通過設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)簽的顯示屬性。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。2.css文件當(dāng)要在站點(diǎn)上所有或部份的網(wǎng)頁上一致地應(yīng)用相同樣式時，可使用外部樣式表。在一個或多個外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁，便能確保所有網(wǎng)頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表中作一次更改，而該更改會反映到所有與該樣式表相鏈接的網(wǎng)頁上。通常外部樣式表以.css做為文件擴(kuò)展名，例如Mystyles.css。2.3javascript1．javascript語言JavaScript是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)功能，響應(yīng)用戶的各種操作。2.JavaScript嵌入HTML文件JavaScript代碼可直接嵌入HTML文件中，隨網(wǎng)頁一起傳送到客戶端瀏覽器，然后通過瀏覽器來解釋執(zhí)行。1)、JavaScript語句插入HTML的方式：（1)使用<SCRIPT>標(biāo)簽將語句嵌入文檔（2)將JavaScript源文件(.js)鏈接到HTML文檔中2)、JavaScript語句插入HTML的位置：（1)body部分的JS（2)head部分的JS：當(dāng)腳本被調(diào)用、事件被觸發(fā)時執(zhí)行，可保證在調(diào)用函數(shù)前，腳本已載入3JavaScript課程設(shè)計三、總體設(shè)計本系統(tǒng)的實(shí)現(xiàn)采用典型的B/S結(jié)構(gòu)來實(shí)現(xiàn)，不同的客戶端程序通過IE共同訪問WEB服務(wù)器的發(fā)布頁面、WEB服務(wù)器訪問數(shù)據(jù)庫服務(wù)器進(jìn)行數(shù)據(jù)存取，系統(tǒng)結(jié)構(gòu)如圖3-1：INTERNETIISWEBSERVER圖3-1系統(tǒng)結(jié)構(gòu)圖SQLSERVER會員登錄瀏覽商品瀏覽信填寫個人信息提交個人信息購買商品圖3-2軟件結(jié)構(gòu)圖4JavaScript課程設(shè)計在本網(wǎng)站中包括動態(tài)切換廣告條、浮動廣告、中文小日歷、電子時鐘、數(shù)學(xué)計算器、購物車、樹形結(jié)構(gòu)菜單、用戶注冊等，并進(jìn)行一定的美化和整理，基本完成商務(wù)網(wǎng)站的雛形結(jié)構(gòu)。顯示的樣式要求如下：圖3-3商務(wù)網(wǎng)站樣式1.廣告推薦：一般有動態(tài)切換廣告條、浮動圖片和文字滾動等幾種方式，通過動態(tài)樣式表甚至可以讓圖片的切換獲得多達(dá)20多種轉(zhuǎn)場效果。2．商品瀏覽：一般用HTML表格顯示商品的圖片、價格、規(guī)格等信息，大部分網(wǎng)站都采用數(shù)據(jù)庫和動態(tài)腳本語言來自動生成商品的列表。3．電子購物車：電子購物車一般有兩種方式來實(shí)現(xiàn)，一種是在服務(wù)器端存儲每個用戶的每一次電子購物操作，還有一種是采用客戶端cookie來實(shí)現(xiàn)電子購物車，cookie是網(wǎng)站存儲在客戶端的少量數(shù)據(jù)，可以讓網(wǎng)站的不同網(wǎng)頁之間共享相同的變量。4．用戶注冊功能：創(chuàng)建用戶注冊程序，需要輸入的信息包括注冊用戶名、口令、姓名、出生年月日、身份證號碼、住址、郵編。重點(diǎn)體現(xiàn)在格式驗(yàn)證通過客戶端，無須將數(shù)據(jù)提交到服務(wù)器端，從而提高了程序的效率，也可以避免程序提交數(shù)據(jù)的過程中重復(fù)輸入的過程。5.電子時鐘設(shè)置：通過JavaScript模仿液晶顯示板的形式創(chuàng)建一個電子時鐘，要求按照12小時制進(jìn)行時間顯示，如果是上午則顯示AM，如果是下午則顯示PM。6.中文日歷：編寫一個中文小日歷程序，可以在網(wǎng)頁中顯示出當(dāng)前客戶端的日期信息，同時也可以顯示出本月其他日期的星期。必須采用中文星期表示來顯示星期，如果是閏年5JavaScript課程設(shè)計則必須在年份的旁邊注明。7.樹形結(jié)構(gòu)菜單：創(chuàng)建一個樹形菜單，要求可以展開多級分類菜單，在包含內(nèi)容的文件夾前顯示加號圖片，在展開后則顯示減號圖片，對于不包含內(nèi)容的葉節(jié)點(diǎn)則用葉節(jié)點(diǎn)圖片來表示。四、詳細(xì)設(shè)計在整個網(wǎng)站設(shè)計主要負(fù)責(zé)設(shè)計電子購物車功能，電子購物車的實(shí)現(xiàn)主要有兩種方式，服務(wù)器方式和客戶端方式。客戶端的方式要求客戶端支持cookie和JavaScript，由于直接將購買的物品先暫時存放在客戶端的cookie中，速度更快，可以容納更多的用戶。由于現(xiàn)在大部分用戶上網(wǎng)采用的瀏覽器都支持cookie和JavaScript，所以大型的商務(wù)網(wǎng)站在構(gòu)建時都會使用客戶端資源來緩解服務(wù)器的壓力。在本章中介紹的就是這種形式。選擇商品否是是否結(jié)算6JavaScript課程設(shè)計圖4-1電子購物車業(yè)務(wù)流程圖首先編寫cookie的寫入程序和讀取程序。購物車物品信息主要包括兩個屬性,物品名稱，物品價格，在這里不考慮物品的數(shù)量，每次將物品放入購物車就在cookie中添加一條信息，在購物車中可以存放多種物品，而且每種物品可能購買多個，所以每次將物品放入時必須用一個唯一的名稱來定義cookie的名稱。在讀取cookie信息的時候由于系統(tǒng)會一次性把所有可以訪問的cookie讀出來，所以如果需要只讀取指定名稱的cookie值需要通過定位截取指定名稱cookie的值。//寫入貨物名稱和價格functionaddItem(name,price){vari=1;//遍歷cookie中所有名稱的cookie值，直到找到為空的cookie值for(;getCookieValue("item"+i)!="";i++);//將物品的名稱和價格一起放入cookie中document.cookie="item"+i+"="+name+","+price;//設(shè)置當(dāng)前cookie中的items屬性，每次寫入貨物都自動加1document.cookie="items="+i;}//獲取指定名稱的cookie值，注意在這里name也是指cookie名稱而不是商品名稱//返回值為包含物品名稱和價格的一條cookie信息functiongetCookieValue(name){//提取出cookie中的字符串值varc=document.cookie;//提取名稱為name的cookievarbegin=c.indexOf(name);if(begin<0)return("");begin+=name.length+1;7JavaScript課程設(shè)計varend=c.indexOf(";",begin);if(end==-1)end=c.length;return(c.slice(begin,end));}完成購物功能可以直接調(diào)用addItem方法，例如以下是定義一個按鈕的單擊事件為將一個物品信息放入購物車：<inputtype="button"value="加入購物車"onClick="JavaScript:addItem('DISNEY相框',19);">查閱購物車物品信息除了需要將購物車中的物品名稱和單價列出來，還需要加一個將物品從購物車中刪除的功能。實(shí)現(xiàn)刪除物品在這里只需要通過遍歷cookie信息將找到物品的cookie信息設(shè)為空就可以了，顯示物品信息時會自動忽略為空的cookie項(xiàng)，在添加物品時也會自動找為空的cookie項(xiàng)目將購物信息存到空白的cookie項(xiàng)目中，以下是查閱購物車的完整程序：<html><html><head><title>查看購物車</title><scriptlanguage="JavaScript"><!--//將物品從購物車中刪除，在這里name指的是cookie名稱而不是商品名稱functionremoveItem(name){document.cookie=name+"='';";//以下語句為刷新屏幕，功能同history.go(0)document.location=document.location;}//通過cookie名稱獲取cookie值functiongetCookieValue(name){varc=document.cookie;8JavaScript課程設(shè)計varbegin=c.indexOf(name);if(begin<0)return("");begin+=name.length+1;varend=c.indexOf(";",begin);if(end==-1)end=c.length;return(c.slice(begin,end));}//通過cookie名稱獲取物品名稱functiongetItemName(item){varc=getCookieValue(item);if(c){return(c.split(",")[0]);}elsereturn("");}//通過cookie名稱獲取物品價格functiongetItemPrice(item){varc=getCookieValue(item);if(c){}return(c.split(",")[1]);elsereturn("");}//--></script></head>9JavaScript課程設(shè)計<body><b><fontsize="6">查看購物車</font></b><form><tablewidth="100%"border="2"><scriptlanguage="JavaScript"><!--total=0;for(vari=1;i<=parseInt(getCookieValue("items"));i++){if(getItemName("item"+i)!=""&&getItemPrice("item"+i)!=undefined){document.write("<tr><td>");document.write(getItemName("item"+i)+"</td><td>");document.write("RMB"+getItemPrice("item"+i)+"元</td><tdalign='center'>");document.write("<inputtype='button'value='移除'"+"onClick='JavaScript:removeItem(\"item"+i+"\");'>");document.write("</td></tr>");total+=parseFloat(getItemPrice("item"+i));}}document.write('<tr><td><b>合計</b></td>');document.write('<tdcolspan="2"align="left">RMB'+total+'元</td></tr>');//--></script><tr><tdcolspan="3"align="center"><inputtype="button"value="繼續(xù)購物"onClick="JavaScript:document.location='Lab5-2a.htm';"></td></tr></table>10JavaScript課程設(shè)計</form><

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論