合肥学院

计算机科学与技术系

Web应用系统开发

课 程 论 文

学

姓

专业班号 名 1204013037 童子轩 级 12级计本3班

2013.6

Web课程总结

一、内容摘要

人类已进入信息社会，信息技术的应用渗透到各个领域。在当今的信息时代，蓬勃发展的计算机技术和信息技术随着 Internet 的普及，又一次给社会带来了巨大的影响，Internet 正在以超越几千年科学技术发展进程的速度席卷着全世界， 冲击着各行各业，改变着人们的工作、学习和生活。可以说 Internet 是人类历史发展中一个伟大的里程碑，它是未来信息高速公路的雏形，人类正由此进入一个前所未有的信息化社会。它正在向全世界延伸和扩散，不断增添吸收新的网络 成员，已经成为世界上覆盖面最广、规模最大、信息资源最丰富的计算机信息网络。

二、Web课程综述

Web是一种典型的分布式应用结构。第一阶段的Web,主要是用于静态Web页面的浏览。用户使用客户机端的Web浏览器,可以访问Internet上各个Web站点,在每一个站点上都有一个主页作为进入一个Web站点的入口。每一Web页中都可以含有信息及超文本连接,超文本连接可以带用户到另一Web站点或是其它的Web页。从服务器端来看,每一个Web站点由一台主机、Web服务器及许多Web页所组成,以一个主页为首,其它的Web页为支点,形成一个树状的结构。每一个Web页都是以HTML的格式编写的。这一阶段，Web服务器基本上只是一个HTTP的服务器，它负责客户端浏览器的访问请求，建立连接，响应用户的请求，查找所需的静态的Web页面，再返回到客户端。

三、课程主要内容及基本原理

Web课程的学习过程中，第一篇“Web技术基础”分为3章，主要内容是Web技术概述、Web应用环境构建技术和网上书店的系统设计。第二篇“Web客户端程序设计基础”分为3章，分别介绍了HTML、CSS和JavaScript技术。第3篇“JSP Web数据库应用开发”分为4章，介绍了JSP运行机制与基本语法、JSP内置对象、基于JSP的Web数据库应用开发和网上书店的实现。

HTML是超文本标记语言，是为浏览器设计的语言，用于在Web上传输信息。HTML的编写比较简单，只要记住基本的语法就可以。CSS是由W3C组织制定的一种用来定义样式规则（如字体、颜色和位置）的语言，能让网页制作者有效地定制、改善网页的显示效果。JavaScript是一种轻型的脚本语言，它与HTML相结合，可以增强功能，提高与用户之间的交互性。主要利用的是Java来进行编写。JSP全称Java Server Page，是由HTML语句和嵌套在其中的Java代码构成的文件，文件扩展名为.jsp。浏览器访问JSP页面时，Web容器把HTML原封不动地发送给浏览器，嵌套在 <% %>之间的Java代码被解释执行，其中out.print(或println)语句输出的内容则被按顺序插入到该对<% %>在JSP文件中的出现位置处，同HTML一同输出给浏览器。

四、实际应用

JSP内置对象：

（1）request对象：

该对象封装了用户提交的信息，通过调用该对象相应的方法可以获取封装的信息，即使用该对象可以获取用户提交信息。它是HttpServletRequest的实例。

request的常用方法：1、getParameter();使用如下 String str=request.getParameter();

2、setAttribute();getAttribute();removeAttribute();getMethod();getProtocol();

getReqeustURI();getRemoteAddr();getServerPort();getServerName();

（2）response对象：

对客户的请求做出动态的响应，向客户端发送数据。

（3）session对象

session对象是一个JSP内置对象，它在第一个JSP页面被装载时自动创建，完成会话期管理。从一个客户打开浏览器并连接到服务器开始，到客户关闭浏览器离开这个服务器结束，被称为一个会话。当一个客户访问一个服务器时，可能会在这个服务器的几个页面之间反复连接，反复刷新一个页面，服务器应当通过某种办法知道这是同一个客户，这就需要session对象。session对象的ID：当一个客户首次访问服务器上的一个JSP页面时，JSP引擎产生一个session对象，同时分配一个String类型的ID号，JSP引擎同时将这个ID号发送到客户端，存放在Cookie中，这样session对象和客户之间就建立了一一对应的关系。当客户再访问连接该服务器的其他页面时，不再分配给客户新的session对象，直到客户关闭浏览器后，服务器端该客户的session对象才取消，并且和客户的会话对应关系消失。当客户重新打开浏览器再连接到该服务器时，服务器为该客户再创建一个新的session对象。session对象存在一定时间过期问题，所以存在session中的名值对会在一定时间后失去，可以通过更改session有效时间来避免这种情况。同时编程时尽量避免将大量有效信息存储在session中，request是一个不错的替代对象。

