1、第四章. Web应用客户端开发技术,对外经济贸易大学信息学院,第四章内容,第一节.C/S结构向B/S结构演化 第二节.基于HTML的客户端开发技术 第三节.基于JavaScript的客户端开发技术 第四节.其它客户端开发技术,第四章内容,C/S结构向B/S结构演化 基于HTML的客户端开发技术 基于JavaScript的客户端开发技术 其它客户端开发技术,第一节 C/S结构向B/S结构演化,随着网络技术的发展，应用软件的结构也在不断发展，目前，典型的应用结构有C/S（Client/Server,客户/服务器）结构、B/S(Browser/Server，浏览器/服务器)结构。其中B/S结构作为W
2、eb应用的一种主流技术得到广泛使用，单独的C/S应用相对来说越来越少，而是更多地和B/S结合起来使用，以便满足大多数复杂应用的要求。,1. C/S结构 C/S结构指的是客户/服务器结构。这种结构的应用程序在结构上一般分为两部分，一部分称为客户端程序，通常安装在单独的一台机器上，这台机器被称为客户机，用户通过它来使用应用软件；另一部分称为服务器端程序，一般部署在另一台独立的机器上，这台机器被称为服务器。客户端和服务器通过网络通讯，多台客户端可以同时访问一台服务器。C/S结构的理念是胖客户端（客户端功能较强），它同时利用了客户端机器和服务器的硬件计算能力，所有的业务逻辑都是基于客户端的实现，客户端
3、接受用户的请求，并向数据库服务提出请求，后端的数据服务器完成数据的集中存储和管理。它响应客户的请求将数据提交给客户端，客户端再对数据进行集中处理和计算，然后将结果显示给用户。在这种结构中，客户端机器要求有一定的计算能力，服务器的硬件也必须具有足够的处理能力。两层结构的应用程序（参见图4-1）就是早期的C/S结构应用程序模型，它主要由完成业务逻辑的客户机和存储业务数据的数据库服务器组成。,CS结构在技术上应用已经很成熟，如下是它的一些主要优点： 交互性强：供用户使用的客户端交互界面功能较强，客户程序和服务器程序的交互方便。 网络通信量低：客户端和服务器端只传输有效数据, 利于处理大量数据. 响应
4、速度较快:这种应用一般在局域网内使用，加上网络通信量低，所以服务器对客户端的响应较快。,尽管基于CS结构可以开发出功能强的应用程序，但是C/S结构的应用程序也具有以下缺点： 软件维护和功能升级较困难由于应用逻辑和用户界面等代码混杂在一起，代码的维护和功能升级比较困难，修改一些小的地方可能都会影响很大，增加新的功能也需要仔细考虑和原有的代码在结构上如何共存。 部署及维护困难，不利于扩展CS结构的应用程序，要求在每个客户端都安装客户端应用程序，不能实现快速部署安装和配置，同时难于维护，难于适应集中管理的要求，要求具有一定专业水准的技术人员去完成安装和维护。通常这种结构多用于小型局域网，不利于扩展。
5、 数据安全性不好因为客户端程序可直接访问服务器上的数据库（很多应用都是这样），那么，在客户端计算机上的其他应用程序也可以非法访问数据库，这样数据库的安全性受到威胁。,2.多层C/S结构软件多层结构一般将用户界面功能、业务逻辑功能和数据库的数据处理等功能分散在不同软件层次上，每个层次上关注的功能不同，典型的如三层C/S结构将应用分成三层：用户界面层、应用逻辑层和数据库层（参见图4-2）。用户界面层主要完成用户的交互式界面，用于系统输入和输出；应用逻辑层一般部署在应用服务器上，完成应用逻辑和控制等功能，系统的复杂性也主要体现在这一层；最后的数据库服务器存储大量的数据信息和数据逻辑，所有与数据有关的
6、安全、完整性控制、数据的一致性、并发操作等都由它完成。,多层结构设计给软件开发带来以下好处： 可重用性因为有了业务层的独立存在，业务层中的各种业务单元可以被不同的应用程序使用,可复用性强。 配置的灵活性软件系统被分成了独立的多层，可以根据企业对于业务的功能需求和性能需求灵活地配置各层次的物理位置，各层的硬件要求也可以根据应用规模的变化独立调整。 开发并行性只要事先设计好各层之间的接口，各层就可以在约定好的接口下进行并行开发。 系统升级容易，软件维护难度小当软件需求变更时或技术进步时，只需要更改相应层中的组件，在保证接口不变的情况下，不会影响系统的其他部分。 当业务规则变化时，只要更新单一的业务
7、层，对其他层影响不大，软件维护成本较低。,3. B/S结构 B/S（Browser/Server）结构代表浏览器和服务器结构。它是随着Internet技术的兴起，对C/S结构的一种改进的结构。在B/S结构下，用户工作界面是通过Web浏览器来实现，一般Web浏览器和HTML文档以及一些脚本等共同完成用户界面功能，主要的业务逻辑在Web服务器端实现(Web服务器也可能扩充，比如一些支持Java技术的容器)。用户通过浏览器向分布在网络上的Web服务器发出请求，Web服务器处理请求，可能会执行其它的应用程序，或者访问数据库并完成数据处理、最后将结果返回给Web浏览器。B/S结构的应用一般采用3层结构，
8、分别是用户界面层，应用层和数据库层(参见图4-3三层)。用户界面层在浏览器中执行。B/S三层结构和三层C/S体系结构的一个很大不同点是用户界面层的区别，在B/S结构中，用户界面层一般在Web服务器上部署，而三层C/S结构它一般在客户机本地。另外，B/S三层结构采用了Web服务器。,B/S结构主要优点如下： 分布性强、维护方便：所有的应用程序都在Web服务器上安装，且只有一份。大大简化了客户端，只要装上操作系统、网络协议软件以及浏览器即可。 已经形成了标准的开发技术（JAVA技术，.Net技术），广泛的应用服务器支持，相对B/S应用来说，开发应用的难度已经降低。 B/S结构提供了异种机、异种网、
9、异种应用服务的联机、联网、统一服务的开放性技术基础。,B/S结构也有如下缺点： 数据安全性需要单独解决 数据传输速度慢 软件的个性化特点明显降低 某些功能较难实现：例如大量的数据输入、报表制作等。,4. C/S和B/S结合使用 B/S技术尽管得到广泛认同，成为软件开发技术的主流，但是传统的C/S体系结构并非一无是处，很多时候，C/S和B/S可以结合使用，这样充分发挥二者的优势，弥补彼此的不足。一般信息发布多采用B/S结构，保持了B/S结构瘦客户端的优点。客户机只需要具有WWW浏览器就可以访问应用。数据库访问多采用C/S结构。实际上，前面提到的三层BS结构中，Web服务器中的应用逻辑本身就是使用
10、了C/S技术和数据库交互。在Web服务器上并不存在完全采用C/S结构带来的客户端维护工作量大等缺点。在这里（Web服务器中应用逻辑）采用C/S结构可以构造非常复杂的应用。另外，如果浏览器（A方）的一个业务请求到达Web服务器，在Web服务器端的程序（B方）还需要和其他应用（C方）交互，以获取需要的信息而完成这个业务请求，这时，由于Web服务器端的程序（B）是没有界面的程序，它一般不会采用B/S结构去和其他应用（C）通信，它往往采用C/S结构把自己（B）作为一个客户端，向其他应用(C)方发起请求以获取数据，然后把获取的数据返回给浏览器（A）。B/S和C/S这两种软件体系结构的有机结合，可以扬长避
11、短，有效地发挥了各自的优势。在应用开发时候要灵活运用它们。,第四章内容,第一节.C/S结构向B/S结构演化 第二节.基于HTML的客户端开发技术 第三节.基于JavaScript的客户端开发技术 第四节.其它客户端开发技术,第二节 基于HTML的客户端开发技术,1. HTML的特点 HTML及其技术具有跨平台性、易用性、以及瘦客户端等特性。 1) 跨平台性 采用HTML制作的网页一般需要发布到WWW服务器供用户访问，无论是UNIX操作系统、Windows操作系统还是Linux操作系统，都有很多WWW服务器软件可以在它们之上运行。开发的HTML网页可以发布在任何WWW服务器上，而不受操作系统和W
12、WW服务器的限制；另外，HTML的语法是由W3C(World Wide Web Consortium)定义和维护的，客户端的浏览器如IE（Internet Explorer，微软浏览器软件）、Navagator（Netscape浏览器软件）和其他的一些浏览器软件都支持，这样也不受用户浏览器差异的限制。,2) 易用性 易于使用，无论是编写HTML页面还是访问页面都比较简单。很多用户和开发人员都乐于放弃具有复杂的用户界面的C/S结构的应用，而愿意使用基于HTML的拥有简单界面的应用。 3)瘦客户应用 采用HTML及其扩展技术（如Servlet，JSP，CGI，ASP等）开发的应用，属于典型的瘦客户
13、应用，甚至零客户端应用。用户的机器上除了要求安装有浏览器（微软操作系统自带浏览器）外，不需再安装其他软件。基于HTML的应用程序部署成本低而且应用的结构简单。,2. HTML标记在开发中的应用 1) 静态信息发布 信息共享、信息发布是WWW及HTML技术发明的最初目的，信息发布目前仍然是HTML最广泛的应用。通过编写包含各种信息的简单的HTML脚本，然后将脚本放到WWW服务器上(发布)，客户就可以通过一个被公布的URL访问这些信息。很多信息可能就是一次简单的发布，特别是很多企业或者个人的信息本身比较少，对信息发布没有高的要求，对历史信息也不需要维护，这种需求单独使用HTML就可以满足需求。如果
14、通过一些网页开发工具（如FrontPage，Dreamweaver）可以更加方便的进行信息格式化。更为简单的是，Word字处理软件是使用最广泛的编辑软件，使用它可以直接将编辑的内容保存为HTML格式的网页，然后方便地发布。,2) HTML与服务器端程序交互 对于有些信息发布应用，出于各种需要，可能需要服务器端的程序进行一些管理和逻辑处理。HTML主要是通过Form标记和链接去和后端服务器应用进行交互的。HTML中的Form标记 在各种HTML标记里面，Form标记（也叫表单标记）是最重要的元素之一。Form标记主要用于接收用户的输入，同时将接收的输入信息提交给后台的处理程序，处理程序可能是CG
15、I程序、JSP或者ASP等任意的服务器端程序。在基于浏览器的Web应用程序中，Form标记是最主要的输入手段，而输入（和输出）是应用程序的重要功能，因此，设计和开发Form是开发Web应用的主要工作之一。,HTML中的链接元素 HTML中的链接主要是用于组织页面，链接除了可以链接一些静态的网页和图片外，它也可以链接到后台的Servlet，JSP，CGI，ASP等一类的处理程序，所以，链接也是和后台交互的重要手段之一。通过链接和后台的交互与通过Form和后台交互有以下不同：链接只能使用Get方式；而Form通过method属性可以使用Get，也可以使用Post。链接提交的信息是固定的，链接里面可
16、能会包含一些参数（“名字/值”对，如一个链接的URL为http:/ HTML和服务器端程序的配合 HTML本身是静态的，用于发布共享的信息。实际应用中，Web应用需要提供动态的信息，这时需要服务器端的程序进行一些管理和逻辑处理。比如，应用需要提供以下支持： 应用要根据用户的输入给出响应。 应用的信息来自数据库，而数据库里的数据会定期或者不定期变化，每次发布时候都要将数据库最新的数据发布。 应用的有些信息是有权限控制的，不同权限的人看到的信息不同，等等。这些需求非常普遍，通过和Servlet，JSP，CGI，ASP等服务器端技术的结合可以实现这些动态的效果。无论是Servlet，JSP，CGI还
17、是ASP，通过链接或者Form都可以由客户端的HTML调用，在这些服务器端执行的程序（或者脚本）都可以通过调用各自的提供的编程接口获取前端提交来的数据，然后对数据进行处理，最后给出处理的响应。针对浏览器提交的请求，响应一般是另一个新的HTML页面，新的HTML页面可以包含任何HTML标记，并可以继续和后端的应用进行交互。,4. HTML技术的局限性 尽管HTML技术有它与生俱来的优点，但是某些应用系统并不完全适合采用HTML技术，如： 一些较复杂的应用软件可能要求多次提取网页来完成一项事务处理，这往往导致交互速度无法接受。 一些应用要求有复杂的用户界面。 一些应用要完成复杂的计算，这也不是HT
18、ML的特长。 使用HTML，一些简单的交互活动也可能需要用很多的脚本来完成。 通过Form等和后台交互，HTML网页只能通过简单的“名字/值”对和服务器端的应用传输数据，数据封装能力较差。,3.表单标记 表单是HTML页面和服务器端程序交互的核心。表单相关的常用标记如下：通过这些标记，可以实现包含各种界面元素的用户交互界面，用于用户输入信息，提交给后台处理。比如前面提到的，对于Form各种标记的学习，重点要掌握它们的用途，各种属性（特别是name属性，value属性，type属性）及属性的作用。,标记对 作用标记对的作用是定义表单的开始和结束位置，属于处理表单的其它标记都应该放在这对标记之间。
19、由这些标记的适当组合来创建一个表单，用户通过Form及其子标记输入信息并提交给服务器端程序处理，在Form标记中可以指定服务器端的处理程序。 特点标记对要成对使用，标记具有ACTION、METHOD和TARGET属性。 ACTION属性ACTION指定处理程序，其参数值是该处理程序的程序名及其网络路径（网址或相对路径)，如：，当用户提交表单时，服务器将执行网址http:/ METHOD属性METHOD属性用来定义处理程序从表单中获得信息的方式，可取值为 GET 和 POST 的其中一个。GET方式是处理程序从当前HTML文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB以下
20、。POST方式与GET方式相反，它是当前的HTML文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。TARGET属性用来指定目标窗口或目标框架（Html的Frame）。当提交一个请求给服务器后，一般服务器要给客户端一个响应，这个响应可能是一个新的页面，新的页面可以在提交窗口显示，并且可以指定显示的框架；响应也可以在一个新的窗口显示，通过TARGET属性可以实现这些功能。,2) 标记 作用好的软件总是会为用户提供方便的操作界面，比如文本框、复选框等。HTML的标记就可以提供这样的功能，它用来定义一个用户输入区。用户可以使用INPUT标记中的text，checkbox，hidden
21、，pass word，radio进行输入，然后提交给服务器端程序处理。类型为submit的元素用于将输入的表单内容提交给服务器；类型为reset的元素将表单内容全部清除，以便重新填写。 特点标记不是成对使用的。它必须放在标记对之间。标记的TYPE属性的语法为：其引号内应该输入参数值，可以在8个参数值中选择一个，TYPE属性的不同的值分别提供了八种类型的输入区域，其各自的参数值、输入区域的类型和形状请看下边 表,TYPE属性的参数值、输入区域的类型和形状,3）标记对 作用标记对用来创建一个下拉列表框或可以复选的列表框。用户可以在SELECT中选择1个或者多个输入项目，提交给服务器端程序处理。 特
22、点标记对总是成对使用，放在标记对之间。标记具有MULTIPLE、NAME和SIZE属性。 的属性在的属性中，MULTIPLE属性不用赋值，直接加入标记中即可使用，加入了此属性后列表框就成了可多选的了。NAME属性的值是此列表框的名字。SIZE属性用来设置列表的高度，缺省时值为1，若没有设置这个属性，显示的将是一个弹出式的列表框。,4）标记 作用对于标记对所创建的列表框，会有多个选项，其中每个选项显示的具体内容，以及这些选项中的默认选项都是由标记来规定的。 特点标记不成对使用，放在标记对之间。它有SELECTED和VALUE两个属性。VALUE属性指定列表框多个选项中的一个选项显示的具体内容。S
23、ELECTED属性指定列表框多个选项中的一个选项作为默认的选项。标记的属性值要传送到服务器上，服务器通过调用区域的名字的VALUE属性来获得该区域选中的数据项。使用SELECT和OPTION输入信息并提交给服务器的时候，要特别注意，显示的内容和提交的内容可能不同，因为显示和提交的内容分别在两个位置指定，显示要求直观，容易理解，而提交的被程序处理的内容没有这些要求。比如在一个Form的SELECT标记中包含了一个OPTION标记，定义为：AC米兰，用户在界面上看到的“AC米兰”,而如果Form被提交，那么名字为qd的SELECT提交给服务器端的值为“ml”，而不是“AC米兰”。,标记示例,5）标
24、记对 用来创建一个可以输入多行文字的文本框，此标记对用于标记对之间。具有NAME、COLS和ROWS属性。COLS和ROWS属性分别用来设置文本框的列数和行数，这里列与行是以字符数为单位的。如果客户端要提交大量的文本信息给服务器端，使用TEXTAREA是一个选择。请看下边表：,除了上面介绍的标记外，还有一些其他的标记，使用相对较少，限于篇 幅，这里不再一一介绍，实际开发中如果使用到，可参考其他资料。另 外，Form相关元素还有事件这样的属性，比如用户用鼠标单击以下对 象时，会产生onClick事件： button（按钮对象） checkbox（复选按钮） radio （单选按钮） reset
25、buttons（重新填写Form按钮） submit buttons（提交按钮） 其他的事件包括： 文本框内容改变会引发事件onChange 当Text或TextArea对象中的文字被加亮后，引发onSelect事件 当用户单击Text或TextArea以及select对象时，此时该对象成为激活对象。 产生onFocus获得焦点事件 当Text对象、TextArea对象及select对象不再拥有焦点，引发失去焦点 onBlur事件 类似的事件发生时，可以在属性中指定调用JavaScript脚本动态处理，在 JavaScript中可以操作Form对象并提交Form内容给服务器，进一步的说 明，请
26、参看JavaScript部分。,4.综合示例 下面给出一个售书网站的前端购物流程中的典型的HTML页面。包括：新用户注册，商品搜索，购物综合面。 1）新用户注册 对许多网站而言，在使用其提供的功能的时候，都需要先注册，新用户注册是用户常用的一个功能，有很多种形式，以下是一种常见的注册方式，其界面见图，它可以用页面开发工具，或者采用手工编码来实现。下面采用HTML来编写其程序。,下面是其HTML代码，其网页见图4-4：客户信息会员名称： * 密码：* 密码为一个 4-8位的数字或英文字母重复输入密码： * 真实姓名： * ,性别： 男女联系电话： * 移动电话： E-Mail ： * ,所在地区
27、： 请选择.北京广东香港澳门台湾中国以外地区* 详细地址： * （为方便我们及时将书送到您手上，请您提供尽可能详细的地址及所在单位名）,邮政编码： * 工作单位： 客服电话：(010)64491861 ； (010) 64491862传真： (010)- 64491863 客户服务 E-mail ： ,2)商品搜索商品搜索也是用户常用的一个功能，有很多种搜索形式，以下以通过关键字搜索的前端页面作为示例。它可以用页面开发工具，或者手工编码实现。下面是采用HTML编写的程序，其界面见下图。,商品搜索类别：所有类别图书影视音乐游戏软件虚拟卡时尚专卖,关键字：订单查询界面可以采用类似的界面，输入订单
28、号查询处理情况。另外，可以输入会员号码查询该会员所有的订单情况。,3）购物综合页面 当客户访问到一个网站的主页面，可以通过页面合理的导航功能，点击其上的链接完成购物功能，一般购物主页面都包含许多购物链接。我们看一下简化后的新浪商城的购物主页面，复杂的页面实际是前面介绍的各类标记的综合运用，特别是TABLE标记的应用，TABLE大量被用来做页面设计，尤其是版面的布局上。尽管这样的代码较多，但是大量用到重复的标记，其逻辑并不复杂。下面是其程序代码，其界面见下图 ：,购物商城td,p,input,selectfont-size:12px;购物车订单查询, 通讯电脑数码,投影鲜花礼品音像笔记本,投影鲜
29、花礼品音像笔记本, 商 城 搜 索所有商品 IT 食品日用品 ,热门关键字：MP3 ,超薄经典！追求完音空间，马拉松式音乐享受!,云网D时代体验数字化商品感受无接触购物 ,索尼DV全线降价索尼数款摄像机优惠促销，给您优惠的价格 首信C8188首信C8188拍照手机送300元超值大礼,黛安芬 低至3折名品抢购中 ,MP4影院1980元CVC新品MP4掌上影院,影片录制播放,MP3播放 ,第四章内容,第一节.C/S结构向B/S结构演化 第二节.基于HTML的客户端开发技术 第三节.基于JavaScript的客户端开发技术 第四节.其它客户端开发技术,第三节 JavaScript的客户端开发,HTM
30、L只能提供一种静态的信息资源，缺少动态的效果，将HTML和服务器端的技术的结合以后，在服务器端可以实现动态效果。但是，在客户端如何实现动态效果？客观上存在着这种需求，如：使得Web页面是活动的，可以处理各种事件，如鼠标在图片上的移动会产生图片的更换或者翻转效果等客户端进行一些逻辑判断和数据处理， 动态决定是否提交数据给服务器端程序,第三节 JavaScript的客户端开发,这些要求可以通过JavaScript得到满足。JavaScript在客户端的开发的应用中有着非常重要的作用，可以使得应用非常灵活，因篇幅限制，本书么没有大量使用JavaScript，但是对于开发功能强大、灵活实用的Web应用
31、而言，JavaScript是不可缺少的。开发者应该掌握JavaScript的基本语法和应用，在此基础上再使用开发工具（如Dreamweaver）自动生成完成相应功能的JavaScript代码，提高工作效率。下面介绍了JavaScript的一些基础知识，如果要了解完整的JavaScript语法细节请参考其它资料。,JavaScript简介 JavaScript是一种基于对象和事件驱动的脚本语言。它可以与HTML超文本标记语言、Java小程序一起实现，做到在一个Web页面中协同工作，从而增强开发客户端的应用的能力。JavaScript一般会嵌入到标准的HTML语言中完成相应的功能。JavaScri
32、pt和Java语言是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发，而JavaScript是Netscape公司的产品，其目的是为了扩展浏览器功能。,JavaScript的代码是一种文本格式的代码，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。 在HTML文档中，JavaScript使用来嵌入。语法如下：JavaScript语言代码序列；下面是一个例子，在该例子中，当用户访问该页面的时候，会利用JavaScript代码判断当前是上午还是下午并将判断显示在屏幕上，黑体部分是嵌入的
33、JavaScript代码。JavaScript例子 var tdate=new Date(); nhour= tdate.getHours() if(nhour “) else document.write(“下午好!“+“) ,2. JavaScript语法基础JavaScript脚本语言同其它语言一样，有它自身的基本数据类型、表达式和算术运算符及程序的基本框架结构。JavaScript提供了四种基本的数据类型用来处理数字和文字, 而变量提供存放信息的地方, 表达式则可以完成较复杂的信息处理 。,1）基本数据类型、常量、变量 在JavaScript中四种基本的数据类型：数值（整数和实数）、字
34、符串型（用双引号或者单引号括起来的字符或数值）、布尔型（使True或False表示）和空值。 常量包括整型常量、实型常量、布尔常量和空值型常量。整型常量和其它语言常量类似，它可以使用十六进制、八进制和十进制表示其值。 实型常量是由整数部分加小数部分表示，如11193.98,可以用科学计数法表示，如6E3、9e5等。布尔常量只有两种状态：True或False。 字符型常量使用单引号或双引号引起来的一个或几个字符。如“JavaScript is powerful“和“8723122“等。 JavaScript中有一个空值null,表示什么也没有。如果代码引用没有定义的变量,则返回一个null值。
35、JavaScript的变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。JavaScript中的变量命名以字母开头，中间可以出现数字如name1等。除下划线字符作为连字符外，变量名不能含有空格和其它特殊符号（如+）， 也不能使用JavaScript中的关键字作为变量。,在JavaScript中，变量可以用var关键字声明： var username; 该声明语句定义了一个username变量，但没有赋 予它的值。 var username =“John“ 该声明语句定义了一个username变量, 同时赋了初 值。 在JavaSc
36、ript中，变量可以先不声明，而在使用的 时候再根据实际数据的类型来确定变量的类型。 例如x=1100 、y=“Java“ 、z= True 、price=118.5等，其中x 整数，y为字符串，z为布尔型，price为实型。 JavaScript中也有全局变量和局部变量。全局变量定义在 所有函数体之外，其作用范围是整个函数；局部变量是定 义在函数体之内，只对该函数可见，对其它函数不可见。,2）JavaScript表达式和运算符 在定义完变量后，就可以对它们进行赋值、修改、计算等一系列操作，表达式由常量、变量或运算符组成，根据运算的结果，它可以分为算术表述式、字串表达式、赋值表达式以及布尔表达
37、式等。 JavaScript的运算符基本和其它语言类似，包括赋值运算符、比较运算符、算术运算符、按位运算符、逻辑运算符和字符串运算符等。,3）JavaScript程序控制流 JavaScript包括条件语句、循环语句用于控制程序执行流程，语法基本同java的语法。条件语句有if.else 和 switch。循环语句有for、while、do while。 4） JavaScript函数 函数是 JavaScript 中最基本的程序单元，函数的定义语法如下： Function 函数名(参数列表) 函数体;. Return 表达式; 它包括： 函数的名称 函数的参数，包含在由逗号分开的圆括号内 函
38、数体，包含在一对大括号内 一个简单函数的原型示例如下： function square(num) return num * num; 一般在HTML文档的头部定义函数，以便当文档被装载时函数首先载入。 JavaScript本身预定义了一些函数，通过这些函数可以完成一些通用的功能。,5）JavaScript事件驱动及事件处理 JavaScript不是面向对象的语言，但是它是基于对象的语言。基于对象的基本特征是采用事件驱动。通常鼠标、热键的动作或者其它事情发生称之为事件，由鼠标或热键的操作等引发的一连串程序的动作，称之为事件驱动。一般对发生的事件进行处理的程序或函数称为事件处理程序。,JavaSc
39、ript不是面向对象的语言，但是它是基于对象的语言。基于对象的基本特征是采用事件驱动。通常鼠标、热键的动作或者其它事情发生称之为事件，由鼠标或热键的操作等引发的一连串程序的动作，称之为事件驱动。一般对发生的事件进行处理的程序或函数称为事件处理程序。下面给出JavaScript处理的一些通过鼠标或热键的动作引发的事件。它主要处理以下几个事件：,鼠标单击事件onClick 用户用鼠标单击以下对象时，会产生 onClick事件。 button（按钮对象） checkbox（复选按钮） radio （单选按钮） reset buttons（重新填写Form按钮） submit buttons（提交按钮
40、） 通过在这些对象（Form子标记）的属性onClick里 面可以指定的事件处理程序或代码，用户可以使 用自写函数进行事件处理，也可以调用JavaScript 中内部的函数或者直接书写JavaScript的代码来处 理。,例1：下例实现了用户点击按钮时由SubmitChange函数给出响应的功能。 例2：下例实现了用户点击按钮时由JavaScript内部函数alert给出响应。 ,文本框内容改变事件onChange 当Text或TextArea文本框元素输入的字符值改变时该事件发生；另外，选中 select下拉列表框一个不同选项时也会引发该事件。例如，下例当文本框内容改 变时，会调用用户的ch
41、eck函数去检查邮政编码格式是否正确。其它常用的事件如下 选中事件onSelect：当Text或TextArea对象中的文字被加亮后，引发该事件。 获得焦点事件onFocus：当用户单击Text或TextArea以及select对象时，产生该事 件。此时该对象成为激活对象。 失去焦点onBlur：当Text对象或TextArea对象以及select对象不再拥有焦点、而 退到后台时，引发该事件，他与onFocus事件是一个对应的关系。 载入文件onLoad：当浏览器打开HTML文档时，产生该事件。比如，onLoad的 一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋 值，
42、使它可以被源代码使用。 卸载文件onUnload：当Web页面退出时引发onUnload事件，并可更新Cookie的 状态。 通常情况下，JavaScript中对于对象事件的处理通常由用户自定义函数来处理。,6）JavaScript面向对象的基本特征 JavaScript没有提供诸如抽象、继承、重载等有关面向对象语言的许多功能，所以它不是面向对象的语言。尽管如此，JavaScript还是具有面向对象的基本特征，JavaScript可以根据需要创建自己的对象。 JavaScript中的对象是由属性和方法构成的，可以通过以下方法创建一个对象进而使用它： 引用JavaScript内部对象获取由浏览器
43、环境中提供的HTML相关的对象创建新的对象,其中，JavaScript有下列常用的内部对象： 1.串对象 stringstring对象主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。string对象的方法细节参考其它资料。 2.数学计算的math对象Math对象主要提供除加、减、乘、除以外的一些数学运算，如对数，平方根等。 3.日期及时间对象日期及时间对象提供了有关日期和时间的对象，使用前通过new运算符创建一个对象（如语句myDate=New Date()；）。Date对象提供了方法获取和设置日期和时间。 4.浏览器的内部对象（HTML对象）,3.
44、用JavaScript操作浏览器的内部对象 1）浏览器的内部对象 浏览器的内部对象有很多，如窗口对象window、文档对象document和Form对象等。window窗口对象可以让JavaScript去处理浏览器窗口的方法和属性；document文档对象把HTML的一些基本的元素（如链接、锚和Form等）包装起来，提供给编程人员使用；form对象可以使设计人员用JavaScript 去直接访问HTML文档中的Form，这样可以实现动态改变Web文档的行为。当浏览器打开一个网页的时候，如果网页包含相应的元素（如链接等），那么浏览器就会准备好这些对象，JavaScript语言也就可以通过这些对象
45、去操作网页里面的元素了。,2）浏览器的Form对象 下面主要介绍Form对象，Form对象是文档对象的一个元素，通过document.forms数组来访问同一个页面上的多个Form对象,使用forms数组要比使用窗体名字要方便得多。假设下面是一个网页里面嵌入的两个Form：,当包含该Form的网页被浏览器打开后，可以通过以下两种方法访问unregister两个Form: 通过名字: 如document.register 去访问register这个Form（注意：不要忘记前面的document）。 通过Form数组： 如使用document.forms0去访问第一个Form (名字为regist
46、er的Form)，forms0中共有三个子元素，而Forms1中只有两个子元素。一个From中包含的子元素可能包括按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成，要访问这些子元素（如文本框）可以通过对应特定的子元素的数组（elements）下标或子元素的名字来实现，而每一个子元素主要是通过该元素的属性或方法来引用，所以掌握这些子元素的属性和方法非常重要。下面是访问它们的基本格式：formName.elements.methadName (Form名.元素名或数组.方法)formName.elements.propertyName(Form名.元素名或数组.属性),3）实例 为了有一
47、个更直观的认识，下面我们给出1个例子，该例子当点击提交按钮后，对name文本框进行检查，如果没有输入name，给出提示。该例子使用JavaScript实现。完整的代码例子如下：function CheckForm()if (document.register.n1.value.length = 0) alert(“请输入您姓名!“);return false;else return true; ,通过JavaScrpit操作Form ,注意以下几点： 嵌入了 一个JavaScript函数，函数定义位置在 之间。 document.register.n1.value.length 去得到regi
48、ster这 个Form的n1文本框的输入内容（value）的字符串 长度（length）。 点击名字为n3的提交按钮会调用CheckForm（） 函数（onclick函数）。 如果输入n1为空，提示一个对话框后，文本框n1 是register的子元素，整个HTML文档对象 （document）包含一个Form（register）。,第四章内容,第一节.C/S结构向B/S结构演化 第二节.基于HTML的客户端开发技术 第三节.基于JavaScript的客户端开发技术 第四节.其它客户端开发技术,第四节 其它客户端开发技术,1. Applet在客户端开发的应用 1）Applet简介 Applet
49、实际上是嵌入到HTML页面中在浏览器执行的一个Java程序，Applet的设计和实现遵守一定的规范，它包含1个主类（继承java.Applet.Applet类），可能包含0个或者多个其它类。Applet可以单独工作，也可以和HTML及JavaScript技术组合使用。下面是在网页中插入Java Applet语法：,Applet完全采用Java语言实现，许多专业人员更擅长利用Java已提供的丰富的功能来进行客户端编程。Applet具有几乎所有传统的Java应用程序的功能，比如，可以用来制作图形以及应用程序中的用户界面；可以使用Java丰富的网络相关的编程类等。如果使用得当，前面提到的HTML和JavaScript不容易满足的需求都可以用Applet来解决或缓解。 Applet保存在服务器上，每次浏览器访问包含Applet的网页的时候，客户机会自动下载Applet文件并执行。Applet和它的类文件是通过标准的HTTP请求传输到客户端的浏览器上的，所以Applet可以越过web页面数据所在的平台的防火墙进行发送。对于Applet应用的更新类似于HTML网页组成的应用的更新，它只需在服务器上安装最新的Applet类和支持库，安装和维护简单，成本较低。,
