第2章 JSP预备知识.ppt

第2章JSP预备知识 HTML是学习JSP必须掌握的 因为JSP程序就是Java代码或者JSP标签 然后由JSP引擎翻译成Servlet 由Web容器编译执行 JavaScript实际上JSP知识体系中一个可选的知识模块 2 1HTML快速入门2 2JavaScript技术 2 1HTML快速入门 HTML HyperTextMark upLanguage 即超文本标记语言或超文本链接标示语言 HTML标记在JSP页面中作为静态的内容 浏览器将会识别这些HTML标记并执行 在JSP程序开发中 这些HTML标记语言主要负责页面的布局 设计和美观 可以说是网页的框架 2 1 1HTML基本结构 一个HTML文件应具有下面的基本的结构 文件头内容文件体内容 2 1 2HTML常用标签 1 单标签 字母 常用单标签 1 换行标签 强制文本换行 不在行与行之间增加空行2 水平线标签 成一条水平线 2 双标签格式 1 开始标签 字母 2 结束标签 字母 3 常用双标签简介 a html标签 告知浏览器 这对标签之间的文件是用HTML语言编写b 头部标签 这对标签之间一般放些浏览器需要加载的其他文件的链接c 页面标题标签 这对标签之间的文字HTML文档名称 将显示在浏览器左上方d 主体标签 这对标签之间放html文件的主要内容e 标题标签 这对标签之间包含的是1 6之间的任意数字 定义了6个等级的字体大小f 段落标签 这对标签之间的内容为一段 标签之外的内容为另一段g 要突出某段文字的显示 注 表示该标记属围堵标记 即需要关闭标记如 表示该标记属空标记 即不需要关闭标记 IE表示该标记只适用于InternetExplorer NC表示该标记只适用于NetscapeCommunicator 反对表示该标记不为W3C所赞同 通常这标记是IE或NC自订 且己为众所支持 只是HTML标准中有其它同功能或更好的选择 弃用表示该标记己为W3C所弃用 是过时的标记 但HTML具向下兼容的特性 不用担心新浏览器不支援旧标记 新表示该标记是HTML4 0中新增的 3标签属性起始标签内可以包含属性 语法是 各属性之间需要有一个空格隔开 没有先后次序 属性也可省略 即取默认值 例如 1 上例中的 hr 表示在网页中画一条横线如果不加任何属性的话写法是 那么所有属性将取默认值 在默认情况下是从左至右在页面中画一条横线 2 size 3 属性是线条的粗细 其数值可根据要求做调整 数值越大线条越粗 3 align left 属性是把这条线居左排列 若要使其居中排列其参数是 center 居右排列则使用 right 4 width 属性是设置该线条的长度 其参数可以为像素 也可以使用百分数 比如本例中就是使用的75 常用标签 1 标题标签2 换行标签3 段落标签4 水平线标签5 字体设置标签 6 与列表有关的标签7 与表格有关的标签8 链接标签9 多窗口页面 Frames 10 有关图形 声音的标签 单元格 用来表示 每个单元格可以有背景颜色和背景图片 表格 用来表示 表格可以有背景颜色 背景图片 表格边框 每一行可以用来表示 单元格放在行中 每行可以有很多的单元格 表头 用来表示 表头是特殊的单元格 其中的文字加进去之后默认是居中并且加粗 多媒体页面 用嵌入多媒体对象基本语法 URL例 25 htm Flash动画 例 26 htm rmi音乐文件 例 27 htm avi动画 例 28 htm mpeg影像文件 表单 FORM 标记 HTML表单是HTML页面与浏览器端实现交互的重要手段 利用表单可以收集客户端提交的有关信息 在HTML里 我们可以定义表单 并且使表单与JSP或ASP等服务器端的表单处理程序配合 表单是网页上的一个特定区域 这个区域是由一对元素定义的 元素action属性 用来定义表单处理程序 一个ASP JSP等程序 的位置 相对地址或绝对地址 Method定义表单结果从浏览器传送到服务器的方法 一般有两种方法 get post 表单 FORM 标记 表单的基本语法 GET有数据量限制 POST无以上限制 以文件形式传输例 22 htm 表单中提供给用户的输入形式标签用于搜集用户信息 text password checkbox radio image hidden submit reset SymbolicNameforCGIscript 表单 FORM 标记 文本框 文本框的名字 text password 默认值 长度 最大输入字符数例20 htm 表单 FORM 标记 3 文本域 例 20 htm 表单 FORM 标记 按钮包括普通按钮 重置按钮和提交按钮例 21 htm 表单 FORM 标记 5 复选框 Checkbox 在一个表单里的所有多选框可以有一个或多个被选中 例25 htm 表单 FORM 标记 6 单选框 RadioButton 一个表单里的所有变量名相同的单选框只能够有一个被选中 各个选项的name必须一样才能达到预期效果例 26 htm注意262 htm的写法是错误的 表单 FORM 标记 7 下拉列表基本语法说明说明2 表单 FORM 标记 7 下拉列表 2 列表框的长度 3 允许多选例 29 htm 30 htm 表单 FORM 标记 8 图象域例 image htm 表单 FORM 标记 综合练习 实现留言簿要求 背景 文字颜色 字体 换行 页面标题 表单文本框 文本域 单选框 复选框 下拉列表 图象域 提交与取消按钮 内容以mail形式提交 2 1 3XML与XHTML 1 XMLXML即为可扩展的标记语言 eXtensibleMarkupLanguage XML将内容与表现分开 不仅使检索更为方便 更主要的是用户之间数据的交换更加方便 可重用性更强 XML是一种元标记语言 没有许多固定的标记 为WEB开发人员提供了更大的灵活性 XML与HTML文件比较 比如要表示个人简历 用HTML的表示方式如下 姓名禹希初性别男生日1977 5技能数据库设计与维护 web开发 我们无法从标记TH TD得知其内容表示什么 使用XML可以自定义标记 用标记表明内容的含义 禹希初男1977 5数据库设计与维护 web开发 对比两例 使用XML我们可以做到自定义标记 用标记表明内容的含义 上例在浏览器中的样子 IE5 0或更新版本 说明 version 规定了XML文档的版本 此处只能是1 0 encoding 此处规定了XML文档的编码类型 此处取值为 GB2312 也就是 简体中文 对比两例 使用XML我们可以做到自定义标记 用标记表明内容的含义 这样在Internet上交流资料时 为用计算机处理文档提供了极大的方便 同时我们阅读源文件时也不会被一大堆格式弄得晕头转向 然而 由于XML并没有为标记规定显示方式 如果我们在游览器中查看以上两个文档 建议使用IE5 0或更新版本 我们将看到xml文档并没有以诸如表格的方式来显示 难道我们就不能像HTML一样显示文档吗 回答是否定的 以个人简历为例 需要另建一个格式文件说明各个标记的显示方式 XML文件可以使用CSS文件定义显示格式 在xml文件的第一行后添加以下文字 resume css文件resume display block name display block font size 120 sex display block text indent 2em birthday display block text indent 2em skill display block text indent 2em 说明 此处表示引用一个外部CSS样式文件 其中type规定样式类型 可取值为text css或text xsl href规定文件路径 保存文件 再以IE5 0打开文件 怎么样 格式有些不一样吧 好象还不令人满意 文档内容是清晰了 但显示效果比HTML编写的文档就差得多了 XML编写的文档就只能以这种方式显示吗 XML文件特点 xml文档中标记必须成对出现 如果是空标记也必须有前加 的同名标记结束 或使用此种文式表示空标记 xml以及下面将要介绍的xsl文档 属性值必须用双引号 或单引号 括起来 属性值运用 xmlversion 1 0 encoding GB2312 我的介绍姓名 jsper 性别 unknow 职业 无 联系方式 jsper 我的介绍 不使用属性值 xmlversion 1 0 encoding GB2312 我的介绍 姓名 jsper 姓名 性别 unknow 性别 职业 无 职业 联系方式 jsper 联系方式 我的介绍 3 xml文档必须是良构的 xsl文档也是xml文档中一种 也就是说标记必须有结束标记 标记可以嵌套但不可交叉 如 2 XHTML XHTML是什么 XHTML指可扩展超文本标签语言 EXtensibleHyperTextMarkupLanguage XHTML的目标是取代HTML XHTML与HTML4 01几乎是相同的 XHTML是更严格更纯净的HTML版本 XHTML是作为一种XML应用被重新定义的HTML XHTML是一个W3C标准 XHTML是更严格更纯净的HTML代码 XHTML是一个W3C标准XHTML于2000年的1月26日成为W3C标准 W3C将XHTML定义为最新的HTML版本 XHTML将逐渐取代HTML 所有新的浏览器都支持XHTMLXHTML与HTML4 01兼容 所有新的浏览器都支持XHTML 不同的规范下对html标签的支持是不同的 xhtml可以简单理解为xml html 即是严格遵循xml规范的html版本 所以要求标签都需要小写 闭合 自闭和的包括等 属性必须用双引号 正确的嵌套规则 例如 块block元素 不能放在 内联inline元素 标签内 新的规范是html5 xhtml由于发展不利已经不再有人维护其规范了 而目前手持设备例如智能手机 由于xhtml严格遵循了xml规范 所以有更好的跨平台性 被众多手机浏览器支持 XHTML的主要优点 可扩展性XML文档要求格式良好 元素嵌套正确 在基于XML的DTD中 新的元素组只需要内部一致并且格式良好 就可以添加到现有的DTD中 这极大地简化了新元素集合的开发和集成 可移植性越来越频繁地使用非台式设备来访问因特网文档 在大多数情况下 这些设备不具备台式计算机的计算能力 并且不象标准桌面浏览器那样可适用于格式差的HTML 实际上 如果这些非桌面浏览器没有接收到格式良好的标记 HTML或XHTML 它们可能根本无法显示文档 2 2JavaScript技术 Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言 是由Netscape公司开发的一种脚本语言 scriptinglanguage 或者称为描述语言 JavaScript是一种基于对象和事件驱动并具有安全性能的解释型脚本语言 在Web应用中得到了非常广泛的应用 在HTML基础上 使用Javascript可以开发交互式Web网页 使得网页和用户之间实现了一种实时性的 动态的 交互性的关系 运行用Javascript编写的程序需要能支持Javascript语言的浏览器 通常在JSP中应用JavaScript编写客户端脚本程序 数据类型 2 2 1JavaScript语法 1 运算符运算符对一个或多个变量或值 操作数 进行运算 并返回一个新值根据所执行的运算 运算符可分为以下类别 算术运算符比较运算符逻辑运算符 算术运算符 比较运算符 比较运算符 逻辑运算符 逻辑运算符 2 表达式运算符和操作数的组合称为表达式 分为四类 赋值表达式算术表达式布尔表达式字符串表达式 3 语句语句是编写程序的指令 Javascript的基本编程语句是 赋值语句ifelse语句switch选择语句 while循环语句 for循环语句 dowhile循环语句 break循环中止语句continue循环中断语句 4 函数函数是命名的语句段 这个语句段可以被当作一个整体来引用和执行 使用函数要注意以下几点 1 函数由关键字function定义 2 函数必须先定义后使用 否则将出错 3 函数名是调用函数时引用的名称 它对大小写是敏感的 调用函数时不可写错函数名 4 参数表示传递给函数使用或操作的值 它可以是常量 也可以是变量 5 return语句用于返回表达式的值 也可以没有 定义函数语法格式 functionfunctionName parameter1 parameter2 statements returnexpression 5 对象Javascript的一个重要功能就是基于对象的功能 通过基于对象的程序设计 可以用更直观 模块化和可重复使用的方式进行程序开发 一组包含数据的属性和对属性中包含数据进行操作的方法 称为对象 比如要设定网页的背景颜色 所针对的对象就是document 所用的属性名是bgcolor 如document bgcolor blue 就是表示使背景的颜色为蓝色 6 事件用户与网页交互时产生的操作 称为事件 绝大部分事都由用户的动作所引发 如 用户按鼠标的按钮 就产生onclick事件 若鼠标的指针的链接上移动 就产生onmouseover事件等等 在Javascript中 事件往往与事件处理程序配套使用 变量 变量名必须以字母或下划线 开头变量可以包含数字 从A至Z的大小写字母JavaScript区分大小写 即变量myVar myVAR和myvar是不同的变量 声明变量 vara var 用于声明变量的关键字 a 变量名 同时声明和初始化变量vara 10 a 10 声明变量 声明多个变量varx y z 10 赋值 声明变量 使用变量varx x prompt 淘宝网竟拍 请出一口价 1 document write 拍卖价格 x 用来连接多个字符串document write 恭喜您 您以最高价拍卖成功 alert 欢迎下次光临 定义变量 赋值 输出 prompt 提示信息 默认值 将弹出提示对话框 接受用户的输入 点击确定返回输入的字符串 点击取消反馈空字符串 2 2 2JavaScript使用方式 1 直接加入HTML文档的方式这是最常用的方法 大部分含有Javascript的网页都采用这种方法 如 在这个例子中 我们可看到一个新的标签 而用来告诉浏览器这是用Javascript编写的程序 需要调动相应的解释程序进行解释 HTML的注释标签 用来去掉浏览器所不能识别的Javascript源代码的 这对不支持Javascript语言的浏览器来说是很有用的 Javascript结束 双斜杠表示Javascript的注释部分 即