javascript课程设计Word格式.docx
《javascript课程设计Word格式.docx》由会员分享，可在线阅读，更多相关《javascript课程设计Word格式.docx（14页珍藏版）》请在冰豆网上搜索。
课程设计任务书
院系：
专业：
班级：
学号：
一、课程设计时间
2012年12月24日至2013年1月11日，共计3周。
二、课程设计内容
使用html+javascript+css完成以下任务：
1、能够熟练使用css结合html实现网页布局。
2、熟练使用文档对象模型和事件驱动，能够很好的实现web表单的交互式操作。
3、熟练使用javascrip中的对象，实现网页的动态效果。
三、课程设计要求
1.课程设计质量：
✧贯彻事件驱动的程序设计思想，熟练使用javascript中的对象，实现网页特效。
✧网页设计布局合理，色彩搭配合理，网页操作方便。
✧设计过程中充分考虑浏览器兼容等问题，并做适当处理。
✧代码应适当缩进，并给出必要的注释，以增强程序的可读性。
2.课程设计说明书：
课程结束后，上交课程设计报告书和相关的网页。
课程设计报告书的格式和内容参见提供的模板。
四、指导教师和学生签字
指导教师：
学生签名：
五、教师评语：
基于javascript的电子商务网站开发
摘要
关键字：
电子购物车、javascript、cookie、
一、前言
1.1课程设计思路
电子商务网站基本组成部分包括广告推荐、商品浏览、电子购物车、用户注册，采用JavaScript实现的大部分是客户端逻辑部分，与数据库打交道基本上是由服务器端脚本语言来进行的。
JavaScript在创建电子商务网站的过程中如果运用得当将使网站的效率得到很大的提高，同时也将提高网站的人性化程度。
1.2课程设计目标
1.能够熟练使用css结合html，通过咨询和考察，最终确定并实现网页布局。
同时使用动态样式表甚至可以让图片的切换获得多种转场效果。
2．熟练使用javascript和cookie实现电子购物车，从而提高网页访问速度。
3．熟练使用javascript中的内建对象最终实现一个电子商务网站的雏形。
二、关键技术
2.1HTML相关概念
1.HTML语言
HTML语言（Hypertext
Markup
Language，中文通常称为超文本置标语言或超文本标记语言）是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。
用HTML编写的超文本文件称为HTML文件。
在WWW上，通常使用的发布语言是HTML，即超文本标识语言。
当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容，正是因为如此，制作网页的时候，如果不涉及HTML语言，几乎是不可能的。
如图：
WWW三个组成部分
图2-1WWW的组成
2.HTML文件结构
<
HTML>
HEAD>
<
head>
元素出现在文档的开头部分。
与<
/head>
之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
title>
/title>
元素定义HTML文档的标题。
之间的内容将显示在浏览器窗口的标题栏。
/HEAD>
BODY>
HTML文件的正文//<
body>
元素表明是HTML文档的主体部分。
在<
/body>
之间，通常都会有很多其它元素；
这些元素和元素属性构成HTML文档的主体部分。
/BODY>
/HTML>
元素：
是HTML语言的基本部分。
元素总是成对出现，每一对元素一般都有一个开始的标记（如<
），也有一个结束的标记（如<
）。
元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。
HTML元素属性:
HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。
元素属性出现在元素的<
>
内，并且和元素名之间有一个空格分隔；
属性值用“”引起来。
2.2css
1.css简介
级联样式表（CascadingStyleSheet）简称“CSS”，它是用来进行网页风格设计。
通过设立样式表，可以统一地控制HTML中各标签的显示属性。
级联样式表可以使人更能有效地控制网页外观。
使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。
2.css文件
当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。
在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。
如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页上。
通常外部样式表以.css做为文件扩展名，例如Mystyles.css。
2.3javascript
1．javascript语言
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。
同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，响应用户的各种操作。
2.JavaScript嵌入HTML文件
JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。
1）、JavaScript语句插入HTML的方式：
（1）使用<
SCRIPT>
标签将语句嵌入文档
（2）将JavaScript源文件（.js）链接到HTML文档中
2）、JavaScript语句插入HTML的位置：
（1）body部分的JS
（2）head部分的JS：
当脚本被调用、事件被触发时执行，可保证在调用函数前，脚本已载入
三、总体设计
3.1网站总体架构
本系统的实现采用典型的B/S结构来实现，不同的客户端程序通过IE共同访问WEB服务器的发布页面、WEB服务器访问数据库服务器进行数据存取，系统结构如图3-1：
图3-1系统结构图
3.2网站软件结构
图3-2软件结构图
3.3网站功能设计
在本网站中包括动态切换广告条、浮动广告、中文小日历、电子时钟、数学计算器、购物车、树形结构菜单、用户注册等，并进行一定的美化和整理，基本完成商务网站的雏形结构。
显示的样式要求如下：
图33商务网站样式
1.广告推荐：
一般有动态切换广告条、浮动图片和文字滚动等几种方式，通过动态样式表甚至可以让图片的切换获得多达20多种转场效果。
2．商品浏览：
一般用HTML表格显示商品的图片、价格、规格等信息，大部分网站都采用数据库和动态脚本语言来自动生成商品的列表。
3．电子购物车：
电子购物车一般有两种方式来实现，一种是在服务器端存储每个用户的每一次电子购物操作，还有一种是采用客户端cookie来实现电子购物车，cookie是网站存储在客户端的少量数据，可以让网站的不同网页之间共享相同的变量。
4．用户注册功能：
创建用户注册程序，需要输入的信息包括注册用户名、口令、姓名、出生年月日、身份证号码、住址、邮编。
重点体现在格式验证通过客户端，无须将数据提交到服务器端，从而提高了程序的效率，也可以避免程序提交数据的过程中重复输入的过程。
5.电子时钟设置：
通过JavaScript模仿液晶显示板的形式创建一个电子时钟，要求按照12小时制进行时间显示，如果是上午则显示AM，如果是下午则显示PM。
6.中文日历：
编写一个中文小日历程序，可以在网页中显示出当前客户端的日期信息，同时也可以显示出本月其他日期的星期。
必须采用中文星期表示来显示星期，如果是闰年则必须在年份的旁边注明。
7.树形结构菜单：
创建一个树形菜单，要求可以展开多级分类菜单，在包含内容的文件夹前显示加号图片，在展开后则显示减号图片，对于不包含内容的叶节点则用叶节点图片来表示。
四、详细设计
在整个网站设计主要负责设计电子购物车功能，电子购物车的实现主要有两种方式，服务器方式和客户端方式。
客户端的方式要求客户端支持cookie和JavaScript，由于直接将购买的物品先暂时存放在客户端的cookie中，速度更快，可以容纳更多的用户。
由于现在大部分用户上网采用的浏览器都支持cookie和JavaScript，所以大型的商务网站在构建时都会使用客户端资源来缓解服务器的压力。
在本章中介绍的就是这种形式。
4.1电子购物车业务流程
图4-1电子购物车业务流程图
4.2主要代码
首先编写cookie的写入程序和读取程序。
购物车物品信息主要包括两个属性,物品名称，物品价格，在这里不考虑物品的数量，每次将物品放入购物车就在cookie中添加一条信息，在购物车中可以存放多种物品，而且每种物品可能购买多个，所以每次将物品放入时必须用一个唯一的名称来定义cookie的名称。
在读取cookie信息的时候由于系统会一次性把所有可以访问的cookie读出来，所以如果需要只读取指定名称的cookie值需要通过定位截取指定名称cookie的值。
//写入货物名称和价格
functionaddItem（name,price）{
vari=1;
//遍历cookie中所有名称的cookie值，直到找到为空的cookie值
for（;
getCookieValue（"
item"
+i）!
="
"
;
i++）;
//将物品的名称和价格一起放入cookie中
document.cookie="
+i+"
="
+name+"
"
+price;
//设置当前cookie中的items属性，每次写入货物都自动加1
items="
+i;
}
//获取指定名称的cookie值，注意在这里name也是指cookie名称而不是商品名称
//返回值为包含物品名称和价格的一条cookie信息
functiongetCookieValue（name）{
//提取出cookie中的字符串值
varc=document.cookie;
//提取名称为name的cookie
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））;
完成购物功能可以直接调用addItem方法，例如以下是定义一个按钮的单击事件为将一个物品信息放入购物车：
inputtype="
button"
value="
加入购物车"
onClick="
JavaScript:
addItem（'
DISNEY相框'
19）;
>
查阅购物车物品信息除了需要将购物车中的物品名称和单价列出来，还需要加一个将物品从购物车中删除的功能。
实现删除物品在这里只需要通过遍历cookie信息将找到物品的cookie信息设为空就可以了，显示物品信息时会自动忽略为空的cookie项，在添加物品时也会自动找为空的cookie项目将购物信息存到空白的cookie项目中，以下是查阅购物车的完整程序：
html>
查看购物车<
scriptlanguage="
JavaScript"
!
--
//将物品从购物车中删除，在这里name指的是cookie名称而不是商品名称
functionremoveItem（name）
{
document.cookie=name+"
='
'
//以下语句为刷新屏幕，功能同history.go（0）
document.location=document.location;
}
//通过cookie名称获取cookie值
functiongetCookieValue（name）
{
varc=document.cookie;
varbegin=c.indexOf（name）;
if（begin<
begin+=name.length+1;
varend=c.indexOf（"
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）{
）[1]）;
//-->
/script>
b>
fontsize="
6"
/font>
/b>
form>
tablewidth="
100%"
border="
2"
total=0;
for（vari=1;
i<
=parseInt（getCookieValue（"
items"
））;
i++）{
if（getItemName（"
&
&
getItemPrice（"
=undefined）{
document.write（"
tr>
td>
document.write（getItemName（"
+i）+"
/td>
document.write（"
RMB"
+getItemPrice（"
+i）+
"
元<
tdalign='
center'
inputtype='
button'
value='
移除'
"
+
onClick='
removeItem（\"
\"
/tr>
total+=parseFloat（getItemPrice（"
+i））;
}
document.write（'
合计<
）;
tdcolspan="
align="
left"
RMB'
+total+'
3"
center"
继续购物"
document.location='
Lab5-2a.htm'
/table>
/form>
/html>
运行结果如下：
图42购物商店运行结果
在任意商品名称后单击加入购物车按钮，然后按查看购物车按钮可以列出购物车内的物品并计算总价格。
图4-3查看购物车
五、课设总结
这套程序经过我们小组的一起努力终于完成，通过这次程序设计，我感慨颇多，首先认识到集体力量的伟大，没有集体智慧的结合，就不会有我们这套系统的运行，其次，我感觉这次课程设计不再局限于书本知识，而是让我们学以致用，是理论与实际相结合的产物。
通过这次课程设计，我也感觉到自己的水平还有待提高。
我们有很多灵感和创意非常好，但因为技术上的缺陷却无法更好的展示它。
经常说创意大于技术，但如果没有技术的支持，再好的创意也是纸上谈兵，毫无用处。
所以我们距离制造出自己想要的作品还有很长的路要走，要多学多看，领悟优秀作品的思想，启发自己的灵感，最重要的，提高技术。
只有掌握了技术，自己才可以变被动为主动，制造出自己理想中的作品。
在课程设计过程中，我们不断发现错误，不断改正，不断领悟，不断获取。
最终的检测调试环节，本身就是在践行“过而能改，善莫大焉”的知行观。
这次课程设计终于顺利完成了，在设计中遇到了很多问题，最后在老师的指导下，终于游逆而解。
课程设计诚然是一门专业课，给我很多专业知识以及专业技能上的提升，同时又是一门讲道课，一门辩思课，给了我许多道，给了我很多思，给了我莫大的空间。
同时，设计让我感触很深。
使我对抽象的理论有了具体的认识.。
我认为，在这学期的实验中，不仅培养了独立思考、动手操作的能力，在各种其它能力上也都有了提高。
更重要的是，在实验课上，我们学会了很多学习的方法。
而这是日后最实用的，真的是受益匪浅。
六、参考文献
[1]NicholasC.Zakas．JavaScript高级程序设计．北京：
人民邮电出版社出版社，2006年11月．
参考文献至少5个，格式同上。
升级会员 