javascript课程设计.doc

JavaScript课程设计JavaScript+jQuery开发框架课程设计题 目 毕业留言板 院 （系） 专 业 班 级 学 生 姓 名 学 号 设 计 地 点 指 导 教 师 起止时间：2015年6月8日至2015年6月12日目录一、前言1.1 课程设计思路31.2 课程设计目标3二、关键技术32.1 HTML相关概念32.2 CSS52.3 JavaScript5三、总体设计73.1 网站总体布局7四、详细设计74.1 主要代码74.2 网页结果显示18五、课设总结19六、参考文献20一、 前言光阴似箭，岁月如梭，三年美好而艰辛的大学生活犹如漏斗中的沙石已悄然流进昨日。此时站在漫漫求学道路终点站的我心潮澎湃，思绪万千，昔日的点点滴滴，林林总总，跃然而起，历历在目。此时面对着我可爱的同学，面对着美丽的校园，我心中虽有千言万语，却只字难出。 三年改变了我们的容颜和那颗曾经年轻的心，而成长的代价就是我们失去纯真的微笑，而多了一份离别的伤感。无论我们有多少不舍，都唤不回逝去的四年。但我们无须失落，我们依然可以一路高歌，让六月的骄阳永远见证我们的无悔青春。 日出日落，月圆月缺，总叫人期待，期待一次惊喜的通话，一封意外的信件，一刻相聚的欢愉，一夕促膝的长谈，一束鲜花的清香日后，我最爱的同学们啊，我期待的一丝喜悦都来自于你。让时间老去，让激情回归！愿事业一帆风顺，爱情甜甜美美，请带着我的期冀幸福一生！写不完的句子，但终一句话，我爱你们！1.1 课程设计思路临近毕业，心中不免感慨万千，那么，就在现在，大胆地说出你的想法，你的感动，和身边在人分享，留下你们的记忆。这次课程设计的目的也是想和同学们一起留下我们当初的记忆，然后用就一生去珍藏、去感受。1.2 课程设计目标1.能够熟练javascript，通过咨询和考察，最终确定并实现网页布局。同时使用动态样式表甚至可以让图片的切换获得多种转场效果。2熟练使用javascript和css中的内建对象最终实现本次课程设计。3熟练使用javascript和html实现用户登记，从而提高网页访问速度。二、关键技术2.1 HTML相关概念HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。 和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 一个HTML文件的后缀名是.htm或者是.html。 用文本编辑器就可以编写HTML文件。 这就试写一个HTML文件吧！打开你的Notepad，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文件存成first.html。Title of pageThis is my first homepage. This text is bold 要浏览这个first.html文件，双击它。或者打开浏览器，在File菜单选择Open，然后选择这个文件就行了。示例解释这个文件的第一个Tag是，这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是，表示HTML文件到此结束。在和之间的内容，是Head信息。Head信息是不显示出来的，你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在Head信息里加上一些关键词，有助于搜索引擎能够搜索到你的网页。在和之间的内容，是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。在和之间的信息，是正文。在和之间的文字，用粗体表示。顾名思义，就是bold的意思。HTML文件看上去和一般文本类似，但是它比一般文本多了Tag，比如，等，通过这些Tag，可以告诉浏览器如何显示这个文件。HTML元素(HTML Elements)HTML元素(HTML Element)用来标记文本，表示文本的内容。比如body, p, title就是HTML元素。 HTML元素用Tag表示，Tag以结束。 Tag通常是成对出现的，比如。起始的叫做Opening Tag，结尾的就叫做Closing Tag。目前HTML的Tag不区分大小写的。比如，和其实是相同的。2.2 CSS1、CSS简介CSS1是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML等文件样式的计算机语言。 CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。2、CSS文件当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。2.3 JavaScript Javascript在网页的用法Javascript加入网页有两种方法：1、直接加入HTML文档这是最常用的方法，大部分含有Javascript的网页都采用这种方法，如：在这个例子中，我们可看到一个新的标签： ，而 用来告诉浏览器这是用Javascript编写的程序，需要调动相应的解释程序进行解释。HTML的注释标签：用来去掉浏览器所不能识别的Javascript源代码的，这对不支持 Javascript 语言的浏览器来说是很有用的。/-Javascript结束：双斜杠表示 Javascript的注释部分，即从/开始到行尾的字符都被忽略。至于程序中所用到的documentwrite（）函数则表示将括号中的文字输出到窗口中去， 这在后面将会详细介绍。另外一点需要注意的是，的位置并不是固定的，可以包含在. 或.中的任何地方。2、引用方式 如果已经存在一个Javascript源文件（以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：其中的Url就是程序文件的地址。同样的，这样的语句可以放在HTML文档头部或主体的任何部分。 如果要实现“直接插入方式”中所举例子的效果，可以首先创建一个Javascript源代码文件“Script.js”，其内容如下：document.writeln(这是Javascript！采用直接插入的方法！);在网页中可以这样调用程序： 。三、 总体设计3.1 网站总体布局本系统的实现采用典型的B/S结构来实现，不同的客户端程序通过IE共同访问WEB服务器的发布页面、WEB服务器访问数据库服务器进行数据存取，系统结构如图3-1.图3.系统结构图四、详细设计4.1 主要代码用Javascript写入程序和读取程序。注册信息主要包括用户名、设置密码、确认密码、性别、出生日期、身份证号码、联系电话、微信、个人说明。注册 inputtype = text, inputtype = password width: 150px; tablebackground-color:pink 世界那么大 我想去看看！ 毕业季！留下你的思念(*必填！) 姓名： * 性别： 男     女 出生日期： 请选择 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 年 请选择 1 2 3 4 5 6 7 8 9 10 11 12 月 请选择 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 日 毕业方向： 请选择 计算机 网络 销售 金融 建筑 设计 才艺 工程 翻译 联系电话： * 微信： * 你想对我说：      function username() var username = document.getElementById(username).value; /姓名 /姓名的判断 var r = /A-Za-z+$/; if(username = ) document.getElementById(usernames).innerHTML = 姓名不可以为空; return false; else if(username !=) if(username.length2) document.getElementById(usernames).innerHTML = 姓名至少2位;return false; else document.getElementById(usernames).innerHTML = 输入正确;return true; function shijizn() var year = document.getElementById(year).value; /出生年份 var month= document.getElementById(month).value; /出生月份 var day = document.getElementById(day).value; /出生的日期function phone() var phone = document.getElementById(phone).value; /联系电话 /正则表达式使用方法 var reg= /d11$/; / if(phone=) document.getElementById(phones).innerHTML = 联系电话不能为空; return false; if(phone !=) if(!(reg.test(phone) document.getElementById(phones).innerHTML = 联系电话不正确; return false; else document.getElementById(phones).innerHTML = 联系电话输入正确; return true; function 微信() var 微信 = document.getElementById(微信).value; /微信 /alert(微信);/微信验证if(微信=) document.getElementById(微信).innerHTML = 微信不能为空; return false;if(微信 !=)if(!(e.test(微信) document.getElementById(微信).innerHTML = 输入不正确; return false;elsedocument.getElementById(微信).innerHTML = 输入正确; return true; function check() if (username()&password()&sfz()&phone()&email() return true; else return false; 4.2 网页结果显示图4-2.1 注册个人信息图图4-2.2 注册个人信息图图4-2.3 注册个人信息图五、课设总结本次课程设计已完成，令我感触颇深。我想我需要对自己这段时间内完成的课程设计做一个总结。这几天有条不紊的课程设计，使我有机会对本专业的基本理论、专业知识和基本技术有了更深入的了解和体会，使我在一学期中所学到的知识得到了系统和升华，真正达到了学以致用。 在实验过程中，不断的发现错误，改正错误，我也在不断的领悟，不断的收获。整个论文设计的过程中我学到了做任何事情所要有的态度和心态，首先我明白了做学问要一丝不苟，对于出现的任何问题和偏差都不要轻视，要通过正确的途径去解决，在做事情的过程中要有耐心和毅力，不要一遇到困难就打退堂鼓，只要坚持下去就可以找到思路去解决问题的。在工作中要学会与人合作的态度，认真听取别人的意见，这样做起事情来就可以事倍功半。在本次的论文设计中，我充分的体会到了“实践出真知”这一点，书本上的知识是不够的，只有把理论与实践相结合才能够真正的学到知识。一个管理信息系统的设计，不可能一步到位，还需要不断的完善和补充。编程前的深思熟虑是减少程序调试工作量的重要方法，只有进行充分考虑，才会减少调试过程中的工作量。虽然在开始写程序之前我们做了多的准备工作，但在真正的写程序时仍然发现许多问题，有些问题是分析时的疏漏，有些则是如果不做无论如何也想不到的。所以，在收获知识的同时，还收获了阅历，收获了成熟，不仅培养了独立思考、动手操作的能力，在各种其它能力上也都有了提高。更重要的是，在设计过程中，我学会了很多学习的方法。而这是日后最实用的，真的是受益匪浅。要面对社会的挑战，只有不断的学习、实践才能做到最好！六、参考文献1 尼古拉斯泽卡斯JavaScript高级程序设计M.北京：人民邮电出版社，20