（4）application对象

服务器启动后就产生了这个application对象，当客户在所访问的网站的各个页面之间浏览时，这个application对象都是同一个，直到服务器关闭。但是与session不同的是，所有客户的application对象都是同一个，即所有客户共享这个内置的application对象。application对象常用方法： (1)public void setAttribute

(String key，Object obj)；将参数Object指定的对象obj添加到application对象中，并为添加的对象指定一个索引关键字(2)public Object getAttribute(String key)；获取application对象中含有关键字的对象。

（5）out对象

out对象是一个输出流，用来向客户端输出数据。out对象用于各种数据的输出。

很多人都说，没有Web,计算机网络就会变得少了很多东西，计算机网络在60年代就已经出现，而Web最早的创作思想却来源于为世界各地的科学家提供一个可以共享的平台。

当第一个图形界面的www浏览器Mosaic在美国国家超级计算应用中心NCSA诞生后，此后将近三十年的发展，使Web成为计算机网络发展的生力军，未来它也将影响着计算机网络的发展。

当93年第一款Web浏览器面向大众的时候，它只是一款支持书签，图标和一套光溜溜的用户界面。仅仅是这样一款小小的浏览器却从此改变了计算机网络发展的道路，因为它的最大革新，图片支持，从这一刻起，下载图片成为可能，并且改变了人们浏览因特网的方式。并且随着成为因特网的主流。很多人都说，如果没有Web，如今的网络可能会发展成另一番模样。下图为第一款Web浏览器Mosaic。

提到Web，必须要提到另外一个词，CSS。96年12月，世界万维网的一个工作组发布了CSS1.0规范。CSS允许开发者用外联的样式表来取代那些难以维护的内嵌样式，这几秒钟之内就可改变全站的设计。并不需要返回到每个html页去寻找需要单独改变的文本元素。应该说，正是因为有了CSS,才是今天的网络易于开发、维护、设计。并且从精英模式走向我们平常老百姓都可以应用。举个例子说吧，博客就是一个很好的平台，我想如果它在10几年前，我们要想改变一下博客的图像和文字，可能对与我们来说是一件不可能的事情，但是如今却是很容易实现的，只需根据提示要求，就可以改变，很方便。 未来，Web的发展必将是无可限量的，并且影响着计算机网络技术的发展

五、心得体会

Web这门课程让我们对编写网页产生了浓厚的兴趣，每次上课看着老师给我们展示不同的功能时，就觉得这是一门很神奇的学科。因为这是一门实践性很强的学科，所以课后自己也会对照着老师的PPT，试着完成不同的功能，每次做成了也非常有成就感。Web的前半部分，介绍HTML、CSS、JavaScript的部分相对来说比较简单，而后半部分关于web与数据库连接的内容有点困难，最开始做的时候一直出错。直到后来在老师和同学的帮助下才慢慢解决问题。

由于平时学习比较繁忙，时间比较少，对于网页设计软件的强大功能运用得还不够。在网页设计过程中，由于缺乏训练，所以在设计时也遇到了很多麻烦，有时插入一个特效脚本也是很麻烦。在网页制作过程中，想提高设计水平，想有个理想的网页，必须要勤奋练习，我将在以后的学习过程中不断努力。

六、结语

总体来说，这学期的Web学习有好的部分，也有不足的部分。但是至少自己已经入门，能够独立编写一些网页了。下学期还有这方面的课程，而且还是要用Java语言编写的，对于我来说，难度更大，所以希望以后能够更加努力的学习，将这方面做得越来越好！

七、参考文献:

【1】樊月华.Web技术应用基础.北京：清华大学出版社，2012.

 

第二篇：WEB程序设计第四课总结

