基于JavaScript班级网站开发之星语心愿

1、JavaScript课程设计潍坊科技学院JavaScript课程设计报 告 书课题 基于JavaScript的班级网站开发 专业班级 中印计算机11级软件1班 学生姓名 于明明 学 号 201101080014 指导教师 陈凤萍 组 长 邵园园 日 期 2012.12.242012.1.11 成 绩 课程设计任务书院系： 中印计算机软件学院 专业： 软件技术 班级：2011级1班 学号：201101080014 一、课程设计时间2012年12月24日至2013年1月11日，共计3周。二、课程设计内容使用html+javascript+css 完成以下任务：1、能够熟练使用css结合html实现

2、网页布局。2、熟练使用文档对象模型和事件驱动，能够很好的实现web表单的交互式操作。3、熟练使用javascrip中的对象，实现网页的动态效果。三、课程设计要求1. 课程设计质量： 贯彻事件驱动的程序设计思想，熟练使用javascript中的对象，实现网页特效。 网页设计布局合理，色彩搭配合理，网页操作方便。 设计过程中充分考虑浏览器兼容等问题，并做适当处理。 代码应适当缩进，并给出必要的注释，以增强程序的可读性。2. 课程设计说明书：课程结束后，上交课程设计报告书和相关的网页。课程设计报告书的格式和内容参见提供的模板。4、 指导教师和学生签字5、指导教师： 学生签名： 五、教师评语：基于ja

3、vascript的班级网站（星语心愿）开发摘要随着经济的发展，社会的进步，计算机越来越深入到我们日常的工作学习及生活中，成为我们日常生活中不可缺少的辅助工具。 随着科学技术的不断提高,计算机科学日渐成熟,其强大的功能已为人们深刻认识,它已进入人类社会的各个领域并发挥着越来越重要的作用。它已经深入到日常工作和生活的方方面面，比如文字处理、信息管理、辅助设计、图形图像处理、教育培训以及游戏娱乐等。然而，虽然现在世界上已经充满了多如牛毛的各种软件，但它们依然不能满足用户的各种特殊需要，人们还不得不开发适合自己特殊需求的软件。以前开发Windows应用软件是专业人员的工作，需要掌握许多专业知识和经过特

4、殊的培训才能胜任。现在不同了，即使你没有接受过严格的程序设计训练，使用JAVA也一样能够开发出功能强大、适合自己特殊需求的应用程序了.关键字：班级网站、星语心愿、javascript、SQL sever目录一、前言11.1课程设计思路11.2课程设计目标1二、关键技术12.1HTML相关概念12.2css32.3javascript3三、总体设计43.1网站总体架构43.2网站软件结构43.3网站功能设计5四、详细设计54.1新年祝福、新年愿望发表流程64.2主要代码6五、课设总结13六、参考文献14一、 前言1.1课程设计思路在2013年来临之际，同学都要回老家陪家人过年，为了方便同学互相联

5、系、为了同学们彼此送上新年祝福和许下新年愿望，特在班级网站上创建新年星语心愿专题，星语心愿基本组成部分包括新年聊天室、新年愿望、新年祝福、新年有趣事、家乡过年习俗，星语心愿专题采用JavaScript实现的大部分是客户端逻辑部分，与数据库打交道基本上是由服务器端脚本语言来进行的。1.2课程设计目标1.能够熟练使用css结合html，通过咨询和考察，最终确定并实现网页布局。同时使用动态样式表甚至可以让图片的切换获得多种转场效果。2熟练使用javascript和cookie实现电子购物车，从而提高网页访问速度。3熟练使用javascript中的内建对象最终实现一个电子商务网站的雏形。二、关键技术2

6、.1HTML相关概念1.HTML语言HTML语言(HypertextMarkupLanguage，中文通常称为超文本置标语言或超文本标记语言)是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件。在WWW上，通常使用的发布语言是HTML，即超文本标识语言。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容，正是因为如此，制作网页的时候，如果不涉及HTML语言，几乎是不可能的。如图：WWW三个组成部分图2-1WWW的组成2.HTML文件结构 元素出现在文档的开头部分。与之间的内

7、容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。 HTML 文件的正文/元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。HTML元素属性:HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间

8、有一个空格分隔；属性值用“”引起来。2.2css1.css简介级联样式表（Cascading Style Sheet）简称“CSS”，它是用来进行网页风格设计。通过设立样式表，可以统一地控制HTML中各标签的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。2.css文件当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页

9、上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。2.3javascript 1javascript语言JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，响应用户的各种操作。2.JavaScript嵌入HTML文件JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。1)、JavaScript 语句插入 HTML的方式：（1)使用 标签将语句嵌入文档（2)将 JavaScript 源文件(.js)链接到

10、HTML 文档中2)、JavaScript 语句插入 HTML的位置：（1)body部分的JS（2)head部分的JS：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚本已载入三、总体设计3.1网站总体架构本系统的实现采用典型的B/S结构来实现，不同的客户端程序通过IE共同访问WEB服务器的发布页面、WEB服务器访问数据库服务器进行数据存取，系统结构如图3-1：INTERNETIIS WEB SERVERSQL SERVER图3-1系统结构图3.2网站软件结构星语心愿同学登录外人浏览新年祝福新年愿望新年聊天室家乡过年习俗新年有趣事图3-2软件结构图3.3网站功能设计在本网站中包括动态切换

