第8章 JavaScript在网页中的应用3ppt课件.ppt
《第8章 JavaScript在网页中的应用3ppt课件.ppt》由会员分享,可在线阅读,更多相关《第8章 JavaScript在网页中的应用3ppt课件.ppt(60页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、在此输入您的封面副标题第8章 JavaScript在网页中的应用3中国铁道出版社中国铁道出版社 2016.92016.9李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 编著:编著:李红李红 岳云康岳云康 樊东燕樊东燕中国铁道出版社2016.9中国铁道出版社中国铁道出版社 2016.92016.9李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 主讲:主讲: 李红李红第第8 8章章网页设计语言基础网页设计语言基础中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B 。 技能目标:技能目标:运用运用JavaScript改变改变HTML元素的显示样式;运用元素的显示样式;运用JS实现网页换肤
2、;运用实现网页换肤;运用JS实现图片轮换;运用实现图片轮换;运用JS显示隐藏下显示隐藏下拉菜单;运用拉菜单;运用JS显示数字时钟。显示数字时钟。 能力目标:能力目标:掌握创建网页动态效果的初步能力。掌握创建网页动态效果的初步能力。 。 中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B (第2版)课件 2016.9B JavaScript概述概述本节主要内容8.1.1 JavaScript是什么是什么8.1.2 JavaScript可以做什么可以做什么8.1.3 JavaScript基础语法基础语法中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B JavaScript
3、是什么是什么 Script被称为被称为“脚本脚本”。脚本。脚本是是指表演戏剧、拍摄电影等指表演戏剧、拍摄电影等所依据的底本。所依据的底本。 JavaScript脚本就是简单地说就是一条条的文字命令,脚本就是简单地说就是一条条的文字命令, JavaScript语句是向浏览器发出的命令,它的作用是告诉语句是向浏览器发出的命令,它的作用是告诉浏览器该做什么。浏览器该做什么。JavaScript是是脚本语言的脚本语言的一种,可以用来给网页增加交互性的编程一种,可以用来给网页增加交互性的编程语言。语言。 JavaScript是在用户的浏览器上运行,不需要服务器的支是在用户的浏览器上运行,不需要服务器的支
4、持而可以独立运行。持而可以独立运行。 Script(脚本)分为:服务器端脚本语言(如(脚本)分为:服务器端脚本语言(如PHP与与ASP),客户端脚本。),客户端脚本。中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B 1. 什么是脚本语言什么是脚本语言 脚本,是指表演戏剧、拍摄电影等所依据的底本。脚本可脚本,是指表演戏剧、拍摄电影等所依据的底本。脚本可以说是故事的发展大纲,用以确定故事的发展方向。以说是故事的发展大纲,用以确定故事的发展方向。 JavaScript被称为被称为“脚本语言脚本语言”(scripting language),这意味着它更适合编写脚本而不是程序。,这意味着
5、它更适合编写脚本而不是程序。 不同于服务器端脚本语言(如不同于服务器端脚本语言(如JSP),),JavaScript是客户是客户端脚本语言,也就是说端脚本语言,也就是说JavaScript是在用户的浏览器上运是在用户的浏览器上运行,不需要服务器的支持而可以独立运行。行,不需要服务器的支持而可以独立运行。 JavaScript可以包含在可以包含在HTML页面内部(如头部页面内部(如头部head元素元素中),或者驻留在外部文件中(现在的首选方法)。中),或者驻留在外部文件中(现在的首选方法)。 在在HTML文档中,脚本文本包围在文档中,脚本文本包围在标签中,不会标签中,不会显示在用户的屏幕上,一旦
6、加入了显示在用户的屏幕上,一旦加入了标签标签,Web浏览器就会知道应该运行浏览器就会知道应该运行JavaScript程序。程序。中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B 2JavaScript的由来的由来 在在1995年,年,Netscape公司的公司的Brendan Eich最初在网景导最初在网景导航者浏览器上首次设计实现,后来因为航者浏览器上首次设计实现,后来因为Netscape与与Sun合作,因此取名为合作,因此取名为JavaScript。 一个完整的一个完整的JavaScript实现是由以下实现是由以下3部分组成的:部分组成的:ECMAScript(核心,解释器)
7、、文档对象模型(核心,解释器)、文档对象模型(Document Object Model,简称,简称DOM)、浏览器对象模)、浏览器对象模型(型(Browser Object Model,简称,简称BOM)。)。中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B JavaScript可以做什么可以做什么 JavaScript弥补了弥补了HTML和和CSS交互性空白。用交互性空白。用 JavaScript 可以使网页更具交互性,给站点的用户提供可以使网页更具交互性,给站点的用户提供更好的体验。更好的体验。 (1)向用户发出警告)向用户发出警告 【例例8-1】JavaScript对事件
8、作出反应实例。对事件作出反应实例。 (2)实现与客户端交互)实现与客户端交互 【例例8-2】运用运用JavaScript实现与客户端交互。实现与客户端交互。 (3)JavaScript可以改变可以改变 HTML 样式样式 【例例8-3】运用运用JavaScript改变改变 HTML 样式。样式。 (4)JavaScript其他交互。其他交互。JavaScript 还可以设置还可以设置 cookie,即时构建,即时构建 HTML 页面以及创建基于页面以及创建基于 Web 的应用的应用程序。程序。中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B JavaScript基础语法基础语法
9、1.JavaScript脚本的基本结构:脚本的基本结构: ; /JavaScript代码代码 2.说明:说明: JavaScript代码以代码以标签开始,以标签开始,以结结束。束。 分号:用于分隔分号:用于分隔 JavaScript 语句。语句。 空格:空格:JavaScript 会忽略多余的空格。会忽略多余的空格。 位置:任何地方;位置:任何地方; JavaScript 注释:有单行注释和多行注释两种。单行注释:有单行注释和多行注释两种。单行注释用双反斜杠注释用双反斜杠“/.”,而多行注释是用,而多行注释是用“/*”和和“*/”中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B
10、1、Javascript对象、属性、事件,动作的概念;、事件,动作的概念; 2、Javascript基本语法; 3、Javascript事件;事件; 4、Javascript函数;中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B JavaScript对象基础对象基础本节主要内容:8.2.1 JavaScrip对象简介对象简介8.2.2 DOM和和BOM简介简介 8.2.4 JavaScript的变量和赋值的变量和赋值 事件驱动及事件处理事件驱动及事件处理8.2.5 JavaScript语句语句8.2.6 JavaScript函数函数 中国铁道出版社电子商务网页设计 (第2版)课件
11、 2016.9B JavaScrip对象简介对象简介 1什么是什么是JavaScript 对象对象 对象(对象(object)就是某种东西。在现实中,一只猫、一台)就是某种东西。在现实中,一只猫、一台计算机和一辆自行车都可以称作对象。而对于计算机和一辆自行车都可以称作对象。而对于JavaScript来说,它处理的对象是来说,它处理的对象是Web浏览器中的元素,如窗口、表浏览器中的元素,如窗口、表单,以及表单的按钮和复选框元素都是对象。单,以及表单的按钮和复选框元素都是对象。 现实中一个人可以有多只猫,而网页可以有多个浏览器窗现实中一个人可以有多只猫,而网页可以有多个浏览器窗口,所以给它们起名字
12、是有必要的。口,所以给它们起名字是有必要的。 你可以把自己的宠物叫做一号猫和二号猫,在因特网上你你可以把自己的宠物叫做一号猫和二号猫,在因特网上你也可能会看到一些脚本用也可能会看到一些脚本用 window0和和 form1这样的名这样的名称来称呼对象,这种方式并不好。如果给脚本中的不同对称来称呼对象,这种方式并不好。如果给脚本中的不同对象起名字取一个唯一的名称,而不是使用数字,就更容易象起名字取一个唯一的名称,而不是使用数字,就更容易区分它们,跟踪对象会容易得多。区分它们,跟踪对象会容易得多。中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B 2. 属性属性 对象具有属性(对象具有
13、属性(property)。就像猫有毛皮,计算机有键)。就像猫有毛皮,计算机有键盘,自行车有轮子等一样,在盘,自行车有轮子等一样,在 JavaScript 环境中,网页环境中,网页文档也有标题属性,表单可以有复选框控件。文档也有标题属性,表单可以有复选框控件。 改变对象的属性就修改了这个对象。改变对象的属性就修改了这个对象。 3.方法方法 对象可以做的事情称为方法(对象可以做的事情称为方法(method)。猫会叫,计算)。猫会叫,计算机会崩溃,自行车可以前进。机会崩溃,自行车可以前进。JavaScript对象也有方法:对象也有方法:按钮有点击方法按钮有点击方法click(),窗口有打开方法,窗口
14、有打开方法open(),文本有,文本有选中方法选中方法selected()。圆括号表示它们是方法,而不是属。圆括号表示它们是方法,而不是属性。性。 中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B 4JavaScript 对象、属性和方法组合对象、属性和方法组合 JavaScript中的对象是由属性(中的对象是由属性(properties)和方法()和方法(methods)两个基本的元素的构成的,每个)两个基本的元素的构成的,每个JavaScript对象有它自己的属性和方法。对象有它自己的属性和方法。 属性是与对象相关的值。方法是对象可以执行的动作或者属性是与对象相关的值。方法是
15、对象可以执行的动作或者可以完成的功能。可以完成的功能。 可以将对象、属性和方法组合在一起,从而更好地描述对可以将对象、属性和方法组合在一起,从而更好地描述对象或过程。在象或过程。在JavaScript 中,这些成分由点号分隔(就中,这些成分由点号分隔(就像因特网像因特网URL地址那样),这称为点号语法(地址那样),这称为点号语法(dot syntax)。)。中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B 下面是按这种方式编写的对象及其属性的一些示例:下面是按这种方式编写的对象及其属性的一些示例: 下面是按照点号语法编写的对象方法的一些示例:下面是按照点号语法编写的对象方法的一些
16、示例: window.status document.write() ()中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B DOM和和BOM简介简介 1.DOM对象对象 在网页上,组成在网页上,组成WEB文档的对象被组织在一个树型结构中文档的对象被组织在一个树型结构中。WEB文档一般又称作一个文档一般又称作一个Document,在构建,在构建 HTML 页页面之前,一定要了解这种结构。面之前,一定要了解这种结构。 中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B 树中的每个对象也称为树的节点(树中的每个对象也称为树的节点(node)。)。 Document是根节点,
17、可以包含是根节点,可以包含html、forms、location、anchors、images、links等子节点。等子节点。 2.BOM BOM的核心是的核心是window,而,而window对象又具有双重角色对象又具有双重角色,它既是通过,它既是通过JS访问浏览器窗口的一个接口,又是一个访问浏览器窗口的一个接口,又是一个Global(全局)对象。这意味着在网页中定义的任何对象(全局)对象。这意味着在网页中定义的任何对象,变量和函数,都以,变量和函数,都以window作为其全局对象。作为其全局对象。 Window对象包含属性:对象包含属性:document、location、navigato
18、r、screen、history、frames 等。等。中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B 1.基本概念基本概念 JavaScript是基于对象的语言(这与是基于对象的语言(这与Java不同,不同,Java是是面向对象的语言),而基于对象的基本特征,就是采用事面向对象的语言),而基于对象的基本特征,就是采用事件驱动。它是在用户界面的环境下,使得一切输入简单化件驱动。它是在用户界面的环境下,使得一切输入简单化。通常鼠标或热键的动作我们称之为事件(。通常鼠标或热键的动作我们称之为事件(Event),而),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动由鼠标或热键引
19、发的一连串程序的动作,称之为事件驱动(Event Driver)。而对事件进行处理程序或函数,我们)。而对事件进行处理程序或函数,我们称之为事件处理程序(称之为事件处理程序(Event Handler)。)。 2.事件处理程序事件处理程序 在在JavaScript中对象事件的处理通常由函数中对象事件的处理通常由函数(Function)担担任。其基本格式与函数全部一样,可以将前面所介绍的所任。其基本格式与函数全部一样,可以将前面所介绍的所有函数作为事件处理程序。有函数作为事件处理程序。中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B 3.事件驱动事件驱动 当用户单击鼠标按钮时,产生
20、当用户单击鼠标按钮时,产生onClick事件,同时事件,同时onClick指定的事件处理程序或代码将被调用执行,这一指定的事件处理程序或代码将被调用执行,这一过程称之为事件驱动。下面的例子中在执行时,若用户单过程称之为事件驱动。下面的例子中在执行时,若用户单击该表单中的按钮,会触发击该表单中的按钮,会触发onClick事件,然后调用事件事件,然后调用事件处理程序处理程序change()。 4. JavaScript的常用事件的常用事件 JavaScript事件驱动中的事件是通过鼠标或热键的动作引事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件:发的。它主要有以下几个事件: (
21、1)窗口事件)窗口事件中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B 事件:当用户进入页面而且所有页面元素都完成加载时,就事件:当用户进入页面而且所有页面元素都完成加载时,就会触发这个事件。流行的广告弹出窗口就是使用会触发这个事件。流行的广告弹出窗口就是使用 onload事件处理程事件处理程序的典型例子。序的典型例子。onunload 事件:当用户离开网页时,就会触发事件:当用户离开网页时,就会触发 onunload事件处理事件处理程序。这个事件最常见的用途是,当用户离开某些商业站点时弹出广程序。这个事件最常见的用途是,当用户离开某些商业站点时弹出广告窗口。告窗口。onresi
22、ze 事件:当调整网页的大小时,触发的事件。事件:当调整网页的大小时,触发的事件。onmove 事件:当窗口移动时,会触发事件:当窗口移动时,会触发 onmove事件处理程序。事件处理程序。onabort 事件:当用户取消网页上的图像加载时,会触发事件:当用户取消网页上的图像加载时,会触发 onabort 事件处理程序。事件处理程序。onerror 事件:当页面上发生事件:当页面上发生 JavaScript 错误时,可能会触发错误时,可能会触发 onerror事件处理程序。事件处理程序。onfocus 事件:当一个页面成为最前面的活动窗口时,就会触发事件:当一个页面成为最前面的活动窗口时,就会
23、触发 onfocus处理程序。处理程序。onblur 事件:当用户试图让这个页面退到后面窗口时,会触发事件:当用户试图让这个页面退到后面窗口时,会触发onblur。中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B onclick 事件:用户按下鼠标按钮时触发的事件。事件:用户按下鼠标按钮时触发的事件。onmousedown事件:当用户按下鼠标按钮时触发。事件:当用户按下鼠标按钮时触发。onmouseup事件:事件:onmouseup事件会在用户单击鼠标然后释放按事件会在用户单击鼠标然后释放按钮时触发。钮时触发。onmousemove事件:当页面的访问者移动鼠标时,就会触发事件:当
24、页面的访问者移动鼠标时,就会触发 onmousemove 事件。事件。onmouseover事件:当鼠标移动进任何设计了事件:当鼠标移动进任何设计了onmouseover事件处事件处理程序的区域时,就会触发这个事件。理程序的区域时,就会触发这个事件。onmouseout事件:当鼠标离开任何设计了事件:当鼠标离开任何设计了onmouseover事件处理事件处理程序的区域时,就会触发这个事件。程序的区域时,就会触发这个事件。ondblclick事件:用鼠标进行双击时,产生的事件。事件:用鼠标进行双击时,产生的事件。中国铁道出版社电子商务网页设计 (第2版)课件 2016.9B 表单事件处理事件表单
25、事件处理事件onsubmit 事件:当用户单击事件:当用户单击 Submit 按钮来提交表单时,就会触发按钮来提交表单时,就会触发 onsubmit处理程序。处理程序。onreset 事件:当用户单击表单上的事件:当用户单击表单上的 Reset 按钮(如果有这个按钮的按钮(如果有这个按钮的话)时,就会触发话)时,就会触发 onreset 处理程序。处理程序。onchange 事件:当用户修改表单字段时,就会触发事件:当用户修改表单字段时,就会触发onchange事件事件处理程序。处理程序。onselect 事件:如果用户选择了一个事件:如果用户选择了一个 input 或或 textarea表单
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第8章 JavaScript在网页中的应用3ppt课件 JavaScript 网页 中的 应用 ppt 课件
限制150内