一、循环1.while循环2.for循环3.do while循环4.for in循环二、字符串1.concat将两个或者多个字符串的文本组合起来，返回一个新的字符串。var a="hello";var b=",world";var c="a.concat(b)";alert(c);2.indexOf返回字符串中一个子串第一处出现的索引（从左到右搜索，且下标从0开始）。如果没有匹配项，返回-1；var index1=a.indexOf("1");var index2=a.indexOf("1",3);3.charAt返回指定位置的字符。var get_char=a.charAt(0);4.lastIndexOf返回字符串中子串最后一处出现的索引(从右到走搜索)，如果没有匹配项，返回-1.var index1=lastIndexOf('1');var index2=lastIndexOf('1',2);5.match检查一个字符串匹配一个正则表达式内容，如果没有匹配返回null。var re=new RegExp(/^\w+$/);var is_alpha1=a.match(re);var is_alpha2=b.match(re);6.substring返回字符串的一个子串，传入参数是起始位置和结束位置。var sub_string1 = a.substring(1); var sub_string2 = a.substring(1,4); 7.substr 返回字符串的一个子串，传入参数是起始位置和长度 var sub_string1 = a.substr(1); var sub_string2 = a.substr(1,4); 8.replace 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。 var result1 = a.replace(re,"Hello"); var result2 = b.replace(re,"Hello"); 9.search 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。 var index1 = a.search(re); var index2 = b.search(re); 10.slice 提取字符串的一部分，并返回一个新字符串（与 substring 相同）。var sub_string1 = a.slice(1); var sub_string2 = a.slice(1,4); 11.split通过将字符串划分成子串，将一个字符串做成一个字符串数组。 var arr1 = a.split(""); 12.length 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。 var len = a.length(); 13.toLowerCase 将整个字符串转成小写字母。var lower_string = a.toLowerCase(); 14.toUpperCase 将整个字符串转成大写字母。 var upper_string = a.toUpperCase(); 三、数组1、数组的创建var arrayObj = new Array();　//创建一个数组var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　创建一个数组并赋值2、数组的元素的访问var testGetArrValue=arrayObj[1]; //获取数组的元素值arrayObj[1]= "这是新值"; //给数组元素赋予新的值3、数组元素的添加arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度ar

rayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。4、数组元素的删除arrayObj.pop(); //移除最后一个元素并返回该元素值arrayObj.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素5、数组的截取和合并arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组6、数组的拷贝arrayObj.slice(0); //返回数组的拷贝数组，注意是一个新的数组，不是指向arrayObj.concat(); //返回数组的拷贝数组，注意是一个新的数组，不是指向7、数组元素的排序arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址arrayObj.sort(); //对数组元素排序，返回数组地址8、数组元素的字符串化arrayObj.join(separator); //返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。toLocaleString 、toString 、valueOf：可以看作是join的特殊用法，不常用数组对象的3个属性1、length 属性：Length属性表示数组的长度，即其中元素的个数。例如：var arr=[12,23,5,3,25,98,76,54,56,76];//定义了一个包含10个数字的数组alert(arr.length); //显示数组的长度10arr.length=12; //增大数组的长度alert(arr.length); //显示数组的长度已经变为12alert(arr[8]); //显示第9个元素的值，为56arr.length=5; //将数组的长度减少到5，索引等于或超过5的元素被丢弃alert(arr[8]); //显示第9个元素已经变为"undefined"arr.length=10; //将数组长度恢复为10alert(arr[8]); //虽然长度被恢复为10，但第9个元素却无法收回，显示"undefined"2.prototype 属性返回对象类型原型的引用。prototype 属性是 object 共有的。function array_max( ){var i, max = this[0];for (i = 1; i < this.length; i++){if (max < this[i])max = this[i];}return max;}Array.prototype.max = array_max;var x = new Array(1, 2, 3, 4, 5, 6);var y = x.max( );3.constructor 属性表示创建对象的函数。例如：x = new String("Hi");if (x.const

