搜索
JavaScript课程设计潍坊科技学院JavaScript课程设计报告书课题基于JavaScript的班级网站开发专业班级中印计算机11级软件1班学生姓名于明明学号201101080014指导教师陈凤萍组长邵园园日期2012.12.24~2012.1.11成绩JavaScript课程设计课程设计任务书院系：中印计算机软件学院专业：软件技术班级：2011级1班学号：201101080014一、课程设计时间2012年12月24日至2013年1月11日，共计3周。二、课程设计内容使用html+javascript+css完成以下任务：1、能够熟练使用css结合html实现网页布局。2、熟练使用文档对象模型和事件驱动，能够很好的实现web表单的交互式操作。3、熟练使用javascrip中的对象，实现网页的动态效果。三、课程设计要求1.课程设计质量：贯彻事件驱动的程序设计思想，熟练使用javascript中的对象，实现网页特效。网页设计布局合理，色彩搭配合理，网页操作方便。设计过程中充分考虑浏览器兼容等问题，并做适当处理。代码应适当缩进，并给出必要的注释，以增强程序的可读性。2.课程设计说明书：课程结束后，上交课程设计报告书和相关的网页。课程设计报告书的格式和内容参见提供的模板。四、指导教师和学生签字五、指导教师：学生签名：五、教师评语：JavaScript课程设计基于javascript的班级网站（星语心愿）开发摘要随着经济的发展，社会的进步，计算机越来越深入到我们日常的工作学习及生活中，成为我们日常生活中不可缺少的辅助工具。随着科学技术的不断提高,计算机科学日渐成熟,其强大的功能已为人们深刻认识,它已进入人类社会的各个领域并发挥着越来越重要的作用。它已经深入到日常工作和生活的方方面面，比如文字处理、信息管理、辅助设计、图形图像处理、教育培训以及游戏娱乐等。然而，虽然现在世界上已经充满了多如牛毛的各种软件，但它们依然不能满足用户的各种特殊需要，人们还不得不开发适合自己特殊需求的软件。以前开发Windows应用软件是专业人员的工作，需要掌握许多专业知识和经过特殊的培训才能胜任。现在不同了，即使你没有接受过严格的程序设计训练，使用JAVA也一样能够开发出功能强大、适合自己特殊需求的应用程序了.关键字：班级网站、星语心愿、javascript、SQLseverJavaScript课程设计目录一、前言11.1课程设计思路.....................................11.2课程设计目标.....................................1二、关键技术............................................12.1HTML相关概念.....................................12.2css...............................................32.3javascript........................................3三、总体设计..........................................43.1网站总体架构.....................................43.2网站软件结构.....................................43.3网站功能设计.....................................5四、详细设计..........................................54.1新年祝福、新年愿望发表流程.......................64.2主要代码.........................................6五、课设总结...........................................13六、参考文献...........................................14JavaScript课程设计1一、前言1.1课程设计思路在2013年来临之际，同学都要回老家陪家人过年，为了方便同学互相联系、为了同学们彼此送上新年祝福和许下新年愿望，特在班级网站上创建新年星语心愿专题，星语心愿基本组成部分包括新年聊天室、新年愿望、新年祝福、新年有趣事、家乡过年习俗，星语心愿专题采用JavaScript实现的大部分是客户端逻辑部分，与数据库打交道基本上是由服务器端脚本语言来进行的。1.2课程设计目标1.能够熟练使用css结合html，通过咨询和考察，最终确定并实现网页布局。同时使用动态样式表甚至可以让图片的切换获得多种转场效果。2．熟练使用javascript和cookie实现电子购物车，从而提高网页访问速度。3．熟练使用javascript中的内建对象最终实现一个电子商务网站的雏形。二、关键技术2.1HTML相关概念1.HTML语言HTML语言(HypertextMarkupLanguage，中文通常称为超文本置标语言或超文本标记语言)是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件。在上，通常使用的发布语言是HTML，即超文本标识语言。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容，正是因为如此，制作网页的时候，如果不涉及HTML语言，几乎是不可能的。如图：元素出现在文档的开头部分。head与/head之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。title/titletitle元素定义HTML文档的标题。title与/title之间的内容将显示在浏览器窗口的标题栏。/HEADBODYHTML文件的正文//body元素表明是HTML文档的主体部分。在body与/body之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。/BODY/HTML元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如body），也有一个结束的标记（如/body）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。HTML元素属性:HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性JavaScript课程设计3值用“”引起来。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：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚JavaScript课程设计4本已载入三、总体设计3.1网站总体架构本系统的实现采用典型的B/S结构来实现，不同的客户端程序通过IE共同访问WEB服务器的发布页面、WEB服务器访问数据库服务器进行数据存取，系统结构如图3-1：图3-1系统结构图3.2网站软件结构INTERNETIISWEBSERVERSQLSERVER星语心愿同学登录外人浏览新年祝福新年愿望新年聊天室家乡过年习俗新年有趣事JavaScript课程设计5图3-2软件结构图3.3网站功能设计在本网站中包括动态切换班级同学家乡过年图片、新年祝福、新年愿望、新年家乡有趣事、新年聊天室、学院最新动态、班级同学登录等，并进行一定的美化和整理，基本完成商务网站的雏形结构。1班级同学家乡过年图片：一般有动态切换图片、浮动图片和文字滚动等几种方式，通过动态样式表甚至可以让图片的切换获得多达20多种转场效果。2．新年祝福、新年愿望：一般用HTML表单显示通过班级同学登录和直接发表来填写，网站通过登录或验证码来将新年祝福和新年愿望显示在网页上，同时将内容存入数据库中，通过管理员删除过期的祝福和愿望。3．班级同学登录功能：因为这是班级网站的一个专题，同学已在班级网站注册，所以本专题没有注册功能，只可登录，同学可以通过班级网站主页登录，直接进入星语心愿专题进行聊天等，也可以在星语心愿网页登录进行聊天等等，登录功能，需要输入的信息包括用户名、密码、验证码。5.学院最新动态：是通过管理员将学院的最新动态发表专题中，方便同学们了解学院的动态，学院动态将字幕滚动来显示。6.新年聊天室：新年聊天室必须是同学登录后方可使用，管理员将在班级注册的同学的信息整理建立一个小型聊天室。7.新年有趣事、同学家乡过年图片：同学登录后将图片或者文字发表专题中。四、详细设计在整个网站专题设计的实现主要有两种方式，服务器方式和客户端方式。客户端的方式要求客户端支持cookie和JavaScript，。由于现在大部分用户上网采用的浏览器都支持cookie和JavaScript，所以大型的商务网站在构建时都会使用客户端资源来缓解服务器的压力。JavaScript课程设计64.1新年祝福、新年愿望发表流程图4-1新年祝福、愿望流程图4.2主要代码4.2.1系统登录系统登录流程图如表4-2表4-2系统登录流程图功能：该模块是提供管理员和同学的登录，只有输入正确的用户名和密码才能进入系同学登录登录是否成功新年祝福、愿望输入验证码是否正确发表成功浏览者登录班级管理员登录班级同学登录陆JavaScript课程设计7统。系统登录模块核心代码：/*取得帐号密码信息*/stringuserName=this.txtName.Text;stringpassword=this.txtPwd.Text;stringidentify=this.Identify.SelectedValue;if(管理员==identify){AdminModeladminModel=newAdminModel();adminModel.AdminUsername=userName;adminModel.AdminPassword=password;AdminLogicadminLogic=newAdminLogic();/*如果管理员帐号信息正确*/if(adminLogic.IsExistAdminInfo(adminModel)){Session[adminFlag]=true;Se