《第8章 JavaScript在网页中的应用3ppt课件.ppt》由会员分享，可在线阅读，更多相关《第8章 JavaScript在网页中的应用3ppt课件.ppt（60页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
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表单
26、区域中表单区域中的文本，就会触发的文本，就会触发 onselect处理程序。处理程序。onclick 事件：当用户单击复选框或单选按钮时，就会触发这个事件事件：当用户单击复选框或单选按钮时，就会触发这个事件。onblur 事件：事件：onblur事件可以用于浏览器窗口，也经常用在表单上事件可以用于浏览器窗口，也经常用在表单上。onblur 处理程序迫使用户在一个字段中输入数据。处理程序迫使用户在一个字段中输入数据。onfocus 事件：使用事件：使用 onfocus事件迫使用户离开这个字段，事件迫使用户离开这个字段， 从而避从而避免用户修改他们不应该修改的字段。免用户修改他们不应该修改的字段。
27、中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B JavaScript的变量和赋值的变量和赋值 1JavaScript值的类型值的类型在在JavaScript中，一段信息就是一个值（中，一段信息就是一个值（value），值有不同的类型），值有不同的类型。JavaScript提供了四种基本的数据类型用来处理数字和文字，这四种提供了四种基本的数据类型用来处理数字和文字，这四种基本的数据类型是：数值（整数和实数）、字符串型（用基本的数据类型是：数值（整数和实数）、字符串型（用“”“”号或号或括起来的字符或数值）、布尔型（使括起来的字符或数值）、布尔型（使True或或False表示）和空
28、值表示）和空值。在在JavaScript的基本类型中的数据可以是常量，也可以变量。的基本类型中的数据可以是常量，也可以变量。 2.变量变量（1）变量的命名。）变量的命名。变量（变量（variable）是用来保存值的，变量名是对应这个值的符号）是用来保存值的，变量名是对应这个值的符号,每一每一个变量都用户保存特定类型的值。例如，变量个变量都用户保存特定类型的值。例如，变量 myName 被赋值为字被赋值为字符串符串Dori。编写这一赋值的一种方式是。编写这一赋值的一种方式是 myName=Dori。等号可。等号可以读作以读作“设置为设置为”。换句话说，变量。换句话说，变量 myName现在包含值
29、现在包含值Dori。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 和和 Variable 是两个不同的是两个不同的变量。不仅如此，大部分命令和变量。不仅如此，大部分命令和“对象对象”都是区分大小写的。都是区分大小写的。在对变量命名时，最好把变量的意义与其代表的意思对应起来，以在对变量命名时，最好把变量的意义与其代表的意思对应起来，以免出现错误。免出现错误。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B （2）变量的声明和赋值）变量的声明和赋值 JavaScript用用var关键字对变量进行声明。一般形式是：关键字对变量进行声明。一般形式是： var ; 变量名
30、是用户自定义标识符，多个变量之间用逗号分开。变量名是用户自定义标识符，多个变量之间用逗号分开。如：如： 变量赋值，很多时候变量赋值，很多时候JavaScript是在声明变量的同时给变是在声明变量的同时给变量进行赋值的，如：量进行赋值的，如：var a, b; /声明a和b是变量，但没有赋予它值var a=10; b=”abcd”; xy = True; /声明变量a为整数，b为字符串，xy为布尔型var name=window.prompt(您好! 输入您的姓名, ); /变量name的值是等号后面数据中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 3.运算符运算符 （1）算术
31、运算符）算术运算符 算术运算符用来完成算术运算。下例执行完成后，变量算术运算符用来完成算术运算。下例执行完成后，变量 txt3 包含的值是包含的值是 “What a verynice day”。 （2）赋值运算符）赋值运算符 赋值运算符用来给变量赋值。赋值运算符用来给变量赋值。 txt1=What a very;txt2=nice day;txt3=txt1+txt2; document.write(This is another paragraph); 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B JavaScript语句语句 JavaScript程序是由若干语句组成的，语
32、句是编写程序的程序是由若干语句组成的，语句是编写程序的指令。指令。JavaScript脚本语言是由控制语句、函数、对象、脚本语言是由控制语句、函数、对象、方法、属性等构成，来实现编程的。方法、属性等构成，来实现编程的。 JavaScript 语句是向浏览器发出的命令，它的作用是告语句是向浏览器发出的命令，它的作用是告诉浏览器该做什么。如：诉浏览器该做什么。如：document.write(Hello world);这个这个 JavaScript 语句告诉浏览器向网页输出语句告诉浏览器向网页输出 Hello world。通常要在每行语句的结尾加上一个分号。通常要在每行语句的结尾加上一个分号，大多
33、数人都认为这是一个好的编程习惯。，大多数人都认为这是一个好的编程习惯。 JavaScript 语句还可以分批地组合起来，叫代码块。语句还可以分批地组合起来，叫代码块。 代码块由一个或多个语句构成，用代码块由一个或多个语句构成，用“”标记，以左花标记，以左花括号开始，以右花括号结束。代码块的作用是一并地执行括号开始，以右花括号结束。代码块的作用是一并地执行语句序列，常用于在函数或条件语句中把若干语句组合起语句序列，常用于在函数或条件语句中把若干语句组合起来。来。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 1.If.else 语句语句 If.else 语句用于在不同条件下执行不
34、同的动作。使用语句用于在不同条件下执行不同的动作。使用 if.else 语句时，在条件为语句时，在条件为 true 时执行语句块时执行语句块1，在条件，在条件为为 false 时执行语句块时执行语句块2。语句格式如下：。语句格式如下：if(条件) 代码块1； /当条件为true时执行的语句1; else 代码块2； /当条件为false时执行的语句2； 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 2.switch语句语句 switch 语句用用于在不同条件下执行不同的动作。语句用用于在不同条件下执行不同的动作。 语句格式如下：语句格式如下：switch(n)case 1:
35、执行代码块 1 break;case 2: 执行代码块 2 break;default: n 与 case 1 和 case 2 不同时执行的代码中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 3.for循环语句循环语句 如果您希望一遍又一遍地运行相同的代码，并且每次的值如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。都不同，那么使用循环是很方便的。for 循环其语句格式循环其语句格式如下：如下： 语句语句1 在循环（代码块）开始前执行，只执行一次；语句在循环（代码块）开始前执行，只执行一次；语句 2 定义运行循环（代码块）的条件，条件满足时执
36、行代码定义运行循环（代码块）的条件，条件满足时执行代码块，否则跳出循环，执行块，否则跳出循环，执行for语句后面的代码；语句语句后面的代码；语句 3 在在循环（代码块）执行完一次后再执行。循环（代码块）执行完一次后再执行。for循环的每一次循环的每一次执行的顺序为执行的顺序为:语句语句2,代码块，语句代码块，语句3，直至语句，直至语句2的条件的条件不满足，退出循环。不满足，退出循环。for (语句 1; 语句 2; 语句 3) 代码块 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B JavaScript函数函数 函数（函数（function）是一组执行某一任务的）是一组执行某一
37、任务的 JavaScript 语语句段，每个函数必须有一个名称（匿名函数例外），并可句段，每个函数必须有一个名称（匿名函数例外），并可被脚本的其他部分调用。函数是可重复使用的代码块，由被脚本的其他部分调用。函数是可重复使用的代码块，由事件驱动的或者当它被调用时执行的。事件驱动的或者当它被调用时执行的。 函数由关键词函数由关键词function加上函数名组成。函数名后面是圆加上函数名组成。函数名后面是圆括号，再后面是左花括号。组成函数内容的语句出现在后括号，再后面是左花括号。组成函数内容的语句出现在后面的行上，然后用右花括号结束这个函数。面的行上，然后用右花括号结束这个函数。 函数的形式如下所示
38、：函数的形式如下所示： function myFunction () / myFunction就是函数名，()表示没有参数/函数定义的语句中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 1. 不带参数的函数不带参数的函数 不带参数的不带参数的JavaScript函数的格式是：函数的格式是：function myFunction () / myFunction就是函数名，就是函数名，()表示没表示没有参数有参数/函数定义的语句函数定义的语句 不带参数函数的引用方法：不带参数函数的引用方法： 【实例实例8-8】不带参数的不带参数的JavaScript函数。函数。myFunction
39、()；中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 2. 带参数的函数带参数的函数 上例中上例中()中为空，表示没有参数；事实上，我们可以在中为空，表示没有参数；事实上，我们可以在()中添加参数，甚至是添加多个参数，由逗号中添加参数，甚至是添加多个参数，由逗号 (,) 分隔，这分隔，这就叫带参数的函数。就叫带参数的函数。 当声明函数时，把参数作为变量来声明；在调用函数时通当声明函数时，把参数作为变量来声明；在调用函数时通过括号过括号()中添加传递值（也被称为参数）；变量和参数必中添加传递值（也被称为参数）；变量和参数必须以一致的顺序出现，第一个变量就是第一个被传递的参须以一致
40、的顺序出现，第一个变量就是第一个被传递的参数的给定的值，第二个变量就是第二个被传递的参数的给数的给定的值，第二个变量就是第二个被传递的参数的给定的值，以此类推。定的值，以此类推。 【实例实例8-9】带参数的函数实例。带参数的函数实例。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 3.带有返回值的函数带有返回值的函数 有时，我们会希望函数将值返回调用它的地方。通过使用有时，我们会希望函数将值返回调用它的地方。通过使用return语句就可以实现。在使用语句就可以实现。在使用return语句时，函数会停语句时，函数会停止执行，并返回指定的值。止执行，并返回指定的值。 【实例实例8-
41、10】带有返回值的函数实例。带有返回值的函数实例。 4.匿名函数匿名函数 函数的命名是一个很麻烦的事，有时我们也可以省略函数的命名是一个很麻烦的事，有时我们也可以省略function后的函数名，叫匿名函数。后的函数名，叫匿名函数。 【实例实例8-11】匿名函数实例。匿名函数实例。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 处理文档对象的方法处理文档对象的方法处理结点处理结点8.3.3 处理文档对象典型实例处理文档对象典型实例中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 处理文档对象的方法处理文档对象的方法 1. 组合式语言组合式语言 JavaScript
42、是一种面向对象（是一种面向对象（object-oriented）的语言）的语言，为了更好地描述，为了更好地描述document对象，把对象，把document对象中对象中的构成元素由点号（的构成元素由点号（.）分隔，如）分隔，如document.getElementById(div1).style. width，我们，我们把这种写法称为点号语法（把这种写法称为点号语法（dot syntax）。把这语句叫做）。把这语句叫做组合式（组合式（snap-together）语言。其中）语言。其中“.”相当于汉字中相当于汉字中“的的”的意思。的意思。 【例例8-12】通过给组合式语言给元素对象的属性赋值。
43、通过给组合式语言给元素对象的属性赋值。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 2. 获取对象元素的方法获取对象元素的方法 我们在对文档对象进行操作之前，首先要了解对那个对象我们在对文档对象进行操作之前，首先要了解对那个对象进行操作，为了保持浏览器的兼容性，然我们一般不直接进行操作，为了保持浏览器的兼容性，然我们一般不直接对文档对象进行操作，而使用对文档对象进行操作，而使用document.getElementById(id)方法来获取对拥有指定方法来获取对拥有指定 id 的第一个对象的引用。如实例的第一个对象的引用。如实例8-3中，语句中，语句document.getE
44、lementById (div1)就是在文档中找到就是在文档中找到id属性为属性为div1的对象元素。的对象元素。 3. 改变对象元素属性的方法改变对象元素属性的方法 找到对象中相关元素及其属性后，一般要改变它的属性值找到对象中相关元素及其属性后，一般要改变它的属性值来实现动态的效果。可以通过给组合式语言赋值的方法来来实现动态的效果。可以通过给组合式语言赋值的方法来改变原对象的属性值。如实例改变原对象的属性值。如实例8-3中，语句中，语句document.getElementById(div1).style.width=400px改变了改变了id为为div1元素的样式的宽度的值为元素的样式的宽
45、度的值为400px。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 1HTML DOM 对象的方法和属性对象的方法和属性 DOM并非一种编程语言，只是提供了一系列的接口（并非一种编程语言，只是提供了一系列的接口（API），），JavaScript利用利用DOM的这些接口可以很方便的读取的这些接口可以很方便的读取、修改、删除树节点中的标签元素和文本内容。、修改、删除树节点中的标签元素和文本内容。 一些常用的一些常用的 HTML DOM 方法：方法： getElementById(id) ：获取带有指定：获取带有指定 id 的节点（元素）的节点（元素）； appendChild(n
46、ode) ：插入新的子节点（元素）；：插入新的子节点（元素）； removeChild(node) ：删除子节点（元素）；：删除子节点（元素）； insertBefore() 在指定的子节点前面插入新的子节点。在指定的子节点前面插入新的子节点。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 一些常用的一些常用的 HTML DOM 属性：属性： innerHTML：节点（元素）的文本值；：节点（元素）的文本值； parentNode ：节点（元素）的父节点；：节点（元素）的父节点； childNodes ：节点（元素）的子节点；：节点（元素）的子节点； attributes ：节
47、点（元素）的属性节点。：节点（元素）的属性节点。 【实例实例8-14】通过通过innerHTML 属性获取标签内的内容。属性获取标签内的内容。 2. 通过通过innerHTML 属性改变对象元素文本。属性改变对象元素文本。 通过通过innerHTML 属性获取属性获取HTML当前标签的起始和结束当前标签的起始和结束里面的文本内容，同时通过赋值可以替代原有内容。里面的文本内容，同时通过赋值可以替代原有内容。 【实例实例8-15】使用使用innerHTML属性改变对象文本内容。属性改变对象文本内容。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 3. 添加节点添加节点 在在 HTM
48、L中，元素对象表示中，元素对象表示HTML元素，元素对象可以拥元素，元素对象可以拥有类型为元素节点、文本节点、注释节点的子节点。有类型为元素节点、文本节点、注释节点的子节点。 【实例实例8-16】创建新的创建新的 HTML 元素。元素。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 处理文档对象典型实例处理文档对象典型实例 【实例【实例8-17】网页换肤。】网页换肤。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B JavaScript窗口的输入输出窗口的输入输出8.4.2 弹出式窗口弹出式窗口2.3.4 HTML文件命名规则文件命名规则8.4.3 浏览器检测浏览
49、器检测中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B JavaScript窗口的输入输出窗口的输入输出 window对象是浏览器对象模型的顶层（核心）对象，所对象是浏览器对象模型的顶层（核心）对象，所有对象都是通过它延伸出来的，因此其他对象也可以称为有对象都是通过它延伸出来的，因此其他对象也可以称为window的子对象。的子对象。 window.prompt()就是一个窗口对象的方法，其基本作用就是一个窗口对象的方法，其基本作用是，当装入是，当装入Web页面时在屏幕上显示一个具有页面时在屏幕上显示一个具有“确定确定”和和“取消取消”的对话框，让你输出数据。的对话框，让你输出数据
50、。 document.write是一个文档对象的方法，它的基本功能是一个文档对象的方法，它的基本功能，是实现，是实现Web页面的输出显示。页面的输出显示。 window.alert(窗口对象输入方法窗口对象输入方法)或者：或者：alert(窗口对窗口对象输入方法象输入方法) 由于由于window是顶层对象，因此调用它的子对象时可以不是顶层对象，因此调用它的子对象时可以不显示的指明显示的指明window对象。对象。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 弹出式窗口弹出式窗口 window.open (33.html, popwindow, height=200, widt