ructor == String) // 进行处理（条件为真）。或function MyFunc {// 函数体。}y = new MyFunc;if (y.constructor == MyFunc) // 进行处理（条件为真）。四、面向对象1.对象的上下文依赖<script> var str = "我是一个 String 对象 , 我声明在这里 , 但我不是独立存在的！"var obj = { des: "我是一个 Object 对象 , 我声明在这里，我也不是独立存在的。" }; var fun = function() { console.log( "我是一个 Function 对象！谁调用我，我属于谁：", this ); }; obj.fun = fun; console.log( this === window ); // 打印 true console.log( window.str === str ); // 打印 true console.log( window.obj === obj ); // 打印 true console.log( window.fun === fun ); // 打印 true fun(); // 打印 我是一个 Function 对象！谁调用我，我属于谁：window obj.fun(); // 打印 我是一个 Function 对象！谁调用我，我属于谁：obj fun.apply(str); // 打印 我是一个 Function 对象！谁调用我，我属于谁：str </script>2.字面式对象声明开发者可以随意地用 字面式声明方式来构造一个对象，并对其不存在的属性直接赋值，或者用 delete 将属性删除var person = { name: “张三”, age: 26, gender: “男”, eat: function( stuff ) { alert( “我在吃” + stuff ); } }; person.height = 176; delete person[ “age” ];3. 使用构造器 (constructor) 创建对象// 构造器 Person 本身是一个函数对象function Person() { // 此处可做一些初始化工作} // 它有一个名叫 prototype 的属性Person.prototype = { name: “张三”, age: 26, gender: “男”, eat: function( stuff ) { alert( “我在吃” + stuff ); } } // 使用 new 关键字构造对象var p = new Person();4. 对象的 __proto__ 属性和隐式引用function Person( name ) { this.name = name; } var p = new Person(); // 对象的隐式引用指向了构造器的 prototype 属性，所以此处打印 true console.log( p.__proto__ === Person.prototype ); // 原型本身是一个 Object 对象，所以他的隐式引用指向了// Object 构造器的 prototype 属性 , 故而打印 true console.log( Person.prototype.__proto__ === Object.prototype ); // 构造器 Person 本身是一个函数对象，所以此处打印 true console.log( Person.__proto__ === Function.prototype );5. 利用原型链 Horse->Mammal->Animal 实现继承// 声明 Animal 对象构造器function Animal() { } // 将 Animal 的 prototype 属性指向一个对象，// 亦可直接理解为指定 Animal 对象的原型Animal.prototype = { name: animal", weight: 0, eat: function() { al

ert( "Animal is eating!" ); } } // 声明 Mammal 对象构造器function Mammal() { this.name = "mammal"; } // 指定 Mammal 对象的原型为一个 Animal 对象。// 实际上此处便是在创建 Mammal 对象和 Animal 对象之间的原型链Mammal.prototype = new Animal(); // 声明 Horse 对象构造器function Horse( height, weight ) { this.name = "horse"; this.height = height; this.weight = weight; } // 将 Horse 对象的原型指定为一个 Mamal 对象，继续构建 Horse 与 Mammal 之间的原型链Horse.prototype = new Mammal(); // 重新指定 eat 方法 , 此方法将覆盖从 Animal 原型继承过来的 eat 方法Horse.prototype.eat = function() { alert( "Horse is eating grass!" ); } // 验证并理解原型链var horse = new Horse( 100, 300 ); console.log( horse.__proto__ === Horse.prototype ); console.log( Horse.prototype.__proto__ === Mammal.prototype ); console.log( Mammal.prototype.__proto__ === Animal.prototype );6. 使用 Simple Inheritance 实现类式继承// 声明 Person 类var Person = Class.extend( { _issleeping: true, init: function( name ) { this._name = name; }, isSleeping: function() { return this._issleeping; } } ); // 声明 Programmer 类，并继承 Person var Programmer = Person.extend( { init: function( name, issleeping ) { // 调用父类构造函数this._super( name ); // 设置自己的状态this._issleeping = issleeping; } } ); var person = new Person( "张三" ); var diors = new Programmer( "张江男", false ); // 打印 true console.log( person.isSleeping() ); // 打印 false console.log( diors.isSleeping() ); // 此处全为 true，故打印 true console.log( person instanceof Person && person instanceof Class && diors instanceof Programmer && diors instanceof Person && diors instanceof Class );7. 使用闭包实现信息隐藏JavaScript 没有实现面向对象中的信息隐藏，即私有和公有。与其他类式面向对象那样显式地声明私有公有成员的方式不同，JavaScript 的信息隐藏就是靠闭包实现的// 声明 User 构造器function User( pwd ) { // 定义私有属性var password = pwd; // 定义私有方法 function getPassword() { // 返回了闭包中的 password return password; } // 特权函数声明，用于该对象其他公有方法能通过该特权方法访问到私有成员this.passwordService = function() { return getPassword(); } } // 公有成员声明User.prototype.checkPassword = function( pwd ) { return this.passwordService() === pwd; }; // 验证隐藏性var u = new User( "123456" ); // 打印 true console.log( u.checkPassword( "123456" ) ); // 打印 undefined

console.log( u.password ); // 打印 true console.log( typeof u.gePassword === "undefined" );