1、Java Web开发,计算机系 孙杰,课程内容,本课程主要的内容包括HTTP、Java Web开发基础、JSP/Servlet编程、JDBC编程、Java Web框架技术。 重点是：理解Web编程，学会使用JSP/Servlet进行Web应用程序的开发；通过使用JDBC，能够开发基于数据库的Web应用。,你的收获,熟悉和深入了解Web编程知识； 达到JSP/Servlet入门中等程序员水平； 能够使用JSP/Servlet 开发Web应用： 动态网站 基于数据库的动态网站 使用框架技术的动态网站,课程安排,总学时数：45学时 学分数：3 理论教学时数：22 实验（实践）教学学时：20学时,教材
2、及参考资料,教材：Java Web开发实践教程 ，张阳 、刘冰月、李绪成著，ISBN:9787302176244 清华大学出版社 参考书： 精通Java Web开发 人民邮电出版社 王俊标 Java编程思想 机械工业出版社 深入体验Java Web开发内幕核心基础 电子工业出版社 开发者突击：Java Web主流框架整合开发电子工业出版社,Web开发基础知识,1,本章内容 1.什么是Web应用 2.Java Web开发 3.Web开发基础 HTTP协议 HTML静态网页 JavaScript脚本 动态网页技术,1.1 什么是Web应用,因特网（Internet）因特网是在TCP/IP协议基础上
3、建立的国际互联网。它是“计算机网络的网络”，即将全世界不同国家、不同地区、不同部门和机构的不同类型的计算机网络互联在一起，形成一个世界范围的信息网络。 World Wide Web 万维网包含文字、图片、视频和其他多媒体信息，通过因特网访问。万维网的出现，是因特网爆炸性发展的导火索。,Web能给我们带来什么？,Web的功能和服务模式,资源共享（包括计算处理能力、数据资源、软件等通过Telnet、FTP实现） 信息交流（电子邮件、BBS、ICQ） 获取信息（百度、Google、搜狐） 信息发布（Web是继电视、广播、报纸、杂志之后的第五媒体） 电子商务的运行平台 企业分布式应用,Web应用发展历
4、史 静态HTML页面 CGI技术 动态网页技术（Servlet、ASP、JSP、PHP） 模式和框架,Web应用是如何运行的,用户操作 打开浏览器，输入某个网址。 等待（可能会持续一段时间）。 浏览器显示要访问的信息。 服务器动作（用户等待过程） 浏览器把请求发送到Web服务器 Web服务器把请求转发给应用服务器 找到文件，加载执行 应用服务器把执行结果返回给Web服务器 Web服务器再把结果返回给浏览器,1.2 Java Web开发,Java的版本历史：从一种语言发展为一种平台Java的前身是一种与平台无关的语言“OaK”,诞生于1991年Sun公司的一个研究项目，最初目的是为了应用于消费类
5、电子设备的开发；1994年Internet开始起步，1995年NetScape宣布把Java集成到其浏览器中，可执行的Java代码可以以Applet的形式在浏览器中运行，Java开始流行。Sun公司1996年1月发布JDK1.0，1997年2月发布JDK1.1，Java开始在企业中应用。1998年12月发布JDK1.2，即Java 2 平台，并于1999年6月经集成重组后重新发布。 目前主要的Java平台及特点如下： J2ME - Java 2 Micro Edition:用于创建嵌入式应用程序的Java平台(如PDA、仪表)。 J2SE - Java 2 Standard Edition:用
6、于创建典型的桌面与工作站应用的Java平台。 J2EE - Java 2 Enterprise Edition:用于创建可扩缩的企业应用的Java平台。,1.什么是J2EE,J2EE是适用于创建服务器应用程序和服务的Java 2平台企业版（Java 2 Platform Enterprise Edition，J2EE）。这是一种利用Java 2平台来简化企业解决方案的开发、部署和管理相关的复杂问题的体系结构。J2EE技术的基础是核心Java平台或Java 2平台的标准版，J2EE不仅巩固了标准版中的许多优点，例如“编写一次、随处运行“的特性、方便存取数据库的JDBC API、CORBA技术以及
7、能够在Internet应用中保护数据的安全模式等等，同时还提供了对 EJB（Enterprise JavaBeans）、Java Servlets API、JSP（Java Server Pages）以及XML技术的全面支持。其最终目的就是成为一个能够使企业开发者大幅缩短投放市场时间的体系结构。,J2EE的组成-1,J2EE,J2EE Specification,J2EE Reference Implementation,J2EE Compatibility Test Suite,J2EE Blue Prints,J2EE的组成-2,J2EE,J2EE Specification,J2EE R
8、eference Implementation,J2EE Compatibility Test Suite,J2EE Blue Prints,J2EE规范： 定义J2EE的规范，开发商按 照这个规范实现自己的J2EE系统。,J2EE的组成-3,J2EE,J2EE Specification,J2EE Reference Implementation,J2EE Compatibility Test Suite,J2EE Blue Prints,J2EE参考实现： J2EE平台的软件开发包（J2EE SDK）； J2EE的完全实现；一组工具和运行环境；完 全免费得到（ Specification,
9、J2EE Reference Implementation,J2EE Compatibility Test Suite,J2EE Blue Prints,J2EE兼容测试包： 用来测试一种应用是否符合J2EE的规范,2、J2EE的组成,J2EE,J2EE Specification,J2EE Reference Implementation,J2EE Compatibility Test Suite,J2EE Blue Prints,J2EE蓝图： 提供了用于实施基于J2EE的多层应用的文档和实例套件的编程模型，简化了开发基于J2EE的多层应用程序的复杂性。它应被用作开发人员设计和优化组件的原
10、则，以便从策略上对开发工作进行分工，分配技术资源。,J2EE体系结构-5,J2EE核心技术,JSP，进行输入输出的基本手段； JavaBean，完成功能的处理； Servlet，对应用的流程进行控制； JDBC，是与数据库进行交互不可缺少的技术； JSTL和表达式语言EL，完成JSP页面中各种信息的控制和输出。,2 三层模型,表示层：用户接口和界面部分； 逻辑层：应用的业务逻辑实现部分； 数据层：存放数据资源的部分，通常是数据库关联系统和数据库。,B/S结构,B：Browser（浏览器） S：Server（服务器） 表示层：Web服务器（网页的形式） 逻辑层：应用服务器 数据层：数据库服务器,
11、B/S 体系结构,客户端浏览器,客户端浏览器,客户端浏览器,WEB服务器,应用服务器,数据库服务器,1.3 Web开发基础,HTTP协议 HTML静态网页 JavaScript脚本 动态网页技术,1.3.1 Internet中的协议,Internet的基本协议是TCP/IP协议，然而在TCP/IP模型最上层的是应用层(Applicationlayer)，它包含所有高层的协议。 应用层协议有：文件传输协议FTP、电子邮件传输协议SMTP、域名系统服务DNS和HTTP协议等。,1.3.2 什么是HTTP？,HTTP协议(Hypertext Transfer Protocol，超文本传输协议)是用于
12、从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。这就是你为什么在浏览器中看到的网页地址都是以“http:/”开头的原因。,自WWW诞生以来，一个多姿多彩的资讯和虚拟的世界便出现在我们眼前，可是我们怎么能够更加容易地找到我们需要的资讯呢？ 当决定使用超文本作为WWW文档的标准格式后，于是在1990年，科学家们立即制定了能够快速查找这些超文本文档的协议，即HTTP协议。,1.3.3 http 协议,http: TCP 传输服务: 客户端启动TCP
13、连接(创建插口) 到服务器, 端口 80 服务器接受来自客户端的 TCP 连接 http 报文(应用层协议报文) 在浏览器 (http client) 和Web服务器(http server)之间进行交换 关闭TCP 连接,http 是 “无状态（stateless）”的 服务器不保留任何访问过的请求信息,保留状态的协议很复杂哟! 过去的历史 (状态) 需要保留 一旦浏览器/服务器崩溃, 它们各自的状态视图就会发生分歧，还需要重新核对,小评论,Web: http 协议,超文本传输协议（http: hypertext transfer protocol） 万维网应用协议 客户端/服务器模式 客户
14、端: 浏览器请求、接收、展示 Web对象（ objects） 服务器: Web 服务器发送对象对请求进行响应 http1.0: RFC 1945 http1.1: RFC 2068,PC running Explorer,Server running NCSA Web server,Mac running Navigator,http request,http request,http response,http response,HTTP协议的通信过程,HTTP协议是基于客户/服务器模式的 在WWW中，“客户”与“服务器”是一个相对的概念，只存在于一个特定的连接期间，即在某个连接中的客户在另
15、一个连接中可能作为服务器。WWW服务器运行时，一直在TCP80端口(WWW的缺省端口)监听，等待连接的出现。,1.建立连接 连接的建立是通过申请套接字(Socket)实现的。客户打开一个套接字并把它约束在一个端口上，如果成功，就相当于建立了一个虚拟文件。以后就可以在该虚拟文件上写数据并通过网络向外传送。 2.发送请求 打开一个连接后，客户机把请求消息送到服务器的停留端口上，完成提出请求动作。 3.发送响应 服务器在处理完客户的请求之后，要向客户机发送响应消息。 4.关闭连接 客户和服务器双方都可以通过关闭套接字来结束TCP/IP对话,http 通信过程举例,假设用户键入了一个 URL htt
16、p 客户端启动 TCP 连接到上的http 服务器 (进程). Port 80 是 http 服务器的默认端口.,2. http客户端发送 http 请求报文 (包括URL) 进入 TCP 连接插口（socket）,1b. 在 上的http 服务器在 port 80 等待 TCP 的连接请求. “接受” 连接并通知客户端,3. http 服务器接收到请求报文, 形成 响应报文（ 包含了所请求的对象), 将报文送入插口（ socket）,time,4. http 服务器关闭 TCP 连接.,5. http 客户端接收到了包含html文件的响应报文。,非持续和持续连接,（非持续连接）Non-per
17、sistent http/1.0: 服务器分析请求、响应、关闭 TCP 连接 取对象需要2步 TCP 连接 对象请求/传送 每次传送都要受到TCP连接初始化时的慢启动影响 许多浏览器同时打开多个并行的连接来改善性能,（持续连接）Persistent http/1.1的默认设置 在同一TCP 连接上: 服务器分析请求、响应请求，分析新的请求、 客户端一旦下载到了基本的html文件（ base HTML ）马上发送对所有引用对象的请求. 较少的TCP慢启动.,http 报文格式: request（请求）,two types of http报文: request, response http 请求报
18、文: ASCII (可读格式),http 请求报文: 一般格式,http 报文格式: response（响应）,HTTP/1.0 200 OK Date: Thu, 06 Aug 1998 12:00:15 GMT Server: Apache/1.3.0 (Unix) Last-Modified: Mon, 22 Jun 1998 . Content-Length: 6821 Content-Type: text/htmldata data data data data .,状态行 (协议状态码 状态短语),首部诸行,数据, e.g., 被请求的html文件,http 响应状态码和短语,20
19、0 OK 请求成功, 被请求的对象在报文中 301 Moved Permanently 被请求的对象被移动过, 新的位置在报文中有说明 (Location:) 400 Bad Request 服务器不懂请求报文 404 Not Found 服务器上找不到请求的对象 505 HTTP Version Not Supported,位于（服务器-客户端）响应报文的第一行. 样例:,1.3.3 静态网页编程,HTML句法结构HTML文档结构和常用元素 HTML标准单位 HTML基本元素的使用 HTML的其他元素,HTML基础,为了在世界范围内发布信息，需要一种能够被普遍理解的语言，一种能为所有的计算机
20、作为信息发布用的母语，这就是万维网使用的超文本标记语言（Hypertext Markup Language，HTML)。,HTML基础,使用HTML的可以创建： 发布包括标题、正文、表格甚至照片的联机文档； 可以通过超链标记将所建的文档与其他联机文档建立访问关联； 设计浏览器表单进行远程交互服务，如查找信息、进行预订、购置产品等； 可以将电子表格、视频剪辑，声音节目和其他多媒体信息包括在HTML文档中。,HTML句法结构,HTML句法结构,一个HTML文档是普通的ASCII文本文件，它包含两类内容：普通的文本、代码或标记。标记(Tag)是用一对尖括号“”括起来的文本串，例如第一行的。标记通常具
21、有如下结构：在标记定义中，“tagname”是标记名，定义标记的类型；而“attributes”为属性，一般标记即可以不定义属性，也可以定义若干个属性，属性给出了这个元素的附加信息。,HTML句法结构,所谓元素（Element），是HTML中的主要构件，一般元素都是由成对的标记组成，例如 ： Google 单个出现的标记成为“空元素”，例如： 可以容纳其他元素的元素也称为“容器元素”，例如：Google . ,HTML句法结构,在元素的起始标记中可以填入相关的元素属性 在Google主页文档第二行的标记中，head是标记名，没有相关属性。 在文档主体定义中，定义了若干属性，属性值为“bgcol
22、or=#ffffff text=#000000 link=#0000cc vlink=551a8b alink=#ff0000 onLoad=sf()”。,HTML句法结构,需要注意，虽然标记和属性名称与字母大小写无关，但是属性值却往往对大小写敏感。 例如，可以在超链中定义相关的文件名，尽管在Windows系统中，href=a1和href=A1可以指向同一文件，但在UNIX系统中，却是指向不同的文件。 重要提示：在网页设计须统一命名方案,HTML句法结构,标记和文本结合起来形成元素(Element)。每个元素代表文档中的一个对象，比如文件头、段落或图片。一个元素可具有一个或一对标记，通常具有一
23、些相关的属性。 元素有两种类型：容器（container）元素和单个元素（空元素）。,HTML句法结构,容器元素包含文本内容，代表一个文本段、它由文本主体（或其他元素）组成，文本主体在开头和结尾处用一对标记来确定边界（结尾的标记用标记名前加“/”来表示）。例如，和标记把这两个标记之间的文本定义成一个文档标题。 而空元素是由不影响任何文本的单个标记组成的，它会在文档中插入一些对象。例如标记就是一个可以在文档中插入图像的单个元素。,HTML句法结构,容器元素与空元素一起完整地定义了文档的格式或显示形式。其它一些普通文本格式符号（如Tab、连续的空格、回车等）在HTML中都被当做单一的空格。例如，在
24、输入HTML文件时，可以在每个标记后有若干个空行，或在每个单词之间有10个空格，但浏览器对此却“熟视无睹”，结果显示可能会出乎预料。 尽管这可能使简单的格式变得更复杂，但它允许作者通过使用编程风格的技巧，如额外的空白空间和制表符等而使HTML文件具有可读性而不影响最终的文档显示。,HTML文档结构和常用元素,这三个元素一起构成完整的HTML文档结构模板，所有的HTML文档都应该遵循这个模板：Header elementbody of Document,HTML文档结构和常用元素,容器元素中包含的最为常用的元素有： text：这个元素是文档的抬头，类似书籍的页眉。在浏览器中，标题通常与文本页分开
25、显示（例如，在窗口的标题栏中）。抬头（TITLE）在用户保存网页时一般都作为文件名，所以命名应该注意。,HTML文档结构和常用元素,容器元素中包含以下几个常用元素： text：标题把括起来的文本作为标题。从标记、直到，可以有六个层次的标题（较小的数字标记较重要的标题）。标题通常用较大的字型编排，并且在该标题的上下各有一个空行。 ：段落标识文本主体中两个段落之间的间隔。 ：图像标记把图像插入到文档中，图像可以在SRC属性中给出的URL处找到。,HTML文档结构和常用元素, 把图像插入到文档中，图像可以在src属性指定的URL处找到。最常见的图像格式是GIF。 如果浏览器不支持插入图像（例如，Ly
26、nx浏览器），将显示在可选的alt属性中给出的文本。如果没有给出alt属性值，在图形所在的位置上可能会出现IMAGE的字样。 可选的align属性指出文本的当前行与图像在垂直方向上怎样对齐（通常是BOTTOM，但这随浏览器的不同而不同）。,HTML文档结构和常用元素,ISMAP属性用于建交互式的图形。如果使用语法，则这图像上成为一个可击点，产生一个链接到URL1处。 例如： ,texttext：该结构提供了一个无序的条目列表；每个条目以标记开始。通常在显示出的各条目项前置一个圆点。 text：超文本标记，也称为超链接。文本用某种特殊方式来显示（用颜色、下划线或其它类似方法）； ：放置一个横穿浏
27、览器窗口的水平线，通常水平线的上下各有一个空行。 ：在文本中强制换行，以便后继文本都放在下一行。,HTML文档结构和常用元素,HTML标准单位,在编辑HTML文件时，会涉及到对各种元素属性的赋值。 例如，定义标题的大小、定义文本的格式、定义图像的位置、定义水平线和表格的长宽、定义文字和背景的颜色、定义链接的指向位置等。通常用各种数据来为这些属性赋值。 一些数据，不仅在网页设计时经常要用到，而且它们的表示方法、代表的含义都有一套比较严格的规则。,HTML标准单位,长度单位 可以用来定义水平线、表格边框、图像等对象的长、宽、高等一系列属性，同时也能用来定义这些对象在网页上的位置等属性。 长度的表示
28、有两种方式：绝对长度和相对长度。 它们的单位分别为像素（pixel）和百分比（），像素代表屏幕上的各个显像点，而相对长度则描述了对象在浏览器窗口的所占的比例。,HTML标准单位,一般在网页设计中较少使用绝对长度，因为浏览器窗口可随时调整大小，如果水平线设置为绝对长度很容易造成不协调，而使用相对长度来描述则对象会随浏览器窗口大小变化而变化。,HTML标准单位,颜色单位也是描述网页表现形式中应用很频繁的一种数据类型。在设计网页的过程中，需要能定义字体、页面背景、表格背景甚至超链接的颜色，通过利用颜色数据来定义这些对象的颜色属性。,HTML标准单位,颜色单位有三种表达的方式： 十六进制的颜色代码 R
29、ed Characters 十进制颜色码Blue 颜色名码 Green Characters ,HTML标准单位,统一资源定位器(URL)1路径是一种因特网资源地址的表示法。该数据里中可以包括链接所需协议、链接主机的域名或IP地址、链接主机的通讯端口（port）号、主机文件的发布路径和文件名称等。 1 由W3C对HTML 4.0的定义中，URL的描述为“Universal Resource Identifier（URI）”。,HTML标准单位,在HTML中，URL路径又分为两种形式：绝对路径和相对路径。 绝对路径是将主机地址和主机上资源发布目录的路径和资源名称进行完整的描述。如:,HTML标准
30、单位,相对路径则是相对于当前的网页所在目录或站点根目录的路径。如:URL的绝对路径必须以http:/形式开始，例如： ,HTML基本元素的使用,HEAD容器HTML文档的标记是一个容器元素，在容器中允许出现以下元素： TITLE元素 “text“ TITLE元素所包含的内容通常会出现在浏览器的标题栏或成为保存网页到本地磁盘时的默认文件名。,HEAD容器(续),META元素META元素提供网页作者以各种方式来描述与文档本身而不是文档内容有关的信息。如META元素通常用来为搜索引擎定义页面描述以及搜索关键字；或者是定义用户浏览器上的Cookie，还可以设置页面使其可以根据定义的时间间隔刷新页面。值
31、得注意的是META标记是一个单个元素。,HEAD容器(续),以上语句为搜索引擎列出了关键字列表，这些关键字可以将页面正确地放置在著名搜索引擎的列表上，以便进行快速搜索。,HEAD容器(续),以上语句会产生一个“Expires: Tue, 20 Aug 2001 14:25:27 GMT”的HTTP的头部（header），使得缓存链（Caches）决定何时取回相关文件的新版本。大部分浏览器为了节约下载时间，会在本地硬盘上保存已访网页的临时版本。在用户下次打开同一页面时，浏览器将直接调用硬盘上的文件，而不是网上的。,HEAD容器(续),用户可以通过META元素为浏览器指定显示当前网页须用的语言编码
32、，而无需读者自选。上面语句的黑体部分指定了当前的网页语言编码是简体中文。如果需要将网页的编码方式指定为繁体中文，可以使用下面语句： ,HEAD容器(续),Script元素标记是用来在页面中插入由浏览器执行的脚本程序（JavaScript或VBScript），为容器元素。如：“LANGUAGE”属性用来指明脚本语言的种类。因为浏览器往往可以使用多种脚本语言，所以必须指明语言的种类。 注解标记（）是为了能与老版本以及无法解析脚本程序的浏览器兼容。,HTML基本元素的使用,容器 包含在标记对中的内容将显示在浏览器的主窗口中。 在开始设计网页之前，需要对页面进行一个整体的规划和设置，如背景颜色、背景图
33、案、页面留白以及大部分文字的颜色等等。 在HTML中，使用元素来定义页面的这些基本属性。如在本章开始时提到的搜索引擎“Google”主页的例子，其的定义如下： ,容器(续),BODY元素本身的属性可以分为三类： 背景属性，其中包括BGCOLOR和BACKGROUND： BGCOLOR 背景色 BACKGROUND 背景图案 文字属性： TEXT 正文文字颜色 LINK 链接文字颜色 ALINK 活动链接文字颜色 VLINK 已访问链接文字颜色 留白属性，其中分为LEFTMARGIN和TOPMARGIN。 LEFTMARGIN 页面左侧的留白距离 TOPMARGIN 页面顶部的留白距离,HTML
34、基本元素的使用,字符容器（Character Container）允许在段落内部格式化或描述字和词组,使其呈现出不同的风格 超文本链接超文本链接是HTML文档具有链接和检索功能的基本原因，也是HTML中最重要的概念之一。超文本锚点是指文档中的某处位置，在该位置下隐含了对其它文档的链接。 text,字符容器(续),超文本锚点用于标识超文本链接的参照物或目标。可为href或name属性之一，也可二者兼用。 href属性的值可以是一个链接锚点，也可以是一个URL地址。它可以链接一个HTML文档、图像或其它可用URL寻址的内容。 超文本锚还可以包括一个标记，允许用用插入的图形（如图标）作链接。 nam
35、e属性用于锚点命名，允许用户和其它的HTML文档直接指向文档的这个部分。,字符容器(续),例如，一个URL如：“http:/thisdoc.html#part1”可装入thisdoc.html并试图把用标识的文本放在浏览器主屏幕的顶端。,字符容器(续),文本修饰逻辑风格文本修饰逻辑风格允用户赋于文本的各个片段以真正的含义。text text text ,HTML基本元素的使用,块容器在HTML中，块容器（Block Container）被定义成一个具有标记的文本片段，本身在HTML文档中占有一定垂直空间，如一个段落或一个标题(header)。某些元素可以互相衔接，但不能嵌套（如，内部不能有，因
36、为它们代表不同类型的块）。,块容器(续),标题元素text用标注的标题和用标注的标题是截然不同的，前者是修饰浏览器窗体内文本的元素，而后者标识的内容将显示在浏览器的标题栏中。值可以从1到6，用以充当文档该节的标题。#位置的数字值越小表示的标题就越重要，相应的字号要大些。,块容器(续),段落Texttexttext在一般网页中，该标记以第一种形式使用，作为段落的分隔符。因此，它标识正常文本主体的两个段落之间的界限。注意不要使用 .的形式，因为隐含着换行，有些浏览器在元素之间会插入太多的空行。第二种形式（每个段落都有一个容器）表示了一个更标准的结构。,块容器(续),预先格式化文本text由于HTM
37、L忽略多余的空格、制表符（tab）和换行符（enter），某些具有特殊格式的文本，如诗歌、表格及计算机程序清单等都很难标记。元素用于这样的文本，它按照文本原稿出现的样式格式化所包含的文本，包括原稿中出现的空格、制表和换行符等。,HTML基本元素的使用,分项列表用HTML可创建一个包含了几个项目的列表，每个用开头，通常每个项目缩进一个tab位置。一般有四种类型：是无序列表（每个条目前通常加注有实心圆点）；是有序列表（每个条目都有编号）;是菜单选项（与类似，但有时编排得更紧凑）；是目录（显示分成两到三列的列表，象磁盘目录一样。,分项列表(续),分项列表一般结构如下：texttext,分项列表(续)
38、,有序列表有序列表的是在每一个列表项的前面加上一个编号字符，该字符可以是数字或字母。它的一般格式为：texttext,有序列表(续),TYPE属性来指定列表项前面的字符编号，当其值为： 1 （默认值）数字编号：“1、2、3” a 小写的英文字母，如：“a、b、c” A 大写的英文字母，如：“A、B、C” i 小写的罗马字母，如：“i、ii、iii” I 大写的罗马字母，如：“I、II、III”,分项列表(续),定义列表term textdefinition textterm textdefinition text定义列表中每个条目有两部分，就像词汇表中一样：一个术语（跟在后面）；一个定义（跟在
39、后面）。,HTML基本元素的使用,表单（form）HTML的表单特性是给予万维网真正力量、完成生动的交互式应用的因素之一。HTML表单仅仅是这种特性的一半。一旦用户填完表单，就把表格提交给一个特殊的程序或脚本，由这个程序或脚本取出信息，并用这个表格做一些有用的事（如把用户数据传递给数据库）。可以把表单看成因特网上通用的一种视窗（window）对话框，用于接受用户数据。,表单(续),表单元素 form body元素括起整个表单，并给出一些基本定义。表单仅占用HTML文档的部分空间；实际上，一个HTML文档可以包含几个独立的、完成不同功能的表单。method指定了信息传递给HTTP服务器的方法；a
40、ction给出与处理提交信息的脚本相关的URL（如“registinfor.asp”，“registinfor.jsp”）。,http 请求报文: 一般格式,表单(续),表单输入元素用来把不同的字段放在表单里，以便用户输入信息。 name属性指定该字段在某个表单中的唯一名称； 可选的value属性给出该标记的默认值。 在提交表单时，向Web服务器呈上以一组用“？”开头并用“&”号分开的一组“名字值”形式的信息，如http:/Scriptname?name=me&address=here&timenow,表单输入元素(续),type属性给出所使用标记的样式，“string”可以是： CHECKB
41、OX（复选框）。 RADIO（单选按钮） TEXT（单行的文本输入栏）。 IMAGE（图像放在表单里） SUBMIT（提交按钮） RESET(清除按钮) HIDDEN（在表单中保留不供显示的内容） FILE(上传文件),表单输入元素(续),另外： SIZE属性用于设置文本字段的窗口大小（以字符数为计量单位）。 CHECKED属性与CHECKBOX和RADIO类型一起使用，用于表示按钮在默认状态时是否被选中。,Type=text,Type=checkbox,我是选中的复选框,Type=radio,单选1 单选2,Type=file,Type=submit,button,reset,表单(续),选
42、项选择元素（类似Windows中的组合框）content1content2在选项选择元素中，所有可选项目由元素逐条列出；通常用下拉式菜单显示。 跟在每个标记后面的text在下拉框中显示；如果没有给出value属性（可选属性）；当用户选择到某选项时则随表单呈上相应的text文本。multiple属性允许选择多于一个的选项；selected属性指定默认的选择。,选项选择元素(续),选项选择举例：BeijingTianjin,表单输入元素(续),多行文本输入 text类似于标记，但允许多行文本输入。name属性与的类似，用行和列属性的数值定义文本输入区域的大小。元素中text的值将作为默认内容显示在
43、文本区域中。,Table元素,表格元素是HTML中最为复杂，同时又是应用最为广泛的元素之一。 表格元素在网页中以表格形式组织和显示数据 大量使用在网页布局设计上。在 “Google” 貌似简单的网页上，居然也用了三个表格来布局。,Table元素（续）,Table元素（续）,标记的一般形式是： ,Table元素（续）,在标记的属性中： Width 表格的宽度，在默认状态下为自动适应表格内容的宽度，即根据表格中的内容来自动调节表格的宽度。取值可以是HTML的绝对或者相对长度标准单位。 Bgcolor 表格的背景颜色，在默认状态下表格无背景色，网页作者亦可使用HTML的各种颜色单位进行指定。 Bac
44、kground 表格的背景图案，须用URL来指定作表格背景图片的文件路径。,Table元素（续）,Border 表格边框的风格（在作为布局使用时往往取其默认值“0“,即不显示表格的边框），在“Border=1”时，表格的边框成3D的状态。 CellSpacing 表格中单元格的边距大小，即单元格间距，长度单位。 CellPadding 表格中单元格之间的间距大小，表中单元格的内容与单元格边框之间的留白距离，即单元格边距，长度单位。,Table元素（续）,TR元素 TR元素表示表格中的行标记，表格中的每一行都必须包含在一对标记中。行标记的一般形式是： ,TR元素（续）,在标记的属性中： Alig
45、n 指定该行中单元格的对齐方式，可选值如下： Left 左对齐（默认值） Center 居中对齐 Right 右对齐 Bgcolor 指定该行的背景颜色。,Table元素（续）,TD元素 单元格是表格的基本组成元素，一个TD元素表示表格中的一个单元格，由标记对中所圈入的所有TD元素构成了表格的一行。单元格标记的一般形式是： ,TD元素（续）,在标记的属性中： Width 单元格宽度 Height 单元格高度 Align 单元格水平对齐方式 Valign 单元格垂直对齐方式 RowSpan 单元格的行跨度 ColSpan 单元格的列跨度,1.3.4 JavaScript语言,JavaScript
46、概述JavaScript的特征JavaScript程序结构 JavaScript跟Java没关系！,1.JavaScript概述,起源 通过超文本(Hyper Text)和超媒体(Hyper Media)技术结合超链接(Hyper link)的链接功能将各种信息组织成网络结构(web)，构成网络文档(Document)，实现Internet上的“漫游”。通过HTML符号的描述就可以实现文字、表格、声音、图像、动画等多媒体信息的检索 采用这种超链技术存在有一定的缺陷，那就是它只能提供一种静态的信息资源，缺少动态的客户端与服务器端的交互 JavaScript的出现，它可以使得信息和用户之间不仅只是
47、一种显示和浏览的关系，而是实现了一种实时的、动态的、可交式的表达能力。从而基于的HTML页面将被可提供动态实时信息，并对客户操作进行反应的Web页面的取代，JavaScript脚本正是满足这种需求而产生的语言。,JavaScript概述,定义 JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。,JavaScript概
48、述,定义 JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。,2.JavaScript的功能,脚本编写语言:JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言，它提供了一个易的开发过程。 基于对象的语言:JavaScript是一种基于对象的
49、语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。 简单性:JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。 动态性:JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。,3.JavaScript的程序结构,在HTML中加入JS JavaScript的脚本包括在HTML中，它成为HTML文档的一部分。与HTML标识相结合，构成了一个功能强大的Internet网上编程语言。可以直接将JavaScript脚本加入文档JavaScript语言代码；说明： 通过标识.指明JavaScript脚本源代码将放入其间。通过属性Language =“JavaScript“说明标识中是使用的何种语言，这里是JavaScript语言, 表示在JavaScript中使用的语言。,