11、班级同学家乡过年图片、新年祝福、新年愿望、新年家乡有趣事、新年聊天室、学院最新动态、班级同学登录等，并进行一定的美化和整理，基本完成商务网站的雏形结构。1班级同学家乡过年图片：一般有动态切换图片、浮动图片和文字滚动等几种方式，通过动态样式表甚至可以让图片的切换获得多达20多种转场效果。2新年祝福、新年愿望：一般用HTML表单显示通过班级同学登录和直接发表来填写，网站通过登录或验证码来将新年祝福和新年愿望显示在网页上，同时将内容存入数据库中，通过管理员删除过期的祝福和愿望。3班级同学登录功能：因为这是班级网站的一个专题，同学已在班级网站注册，所以本专题没有注册功能，只可登录，同学可以通过班级网站

12、主页登录，直接进入星语心愿专题进行聊天等，也可以在星语心愿网页登录进行聊天等等，登录功能，需要输入的信息包括用户名、密码、验证码。5.学院最新动态：是通过管理员将学院的最新动态发表专题中，方便同学们了解学院的动态，学院动态将字幕滚动来显示。6.新年聊天室：新年聊天室必须是同学登录后方可使用，管理员将在班级注册的同学的信息整理建立一个小型聊天室。7.新年有趣事、同学家乡过年图片：同学登录后将图片或者文字发表专题中。四、详细设计在整个网站专题设计的实现主要有两种方式，服务器方式和客户端方式。客户端的方式要求客户端支持cookie和JavaScript，。由于现在大部分用户上网采用的浏览器都支持co

13、okie和JavaScript，所以大型的商务网站在构建时都会使用客户端资源来缓解服务器的压力。同学登录4.1新年祝福、新年愿望发表流程登录是否成功浏览者新年祝福、愿望输入验证码是否正确发表成功图4-1新年祝福、愿望流程图4.2主要代码 4.2.1系统登录系统登录流程图如表4-2登录班级管理员登录班级同学登录陆表4-2系统登录流程图功能：该模块是提供管理员和同学的登录，只有输入正确的用户名和密码才能进入系统。系统登录模块核心代码：/*取得帐号密码信息*/ string userName = this.txtName.Text; string password = this.txtPwd.Tex

14、t; string identify = this.Identify.SelectedValue; if (管理员 = identify) AdminModel adminModel = new AdminModel(); adminModel.AdminUsername = userName; adminModel.AdminPassword = password; AdminLogic adminLogic = new AdminLogic(); /*如果管理员帐号信息正确*/ if (adminLogic.IsExistAdminInfo(adminModel) Sessionadmin

15、Flag = true; SessionadminUsername = userName; Response.Redirect(Admin/index.aspx); /*如果管理员帐号信息不正确*/ else Response.Write(alert(+ adminLogic.ErrMessage + );); else /*如果同学帐号信息正确*/ EmployeeLogic employeeLogic = new EmployeeLogic(); if(employeeLogic.CheckLogin(userName,password) SessionemployeeFlag = tru

16、e; SessionemployeeNo = userName; Response.Redirect(Employee/index.aspx); /*如果同学帐号信息不正确*/ else Response.Write(alert(+ employeeLogic.ErrMessage + );); 4.2.2专题源代码星语心愿window.onload = function ()gggd();/执行学院动态滚动效果tpgundong();/家乡过年味图排尿滚动效果piclun();/执行图片轮; 用户名    密  码    星语心愿

17、首页 星语心愿 新年祝福 新年愿望 新年聊天室 新年有趣事 家乡过年味 学院动态 学院动态 潍坊科技学院关于2013年春节放假安排 潍坊科技学院关于期终考试安排 2013年1日09 新年祝福 新年祝福 班长小裴子：哈哈！蛇年到了小裴子祝大家新年快乐！开学都快点来啊 杨波：新年快乐！ 新年聊天室 新年聊天室 班长小裴子：祝大家新年快乐！新年新气象，祝大家在新的一年里心想事成，万事如意 杨波：新年快乐！ 王超：新年快乐！新年快乐 邵园园：多俗啊，不过过年了吗也该说一声新年快乐！软1的亲们过年好啊 新年愿望 新年愿望 袁振：希望越来越帅啊，亲们新年快乐苟祥明：希望明年自考本科顺利通过，同时希望11软

18、1 天天快乐 家乡过年味 1 2 3 4 新年有趣事 12012-02-10晴暖车站，记录寿光汽车站感动瞬间 22012-02-10走，赶大集买年货去 友情链接 百度 潍坊科技学院 中印计算机软件学院 淘宝 中国蔬菜科技博览会 中国寿光 潍坊科技学院  11级软件技术1班        班级站长:裴星宇      QQ：1016560516        ICP备案编号:鲁ICP备10001888号 五、课设总结经过了近半个月的课程设计，让我了解了在这个科技突飞猛进的时代，光靠大学里所学习的知识是远远不够的，必须要我们的实践去不断的深化知识，这样才能更好的掌握这门知识。