第02章jsp应用基础课堂资料

《第02章jsp应用基础课堂资料》由会员分享，可在线阅读，更多相关《第02章jsp应用基础课堂资料（121页珍藏版）》请在金锄头文库上搜索。

1、1,Java EE应用技术基础,济南大学信息学院 刘鹍 liukun,2,回顾：第1章 Java EE简介,3,第2章 JSP应用基础,4,第2章 JSP应用基础,2.1 HTML语言 2.2 Servlet应用 2.3 JSP语法 2.4 JSP内置对象 2.5 JSP综合应用实例,5,第2章 JSP应用基础,先来看一个例子 什么是JSP 他和HTML什么关系？,6,第2章 JSP应用基础,启动Tomcat服务器，在IE浏览器中输入“http:/localhost:8080/test/input.jsp”，系统会显示input.jsp页面，如图2.1所示。当在文本框中输入10后，单击【计算】

2、按钮会跳转到另外一个页面，也就是result.jsp页面，并且输出结果314.0，如图2.2所示。,图2.1 input.jsp页面 图2.2 result.jsp页面,7,第2章 JSP应用基础,Input.jsp 请输入半径r: ,8,第2章 JSP应用基础,result.jsp ,9,第2章 JSP应用基础,JSP？,10,2.1 HTML语言,2.1.1 HTML文件的基本结构 HTML文件的基本结构如图2.3所示。, 文档头部分 文档主体部分 ,图2.3 HTML文件的基本结构,11,2.1.1 HTML文件的基本结构,大家可以看下面的例子，文档头部分有网页标题标记，文档主体部分有图

3、片标记、超链接标记及一些文字。把这段代码命名为a.html，保存在想要保存的路径。双击该文件就可以运行了。只要该路径下有b.html文件，单击超链接就可以跳转到b.html。, 第一个html网页 超链接 这是我的第一个网页 ,12,2.1.2 HTML文件的语言标记,1. HTML标记 HTML标记表示文档内容的开始和结束。是开始标记，是结束标记，其他所有的HTML代码都位于这两个标记之间。浏览器将该标记中的内容视为一个Web文档，按照HTML语言规则对文档内的标记进行解释。标记是可选的，但是最好不要省略这两个标记，以保持Web文档结构的完整性。 2. 首部标记 首部标记中提供与网页有关的各

4、种信息。在首部标记中，一般使用下列标记。 .：制定网页的标题。 .：定义文档内容样式表。 . ：插入脚本语言程序。 ：描述网页信息。 这些信息首先向浏览器提供，但不作为文档内容提交。,13,2.1.2 HTML文件的语言标记,3. 标题栏标记 标题栏标记的内容是在浏览器标题栏中显示的文本。通常，Web搜索工具用它作为索引。 4. 描述标记 描述文档属性参数。 5. 正文标记 正文标记的格式如下： 正文标记中包含文档的内容。其常用属性如下： background：文档背景图像的URL 地址。 bgcolor：文档的背景颜色。 text：文档中文本的颜色。 link：文档中链接的颜色。 vlink

5、：文档中已被访问过的链接的颜色。 alink：文档中正被选中的链接的颜色。,14,2.1.2 HTML文件的语言标记,此外，HTML文件还有很多用来设置文本格式的标记，下面举几个常用的标记。 （1）分段标记 段落是文档的基本信息单位。利用分段标记，可以忽略文档中原有的回车和换行。定义一个新段落，就是换行并插入一个空行。 单独使用标记时会空一行，使后续内容隔一行显示。同时使用，则将段落包围起来，表示一个分段的块。其最常用的属性如下。 align：段落的水平对齐方式，其值如下： left：左对齐（默认值）。 center：居中对齐。 right：右对齐。 justify：两边对齐。,15,2.1.

6、2 HTML文件的语言标记,（2）换行标记 该标记强行中断当前行，使后续内容在下一行显示，这个标记很简单，也很常用。 （3）标题标记 标题标记的格式如下： 其常用属性如下。 align：段落的水平对齐方式，其值如下： left：左对齐（默认值）。 center：居中对齐。 right：右对齐。 justify：两边对齐。,16,2.1.2 HTML文件的语言标记,（4）对中标记 该标记中间的内容全部居中。 （5）块标记 块标记的作用是定义文档块。常用属性如下。 align：段落的水平对齐方式。其值如下： left：左对齐（默认值）。 center：居中对齐。 right：右对齐。,17,2.1

7、.2 HTML文件的语言标记,（6）水平线标记 在标记位置画一条线。常用属性如下。 align：段落的水平对齐方式。其值如下： left：左对齐（默认值）。 center：居中对齐。 right：右对齐。 color：线的颜色。 size：线的宽度（以像素为单位）。 width：线的长度（像素或占页面宽度的百分数）。 noshade：显示一条无阴影的实线。 （7）字体标记 字体标记用来设置文本的字符格式，主要包括字体、字号和颜色等。常用属性如下。 face：字体名表。 size：字号值。 color：颜色值。设置字体的颜色。,18,2.1.2 HTML文件的语言标记,（8）图像标记 图像标记的

8、常用属性如下。 src：图像文件的URL 地址。 alt：图像的简单文本说明，在浏览器下不能显示图像或图像加载时间过长时显示该文本。 height：显示图像的高度（像素或百分比）。 width：显示图像的宽度（像素或百分比）。 align：图像大小小于显示区域大小时的对齐方式。 使用align属性设置图像与文本在垂直方向的对齐方式，此时align属性的取值如下： top：图像与文本顶部对齐。 middle：图像与文本中央对齐。 bottom：图像与文本底部对齐。 当图像在左右绕排文本时，align属性的取值如下： left：图像居左，文本居右。 right：图像居右，文本居左。,19,2.1.

