基于JavaScript班级网站开发之课外活动

JavaScript课程设计潍坊科技学院JavaScript课程设计报告书设计题目基于javascript的班级网站开发专业班级中印计算机11级软件1班学生姓名孙慎伟学号201101080032指导教师陈凤萍组长邵园园日期20130107成绩JavaScript课程设计课程设计任务书院系：中印计算机软件学院专业：软件技术班级：11软1学号：201101080032一、课程设计时间2012年12月24日至2013年1月11日，共计3周。二、课程设计内容使用html+javascript+css完成以下任务：1、能够熟练使用css结合html实现网页布局。2、熟练使用文档对象模型和事件驱动，能够很好的实现web表单的交互式操作。3、熟练使用javascrip中的对象，实现网页的动态效果。三、课程设计要求1.课程设计质量：贯彻事件驱动的程序设计思想，熟练使用javascript中的对象，实现网页特效。网页设计布局合理，色彩搭配合理，网页操作方便。设计过程中充分考虑浏览器兼容等问题，并做适当处理。代码应适当缩进，并给出必要的注释，以增强程序的可读性。2.课程设计说明书：课程结束后，上交课程设计报告书和相关的网页。课程设计报告书的格式和内容参见提供的模板。四、指导教师和学生签字指导教师：学生签名：五、教师评语：JavaScript课程设计I基于javascript的班级网站（课外活动）开发摘要随着计算机网络通信技术和Internet的飞速发展，基于因特网的网站也成为一种新的竞争方式，并且越来越受到人们的关注。本网站对系统的需求进行了分析，建立系统工作流程图，然后划分系统功能模块，最后详细描述了各个功能模块实现的方法，并给出相应代码。一种在Internet上常见的用于信息服务的Web系统，它的主要服务是用来帮助浏览者相互沟通、吸引用户、服务用户的。实例网站的作用就是集结了各式各样的网站，方便用户浏览。本网站结合所学的知识，构建的一个实例网站，在网上浏览用户所需要的东西，既可以帮助用户节省宝贵的时间，有可以给用户带来方便的服务，同时还能够及时把游戏的优惠活动在网站上发布给用户，用户也就能够在短时间内接收到游戏的最新动态，并且用户可以直接在本公司的网站上反馈自己的意见，网站使企业活动上了一个新台阶。班级网站结构严谨，功能全面，重心在以最优化的方式创建班级网上家园。它最明显的优势首先在于您展现班级信息的简便，灵放，快捷，和全面，其次是可以完美地塑造班级和谐形象；再则班级网站将是一起走过的日子的最佳纪念方式；总之，一个优秀的班级网站可以是最经济的方式带来诸多的效益。本栏目给一些同学进行其风采展示的平台，可以在该部分对同学的技能、兴趣爱好，在学校举办的活动之中获得的奖项。丰富同学们的大学生活，培养同学们的实践能力。关键字：班级网站、javascript、cookie、JavaScript课程设计I目录一、前言11.1课程设计思路.............................................................................1二、关键技术..........................................................................................12.1HTML相关概念...........................................................................12.2css................................................................................................32.3javascript.......................................................................................3三、总体设计..........................................................................................43.1网站总体架构.............................................................................43.2网站功能设计.............................................................................4四、详细设计......................................................................................54.1课外活动设计............................................................................54.2主要代码.....................................................................................6五、课设总结..........................................................................................7六、参考文献..........................................................................................7JavaScript课程设计1一、前言1.1课程设计思路在本网站中包括上课的那些事、网页大赛、软件设计大赛、荣誉、班级大事件等，采用JavaScript语言并结合数据库知识对班级网站进行设计。明年我们就面临着毕业，面临着离别，做这个网站也是为在我们的生命中留下一分美好的回忆，所以网站里面有班里的全部同学信息以及一些照片。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课程设计32.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网站总体架构本网站的实现采用IE共同访问WEB服务器的发布页面、WEB服务器访问数据库服务器进行数据存取，系统结构如图3-1：图3-1系统结构图3.2网站功能设计在本网站中包括上课的那些事、网页大赛、软件设计大赛、荣誉、班级大事件等：上课的那些事网页大赛软件设计大赛荣誉班级大事件课外活动JavaScript课程设计51.上课的那些事：同学们上课都是怎么学习的呢，都是怎么回答老师的问题的呢，老师上课有事怎样讲课的呢，课堂上发生了什么事情让学生们都哈哈大笑呢，那些怀念，那些记忆，就在上课的那些事。2.每个人都想自己设计网站，都想有自己的作品，网页设计大赛给我们提供了一个展示自我的平台，我们可以参加大赛设计自己的网站，做自己喜欢做的事情，干自己想干的事情。那些为大赛奋斗的日子，就在网页设计大赛。3.软件设计大赛，这个就更有吸引力了，我们从第一次使用计算机就在用别人的软件，同学们可以参加这个大赛来实现自己做软件。大赛分为多种语言，c，C++，java等，有一种成就感只有程序设计能让你感受到。4.荣誉，有些人好事做的太多了，是不是该给人家一个荣誉呢，没错，只要对班级有贡献就会赋予班级贡献荣誉，培养同学们，多多为他人考虑的思想。5.班级大事件，班里发生了那些事，是谁得了网页设计大赛的一等奖，是谁考试得了第一名。所有的班级大事件，尽在班级大事件。四、详细设计4.1课外活动设计尽可能多的搜集班级关于课外活动的各个栏目的相关信息，然后进行合理的整合和划分，以及过滤，修改和归档，最后放到网页中，并且每天都会更新其内容，这样会让整个网页更活跃，更具有可阅读行，同学们也会积极的参与其中，评论或者发表新的文章。各个栏目会有不同的同学来维护，这样就使得