（高职）项目二客户端交互ppt课件.pptx

《（高职）项目二客户端交互ppt课件.pptx》由会员分享，可在线阅读，更多相关《（高职）项目二客户端交互ppt课件.pptx（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、（高职）项目二 客户端交互ppt课件哈尔滨职业技术学院哈尔滨职业技术学院掌握电子商务网站的开发技术，掌握工具掌握电子商务网站的开发技术，掌握工具的使用方法。的使用方法。了解网页开发技术，熟悉使用了解网页开发技术，熟悉使用HTML语言语言、CSS级联样式表、级联样式表、DOM文档对象模型文档对象模型及及JAVA SCRIPT工具完成页面的客户工具完成页面的客户端的交互。端的交互。知识目标知识目标技能目标技能目标通过学习电子商务网站的开发技术与相应通过学习电子商务网站的开发技术与相应工具的使用，完成页面客户端的交互。工具的使用，完成页面客户端的交互。能力目标能力目标项目二项目二 客户端交互客户端交

2、互哈尔滨职业技术学院哈尔滨职业技术学院项目二项目二 客户端交互客户端交互2.1 购物车页面弹出删除购物车页面弹出删除对话框功能对话框功能2.2“设为主页设为主页”和和“加入加入收藏收藏”功能。功能。哈尔滨职业技术学院哈尔滨职业技术学院2.1 购物车页面弹出删除对话框功能购物车页面弹出删除对话框功能一、一、 HTML基础基础1HTML 概述概述超文本标记语言（HTML）是网页制作的基础，它是网页开发中使用的最基本的语言。HTML 是一种简单的、基于问题的语言，它使用一系列代码语言控制符标记，创建可被浏览器解释的文件，它是一种描述性语言。HTML本质上是一个文本文件，任何文本编辑器都可以编写。HT

3、ML文件从本质上来说是文本文件，只不过在其中加入了用以表示格式化和超链接的超文本标记语言。 2.1 购物车页面弹出删除对话框功能购物车页面弹出删除对话框功能2.HTML的使用的使用（1）字体）字体 .（2）表格）表格 .（3）区段标记）区段标记 .（4）链接）链接 网络链接及常用链接标记网络链接及常用链接标记（5）设置图片）设置图片（6）滚动条）滚动条2.1 购物车页面弹出删除对话框功能购物车页面弹出删除对话框功能二、文档对象模型二、文档对象模型DOM1.DOM基本结构基本结构2.DOM顶级对象顶级对象（1）window对象对象（2）document对象对象（3）location对象对象（4）

4、navigator对象对象（5）history对象对象（6）frame对象对象2.2 “设为主页设为主页”和和“加入收藏加入收藏”功能功能一、一、 JavaScript脚本语言概述脚本语言概述 JavaScript是由是由Netscape公司开发的一种公司开发的一种基于对象的网页脚本编程语言，它支持客户端和基于对象的网页脚本编程语言，它支持客户端和服务器端应用程序的开发。服务器端应用程序的开发。JavaScript解决了解决了HTML和和CSS样式只能做静态网页的缺陷，将静样式只能做静态网页的缺陷，将静态网页变成了动态网页，使用户对网页的操作更态网页变成了动态网页，使用户对网页的操作更加方便。

5、网络资料中，常把加方便。网络资料中，常把JavaScript简称简称JS。2.2 “设为主页设为主页”和和“加入收藏加入收藏”功能功能1.JavaScript语言特点语言特点变量不必声明类型，但赋值后类型自动确定，变量不必声明类型，但赋值后类型自动确定，也需要转换。也需要转换。基本数据类型、运算符、流程控制与基本数据类型、运算符、流程控制与C#语言语言类似。类似。字符串类型、布尔类型等，对象的初始化等，字符串类型、布尔类型等，对象的初始化等，空值空值null，与，与C#语言类似。语言类似。自定义函数无返回值类型声明。自定义函数无返回值类型声明。2.2 “设为主页设为主页”和和“加入收藏加入收藏

