软件1302班实验报告

1、课程：B080103301HTML 与 JavaScript 程序设计实验姓名学号20134663班级1302指导教师开 设学 期2014 - 2 0 1 5 第 一 学 期开 设时 间第 17 周 第 18 周日 期评 定成 绩评定人评定日期东学学院1.实验目的本次HTML 与JavaScript 程序设计实验目的是让更好的了解HTML,CSS,JavaScript网页设计语言的语法,并通过这些语言对自己要设计的进行实现,会操作一些相应的网页编辑工具,并且使用java 和服务器来实现网页的前台和部分,实现网页前台的数据处理,并且根据服务器的数据处理让处理后的内容展现到前端页面,实现用户和前端

2、页面对服务器之间的交互操作.2.实验内容本次试验是通过使用HTML,CSS,JavaScript 网页设计语言设计一个个人网页,在个人网页中有对自己的一些介绍,页面跳转以及相关信息介绍,其中包含一些个人信息以及.最后通过在页面上输入信息,通过前台页面将用户输入的信息传递至服务器,经过服务器处理之后再将输入的信息传递给前端浏览器页面实现客户端与服务器之间的信息交互,形成一个互动的C/S 架构.3.系统实现与调试本次实验通过对整个实验的目的与需求分析,设计出了整个网页的大体框架(如下图).主要代码实现:-heading href=#导航a class=pure-主页详情信息请输入信息采用了如今主流

3、的左边栏布局方式来展现整个网页的全局内容,左边栏呈现出网页的导航条,通过次来进行对整体的跳转,左侧导航会在整个网页中一直出现,来引导用户在页面中实现导向.实际的实现如下图所示:如上图所示,通过设计的图例对的原型进行显示,左边的导航栏实现以黑色背景,蓝实现当前点击的显示页面,提示用户当前正在那个页面中进行浏览,通过对鼠标的跟踪显示也可显示,对用户的鼠标移动进行显示,起到了对于浏览用户友的交互式操作反馈.整个网页与服务器的交互部分,前台采用了如下的布局设计,也是在左侧导航栏的最后一个部分显示出来的信息提交的操作跳转,引导用户点击调转至如下输入页面,输入页面与前边的所有页面使用一致的风格采样,具有用

4、户的识别度.如下是输入框图的关键源代码实现部分:t请填写您的个人信息提交如上所示的关键代码中,当网页了用户的输入数据以后,会跳转到一个的servlet 中,而对于前台也面的显示布局效果如下图所示:如上图是最终按照设计原型设计出的用户输入界面,采用与前边几页一致的可视化布局风格,在输入框中有输入提示更友好的引导用户来进行输入操作.用户在对自己的个人信息进行填写以后,会传递到的一个servlet 中进行数据处理服务器部分的的源代码如下所示:public class Input extends HttpServletOverrideprotected void doGet(HttpServletRe

5、quest req, HttpServletResponseresp) throws ServletException, IOException Stringname=req.getParameter(name);Stringage=req.getParameter(age);Stringaddress=req.getParameter(address);String=req.getParameter();Stringsex=req.getParameter(sex);. . . . . .如上代码所示,继承了HttpServlet,通过重写doGet 方法来实现浏览器提交过来的Get 方法请

6、求,而如果用户已T 方法提交则会交给dot 方法来进行处理(代码详情见提交代码),两个方法的目的就是通过用户提交过来的信息进行处理操作,处理后的内容交给前台的反馈内容中呈现在具体页面上.如下图所示:如上如在用户输入了所有的信息以后会出现上图当中的内容,由于系统提供的服务器转接中仅支持中文页面,所以这一页所呈现的内容全部为英文也,用户在提交后会看到这个英文页的提交信息依次来查看用户的提交反馈.4.创新点及存在问题本次试验的创新点在于利用了左侧边栏的新导航方式来促使用户对页面的操作来进行交互式设计,用户的鼠标不通过服务器,通过前台简单的javascript 操作就能够实现与用户的简单交互,例如悬停

7、变换以及内容浮出等等.在用户操作这些点时也能够深刻体会出这个的人性化与易用性,所有的跳转与布局的实现采用了的前台设计风格,使得用户可以具有良好的一致性识别度,对离开本站后也有一定的能力和诱导用户进行相似操作.使得能够受人喜爱5.实验总结通过这次HTML 与JavaScript 程序设计实验,充分实践了在课堂上所学习到的HTML 与JavaScript 程序设计实验相关知识,从一开始的界面草图设计,界面实现以及后面的到最后的测试呈现,参与了一整套完整的开发过程.积累了许多开发经验和实战经历,能够让以后更好的学习并参与开发工作.这次采用了与以往不同的方式,将自己所写的内容放在了服务器中,也让体会到了真正的网页流转流程.再设计过程中也出现了许多错误,例如类型不一致,网页无法通过其他地方找到,在以后的工作或者学习中也能尽量避免这些错误,更加专注于项目的业务流程,提高开发效率.通过实验也学习了相关的网页设计语言学习,对于设计的前端制作以及代码实现方面对于自己也有了进一步的.成绩评定：考核标准得分（1）能够按时出勤，不、不早退，实验过程中，具有严