Web编程技术 教学课件 ppt 作者 厉小军第2章 Web编程技术基础

《Web编程技术 教学课件 ppt 作者 厉小军第2章 Web编程技术基础》由会员分享，可在线阅读，更多相关《Web编程技术 教学课件 ppt 作者 厉小军第2章 Web编程技术基础（60页珍藏版）》请在金锄头文库上搜索。

1、第2章 Web编程技术基础,2.1 HTML语言,HTML语言简介 HTML是为创建网页而设计的一种标记语言。 HTML提供了一种描述文档中文本信息结构的方法。 包含HTML内容的文件通常使用.htm或.html作为文件扩展名。,2.1 HTML语言,HTML文档基本结构, 文档头 文档体 ,2.1 HTML语言,HTML标记类型 结构性标记 描述HTML文档中文本的意图，如： 购物车 常用结构性标记 ：标记HTML内容的开始和结束。 ：标记HTML文档头，包含不在正文中显示的关键字、标题和脚本等。 ：标记HTML文档的标题。 ：标记HTML文档正文的开始和结束。,2.1 HTML语言,HTM

2、L标记类型 外观性标记 描述文字的外观，如： 重要公告 为了统一网站风格，很多网站使用层叠样式表取代重复的外观性标记。,2.1 HTML语言,HTML标记类型 超文本标记 将文档的一部分关联到其他文档，如： 搜索引擎 注释标记 在文档中插入注释语句。如： ,2.1 HTML语言,HTML标记类型 框架页面标记 描述网页如何显示框架页面，较低版本的浏览器不支持此功能。 使用框架可以在浏览器窗口中显示多个HTML文档，框架标记如下： ,2.1 HTML语言,URL与超链接 URL即网址，是Internet上标准的资源地址表示形式。 格式：,2.1 HTML语言,URL与超链接 HTML使用超链接来

3、链接到Web上的其他文档。,Apache,2.1 HTML语言,表格 定义表格： 定义行： 定义表头单元格： 定义单元格：,2.1 HTML语言,表格, 表头1表头2 单元格1单元格2 单元格3单元格4 ,2.1 HTML语言,表格 定义表格的宽度和高度,2.1 HTML语言,表格 在表格中合并单元格, 第1行，第1列 第1行的第2、3列 第2行及第3行的第1列 第2行第2列 第2行第3列 第3行第2列 第3行第3列 ,2.1 HTML语言,表格 在表格中合并单元格,2.1 HTML语言,表单与表单元素 表单 是网站与用户进行信息交互的主要手段。 表单至少应该包括： 说明性文字 表单元素 提交

4、和重置按钮 表单元素 单行文本框、密码框、单选按钮、复选框、下拉列表、多行文本框、普通按钮、提交按钮、重置按钮和隐藏域,2.1 HTML语言,表单的工作原理 用户在表单中填写或选择所需的数据； 用户按下【提交】按钮； 所填数据通过网络传递给Web服务器； 服务器端的后台应用程序获取用户提交的数据； 服务器端程序对数据进行处理； 服务器端程序将处理结果传递给客户端。,2.1 HTML语言,定义表单 基本语法结构,action：设定处理表单数据的程序的URL。 method：指定数据传送到服务器的方式（get和post）。 name：设定表单的名称。 onrest和onsubmit：分别设定在按下

5、相应按钮之后要执行的客户端程序。 target：指定数据结果显示在哪个窗口。,2.1 HTML语言,简单表单示例, 输入用户姓名 请输入你的姓名： ,2.1 HTML语言,表单元素： 表单输入标记。 用于在表单中提供：单行文本框、密码框、单选按钮、复选框、普通按钮、提交按钮、重置按钮和隐藏域等表单元素。 语法格式：, 用户名: 密码： 苹果 桔子 芒果 茶 咖啡 果汁 ,标记基本用法示例,标记的显示效果,2.1 HTML语言,表单元素： 下拉列表标记。 用于在表单中插入一个下拉列表。 需与标记配合使用： 标记定义了下拉列表中的每个选项。 语法格式：,2.1 HTML语言,表单元素： 下拉列表选

6、项标记。 语法格式：, 苹果 桔子 芒果 茶 咖啡 果汁 ,下拉列表代码示例,2.1 HTML语言,表单元素： 多行文本框标记。 用于在表单中提供一个可输入多行文本信息的输入框。 语法格式：, 请提宝贵意见： ,2.1 HTML语言,框架（Frame） 用于规划网页布局。 使用框架能够在一个浏览器窗口中同时显示多个网页，每个框架内设定一个网页，各个网页相互独立。 缺点： 网站开发人员必须管理、跟踪更多的网页； 难以打印整个整个网页。,2.1 HTML语言,框架（Frame） 标记 决定如何划分框架。 cols属性：表示框架按列分布； rows属性：表示框架按行分布； rows和cols的值指明

7、了每个行/列在屏幕上所占的大小。,2.1 HTML语言,框架（Frame） 标记 用于定义每个框架中放入什么文件。 src属性：指定了网页的路径和文件名。,2.1 HTML语言,框架（Frame）,2.1 HTML语言,框架（Frame） 混合框架,2.1 HTML语言,框架（Frame） 混合框架,2.1 HTML语言,框架（Frame） 导航框架 导航框架内包含一个网页，网页中包含了一个超链接列表，点击任何一个链接都会在另一个框架中显示点击中的网页。,2.1 HTML语言,框架（Frame） 导航框架, 目录 项目1 项目2 项目3 ,2.1 HTML语言,框架（Frame） 导航框架,2

