基于javascript班级网站开发之班级首页

潍坊科技学院 JavaScriptJavaScript 课程设计课程设计 报报 告告 书书 课题课题 基于 JavaScript 的班级网站开发 专业班级 ： 11 软 1 学生姓名 ：邵园园 学 号 ：201101080029 指导教师 ：陈凤萍 小组成员 ：邵园园、刘娜、苟祥明、石妍慧 于明明、王超、孙慎伟、马安顺 组 长 ：邵园园 日 期 ：2013 . 1 . 7 成 绩 ： JavaScript 课程设计课程设计 I 课课程程设设计计任任务务书书 院系：院系：中印计算机软件学院 专业：专业：软件技术 班级：班级：11 软 1 学号：学号： 201101080029 一、课程设计时间一、课程设计时间 2012 年 12 月 24 日至 2013 年 1 月 11 日，共计 3 周。 二、课程设计内容二、课程设计内容 使用 html+javascript+css 完成以下任务： 1、能够熟练使用 css 结合 html 实现网页布局。 2、熟练使用文档对象模型和事件驱动，能够很好的实现 web 表单的交互式操作。 3、熟练使用 javascrip 中的对象，实现网页的动态效果。 三、课程设计要求三、课程设计要求 1. 课程设计质量： 贯彻事件驱动的程序设计思想，熟练使用 javascript 中的对象，实现网页特效。 网页设计布局合理，色彩搭配合理，网页操作方便。 设计过程中充分考虑浏览器兼容等问题，并做适当处理。 代码应适当缩进，并给出必要的注释，以增强程序的可读性。 2. 课程设计说明书： 课程结束后，上交课程设计报告书和相关的网页。课程设计报告书的格式和内容 参见提供的模板。 四、指导教师和学生签字四、指导教师和学生签字 指导教师：指导教师： 学生签名：学生签名： 五、教师评语：五、教师评语： 基于基于 javascriptjavascript 的班级网站（班级主页）开发的班级网站（班级主页）开发 摘要摘要 随着 Internet 飞速发展的今天，互联网成为人们快速获取、发布和传递 信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。 Internet 上发布信息主要是通过网站来实现的，获取信息也是要在 Internet“海洋 ”中按照一定的检索方式将所需要的信息从网站上下载下来。 因此网站建设在Internet 应用上的地位显而易见，它已成为政府、企事业 单位信息化建设中的重要组成部分，从而倍受人们的重视。JavaScript 是开发Web 应用程序不可或缺的一种语言，无论是为Web 页面增加交互 性还是创建整个应用程序，如果没有JavaScript，今天的Web 就不会是 现在这个样子。把JavaScript 与 html 和 css 结合起来，功能将会更加强 大。 关键字：班级网站、关键字：班级网站、javascript 目录目录 一、 前言1 1.1 课程设计思路 1 1.2 课程设计目标 1 二、关键技术.1 2.1HTML 相关概念 1 2.2css2 2.3javascript.3 三、总体设计.3 3.1 网站总体结构3 3.2 主页设计 4 3.3 网站功能设计 4 四、详细设计.6 4.1 班级网站 6 4.2 数据库设计 6 4.3 主要代码 6 五、课程总结12 六、参考文献13 一、一、前言前言 1.11.1 课程设计思路课程设计思路 班级网站基本组成成分包括班级首页、班级介绍、班级相册、留言板、课外活动、 同学信息、星语心愿、学校风貌，采用 JavaScript 语言并结合数据库知识对班级网站进 行设计。明年我们就面临着毕业，面临着离别，做这个网站也是为在我们的生命中留下 一分美好的回忆，所以网站里面有班里的全部同学信息以及一些照片。JavaScript 在创 建班级网站的过程中如果运用得当将会使网站得到一个很好的效果，同时也将提高网站 的人性化程度。 1.21.2 课程设计目标课程设计目标 1.能够熟练使用 css 结合 html，通过咨询和考察，最终确定并实现网页布局。同时 使用动态样式表甚至可以让图片的切换获得多种转场效果。 2熟练使用 javascript 和 html 知识结合做一个更漂亮的网站。 3熟练使用 javascript 中的内建对象最终实现一个班级网站的雏形。 二、关键技术二、关键技术 2.1HTML 相关概念相关概念 1.HTML 语言 HTML 语言(Hypertext Markup Language)中文通常称为超文本置标记语言，是一种用 来制作超文本文档的简单标记语言，用 HTML 编写的超文本文档称为 HTML 文档，它能独 立于各种操作系统平台（Unix、Windows）自 1990 年以来 HTML 就一直被用作 WWW 的信息 表示语言，用于描述 Homepage 的格式设计和它与 WWW 上其他 Homepage 的连接信息，使 用 HTML 语言描述的文件，需要通过 WWW 浏览器显示出效果。 当用浏览器打开网页时，浏览器读取网页中的 HTML 代码，分析其语法结构，然后根 据解释的结果显示网页内容如图：WWW 三个组成部分 JavaScript 课程设计课程设计 1 图 2-1WWW 的组成 2.HTML 文件结构 元素出现在文档的开头部分。与之间的内容不会在浏 览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义 HTML 文档的标 题。与之间的 内容将显示在浏览器窗口的标题栏。 HTML 文件的正文/元素表明是 HTML 文档的主体部分。在与 之间，通常都会有很多其它元素；这些元素和元素属性构成 HTML 文档的主体部分。 2.2css2.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 的位置： （1)body 部分的 JS （2)head 部分的 JS：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚 本已载入 JavaScript 课程设计课程设计 3 三、总体设计三、总体设计 3.13.1 网站总体结构网站总体结构 通过班级网站，全面宣传，展示班级风采、优点与特色，发布班级的重大活动安排， 增强同学之间的相互联系，提高办事效率。 网站结构图见图 3-1： 图 3-1 网站结构图 3.23.2 主页设计主页设计 页采用静、动相结合的方式，即静态的主画面和动态的图片相结合， 体现 班级 的勃勃生气，静态主页方式介绍班级 风采、优点特色，就得利用 JS 与数据库结合的技术建立数据库查询管理系统，采用交互式的动态 的 web 画面来实现。 3.33.3 网站功能设计网站功能设计 在本网站中包括动态切换本站首页、班级介绍、同学信息、班级相册、学校风貌、 课外活动、星语心愿、留言板等，并进行一定的美化和整理，基本完成班级网站的雏形 结构。显示的样式要求如下图 3-2： 班级首页、介绍班级首页、介绍同学信息同学信息班级相册、活动班级相册、活动留言板、心愿留言板、心愿学校风貌学校风貌 主页主页 图 3-2 网 站 功 能 图 1. 本站首页：一般有动态切换同学信息、浮动的图片和文字滚动等几种方式，通过 动态样式表甚至可以让图片的切换获得多达 20 多种转场效果。 2班级介绍：一般用 HTML 表格显示班级的图片、和每个同学的信息，大部分班级 网站都采用数据库和动态脚本语言来自动生成学生信息的列表。 3学校风貌：电子购物车一般有两种方式来实现，一种是在服务器端存储每个用户 的每一次电子购物操作，还有一种是采用客户端 cookie 来实现电子购物车，cookie 是网 站存储在客户端的少量数据，可以让网站的不同网页之间共享相同的变量。 4同学信息：创建同学信息程序，需要输入的信息包括学生姓名、性别、电话、 qq、出生年月日、身份证号码、住址、邮编。重点体现在在查询每个同学的信息时通过 客户端，无须将数据提交到服务器端，从而提高了程序的效率，也可以避免程序提交数 据的过程中重复输入的过程。 5. 班级相册：在 JavaScript 操作图像，在一个文件夹中保存所需要的图片，在浏览 器中可以按顺序播放一张张图片，还可以设置图片出现时的花样，使网站变得更加漂亮、 更加吸引人，给人留下深刻的印象，更加的方便浏览图片。 6. 留言板：留言板那块在网页中会显示每个学生对班级的留言、对同学的祝福、对自 己将来的打算、以及对各位老师的感谢。 7. 课外活动:在这里一一列着我们集体曾经参加的各种活动的时间、名称及照片，这是 可以看得见的回忆，多年后回头看看，该是感觉多么珍贵、对么温馨:这是曾经年少的时 候 8. 星语心愿：梦想就在这里启程！星语心愿是每个同学的梦想的表达，可以写出小学、 中学曾经追逐的梦想，以及现在毕业就要步入的社会的梦想或者是对未来的畅想，还可 JavaScript 课程设计课程设计 5 以写出曾经喜欢却没有表白的 Ta 或者想说却有说不出的心事、这有点属于隐私，可以匿 名的哦。 四、详细设计四、详细设计 4.14.1 班级网站班级网站 班级网站共分为 8 个模块，我在私下里收集了每个同学的信息、每次活动的照片，班 级相模块册可以在网页中自由浏览照片，同学信息模块可以查询每个同学的信息，这主 要用到数据库知识。班级网站的设计主要是能给 11 软 1 的同学留下回忆，让每个人记住 我们曾经在一起过、曾经相识过、纵然我们来自四面八方、纵然以后要各奔东西，都不 能忘记我们曾经同学一场。 4.24.2 数据库设计数据库设计 本网站采用的数据库是Microsoft Access,建立库文件，包含如下几个表 文件： Claim 网站公告信息表 Loginfo 来访登录时间信息表 Mssg 留言信息表 Photo 图文内容说明信息表 User 成员地址信息表 4.34.3 主要代码主要代码 无标题文档 潍 坊 科 技 学 院 wi fnk j xu yun 11 软 1 本站首页 班级介绍 同学信息 班级相册 学校风貌 课外活动 星语心愿 留言板 11 软 1 男同胞们名单. JavaScript 课程设计课程设计 9 11 软 1 女同胞们(名单). 班长:裴星宇 团支书:万小爽 纪委:苟详明 学习委员:王超 教(睡觉)主:姜淑飞 438 之色长:张媛媛 幽默哥:袁振 那个某某人:邵园园 青岛小曼:刘娜 青岛帅锅:江京翔 梁山好汉:丁三香 少数民族:杨波 菏泽老乡:于亚萍 火柴哥:孙慎伟 班里最文静的女孩:仪双元 老实巴交:李振涛 菏泽小妹:葛丽 聊城知识分子:范丽丽 宿管部:严茂奇 卖糖葫芦:岳芬芬 青岛小胖:董旭 临沂小伙:段振明 JavaScript 课程设计课程设计 11 淡定哥:祝传志 兔子:卜巧莲 运行结果如下图 3-3: 图 3-3 运 行 结 果 图 五、课程总结五、课程总结 这个班级网站是我和其他组员一起完成的，第一次做一个像样的网站一开始真不知 道从何下手，我们在一起耐心的探讨、一起努力的查找资料，最后终于完成。真的是受 益匪浅！先是认识到了集体力量的伟大，没有集体智慧的结合，就不会有我们这个网站 的运行，然后我感觉这次课程设计不只是局限于书本上的知识，而是与实践相结合，理 论+实践使知识更好的运用到了生活中去。通过这次的网站设计我发现我还有很多知识需 要学习、我懂得太少了，水平还需要接着提高。 在设计网站的过程中我们除了很多次错误，在一次又一次的改正下，最终网站运行成功！