电子商务系统设计与实现(第9章)

课程的主要内容第1章概论第2章电子商务系统分析与设计基础第3章电子商务系统开发基础第4章电子商务系统规划第5章电子商务系统分析第6章电子商务系统设计第7章电子商务应用系统设计第8章数据库实现第9章电子商务网站开发技术第10章电子商务系统的开发模式第11章电子商务系统的测试与维护9.1电子商务网站开发技术9.1HTML语言9.2JavaScript9.3AJAX9.4JavaApplet•HTML（超文本标记语言，HyperTextMarkupLanguage）–是为创建网页而设计的一种标记语言–提供了一种描述文档中文本信息结构的方法–HTML文件使用.htm或.html作为文件扩展名–可用文本编辑软件或所见即所得的网页创作工具来创建HTML文件9.1HTML语言1.HTML基本语法•html和/html用于说明一个HTML文档的开始和结束；•head和/head用于说明HTML文档的头信息部分；•body和/body用于说明HTML文档的文档体部分；htmlhead文档头/headbody文档体/body/htmlHTML文件的基本结构9.1HTML语言•HTML标记的主要类型–结构性标记：描述HTML文档中文本的意图•html–标记HTML内容的开始和结束。•head–标记HTML文档头，包含不在正文中显示的关键字、标题和脚本等。•title–标记HTML文档的标题。•body–标记HTML文档正文的开始和结束。9.1HTML语言1.HTML基本语法•HTML标记的主要类型–外观性标记；描述文字的外观•例如：b重要公告/b9.1HTML语言1.HTML基本语法•HTML标记的主要类型–超文本标记：将文档的一部分关联到其他文档•例如：ahref=搜索引擎/a9.1HTML语言1.HTML基本语法•HTML标记的主要类型–注释标记：在文档中插入注释语句•例如：!--这里是注释语句--9.1HTML语言1.HTML基本语法•HTML标记的主要类型–框架页面标记：描述网页如何显示框架页面•例如：frameset/frameset9.1HTML语言1.HTML基本语法•统一资源定位器（URL，UniformResourceLocator）–URL格式@example.com:992/animal/bird?species=seagull#wings主机名路径协议片段登录信息查询端口2.URL与超链接9.1HTML语言•统一资源定位器–URL格式•协议：表示访问网络资源的方法和途径。•登录信息：包括访问主机的用户名和密码。•主机名：目的主机名称或IP地址。•端口：目的主机的端口号。•路径：指明被访问资源的位置。•查询请求：通过URL向服务器传递参数。•片段：以“#”开始，用于标识被访问资源中的部分资源。2.URL与超链接9.1HTML语言•超链接–创建锚链的语法是ahref=url要显示的文字/a–例：•ahref=•ahref==_blank搜索/a2.URL与超链接9.1HTML语言•表格由table和/table标记定义。•表格行由tr和/tr标记定义•单元格由th和/th或td和/td标记定义。•table和td标记的width和height属性可用于定义表格和单元格的宽度和高度。•td标记的colspan和rowspan属性可用于表示单元格的合并。9.1HTML语言3.表格•表格示例tableborder=1width=300height=80trtdwidth=80%height=80 /tdtd /td/tr/table9.1HTML语言3.表格•合并单元格示例tablewidth=450border=1trtd第1行，第1列/tdtdcolspan=2第1行的第2、3列/td/trtrtdrowspan=2第2行及第3行的第1列/tdtd第2行第2列/tdtd第2行第3列/td/trtrtd第3行第2列/tdtd第3行第3列/td/tr/table9.1HTML语言3.表格•表单由form和/form标记定义•基本语法结构formaction=urlmethod=get|postname=valueonreset=functiononsubmit=functiontarget=window/form第一节HTML语言4.表单与表单元素•form的属性–action：设定处理表单数据的程序的URL–method：指定数据传送到服务器的方式。–name：设定表单的名称。–onrest和onsubmit：设定了在按下相应按钮之后要执行的客户端程序。–target：指定数据结果显示在哪个窗口。9.1HTML语言4.表单与表单元素•input标记–用于在表单中提供单行文本框、密码框、单选按钮、复选框、普通按钮、提交按钮、重置按钮和隐藏域等表单元素–语法格式•inputaligh=left|righ|top|middle|bottomname=valuetype=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|buttonvalue=valuesrc=urlcheckedmaxlength=#size=#onclick=functiononselect=function9.1HTML语言4.表单与表单元素•select标记–在表单中插入一个下拉列表–语法格式•selectname=textsize=#multiple9.1HTML语言4.表单与表单元素•option标记–该标记为下拉列表中一个选项–语法格式•optionselectedvalue=value9.1HTML语言•textarea标记–用于在表单中提供一个可输入多行文本信息的输入框–语法格式•textareaname=namecols=#rows=#wrap=off|hard|soft9.1HTML语言4.表单与表单元素•框架主要被用于规划网页布局•frameset/frameset标记–决定如何划分框架。•frame标记–用于定义每个框架中放入什么文件9.1HTML语言5.框架•框架代码示例htmlframesetcols=25%,75%framename=leftsrc=frame_left.htmframename=rightsrc=frame_right.htm/frameset/html第一节HTML语言5.框架•混合框架代码示例htmlframesetrows=20%,80%framesrc=banner.htmframesetcols=25%,75%framesrc=menu.htmframesrc=main.htm/frameset/frameset/html9.1HTML语言5.框架•JavaScript的特点–是一种脚本语言–基于对象–事件驱动–安全–平台无关9.2JavaScript•window对象–是客户端JavaScript最高层对象之一–是其他大部分对象的共同祖先–window对象的创建•遇到body、frameset或frame元素时，会自动建立window对象的实例•也可由window.open()方法创建9.2JavaScript1.JavaScript常用对象•screen对象–包含一些只读属性，用户可以通过这些属性获取当前屏幕的设置信息。9.2JavaScript1.JavaScript常用对象9.2.1JavaScript常用对象•navigator对象–可让开发人员判断用户使用的浏览器的版本，浏览器能够处理的MIME类型以及浏览器上安装的插件种类等内容。–所有属性值都是只读的，不能修改其内容。–navigator对象由客户端的JavaScript运行时引擎自动创建。•document对象–包含了当前文档的信息，并且提供了将HTML输出给用户的功能。–创建document对象•只需要使用body标记的标准HTML语法，并在标记中包含JavaScript的事件处理句柄即可。9.2JavaScript1.JavaScript常用对象•表单（Form）–是HTML定义的标准表单控件的集合，在特定的表单中可以放入各种表单控件。9.2JavaScript2.JavaScript中的表单与事件处理formname=accountBeanmethod=POSTaction=/jpetstore/shop/signon.shtmlp请输入你的用户名和密码/pp用户名：inputtype=textname=username/br/密码：inputtype=passwordname=password//pinputtype=submitname=submitvalue=登录//form一个名为accountBean的表单对象示例9.2JavaScript2.JavaScript中的表单与事件处理•表单（Form）–若一个表单中多个元素的name属性值相同，则系统会自动地以name属性的值来创建一个数组。formname=accountBean用户名1：inputtype=textname=username/br/用户名2：inputtype=textname=username/br/用户名3：inputtype=textname=username/br/...用户名n：inputtype=textname=username/br//formfor(i=0;i4;i++)document.accountBean.username[i].value=j2ee+i;9.2JavaScript2.JavaScript中的表单与事件处理•Form对象的属性、方法和事件–属性•action：对应表单的action属性。•elements：对应表单中所有表单元素的数组。•encoding：对应表单的enctype属性。•length：对应表单中元素的数量。•method：对应表单的method属性。•name：对应表单的name属性。•target：对应表单的target属性。9.2JavaScript2.JavaScript中的表单与事件处理•Form对象的属性、方法和事件–方法•handleEvent：调用特定事件的处理程序。•reset：模拟鼠标单击【重置】按钮。•submit：提交表单。9.2JavaScript2.JavaScript中的表单与事件处理9.2.2JavaScript中的表单与事件处理•Form对象的属性、方法和事件–事件•onReset：当重置事件发生时，触发该事件。•onSubmit：当提交事件发生时，触发该事件。htmlscriptlanguage=JavaScriptfunctioncheckData(){if(document.accountBean.username.value.length=6){returntrue;}else{alert(用户名的长度不得小于6个字符，+document.accountBean.username.value+不正确。);returnfalse;}}/scriptbodyfor