8、.1 HTML语言,框架（Frame） 导航框架的导航目标 新浏览器窗口： 当前框架： 父框架： 整个浏览器窗口：,2.1 HTML语言,定位标记： 是一个块级元素，可以包含段落、标题、表格等内容。 作用：设定文字、表格等元素的摆放位置。 主要属性：class、style、title、id等。 通常与CSS（样式表）结合起来使用。,2.1 HTML语言,定位标记：,2.2 客户端脚本语言,JavaScript语言 是一种脚本语言 是基于对象的语言 是事件驱动的语言 是安全的语言 是平台无关的语言,2.2 客户端脚本语言,JavaScript常用对象 JavaScript为开发人员提供了一些非常

9、有用的常用内部对象和方法，这使得他们不需要用脚本来实现这些功能，只需直接调用这些功能。,2.2 客户端脚本语言,JavaScript常用对象 window：最顶层的对象，它描述的是一个浏览器窗口； screen：反映了当前用户的屏幕设置； navigator：包含了正在使用的浏览器的版本信息； history：包含了一个数组，存放客户端访问的URL历史信息；,2.2 客户端脚本语言,JavaScript常用对象 location：包含了关于当前 URL 的信息； document：表示含有当前文档信息的对象； Link：包含了文档中所有链接标记； Form：用于表单管理； Frame：用于框架

10、管理。,2.2 客户端脚本语言,JavaScript常用对象 window对象 JavaScript最高层对象之一。 是其它大部分对象的共同祖先，在调用其方法和属性时，可以省略window对象的引用。 使用当前窗口对象的任何方法或属性时可以省去窗口的实例名称。,window.document.write(“星期日“); 或 document.write(“星期日“);,2.2 客户端脚本语言,JavaScript常用对象 window对象 创建window对象的实例： 遇到body、frameset或frame元素时自动建立； 由window.open()方法创建。,2.2 客户端脚本语言,J

11、avaScript常用对象 screen对象 包含一些只读属性，用户可以通过这些属性获取当前屏幕的设置信息。,例：height = screen.availHeight;,2.2 客户端脚本语言,JavaScript常用对象 navigator对象 由JavaScript运行时引擎自动创建的。 可以让开发人员判断用户使用的浏览器的版本，浏览器能够处理的MIME类型以及浏览器上安装的插件种类等内容。 navigator对象的所有属性值都是只读的，不能修改其内容。,例：var browser=navigator.appName,2.2 客户端脚本语言,JavaScript常用对象 document

12、对象 包含了当前文档的信息，并且提供了将HTML输出给用户的功能。 对于任何一个包含标记的HTML文档都会创建一个document对象。 每一个window对象都包含一个document属性，它的值就是一个document对象。,2.2 客户端脚本语言,JavaScript常用对象 document对象 创建document对象 使用标记的标准HTML语法，并在标记中包含JavaScript的事件处理句柄。,例：document.write(“Browser name: “+navigator.appName);,2.2 客户端脚本语言,JavaScript中的表单与事件处理 处理表单中的多个

13、同名元素 系统自动创建一个数组。 数组中的每一个元素代表了表单中的相应元素，数组下标从0开始。,2.2 客户端脚本语言,JavaScript中的表单与事件处理 处理表单中的多个同名元素 例：, 用户名1： 用户名2： 用户名3： . 用户名n： ,for (i=0;i4;i+) document.accountBean.usernamei.value=“j2ee“+i;,2.2 客户端脚本语言,JavaScript中的表单与事件处理 包含多个表单的网页 使用表单数组forms来实现对不同表单的访问； forms0表示第一个表单，forms1表示第二个表单，依此类推。,2.2 客户端脚本语言,J

14、avaScript中的表单与事件处理 常用表单事件：onSubmit，在提交表单时被触发。, function checkData() if (document.accountBean.username.value.length = 6) return true; else alert(“用户名的长度不得小于6个字符，“ + document.accountBean.username.value + “不正确。“); return false; 请输入你的用户名和密码 用户名： 密码： ,运行结果,2.2 客户端脚本语言,JavaScript中的表单与事件处理 按下页面中不同按钮时，向不同的服

15、务器或一个服务器上的不同程序提交同一个表单数据。 例：,解决方法：借助JavaScript来动态设置表单的action属性, function insert() document.accountBean.action = “http:/localhost/jpetstore/insert/“; document.accountBean.submit(); function update() document.accountBean.action = “http:/localhost/jpetstore/update/“; document.accountBean.submit(); 用户名：

16、密码： ,2.2 客户端脚本语言,JavaScript中的窗口管理 在窗口中弹出确认信息,function confirmOrder() if (confirm(“您确定要生成该订单吗？“) order(); ,2.2 客户端脚本语言,JavaScript中的窗口管理 在窗口中弹出输入对话框,n = prompt(“请输入您要购买的数量:“, 0);,2.2 客户端脚本语言,JavaScript中的窗口管理 打开包含菜单栏的新窗口,function windowOpener() msgWindow = window.open(“,“displayWindow“,“menubar=yes“); msgWindow.document.write (“新消息窗口“); msgWindow.document.write (“Hello, world!“); ,2.2 客户端脚本语言,JavaScript中的窗口管理 打开包含指定URL的新窗口,