9、2 HTML文件的语言标记,（9）超链接标记 超链接内容 超链接的常用属性如下。 href：目标端点的URL 地址（可以包含一个或多个参数）。 如前面的例子中： 超链接 单击此超链接，就会跳转到名为b.html的页面。该属性是必选项。 target：窗口或框架的名称。 target属性的取值既可以是窗口或框架的名称，也可以是如下保留字： _blank：未命名的新浏览器窗口。 _parent：父框架页或窗口。如果包含链接的框架不是嵌套的，则链接的目标文件加载到整个浏览器窗口中。 _self：所在的同一框架或窗口。 _top：整个浏览器的窗口，并删除所有框架。,20,2.1.3 表单与表格的使用,

10、1. 表单及其控件标记 表单用来从用户（站点访问者）处收集信息，然后将这些信息提交给服务器进行处理。表单中可以包含允许用户进行交互的各种控件，例如，文本框、列表框、复选框和单选按钮等。用户在表单中输入或选择数据后提交，该数据就会提交到相应的表单处理程序，以各种不同的方式进行处理。表单结构如下： （1）表单标记 该标记的格式如下： ,21,2.1.3 表单与表格的使用,form标记的属性如下。 name：表单的名称。 method：表单数据传输到服务器的方法。其属性值如下： post：在HTTP请求中嵌入表单数据。 get：将表单数据附加到请求该页的URL中。 action：接收表单数据的服务器

11、端程序或动态网页的URL地址。 target：目标窗口。其属性值如下： _blank：在未命名的新窗口中打开目标文档。 _parent：在显示当前文档的窗口的父窗口中打开目标文档。 _self：在提交表单所使用的窗口中打开目标文档。 _top：在当前窗口内打开目标文档，确保目标文档占用整个窗口。 form标记有以下事件。 onsubmit：提交表单时调用的时间处理程序。 onreset：重置表单时调用的处理程序。,22,2.1.3 表单与表格的使用,下面具体介绍表单中的控件。 （2）表单输入控件标记 单行文本框。 创建单行文本框方法如下： （a）单行文本框的属性如下： name：单行文本框的名

12、称，通过它可以在脚本中引用该文本框控件。 value：文本框的值。 default value：文本框的初始值。 size：文本框的宽度（字符数）。 maxlength：允许在文本框内输入的最大字符数。 form：所属的表单（只读）。,23,2.1.3 表单与表格的使用,（b）单行文本框的方法如下。 click()：单击该文本框。 focus()：得到焦点。 blur()：失去焦点。 select()：选择文本框的内容。 （c）单行文本框的事件如下。 onclick：单击该文本框时执行的代码。 onblur：失去焦点时执行的代码。 onchange：内容变化时执行的代码。 onfocus：得到

13、焦点时执行的代码。 onselect：选择内容时执行的代码。,24,2.1.3 表单与表格的使用, 密码文本框。 创建密码文本框方法如下： 密码文本框的属性、方法和事件与单行文本框的设置基本相同，只是密码文本框没有onclick事件。 隐藏域。 创建隐藏域方法如下： 隐藏域的属性、方法和事件与单行文本框的设置基本相同，只是没有default value属性。 复选框。 创建复选框方法如下： 选项文本 （a）复选框的属性如下。 name：复选框的名称。 value：选中时提交的值。 checked：当第一次打开表时该复选框处于选中状态。 defaultchecked：判断复选框是否定义了chec

14、ked属性。,25,2.1.3 表单与表格的使用,（b）复选框的方法如下。 focus()：得到焦点。 blur()：失去焦点。 click()：单击该复选框。 （c）复选框的事件如下。 onfocus：得到焦点时执行的代码。 onblur：失去焦点时执行的代码。 onclick：单击该文本框时执行的代码。 但值为空白。例如，要创建以下复选框： 应在body体内设置代码如下： 苹果 香蕉 橘子,26,2.1.3 表单与表格的使用, 单选按钮。 创建单选按钮方法如下： 选项文本 单选按钮的属性如下。 name：单选按钮的名称，若干个名称相同的单选按钮构成一个控件组，在该组中只能选中一个选项。 v

15、alue：提交时的值。 checked：当第一次打开表单时该单选按钮处于选中状态。该属性是可选的。 例如，创建以下单选按钮： 应在body中设置代码如下： 性别：男 女,27,2.1.3 表单与表格的使用, 按钮。 使用input标记可以在表单中添加3种类型的按钮：提交按钮、重置按钮和自定义按钮。创建按钮的方法如下： （a）按钮的属性如下。 type：按钮种类。具体如下。 submit：创建一个提交按钮。 reset：创建一个重置按钮。 button：创建一个自定义按钮。 name：按钮的名称。 value：显示在按钮上的标题文本。 （b）按钮的事件如下。 onclick：单击按钮执行的脚本代

16、码。 文件域。 创建文件域方法如下： 其中，“属性：“值“”部分可以进行如下设置： name：文件域的名称。 value：初始文件名。 size：文件名输入框的宽度。,28,2.1.3 表单与表格的使用,（3）其他表单控件 下面分别介绍这两种控件的用法。 滚动文本框。 初始值 其属性如下： name：滚动文本框控件的名称。 rows：控件的高度。 cols：控件的宽度。 readonly：表示文本框中的内容是只读的，不能被修改。 该标记的其他属性、方法和相关事件与单行文本框基本相同。 选项选单。 创建选项选单方法如下： 选项1 选项2 ,29,2.1.3 表单与表格的使用,其属性如下： name：选项选单控件的名称。 size：在列表中一次可以看到的选项数目，默认值为1。 multiple：允许做多项选择。 selected：该选项的初始状态为选中。 下面就这些控件做一个综合的例子来简单体验这些控件的用法，界面如图2.4所示。,图2.