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

潍坊科技学院 JavaScriptJavaScript 课程设计课程设计 报报 告告 书书 课题课题 基于 JavaScript 的班级网站开发 专业班级 中印计算机 11 级软件 1 班 学生姓名 于明明 学 号 201101080014 指导教师 陈凤萍 组 长 邵园园 日 期 2012.12.242012.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. 课程设计说明书： 课程结束后，上交课程设计报告书和相关的网页。课程设计报告书的格式和内容 参见提供的模板。 4 4、指导教师和学生签字指导教师和学生签字 5 5、 指导教师：指导教师： 学生签名：学生签名： 五、教师评语：五、教师评语： 2 基于基于 javascriptjavascript 的班级网站（星语心愿）开发的班级网站（星语心愿）开发 摘要摘要 随着经济的发展，社会的进步，计算机越来越深入到我们日常的工作学习及生活中， 成为我们日常生活中不可缺少的辅助工具。 随着科学技术的不断提高,计算机科学日渐 成熟,其强大的功能已为人们深刻认识,它已进入人类社会的各个领域并发挥着越来越重 要的作用。它已经深入到日常工作和生活的方方面面，比如文字处理、信息管理、辅助 设计、图形图像处理、教育培训以及游戏娱乐等。然而，虽然现在世界上已经充满了多 如牛毛的各种软件，但它们依然不能满足用户的各种特殊需要，人们还不得不开发适合 自己特殊需求的软件。以前开发 Windows 应用软件是专业人员的工作，需要掌握许多专 业知识和经过特殊的培训才能胜任。现在不同了，即使你没有接受过严格的程序设计训 练，使用 JAVA 也一样能够开发出功能强大、适合自己特殊需求的应用程序了. 关键字：班级网站、星语心愿、关键字：班级网站、星语心愿、javascript、SQL sever 目录目录 一、前言1 1.1 课程设计思路 1 1.2 课程设计目标 1 二、关键技术.1 2.1HTML 相关概念 1 2.2css3 2.3javascript.3 三、总体设计.4 3.1 网站总体架构 4 3.2 网站软件结构 4 3.3 网站功能设计 5 四、详细设计.5 4.1 新年祝福、新年愿望发表流程 6 4.2 主要代码 6 五、课设总结13 六、参考文献14 0 一、一、前言前言 1.11.1 课程设计思路课程设计思路 在 2013 年来临之际，同学都要回老家陪家人过年，为了方便同学互相联系、为了同 学们彼此送上新年祝福和许下新年愿望，特在班级网站上创建新年星语心愿专题，星语 心愿基本组成部分包括新年聊天室、新年愿望、新年祝福、新年有趣事、家乡过年习俗， 星语心愿专题采用 JavaScript 实现的大部分是客户端逻辑部分，与数据库打交道基本上 是由服务器端脚本语言来进行的。 1.21.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 三个组成部分 JavaScript 课程设计课程设计 1 图 2-1WWW 的组成 2.HTML 文件结构 元素出现在文档的开头部分。与之间的内容不会在浏 览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义 HTML 文档的标题。与之间的内 容将显示在浏览器窗口的标题栏。 HTML 文件的正文/元素表明是 HTML 文档的主体部分。在与 之间，通常都会有很多其它元素；这些元素和元素属性构成 HTML 文档的主体部分。 元素：是 HTML 语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始 的标记（如） ，也有一个结束的标记（如） 。元素的标记要用一对尖括号括 起来，并且结束的标记总是在开始的标记前加一个斜杠。 2 HTML 元素属性:HTML 元素可以有自己的相关属性，每一个属性还可以由我们网页编 制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属 性值用“”引起来。 2.2css 1.css 简介 级联样式表（Cascading Style Sheet）简称“CSS” ，它是用来进行网页风格设计。 通过设立样式表，可以统一地控制 HTML 中各标签的显示属性。级联样式表可以使人更能 有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创 建特殊效果的能力。 2.css 文件 当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在 一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观 的一致性。如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映 到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。 2.3javascript 1javascript 语言 JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时 也是一种广泛用于客户端 Web 开发的脚本语言，常用来给 HTML 网页添加动态功能，响应 用户的各种操作。 2.JavaScript 嵌入 HTML 文件 JavaScript 代码可直接嵌入 HTML 文件中，随网页一起传送到客户端浏览器，然后通 过浏览器来解释执行。 1)、JavaScript 语句插入 HTML 的方式： （1)使用 标签将语句嵌入文档 （2)将 JavaScript 源文件(.js)链接到 HTML 文档中 2)、JavaScript 语句插入 HTML 的位置： JavaScript 课程设计课程设计 3 （1)body 部分的 JS （2)head 部分的 JS：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚 本已载入 三、总体设计三、总体设计 3.13.1 网站总体架构网站总体架构 本系统的实现采用典型的 B/S 结构来实现，不同的客户端程序通过 IE 共同访问 WEB 服务器的发布页面、WEB 服务器访问数据库服务器进行数据存取，系统结构如图 3-1： 图 3-1 系统结构图 3.23.2 网站软件结构网站软件结构 INTERNET IIS WEB SERVERSQL SERVER 星语心愿星语心愿 同学登录同学登录外人浏览外人浏览 4 图 3-2 软件结构图 3.33.3 网站功能设计网站功能设计 在本网站中包括动态切换班级同学家乡过年图片、新年祝福、新年愿望、新年家乡 有趣事、新年聊天室、学院最新动态、班级同学登录等，并进行一定的美化和整理，基 本完成商务网站的雏形结构。 1 班级同学家乡过年图片：一般有动态切换图片、浮动图片和文字滚动等几种方式， 通过动态样式表甚至可以让图片的切换获得多达 20 多种转场效果。 2新年祝福、新年愿望：一般用 HTML 表单显示通过班级同学登录和直接发表来填 写，网站通过登录或验证码来将新年祝福和新年愿望显示在网页上，同时将内容存入数 据库中，通过管理员删除过期的祝福和愿望。 3班级同学登录功能：因为这是班级网站的一个专题，同学已在班级网站注册，所 以本专题没有注册功能，只可登录，同学可以通过班级网站主页登录，直接进入星语心 愿专题进行聊天等，也可以在星语心愿网页登录进行聊天等等，登录功能，需要输入的 信息包括用户名、密码、验证码。 5.学院最新动态：是通过管理员将学院的最新动态发表专题中，方便同学们了解学 院的动态，学院动态将字幕滚动来显示。 6.新年聊天室：新年聊天室必须是同学登录后方可使用，管理员将在班级注册的同学的 信息整理建立一个小型聊天室。 7.新年有趣事、同学家乡过年图片：同学登录后将图片或者文字发表专题中。 四、详细设计四、详细设计 在整个网站专题设计的实现主要有两种方式，服务器方式和客户端方式。客户端的 方式要求客户端支持 cookie 和 JavaScript， 。由于现在大部分用户上网采用的浏览器都 支持 cookie 和 JavaScript，所以大型的商务网站在构建时都会使用客户端资源来缓解服 务器的压力。 新年祝福新年祝福 新年愿望新年愿望 新年聊天室新年聊天室 家乡过年习俗家乡过年习俗 新年有趣事新年有趣事 JavaScript 课程设计课程设计 5 4.14.1 新年祝福、新年愿望发表流程新年祝福、新年愿望发表流程 图 4-1 新年祝福、愿望流程图 4.24.2 主要代码主要代码 4.2.1 系统登录系统登录 系统登录流程图如表 4-2 表表 4-2 系统登录流程图系统登录流程图 功能：该模块是提供管理员和同学的登录，只有输入正确的用户名和密码才能进入 同学登录同学登录 登录是否成功登录是否成功 新年祝福、愿望新年祝福、愿望 输入验证码输入验证码 是否正确是否正确 发表成功发表成功 浏览者 登录登录 班级管理员登录班级管理员登录 班级同学登录班级同学登录 陆 6 系统。 系统登录模块核心代码： /*取得帐号密码信息*/ string userName = this.txtName.Text; string password = this.txtPwd.Text; 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) Session“adminFlag“ = true; Session“adminUsername“ = userName; Response.Redirect(“Admin/index.aspx“); /*如果管理员帐号信息不正确*/ else Response.Write(“alert(“+ adminLogic.ErrMessage + “);“); else /*如果同学帐号信息正确*/ EmployeeLogic employeeLogic = new EmployeeLogic(); if(employeeLogic.CheckLogin(userName,password) Session“employeeFlag“ = true; Session“employeeNo“ = userName; JavaScript 课程设计课程设计 7 Response.Redirect(“Employee/index.aspx“); /*如果同学帐号信息不正确*/ else Response.Write(“alert(“+ employeeLogic.ErrMessage + “);“); 4.2.2 专题源代码专题源代码 星语心愿 window.onload = function () gggd();/执行学院动态滚动效果 tpgundong();/家乡过年味图排尿滚动效果 piclun();/执行图片轮 ; 8 用户名 密 码 星语心愿 首页 星语心愿 新年祝福 新年愿望 新年聊天室 新年有趣事 家乡过年味 学院动态 学院动态 潍坊科技学院关于 2013 年春节放假安排 潍坊科技学院关于期终考试安排 2013 年 1 日 09 JavaScript 课程设计课程设计 9 新年祝福 新年祝福 班长小裴子：哈哈！蛇年到了小裴子祝大家新年快乐！开学都快点来啊 杨波：新年快乐！ 新年聊天室 新年聊天室 班长小裴子：祝大家新年快乐！新年新气象，祝大家在新的一年里心想事成，万事如 意 杨波：新年快乐！ 王超：新年快乐！新年快乐 邵园园：多俗啊，不过过年了吗也该说一声新年快乐！软 1 的亲们过年好啊 新年愿望 新年愿望 袁振：希望越来越帅啊，亲们新年快乐 苟祥明：希望明年自考本科顺利通过，同时希望 11 软 1 天天快乐 10 家乡过年味 1 2 3 4 新年有趣事 12012-02-10晴暖车站，记录寿光汽车站感动瞬间 22012-02-10走，赶大集买年货去 JavaScript 课程设计课程设计 11 友情链接 百度 潍坊科技学院 中印计算机软件学院 淘宝 中国蔬菜科技博览会 中国寿光 潍坊科技学院 11 级软件技术 1 班 班级站长:裴星宇 QQ：1016560516 ICP 备案编号: 鲁 ICP 备 10001888 号 12 五、课设总结五、课设总结 经过了近半个月的课程设计，让我了解了在这个科技突飞猛进的时代，光靠大学里 所学习的知识是远远不够的，必须要我们的实践去不断的深化知识，这样才能更