网站开发课程设计基于javascript的电子商务网站开发文档格式.docx
- 文档编号:3476710
- 上传时间:2023-05-01
- 格式:DOCX
- 页数:12
- 大小:101.74KB
网站开发课程设计基于javascript的电子商务网站开发文档格式.docx
《网站开发课程设计基于javascript的电子商务网站开发文档格式.docx》由会员分享,可在线阅读,更多相关《网站开发课程设计基于javascript的电子商务网站开发文档格式.docx(12页珍藏版)》请在冰点文库上搜索。
✧贯彻事件驱动的程序设计思想,熟练使用javascript中的对象,实现网页特效。
✧网页设计布局合理,色彩搭配合理,网页操作方便。
✧设计过程中充分考虑浏览器兼容等问题,并做适当处理。
✧代码应适当缩进,并给出必要的注释,以增强程序的可读性。
2.课程设计说明书:
课程结束后,上交课程设计报告书和相关的网页。
课程设计报告书的格式和内容参见提供的模板。
四、指导教师和学生签字
指导教师:
陈凤萍学生签名:
步巧莲
五、教师评语:
基于javascript的电子商务网站开发
摘要
随着网络信息化的飞速发展,人们的生活学习已经离不开网络。
Javascript是web应用开发不可或缺的利器,作为开发人员,了解和熟悉Javascript是不可或缺的前提之一。
Javascript作为一种具有正式规范的基于标准的语言,在为WEB页面增加交互性、创建整个应用程序方面都有重要地位。
为了方便大家的购物,在网上买东西的越来越多。
电子商务也随之发生。
本为就是为了美观电子商务的美观,制作文字特效效果。
关键字:
文字特效、javascript、html、
一、前言
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网站功能设计
在本网站中包括动态切换广告条、浮动广告、中文小日历、电子时钟、数学计算器、购物车、文字特效、用户注册等,并进行一定的美化和整理,基本完成商务网站的雏形结构。
显示的样式要求如下:
四、详细设计
在整个网站设计主要负责设计文字特效功能,文字特效的实现主要使用JavaScript
语言和Html语言来实现。
4.1主要代码
scriptlanguage="
JavaScript"
>
!
--Begin
text="
电子商务"
;
//显示的文字
color1="
blue"
//文字的颜色
color2="
red"
//转换的颜色
fontsize="
8"
//字体大小
speed=100;
//转换速度(1000=1秒)
i=0;
if(navigator.appName=="
Netscape"
){
document.write("
layerid=avisibility=show>
/layer>
br>
"
);
}
else{
divid=a>
/div>
functionchangeCharColor(){
document.a.document.write("
center>
fontface=arialsize="
+fontsize+"
fontcolor="
+color1+
for(varj=0;
j<
text.length;
j++){
if(j==i){
fontface=arialcolor="
+color2+"
+Text.charAt(i)+"
/font>
document.a.document.write(text.charAt(j));
document.a.document.write('
/center>
'
document.a.document.close();
MicrosoftInternetExplorer"
str="
fontface=arialsize="
+color1+"
if(j==i){
str+="
+text.charAt(i)+"
str+=text.charAt(j);
a.innerHTML=str;
(i==text.length)?
i=0:
i++;
setInterval("
changeCharColor()"
speed);
//End-->
/script>
--
done=0;
step=4
functionanim(yp,yk)
{
if(document.layers)document.layers["
napis"
].top=yp;
elsedocument.all["
].style.top=yp;
if(yp>
yk)step=-4
if(yp<
60)step=4
setTimeout('
anim('
+(yp+step)+'
'
+yk+'
)'
35);
functionstart()
if(done)return
done=1;
if(navigator.appName=="
document.napis.left=innerWidth/2-145;
anim(60,innerHeight-60)
napis.style.left=11;
anim(60,document.body.offsetHeight-60)
//-->
divid="
style="
position:
absolute;
top:
-50;
color:
blue;
font-family:
宋体;
font-size:
9pt;
p>
谢谢您的使用!
/p>
start()'
10);
效果图:
五、课设总结
通过此次课程设计,使我更加扎实的掌握了有关电子商务方面的知识,在设计过程中虽然遇到了一些问题,但经过一次又一次的思考,一遍又一遍的检查终于找出了原因所在,也暴露出了前期我在这方面的知识欠缺和经验不足。
实践出真知,通过亲自动手制作,使我们掌握的知识不再是纸上谈兵。
过而能改,善莫大焉。
在课程设计过程中,我们不断发现错误,不断改正,不断领悟,不断获取。
最终的检测调试环节,本身就是在践行“过而能改,善莫大焉”的知行观。
这次课程设计终于顺利完成了,在设计中遇到了很多问题,最后在老师的指导下,终于游逆而解。
在今后社会的发展和学习实践过程中,一定要不懈努力,不能遇到问题就想到要退缩,一定要不厌其烦的发现问题所在,然后一一进行解决,只有这样,才能成功的做成想做的事,才能在今后的道路上劈荆斩棘,而不是知难而退,那样永远不可能收获成功,收获喜悦,也永远不可能得到社会及他人对你的认可!
六、参考文献
[1]NicholasC.Zakas.JavaScript高级程序设计.北京:
人民邮电出版社出版社,2006年11月.
[2]JavaScript从入门到精通(第二版).清华大学出版社
[3]《Javascript开发王》/张亚飞编著——北京电子工业出版社深入浅出
[4]周晓聪,等.面向对象程序设计与Java语言.程序设计与北京:
机械工业出版社,2004.3
[5]JavaScriptChristianHeilmann著牛海彬等译人民邮电出版社
..
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 开发 课程设计 基于 javascript 电子商务