电子商务网站建设与管理 （第四版）项目二 客户端交互

掌握电子商务网站的开发技术，掌握工具的使用方法。了解网页开发技术，熟悉使用HTML语言、CSS级联样式表、DOM文档对象模型及JAVASCRIPT工具完成页面的客户端的交互。知识目标技能目标通过学习电子商务网站的开发技术与相应工具的使用，完成页面客户端的交互。能力目标项目二客户端交互项目二客户端交互2.1购物车页面弹出删除对话框功能2.2“设为主页”和“加入收藏”功能。2.1购物车页面弹出删除对话框功能一、HTML基础1．HTML概述超文本标记语言（HTML）是网页制作的基础，它是网页开发中使用的最基本的语言。HTML是一种简单的、基于问题的语言，它使用一系列代码语言控制符—标记，创建可被浏览器解释的文件，它是一种描述性语言。HTML本质上是一个文本文件，任何文本编辑器都可以编写。HTML文件从本质上来说是文本文件，只不过在其中加入了用以表示格式化和超链接的超文本标记语言。2.1购物车页面弹出删除对话框功能2.HTML的使用（1）字体<hn>...</hn>（2）表格<table>...</table>（3）区段标记<p>...</p>（4）链接网络链接及常用链接标记（5）设置图片（6）滚动条2.1购物车页面弹出删除对话框功能二、文档对象模型DOM1.DOM基本结构2.DOM顶级对象（1）window对象（2）document对象（3）location对象（4）navigator对象（5）history对象（6）frame对象2.2“设为主页”和“加入收藏”功能一、JavaScript脚本语言概述JavaScript是由Netscape公司开发的一种基于对象的网页脚本编程语言，它支持客户端和服务器端应用程序的开发。JavaScript解决了HTML和CSS样式只能做静态网页的缺陷，将静态网页变成了动态网页，使用户对网页的操作更加方便。网络资料中，常把JavaScript简称JS。2.2“设为主页”和“加入收藏”功能1.JavaScript语言特点①变量不必声明类型，但赋值后类型自动确定，也需要转换。②基本数据类型、运算符、流程控制与C#语言类似。③字符串类型、布尔类型等，对象的初始化等，空值null，与C#语言类似。④自定义函数无返回值类型声明。2.2“设为主页”和“加入收藏”功能2.JavaScript脚本程序的使用（1）内部脚本程序只在一个页面中使用的JavaScript程序用、script标记包围，添加到HTML文档中，可以添加到head部分，也可以添加到body部分。（2）外部脚本程序多个页面共用的JavaScript脚本程,<scriptsrc=“xxx.js”…/>将此文件指定给script标记的“src”属性，就可以和使用内部脚本一样使用这个外部文件中的脚本了。二、JavaScript脚本语言数据类型和变量1.数据类型2.数据类型转换(1)隐式转换

(2)强制转换3.变量2.2“设为主页”和“加入收藏”功能2.2“设为主页”和“加入收藏”功能三、JavaScript脚本语言运算符、表达式、流程控制1.JavaScript的运算符2.JavaScript的流程控制四、JavaScript脚本语言函数1.全局函数

eval（字符串）、parseInt（字符串）和parseFloat（字符串）、isNaN（表达式）、Boolean（对象）、Number（对象）、String（对象）、escape（字符串）和unescape（字符串）。2.2“设为主页”和“加入收藏”功能2.自定义函数（1）函数定义

function函数名（var1，var2，…，varN）{代码…}（2）函数的调用

函数名（参数列表）；变量名=函数名（参数列表）

2.2“设为主页”和“加入收藏”功能五、JavaScript脚本语言常用内置对象1.字符串对象String除了字符串数据类型，JavaScript还内置字符串对象类型，两者一般混用，其用法和C#的String对象很相似。

2.数组对象ArrayJavaScript的数组对象，其属性和方法与c}}数组的属性和方法很类似。2.2“设为主页”和“加入收藏”功能3.日期对象DateJavaScript中没有日期时间数据类型，但有日期对象。4.数学对象Math数学对象与前面几种对象不同，它不需要使用new操作符来创建，而可以直接使用Math来调用数学对象，其属性也就是标准数学常量，其方法构成了数学函数库。所有的属性和方法都是静态的，其使用格式为：“Math.属性”和“Math.方法”。2.2“设为主页”和“加入收藏”功能数学对象中的方法：（1）min（值1，值2）与max（值l，值2）（2）round（数值）、ceil（数值）和floor（数值）方法。

（3）random（）方法。

（4）sqrt（）方法。

（5）abs（数值）方法。

除此以外，Ja