javascript课程设计说明书陈凤萍_第1页
javascript课程设计说明书陈凤萍_第2页
javascript课程设计说明书陈凤萍_第3页
javascript课程设计说明书陈凤萍_第4页
javascript课程设计说明书陈凤萍_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

JavaScript课程设计课程设计报告正文书写要求正文一级标题：三号宋体加粗二级标题：四号宋体加粗正文内容：小四宋体图、表号：5号宋体1、标题如上一行，格式同上；内容格式同上；2、内容为对题目的分析，及如何使用现有技术解决，分析过程有针对性有实际内容者为佳；3、如有多项，请使用1．2．„作为小标题；如果还有子项，请使用12题；1、标题如上一行，格式同上；内容格式同上；2、对你整个课程课设过程的体会和总结，不要太简单，按照自己实际完成情况的进行阐述，要求半页以上。三、1.参考文献至少5个23JavaScript课程设计报告书学号日成期绩JavaScript课程设计课程设计任务书院系：专业：班级：学号：一、课程设计时间2012年12月24日至2013年1月11日，共计3周。二、课程设计内容使用html+javascript+css完成以下任务：1、能够熟练使用css结合html实现网页布局。2、熟练使用文档对象模型和事件驱动，能够很好的实现web表单的交互式操作。3、熟练使用javascrip中的对象，实现网页的动态效果。三、课程设计要求1.课程设计质量：贯彻事件驱动的程序设计思想，熟练使用javascript中的对象，实现网页特效。网页设计布局合理，色彩搭配合理，网页操作方便。设计过程中充分考虑浏览器兼容等问题，并做适当处理。代码应适当缩进，并给出必要的注释，以增强程序的可读性。2.课程设计说明书：课程结束后，上交课程设计报告书和相关的网页。课程设计报告书的格式和内容参见提供的模板。四、指导教师和学生签字指导教师：学生签名：五、教师评语：JavaScript课程设计基于javascript的电子商务网站开发摘要关键字：电子购物车、javascript、cookie、IJavaScript课程设计目录1二、关键技术五、课设总结六、参考文献IJavaScript课程设计一、前言电子商务网站基本组成部分包括广告推荐、商品浏览、电子购物车、用户注册，采用JavaScript言来进行的。JavaScript在创建电子商务网站的过程中如果运用得当将使网站的效率得到很大的提高，同时也将提高网站的人性化程度。1.能够熟练使用css结合html，通过咨询和考察，最终确定并实现网页布局。同时使用动态样式表甚至可以让图片的切换获得多种转场效果。2．熟练使用javascript和cookie实现电子购物车，从而提高网页访问速度。3．熟练使用javascript中的内建对象最终实现一个电子商务网站的雏形。二、关键技术2.1HTML相关概念1.HTML语言HTML语言(HypertextMarkupLanguage语言)是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件。在WWWHTML浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容，正是因为如此，制作网页的时候，如果不涉及HTML语言，几乎是不可能的。如图：WWW三个组成部分1JavaScript课程设计图2-1WWW的组成2.HTML文件结构<HTML><HEAD><head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。<title></title><title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。</HEAD><BODY>HTML文件的正文//<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。</BODY></HTML>元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如<body></body>起来，并且结束的标记总是在开始的标记前加一个斜杠。HTML元素属性:HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的<>内，并且和元素名之间有一个空格分隔；属性值用“”引起来。2JavaScript课程设计2.2css1.css简介级联样式表（CascadingStyleSheet）简称“CSS”，它是用来进行网页风格设计。通过设立样式表，可以统一地控制HTML中各标签的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。2.css文件当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以.css做为文件扩展名，例如Mystyles.css。2.3javascript1．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：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚本已载入3JavaScript课程设计三、总体设计本系统的实现采用典型的B/S结构来实现，不同的客户端程序通过IE共同访问WEB服务器的发布页面、WEB服务器访问数据库服务器进行数据存取，系统结构如图3-1：INTERNETIISWEBSERVER图3-1系统结构图SQLSERVER会员登录浏览商品浏览信填写个人信息提交个人信息购买商品图3-2软件结构图4JavaScript课程设计在本网站中包括动态切换广告条、浮动广告、中文小日历、电子时钟、数学计算器、购物车、树形结构菜单、用户注册等，并进行一定的美化和整理，基本完成商务网站的雏形结构。显示的样式要求如下：图3-3商务网站样式1.广告推荐：一般有动态切换广告条、浮动图片和文字滚动等几种方式，通过动态样式表甚至可以让图片的切换获得多达20多种转场效果。2．商品浏览：一般用HTML表格显示商品的图片、价格、规格等信息，大部分网站都采用数据库和动态脚本语言来自动生成商品的列表。3．电子购物车：电子购物车一般有两种方式来实现，一种是在服务器端存储每个用户的每一次电子购物操作，还有一种是采用客户端cookie来实现电子购物车，cookie是网站存储在客户端的少量数据，可以让网站的不同网页之间共享相同的变量。4．用户注册功能：创建用户注册程序，需要输入的信息包括注册用户名、口令、姓名、出生年月日、身份证号码、住址、邮编。重点体现在格式验证通过客户端，无须将数据提交到服务器端，从而提高了程序的效率，也可以避免程序提交数据的过程中重复输入的过程。5.电子时钟设置：通过JavaScript模仿液晶显示板的形式创建一个电子时钟，要求按照12小时制进行时间显示，如果是上午则显示AM，如果是下午则显示PM。6.中文日历：编写一个中文小日历程序，可以在网页中显示出当前客户端的日期信息，同时也可以显示出本月其他日期的星期。必须采用中文星期表示来显示星期，如果是闰年5JavaScript课程设计则必须在年份的旁边注明。7.树形结构菜单：创建一个树形菜单，要求可以展开多级分类菜单，在包含内容的文件夹前显示加号图片，在展开后则显示减号图片，对于不包含内容的叶节点则用叶节点图片来表示。四、详细设计在整个网站设计主要负责设计电子购物车功能，电子购物车的实现主要有两种方式，服务器方式和客户端方式。客户端的方式要求客户端支持cookie和JavaScript，由于直接将购买的物品先暂时存放在客户端的cookie中，速度更快，可以容纳更多的用户。由于现在大部分用户上网采用的浏览器都支持cookie和JavaScript，所以大型的商务网站在构建时都会使用客户端资源来缓解服务器的压力。在本章中介绍的就是这种形式。选择商品否是是否结算6JavaScript课程设计图4-1电子购物车业务流程图首先编写cookie的写入程序和读取程序。购物车物品信息主要包括两个属性,物品名称，物品价格，在这里不考虑物品的数量，每次将物品放入购物车就在cookie中添加一条信息，在购物车中可以存放多种物品，而且每种物品可能购买多个，所以每次将物品放入时必须用一个唯一的名称来定义cookie的名称。在读取cookie信息的时候由于系统会一次性把所有可以访问的cookie读出来，所以如果需要只读取指定名称的cookie值需要通过定位截取指定名称cookie的值。//写入货物名称和价格functionaddItem(name,price){vari=1;//遍历cookie中所有名称的cookie值，直到找到为空的cookie值for(;getCookieValue("item"+i)!="";i++);//将物品的名称和价格一起放入cookie中document.cookie="item"+i+"="+name+","+price;//设置当前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课程设计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><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课程设计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课程设计<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="继续购物"onClick="JavaScript:document.location='Lab5-2a.htm';"></td></tr></table>10JavaScript课程设计</form><

人人文库> 全部分类> 应用文书 > 产品手册

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论