6、”功能功能2.JavaScript脚本程序的使用脚本程序的使用（1）内部脚本程序）内部脚本程序 只在一个页面中使用的只在一个页面中使用的JavaScript程序用程序用、script标记包围，添加到标记包围，添加到HTML文档中，可以文档中，可以添加到添加到head部分，也可以添加到部分，也可以添加到body部分部分。（2）外部脚本程序）外部脚本程序多个页面共用的多个页面共用的JavaScript脚本程脚本程,将此文件指定将此文件指定给给script标记的标记的“src”属性，就可以和使用内属性，就可以和使用内部部脚本一样使用这个外部文件中的脚本了。脚本一样使用这个外部文件中的脚本了。哈尔滨职

7、业技术学院哈尔滨职业技术学院二、二、JavaScript脚本语言数据类型和变量脚本语言数据类型和变量1.数据类型数据类型2.数据类型转换数据类型转换(1)隐式转换隐式转换 (2)强制转换强制转换3.变量变量2.2 “设为主页设为主页”和和“加入收藏加入收藏”功能功能2.2 “设为主页设为主页”和和“加入收藏加入收藏”功能功能三、三、JavaScript脚本语言运算符、表达式、流脚本语言运算符、表达式、流 程控制程控制1.JavaScript的运算符的运算符2.JavaScript的流程控制的流程控制四、四、JavaScript脚本语言函数脚本语言函数1.全局函数全局函数 eval（字符串）（字

8、符串） 、parseInt（字符串）和（字符串）和parseFloat（字（字符串）符串） 、isNaN（表达式）（表达式） 、Boolean（对象）、（对象）、Number（对象）、（对象）、String（对象）（对象） 、escape（字符串）（字符串）和和unescape（字符串）。（字符串）。 2.2 “设为主页设为主页”和和“加入收藏加入收藏”功能功能2.自定义函数自定义函数（1）函数定义）函数定义 function 函数名（函数名（var1，var2，varN）代码代码 （2）函数的调用）函数的调用 函数名（参数列表）；函数名（参数列表）；变量名变量名=函数名（参数列表）函数名（参

9、数列表） 2.2 “设为主页设为主页”和和“加入收藏加入收藏”功能功能五、五、JavaScript脚本语言常用内置对象脚本语言常用内置对象1.字符串对象字符串对象String 除了字符串数据类型，除了字符串数据类型，JavaScript还内置字还内置字符串对象类型，两者一般混用，其用法和符串对象类型，两者一般混用，其用法和C#的的String对象很相似。对象很相似。 2.数组对象数组对象Array JavaScript的数组对象，其属性和方法与的数组对象，其属性和方法与c数组的属性和方法很类似。数组的属性和方法很类似。2.2 “设为主页设为主页”和和“加入收藏加入收藏”功能功能3.日期对象日期

10、对象Date JavaScript中没有日期时间数据类型，但有中没有日期时间数据类型，但有日期对象。日期对象。4.数学对象数学对象Math 数学对象与前面几种对象不同，它不需要使用数学对象与前面几种对象不同，它不需要使用new操作符来创建，而可以直接使用操作符来创建，而可以直接使用Math来调来调用数学对象，其属性也就是标准数学常量，其方用数学对象，其属性也就是标准数学常量，其方法构成了数学函数库。所有的属性和方法都是静法构成了数学函数库。所有的属性和方法都是静态的，其使用格式为：态的，其使用格式为：“Math.属性属性”和和“Math.方法方法”。2.2 “设为主页设为主页”和和“加入收藏加

11、入收藏”功能功能数学对象中的方法：数学对象中的方法：（1）min（值（值1，值，值2）与）与max（值（值l，值，值2）（2）round（数值）、（数值）、ceil（数值）和（数值）和floor（数值）方法。（数值）方法。 （3）random（）方法。（）方法。 （4）sqrt（）方法。（）方法。 （5）abs（数值）方法。（数值）方法。 除此以外，除此以外，JavaScript中可以用中可以用sin（数值）、（数值）、cos（数值）和（数值）和tan（数值）方法获取数值的正弦、余弦（数值）方法获取数值的正弦、余弦和正切函数值。利用和正切函数值。利用asin（数值）、（数值）、acos（数值）和（数值）和atan（数值）获得反正弦、反余弦和反正切函数值，这（数值）获得反正弦、反余弦和反正切函数值，这里的数值都是代表弧度值。里的数值都是代表弧度值。