搜索
JavaScript课程设计I潍坊科技学院JavaScript课程设计报告书课题基于JavaScript的班级网站开发专业班级：11软1学生姓名：邵园园学号：201101080029指导教师：陈凤萍小组成员：邵园园、刘娜、苟祥明、石妍慧于明明、王超、孙慎伟、马安顺组长：邵园园日期：2013.1.7成绩：JavaScript课程设计II课程设计任务书院系：中印计算机软件学院专业：软件技术班级：11软1学号：201101080029一、课程设计时间2012年12月24日至2013年1月11日，共计3周。二、课程设计内容使用html+javascript+css完成以下任务：1、能够熟练使用css结合html实现网页布局。2、熟练使用文档对象模型和事件驱动，能够很好的实现web表单的交互式操作。3、熟练使用javascrip中的对象，实现网页的动态效果。三、课程设计要求1.课程设计质量：贯彻事件驱动的程序设计思想，熟练使用javascript中的对象，实现网页特效。网页设计布局合理，色彩搭配合理，网页操作方便。设计过程中充分考虑浏览器兼容等问题，并做适当处理。代码应适当缩进，并给出必要的注释，以增强程序的可读性。2.课程设计说明书：课程结束后，上交课程设计报告书和相关的网页。课程设计报告书的格式和内容参见提供的模板。四、指导教师和学生签字指导教师：学生签名：五、教师评语：JavaScript课程设计III基于javascript的班级网站（班级主页）开发摘要随着Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。JavaScript是开发Web应用程序不可或缺的一种语言，无论是为Web页面增加交互性还是创建整个应用程序，如果没有JavaScript，今天的Web就不会是现在这个样子。把JavaScript与html和css结合起来，功能将会更加强大。关键字：班级网站、javascriptJavaScript课程设计I目录一、前言...................................................11.1课程设计思路............................................11.2课程设计目标............................................1二、关键技术................................................12.1HTML相关概念............................................12.2css.....................................................22.3javascript..............................................3三、总体设计................................................33.1网站总体结构...........................................33.2主页设计................................................43.3网站功能设计...........................................4四、详细设计................................................64.1班级网站................................................64.2数据库设计..............................................64.3主要代码................................................6五、课程总结...............................................12六、参考文献...............................................13JavaScript课程设计1一、前言1.1课程设计思路班级网站基本组成成分包括班级首页、班级介绍、班级相册、留言板、课外活动、同学信息、星语心愿、学校风貌，采用JavaScript语言并结合数据库知识对班级网站进行设计。明年我们就面临着毕业，面临着离别，做这个网站也是为在我们的生命中留下一分美好的回忆，所以网站里面有班里的全部同学信息以及一些照片。JavaScript在创建班级网站的过程中如果运用得当将会使网站得到一个很好的效果，同时也将提高网站的人性化程度。1.2课程设计目标1.能够熟练使用css结合html，通过咨询和考察，最终确定并实现网页布局。同时使用动态样式表甚至可以让图片的切换获得多种转场效果。2．熟练使用javascript和html知识结合做一个更漂亮的网站。3．熟练使用javascript中的内建对象最终实现一个班级网站的雏形。二、关键技术2.1HTML相关概念1.HTML语言HTML语言(HypertextMarkupLanguage)中文通常称为超文本置标记语言，是一种用来制作超文本文档的简单标记语言，用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（Unix、Windows）自1990年以来HTML就一直被用作的信息表示语言，用于描述Homepage的格式设计和它与的连接信息，使用HTML语言描述的文件，需要通过浏览器显示出效果。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容如图：元素出现在文档的开头部分。head与/head之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。title/titletitle元素定义HTML文档的标题。title与/title之间的内容将显示在浏览器窗口的标题栏。/HeadBODYHTML文件的正文//body元素表明是HTML文档的主体部分。在body与/body之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。/BODY/HTML2.2css1.css简介级联样式表（CascadingStyleSheet）简称“CSS”，它是用来进行网页风格设计。通过设立样式表，可以统一地控制HTML中各标签的显示属性。级联样式表可以使人更能JavaScript课程设计3有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。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：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚本已载入三、总体设计3.1网站总体结构通过班级网站，全面宣传，展示班级风采、优点与特色，发布班级的重大活动安排，JavaScript课程设计4增强同学之间的相互联系，提高办事效率。网站结构图见图3-1：图3-1网站结构图3.2主页设计页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现班级的勃勃生气，静态主页方式介绍班级风采、优点特色，就得利用JS与数据库结合的技术建立数据库查询管理系统，采用交互式的动态的web画面来实现。3.3网站功能设计在本网站中包括动态切换本站首页、班级介绍、同学信息、班级相册、学校风貌、课外活动、星语心愿、留言板等，并进行一定的美化和整理，基本完成班级网站的雏形结构。显示的样式要求如下图3-2：班级首页、介绍同学信息班级相册、活动留言板、心愿学校风貌主页JavaScript课程设计5图3-2网站功能图1.本站首页：一般有动态切换同学信息、浮动的图片和文字滚动等几种方式，通过动态样式表甚至可以让图片的切换获得多达20多种转场效果。2．班级介绍：一般用HTML表格显示班级的图片、和每个同学的信息，大部分班级网站都采用数据库和动态脚本语言来自动生成学生信息的列表。3．学校风貌：电子购物车一般有两种方式来实现，一种是在服务器端存储每个用户的每一次电子购物操作，还有一种是采用客户端cookie来实现电子购物车，cookie是网站存储在客户端的少量数据，可以让网站的不同网页之间共享相同的变量。4．同学信息：创建同学信息程序，需要输入的信息包括学生姓名、性别、电话、qq、出生年月日、身份证号码、住址、邮编。重点体现在在查询每个同学的信息时通过客户端，无须将数据提交到服务器端，从而提高了程序的效率，也可以避免程序提交数据的过程中重复输入的过程。5.班级相册：在JavaScript操作图像，在一个文件夹中保存所需要的图片，在浏览器中可以按顺序播放一张张图片，还可以设置图片出现时的花样，使网站变得更加漂亮、更加吸引人，给人留下深刻的印象，更加的方便浏览图片。6.留言板：留言板那块在网页中会显示每个学生对班级的留言、对同学的祝福、对自己将来的打算、以及对各位老师的感谢。7.课外活动:在这里一一列着我们集体曾经参加的各种活动的时间、名称及照片，这是可以看得见的回忆，多年后回头看看，该是感觉多么珍贵、对么温馨:这是曾经年少的时候......8.星语心愿：梦想就在这里启程！星语心愿是每个同学的梦想的表达，可以写出小学、JavaScript课程设计6中学曾经追逐的梦想，以及现在毕业就要步入的社会的梦想或者是对未来的畅想，还可以写出曾经喜欢却没有表白的Ta或者想说却有说不出的心事、这有点属于隐私，可以匿名的哦。四、详细设计4.1班级网站班级网站共分为8个模块，我在私下里收集了每个同学的信息、每次活动的照片，班级相模块册可以在网页中自由浏览照片，同学信息模块可以查询每个同学的信息，这主要用到数据库知识。班级网站的设计主要是能给11软1的同学留下回忆，让每个人记住我们曾经在一起过、曾经相识过、纵然我们来自四面八方、纵然以后要各奔东西，都不能忘记我们曾经同学一场。4.2数据库设计本网站采用的数据库是MicrosoftAccess,建立库文件，包含如下几个表文件：Claim网站公告信息表Loginfo来访登录时间信息表Mssg留言信息表Photo图