第2章 Web编程技术基础.ppt

浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院第第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语言语言HTML标记类型标记类型外观性标记外观性标记描述文字的外观，如：描述文字的外观，如：重要公告重要公告为了统一网站风格，很多网站使用层叠样式表为了统一网站风格，很多网站使用层叠样式表取代取代重复的重复的外观性标记。外观性标记。浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言HTML标记类型标记类型超超链接链接将文档的一部分关联到其他文档，如：将文档的一部分关联到其他文档，如：搜索引擎搜索引擎注释标记注释标记在文档中插入注释语句。如：在文档中插入注释语句。如：浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言URL与超链接与超链接URL即即网址，是网址，是Internet上标准的资源地址表上标准的资源地址表示形式。示形式。格式：格式：浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言URL与超链接与超链接HTML使用超链接来链接到使用超链接来链接到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语言语言表单与表单元素表单与表单元素表单表单是网站与用户进行信息交互的主要手段。是网站与用户进行信息交互的主要手段。表单至少应该包括：表单至少应该包括：说明性文字说明性文字表单元素表单元素提交和重置按钮提交和重置按钮表单元素表单元素单行文本框、密码框、单选按钮、复选框、下拉列单行文本框、密码框、单选按钮、复选框、下拉列表、多行文本框、普通按钮、提交按钮、重置按钮表、多行文本框、普通按钮、提交按钮、重置按钮和隐藏域和隐藏域浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言表单表单的工作原理的工作原理用户在表单中填写或选择所需的数据；用户在表单中填写或选择所需的数据；用户按下用户按下【提交提交】按钮；按钮；所填数据通过网络传递给所填数据通过网络传递给Web服务器；服务器；服务器端的后台应用程序获取用户提交的数据；服务器端的后台应用程序获取用户提交的数据；服务器端程序对数据进行处理；服务器端程序对数据进行处理；服务器端程序将处理结果传递给客户端。服务器端程序将处理结果传递给客户端。浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言定义表单定义表单基本语法结构基本语法结构action：设定处理表单数据的程序的URL。method：指定数据传送到服务器的方式（get和post）。name：设定表单的名称。onrest和onsubmit：分别设定在按下相应按钮之后要执行的客户端程序。target：指定数据结果显示在哪个窗口。浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言简单表单示例简单表单示例输入用户姓名 请输入你的姓名：浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言表单元素：表单元素：表单输入标记表单输入标记。用于在表单中提供用于在表单中提供：单行文本框、密码框、单单行文本框、密码框、单选按钮、复选框、普通按钮、提交按钮、重置选按钮、复选框、普通按钮、提交按钮、重置按钮和隐藏域等表单元素按钮和隐藏域等表单元素。语法格式语法格式：浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院 用户名:密码：苹果 桔子 芒果 茶 咖啡 果汁 标记基本用法示例浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院标记的显示效果浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言表单元素：表单元素：下拉列表标记。下拉列表标记。用于在表单中插入一个下拉列表。用于在表单中插入一个下拉列表。需与需与标记配合使用：标记配合使用：标记定义了下拉列表中的每个选项。标记定义了下拉列表中的每个选项。语法格式：语法格式：浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言表单元素：表单元素：下拉列表选项标记。下拉列表选项标记。语法格式：语法格式：浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院 苹果 桔子 芒果 茶 咖啡 果汁下拉列表代码示例浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言表单元素：表单元素：多行文本框标记。多行文本框标记。用于在表单中提供一个可输入多行文本信息的用于在表单中提供一个可输入多行文本信息的输入框。输入框。语法格式：语法格式：浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院 请提宝贵意见：浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言框架（框架（Frame）用于规划网页布局。用于规划网页布局。使用框架能够在一个浏览器窗口中同时显示多使用框架能够在一个浏览器窗口中同时显示多个网页，每个框架内设定一个网页，各个网页个网页，每个框架内设定一个网页，各个网页相互独立。相互独立。缺点：缺点：网站开发人员必须管理、跟踪更多的网页；网站开发人员必须管理、跟踪更多的网页；难以打印整个整个网页。难以打印整个整个网页。浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言框架（框架（Frame）标记标记决定如何划分框架。决定如何划分框架。cols属性属性：表示框架按列分布表示框架按列分布；rows属性属性：表示框架按行分布表示框架按行分布；rows和和cols的值指明了每个行的值指明了每个行/列在屏幕上所占的大列在屏幕上所占的大小。小。浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院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.1 HTML语言语言框架（框架（Frame）导航框架的导航目标导航框架的导航目标新浏览器窗口：新浏览器窗口：当前框架：当前框架：父框架：父框架：整个浏览器窗口：整个浏览器窗口：浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言定位标记定位标记：是一个块级元素，可以包含段落、标题、表格是一个块级元素，可以包含段落、标题、表格等内容等内容。作用作用：设定文字、表格等元素的摆放位置。设定文字、表格等元素的摆放位置。主要属性：主要属性：class、style、title、id等等。通常与通常与CSS（样式表）结合起来使用。（样式表）结合起来使用。浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.1 HTML语言语言定位标记：定位标记：浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.2 客户端脚本语言客户端脚本语言JavaScript语言语言是一种脚本语言是一种脚本语言是基于对象的语言是基于对象的语言是事件驱动的语言是事件驱动的语言是安全的语言是安全的语言是平台无关的语言是平台无关的语言浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.2 客户端脚本语言客户端脚本语言JavaScript常用对象常用对象JavaScript为开发人员提供了一些非常有用的为开发人员提供了一些非常有用的常用内部对象和方法，这使得他们不需要用脚常用内部对象和方法，这使得他们不需要用脚本来实现这些功能，只需直接调用这些功能。本来实现这些功能，只需直接调用这些功能。浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.2 客户端脚本语言客户端脚本语言JavaScript常用对象常用对象window：最顶层的对象，它描述的是一个浏：最顶层的对象，它描述的是一个浏览器窗口；览器窗口；screen：反映了当前用户的屏幕设置；：反映了当前用户的屏幕设置；navigator：包含了正在使用的浏览器的版本信：包含了正在使用的浏览器的版本信息；息；history：包含了一个数组，存放客户端访问的：包含了一个数组，存放客户端访问的URL历史信息；历史信息；浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.2 客户端脚本语言客户端脚本语言JavaScript常用对象常用对象location：包含了关于当前：包含了关于当前 URL 的信息；的信息；document：表示含有当前文档信息的对象；：表示含有当前文档信息的对象；Link：包含了文档中所有链接标记；：包含了文档中所有链接标记；Form：用于表单管理；：用于表单管理；Frame：用于框架管理。：用于框架管理。浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.2 客户端脚本语言客户端脚本语言JavaScript常用对象常用对象window对象对象JavaScript最高层对象之一。最高层对象之一。是其它大部分对象的共同祖先，在调用是其它大部分对象的共同祖先，在调用其其方法和属方法和属性时，可以省略性时，可以省略window对象的引用。对象的引用。使用当前窗口对象的任何方法或属性时可以省去窗使用当前窗口对象的任何方法或属性时可以省去窗口的实例名称。口的实例名称。window.document.write(星期日);或document.write(星期日);浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.2 客户端脚本语言客户端脚本语言JavaScript常用对象常用对象window对象对象创建创建window对象的实例：对象的实例：遇到遇到body、frameset或或frame元素时自动建立；元素时自动建立；由由window.open()方法创建。方法创建。浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.2 客户端脚本语言客户端脚本语言JavaScript常用对象常用对象screen对象对象包含一些只读属性，用户可以通过这些属性获取当包含一些只读属性，用户可以通过这些属性获取当前屏幕的设置信息。前屏幕的设置信息。例：height=screen.availHeight;浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.2 客户端脚本语言客户端脚本语言JavaScript常用对象常用对象navigator对象对象由由JavaScript运行时引擎自动创建的。运行时引擎自动创建的。可以让开发人员判断用户使用的浏览器的版本，浏可以让开发人员判断用户使用的浏览器的版本，浏览器能够处理的览器能够处理的MIME类型以及浏览器上安装的插件类型以及浏览器上安装的插件种类等内容。种类等内容。navigator对象的所有属性值都是只读的，不能修改对象的所有属性值都是只读的，不能修改其内容。其内容。例：var browser=navigator.appName浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.2 客户端脚本语言客户端脚本语言JavaScript常用对象常用对象document对象对象包含了当前文档的信息，并且提供了将包含了当前文档的信息，并且提供了将HTML输出输出给用户的功能。给用户的功能。对于任何一个包含对于任何一个包含标记的标记的HTML文档都会创文档都会创建一个建一个document对象。对象。每一个每一个window对象都包含一个对象都包含一个document属性，它属性，它的值就是一个的值就是一个document对象。对象。浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.2 客户端脚本语言客户端脚本语言JavaScript常用对象常用对象document对象对象创建创建document对象对象使用使用标记的标准标记的标准HTML语法，并在标记中包含语法，并在标记中包含JavaScript的事件处理句柄。的事件处理句柄。例：document.write(Browser name:+navigator.appName);浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.2 客户端脚本语言客户端脚本语言JavaScript中的表单与事件处理中的表单与事件处理处理表单中的多个同名元素处理表单中的多个同名元素系统系统自动自动创建一个数组。创建一个数组。数组中的每一个元素代表了表单中的相应元素，数数组中的每一个元素代表了表单中的相应元素，数组下标从组下标从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 客户端脚本语言客户端脚本语言JavaScript中的表单与事件处理中的表单与事件处理常用表单事件：常用表单事件：onSubmit，在提交表单时被，在提交表单时被触发。触发。浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院function checkData()if(document.accountBean.username.value.length=6)return true;else alert(用户名的长度不得小于6个字符，+document.accountBean.username.value+不正确。);return false;请输入你的用户名和密码 用户名：密码：浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院运行结果浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院2.2 客户端脚本语言客户端脚本语言JavaScript中的表单与事件处理中的表单与事件处理按下页面中不同按钮时，向不同的服务器或一按下页面中不同按钮时，向不同的服务器或一个服务器上的不同程序提交同一个表单数据个服务器上的不同程序提交同一个表单数据。例：例：解决方法：借助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();用户名：密码：浙江工商大学计算机与信息工程学院浙江工商大学计算机与信息工程学院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的新窗口的新窗口