目 录
一、实验目的
1、掌握JavaScript变量、函数、对象、DOM、正则表达式的应用
2、掌握Jquery框架的使用；掌握Jquery框架的插件开发
3、掌握Jquery-validate表单验证插件的使用，了解表单验证的实现原理
4、实现一个基于JavaScript、Jquery的表单验证应用。
二、实验环境
1、硬件要求：笔记本电脑一台。
2、软件要求：Windows操作系统，使用Eclipse编译环境、Tomcat服务器以及Microsoft Edge浏览器。
3、网络要求：能访问互联网。
三、实验步骤和内容
1、小组成员分工（共计4人）
（1）组长------锦鲤
完成小组内部成员的分工以及前端界面的设计和把控，制定相关的组内合作机制，组内项目的构建遵从"四模四合三并一详"制度，即"四模"为相关项目的制作分为四个模块，每一个人负责一个模块的制作；"四合"为组内四人之间相互合作，将项目开展过程中出现的问题及时的反馈到小组群内，小组成员一起解决；"三并"为以3天为一个期限合并一次代码，检测代码之间以及网页之间是否能够正常的进行衔接和跳转，即每周周三和周六各进行一次小的代码合并工作，将过程中出现的问题发到小组群里让对应负责的同学进行修改和完善，最后在每周的周天进行一次大型的代码合并，此时所有成员必须全部到场，对运行过程中和演练过程中可以改进的地方进行记录，全部演示完毕后对自己负责的模块再进行相应的完善工作；"一详"为组内所有代码都要有相应的注释，确保组内成员都可以看懂各自负责模块的代码，方便进行后期代码的修改工作。
使用Eclipse编译软件设计使用函数方法实现的计算器、使用带有对象的函数方法实现的计算器、金额找零、房贷计算器、使用JavaScript实现的用户注册表单验证、使用Jquery框架实现的用户注册表单验证之间实现界面切换的页面以及各个页面中提示信息和提示弹窗的设计与搭建。
（2）组员------大豆
使用Eclipse编译软件设计使用函数方法实现的计算器、使用带有对象的函数方法实现的计算器、房贷计算器对应的算法，并将对应计算后的结果进行可视化打印输出处理。
（3）组员------黄瓜
使用Eclipse编译软件设计使用函数方法实现的计算器、使用带有对象的函数方法实现的计算器中计算器样式的排版和颜色的渲染。
（4）组员------西红柿
使用Eclipse编译软件设计使用JavaScript实现的用户注册表单验证、使用Jquery框架实现的用户注册表单验证的页面字体排版以及页面的颜色渲染。
2、实验方案
1、根据课本、PPT和老师课堂中讲解的内容，使用Eclipse编译软件制作各自负责模块的内容。
2、将代码编写过程中遇到的问题及时的反馈到小组群内，小组内共同寻找解决方案并将其完美解决。
3、将各个模块通过链接的形式链接到对应模块，进而通过切换模块实现页面的同步切换。
4、定期讨论并总结项目制作过程中出现的问题，对出现的问题进行归纳总结。
5、完成最终的项目以及各自的实验报告，最后进行实验报告排版的检测并提交。
3、实验结果与分析
1、组内成员负责的各自模块完成修改成为最终结果后嵌入到实验一视频网页的代码之中，最后在Eclipse编译软件中进行运行，项目启动运行界面如图5-1：
图5-1 项目启动运行界面
2、在实验一视频网页的基础之上建立一个链接，通过链接实现其他页面的访问，计算器与表单验证链接端口界面如图5-2：
图5-2 计算器与表单验证链接端口界面
3、通过点击链接进入计算器与表单验证模块切换页面后，通过使用函数方法的形式进而实现计算器基本的加、减、乘、除、归零等操作，使用函数方法实现计算器界面如图5-3：
图5-3 使用函数方法实现计算器界面
4、通过使用带有对象的函数方法的形式进而实现计算器基本的加、减、乘、除、归零等操作，并对计算器进行一些补充（如平方、开方、三角函数的计算以及竖式计算等），使用带有对象的函数方法实现计算器界面如图5-4：
图5-4 使用带有对象的函数方法实现计算器界面
5、通过由大到小的方法进行金额找零，即先找小于找零金额但是在已有金额中最大的哪个，以此类推进行不同金额的统计，最后将最终的统计结果以输出打印的方式呈现到对应页面上，金额找零界面如图5-5：
图5-5 金额找零界面
6、通过分析房贷计算的相关算法所需要的参数完成对房贷计算器页面的布局，进而将相关的下拉菜单以及相关的按钮键与对应的事件进行完美的响应，让所有计算后的最终结果呈现在当前网页上，同时随着下拉菜单的选择变化而进行及时的响应变化，让对应数据得到及时的更新，房贷计算器界面如图5-6：
图5-6 房贷计算器界面
7、通过JavaScript实现用户注册表单的验证，对信息填写过程中出现的问题进行及时的反馈，并将对应的错误信息直接以文字显示的方式打印输出在当前页面，进而实现对注册信息的检验和验证，使用JavaScript实现用户注册表单验证界面如图5-7：
图5-7 使用JavaScript实现用户注册表单验证界面
8、通过Jquery框架实现用户注册表单的验证，对信息填写过程中出现的问题进行及时的反馈，并将对应的错误信息以窗口弹出显示的方式进行提醒，进而实现对注册信息的检验和验证，使用Jquery框架实现用户注册表单验证界面如图5-8：
图5-8 使用Jquery框架实现用户注册表单验证界面
9、将使用函数方法实现的计算器、使用带有对象的函数方法实现的计算器、金额找零、房贷计算器、使用JavaScript实现的用户注册表单验证、使用Jquery框架实现的用户注册表单验证模块功能实现后，设计一个模块切换页面，使其直接通过切换模块来进行对应页面的链接切换，进而实现将以上六个页面在同一个页面进行操作，项目模块切换界面如图5-9：
图5-9 项目模块切换界面
4、项目任务评价
1、每次完成代码迭代更新后对应模块出现的问题大家都可以积极的进行解决，不但提高了对问题的解决效率，而且还加深了我们每一个人处理问题的能力。
2、每一个组员在编写代码的过程中都可以对自己的代码进行注释，每一期合成完毕后的代码组内的成员都可以看懂其他组员所编写的代码，这样组内的每一位成员都可以详细的了解我们整个项目的运行，并且在运行后可以比较快速的定位到出现错误的地方。
3、虽然在项目制作的过程中存在一定的问题，但是我们都会进行及时的调整，总的来说优点是大于缺点的，我们会继续保持好的的一方面，及时对缺点和不足进行改正和完善，让小组成员和自己的项目更加完善。
四、遇到的问题和解决方法
1、运行问题：编写的代码在运行过程中出现了乱码现象。
解决方法：鼠标右击->Run As->Run Configurations->Common->在Other后填写gbk然后点击Run进行运行后中文可以正常输出。
2、运行问题：代码编写完成后进行运行发现网页无法进行页面加载，显示页面请求失败。
解决方法：由于没有在Tomcat服务器上进行运行所导致，先运行服务器然后再运行代码后页面可以正常加载。
3、运行问题：启动Tomcat的过程中，有时出现端口被占用的情况。
解决方法：对服务器进行配置，将服务器运行的端口号改为别的端口即可（找到Tomcat安装目录下的文件"/conf/server.xml"->使用记事本或写字板打开文件，在文件中找到"Connector port=8080"->将"8080"改为"8888"，然后保存配置文件->重启Tomcat服务器）。
4、项目问题：多个同名文本框是如何存储在获取到的数组里的。
解决方法：以文本框在源代码中出现的顺序，从数组的第0位开始向后放置。
5、项目问题：使用定时器让某个函数隔一段时间之后运行一次的格式是怎样的。
解决方法：定时器的格式为timer = window.setTimeout("需要运行的函数","时间(用毫秒计)")。
6、代码问题：如果要清除定时器该怎样操作。
解决方法：使用语句clearTimeout(timer)即可完成对定时器的清除。
7、代码问题：使用对象location完成一个网页跳转到另一个网页。
解决方法：跳转的方法就是修改location的href属性，即修改为window.location.href="page.html"即可完成页面的跳转。
8、项目问题：<input type="submit" value="登录">表示提交按钮，是否可以写普通按钮。
解决方法：不可以，如果将该按钮改为：<input type="button" value="登录">，显示效果一样，但是点击，没有提交功能。不过可以用JavaScript进行提交。
9、项目问题：除了可以将JavaScript代码嵌入到HTML中之外，是否还有其他的导入方式。
解决方法：可以专门将JavaScript代码写在单独的文件中window.alert("第一个 JavaScript 程序"); 然后在另外的HTML页面中插入<script src="code.js" type="text/javascript"></script>来导入需要的JavaScript文件。
五、实验总结
1、在使用单引号和双引号的时候要特别注意，输出单个字符时可以使用单引号，如果同时输出多个字符时只能使用双引号进行输出，不然会报错。
2、在对笔记本电脑进行配置时尽量不要使用C盘。
3、JavaScript是一种网页脚本语言，虽然名字中含有Java，但它与Java语言是完全两种不同的语言。
4、JavaScript代码可以很容易地嵌入到HTML页面中。浏览器对JavaScript脚本程序进行解释执行。
5、 JavaScript与Java一样，对大小写是敏感的，在JavaScript中，注释有三种写法：一种是 HTML 注释的写法：<!---注释内容-->，还有两种分别为："//单行注释"和"/*多行注释*/"。
6、JavaScript中的变量为弱变量类型，即变量的类型根据它被赋值的类型改变。
7、JavaScript中变量未声明就使用是不会报错的，但很容易出现不可预知的错误，所以所有变量先声明后使用。
8、除了在代码里面进行简单的编程之外，我们还可以通过JavaScript提供的内置对象来对网页进行操作，内置对象由浏览器提供，可以直接使用，不用事先定义。
9、history对象包含用户的浏览历史等信息，用到这个对象的原因，是因为它可以代替后退 (前进)按钮访问历史记录，该对象从属于window。
10、location对象可以访问浏览器地址栏，也是从属于window，最常见功能就是跳转到另一个网页。
11、location对象另一个比较常见的应用是定时跳转，但是需要结合window的定时器使用。