最新Web编程基础－CSS、JavaScript、jQuery第二部分 JavaScript(共88张PPT课件).pptx

JavaScript第二(d r)部分WEB编程基础(jch)第一页，共八十八页。WEB编程基础(jch)教学教学(jio xu)(jio xu)目标目标通过通过(tnggu)这一部分的学习让学生掌握这一部分的学习让学生掌握JavaScript的基础知识、基本语法和常用方法。能的基础知识、基本语法和常用方法。能够熟练对网页图片、文本、菜单等对象进行网页特效够熟练对网页图片、文本、菜单等对象进行网页特效制作。制作。第二页，共八十八页。网页图片滚动特效制作网页图片滚动特效制作JavaScriptJavaScript基础知识。基础知识。JavaScript的变量、运算符、条件语句、循环语句和的变量、运算符、条件语句、循环语句和JavaScript事件。事件。JavaScript中的字符串对象、日期对象、数组对象、逻辑对象、中的字符串对象、日期对象、数组对象、逻辑对象、算数对象使用算数对象使用(shyng)方法。方法。WEB编程基础(jch)教学内容教学内容第三页，共八十八页。重点：重点： 1、JavaScript语法基础语法基础 2、JavaScript常用语句常用语句 3、JavaScript对象对象难点难点(ndin)： JavaScript对象的使用对象的使用WEB编程基础(jch)教学教学(jio xu)(jio xu)重难点重难点第四页，共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch) 以前我们学过用标签使得对象滚动，但是它没有(mi yu)办法使得图片实现无缝隙的滚动。若需要对象无缝隙滚动，就要采用 DIV+CSS+ JavaScript 来实现。一、图片滚动效果一、图片滚动效果图图1 1 图片滚动效果图图片滚动效果图第五页，共八十八页。网页图片滚动网页图片滚动(gndng)特效制特效制作作WEB编程基础(jch)1、 JavaScript 简介（简称：JS） 什么是什么是 JavaScript JavaScript？ JavaScript是一种基于对象和事件驱动事件驱动并具有相对安全性的客户端脚本语言脚本语言。同时也是一种广泛用于客户端WebWeb开发的脚本语言，常用来给HTMLHTML网页添加动态功能(gngnng)。JavaScript JavaScript 能做什么？能做什么？ JavaScript 为 HTML 设计师提供了一种编程工具 HTML 创作者往往都不是程序员，但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言！几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。二、关键技术二、关键技术第六页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制制作作WEB编程基础(jch)1、 JavaScript 简介（简称：JS）JavaScript JavaScript 能做什么？能做什么？ JavaScript 可以将动态的文本可以将动态的文本(wnbn)放入放入 HTML 页面页面 类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面：document.write( + name + “)。JavaScript 可以对事件作出响应 可以将 JavaScript 设置为当某事件发生时才会被执行，例如页面载入完成或者当用户点击某个 HTML 元素时。JavaScript 可以读写 HTML 元素 JavaScript 可以读取及改变 HTML 元素的内容。二、关键技术二、关键技术第七页，共八十八页。网页图片网页图片(tpin)滚动特效制作滚动特效制作WEB编程基础(jch)1、 JavaScript 简介（简称：JS）JavaScript JavaScript 能做什么？能做什么？ JavaScript 被用来验证数据(shj) 在数据被提交到服务器之前，JavaScript 可被用来验证这些数据。JavaScript 可被用来检测访问者的浏览器 JavaScript 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。JavaScript 可被用来创建 cookies JavaScript 可被用来存储和取回位于访问者的计算机中的信息。二、关键技术二、关键技术第八页，共八十八页。网页图片滚动网页图片滚动(gndng)特效特效制作制作WEB编程基础(jch)2、 JavaScript 实现 HTML 的 标签用于把 JavaScript 插入 HTML 页面当中(dngzhng)。（1）如何把 JavaScript 放入 HTML 页面上面的代码会在 HTML 页面中产生这样的输出：Hello World!二、关键技术二、关键技术document.write(Hello World!);第九页，共八十八页。网页图片网页图片(tpin)滚动特效制滚动特效制作作WEB编程基础(jch)2、 JavaScript 实现 HTML 的 标签用于把 JavaScript 插入 HTML 页面当中。（1）如何把 JavaScript 放入 HTML 页面 如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 标签（同时使用 type 属性来定义脚本语言）。 这样， 和 就可以告诉(o s)浏览器 JavaScript 从何处开始，到何处结束。 document.write 字段是标准的 JavaScript 命令，用来向页面写入输出。 二、关键技术二、关键技术第十页，共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)2、 JavaScript 实现 HTML 的 标签用于把 JavaScript 插入(ch r) HTML 页面当中。（1）如何把 JavaScript 放入 HTML 页面 把 document.write 命令输入到 与之间后，浏览器就会把它当作一条 JavaScript 命令来执行。这样浏览器就会向页面写入 Hello World!。注意：注意：如果我们不使用 标签，浏览器就会把 document.write(“Hello World!”) 当作纯文本来处理，也就是说会把这条命令本身写到页面上。二、关键技术二、关键技术第十一页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制制作作WEB编程基础(jch)2、 JavaScript 实现 HTML 的 标签用于把 JavaScript 插入 HTML 页面当中。（2）如何与老的浏览器打交道那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示(xinsh)。为了防止这种情况发生，我们可以使用这样的 HTML 注释标签：注释行末尾的两个正斜杠是 JavaScript 的注释符号，它会阻止 JavaScript 编译器对这一行的编译。二、关键技术二、关键技术第十二页，共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)2、 JavaScript 实现 HTML 的 标签用于把 JavaScript 插入 HTML 页面当中。（3） JavaScript放置 当页面载入时，会执行(zhxng)位于 body 部分的 JavaScript。当被调用时，位于 head 部分的 JavaScript 才会被执行。head 部分：包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前，脚本已经载入了。body 部分：执行位于 body 部分的脚本。外部 JavaScript：二、关键技术二、关键技术第十三页，共八十八页。网页图片滚动网页图片滚动(gndng)特效制特效制作作WEB编程基础(jch)3、 JavaScript 语句JavaScript 是由浏览器执行的语句序列(xli)。JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。（1） JavaScript 代码JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。本例向网页输出一个标题：二、关键技术二、关键技术document.write(This is a header);第十四页，共八十八页。网页图片滚动网页图片滚动(gndng)特效制作特效制作WEB编程基础(jch)3、 JavaScript 语句（2） JavaScript 代码块 JavaScript 可以分批地组合起来。代码块以左花括号开始，以右花括号结束。代码块的作用是一并地执行语句序列。本例向网页输出(shch)一个标题： 上例的用处不大。仅仅演示了代码块的使用而已。通常，代码块用于在函数或条件语句中把若干语句组合起来（比方说如果条件满足，就可以执行这个语句分组了）。二、关键技术二、关键技术document.write(This is a header);第十五页，共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)4、 JavaScript 注释 JavaScript 注释可用于增强代码的可读性。可以添加注释来对 JavaScript 进行(jnxng)解释，或者提高其可读性。（1）JavaScript 单行注释 单行的注释以 / 开始。二、关键技术二、关键技术/ 这行代码输出标题：document.write(This is a header);第十六页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制制作作WEB编程基础(jch)4、 JavaScript 注释(zhsh)（2）JavaScript 多行注释 多行注释以 /* 开头，以 */ 结尾。二、关键技术二、关键技术/*下面的代码将输出一个标题和两个段落*/document.write(This is a header);document.write(This is a paragraph);document.write(This is another paragraph);第十七页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制制作作WEB编程基础(jch)4、 JavaScript 注释（3）使用注释来防止执行 使用单行或者多行注释可以设置不执行相应的JavaScript语句。（4）在行末使用注释 可以在行末使用单行注释来对JavaScript进行(jnxng)解释。二、关键技术二、关键技术document.write(Hello); / 输出 Hello document.write(World); / 输出 World 第十八页，共八十八页。网页图片滚动网页图片滚动(gndng)特效制特效制作作WEB编程基础(jch)5、 JavaScript 变量 正如代数一样，JavaScript 变量用于保存值或表达式。 可以给变量起一个简短名称(mngchng)，比如 x，或者更有描述性的名称，比如 length。 JavaScript 变量也可以保存文本值，比如 carname=Volvo。JavaScript JavaScript 变量名称的规则：变量名称的规则：变量对大小写敏感（y 和 Y 是两个不同的变量）变量必须以字母或下划线开始注释：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。二、关键技术二、关键技术第十九页，共八十八页。网页网页(wn y)图片滚动特效制作图片滚动特效制作WEB编程基础(jch)5、 JavaScript 变量（1）声明（创建） JavaScript 变量 在 JavaScript 中创建变量经常被称为“声明”变量。可以通过 var 语句来声明 JavaScript 变量： 在以上声明之后，变量并没有值，不过(bgu)可以在声明它们时向变量赋值：注释：在为变量赋文本值时，请为该值加引号。二、关键技术二、关键技术var x;var carname;var x=5;var carname=Volvo;第二十页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制作制作WEB编程基础(jch)5、 JavaScript 变量（2）向 JavaScript 变量赋值 通过赋值语句(yj)向 JavaScript 变量赋值：变量名在 = 符号的左边，而需要向变量赋的值在 = 的右侧。在以上语句执行后，变量 x 中保存的值是 5，而 carname 的值是 Volvo。二、关键技术二、关键技术x=5;carname=Volvo;第二十一页，共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)5、 JavaScript 变量（3）向未声明的 JavaScript 变量赋值 如果您所赋值的变量还未进行过声明，该变量会自动声明。这些(zhxi)语句：与这些语句的效果相同：二、关键技术二、关键技术x=5;carname=Volvo; var x=5;var carname=Volvo; 第二十二页，共八十八页。网页图片网页图片(tpin)滚动特效制滚动特效制作作WEB编程基础(jch)5、 JavaScript 变量（4）重新声明 JavaScript 变量 如果您再次声明了 JavaScript 变量，该变量也不会丢失(dis)其原始值。 在以上语句执行后，变量 x 的值仍然是 5。在重新声明该变量时，x 的值不会被重置或清除。二、关键技术二、关键技术var x=5;var x; 第二十三页，共八十八页。网页网页(wn y)图片滚动特效制作图片滚动特效制作WEB编程基础(jch)5、 JavaScript 变量(binling)（5）JavaScript 算数 正如代数一样，您可以使用 JavaScript 变量来做算术：6、 JavaScript 运算符运算符 = 用于赋值。运算符 + 用于加值。二、关键技术二、关键技术y=x-5;z=y+5; 第二十四页，共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)6、 JavaScript 运算符运算符 = 用于给 JavaScript 变量赋值。算术运算符 + 用于把值加起来。在以上语句(yj)执行后，x 的值是 7。（1）JavaScript 算术运算符算术运算符用于执行变量与/或值之间的算术运算。给定 y=5，下面的表格解释了这些算术运算符：二、关键技术二、关键技术y=5;z=2;x=y+z; 第二十五页，共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)6、 JavaScript 运算符（1）JavaScript 算术(sunsh)运算符 二、关键技术二、关键技术运算符运算符描述描述例子例子结果结果+加x=y+2 x=7 -减x=y-2x=3*乘x=y*2x=10/除x=y/2x=2.5%求余数 (保留整数)x=y%2x=1+累加x=+yx=6 -递减x=-yx=4 第二十六页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制作制作WEB编程基础(jch)6、 JavaScript 运算符（2）JavaScript赋值运算符赋值运算符用于给 JavaScript 变量赋值。给定(i dn) x=10 和 y=5，下面的表格解释了赋值运算符： 二、关键技术二、关键技术运算符运算符例子例子等价于等价于结果结果=x=y x=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=0第二十七页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制作制作WEB编程基础(jch)6、 JavaScript 运算符（3）JavaScript比较和逻辑运算符 比较和逻辑运算符用于测试 true 或 false。 1）比较运算符比较运算符在逻辑语句中使用，以测定变量或值是否相等。给定 x=5，下面(xi mian)的表格解释了比较运算符： 二、关键技术二、关键技术第二十八页，共八十八页。网页图片滚动网页图片滚动(gndng)特效特效制作制作WEB编程基础(jch)6、 JavaScript 运算符（3）JavaScript比较和逻辑运算符 1）比较运算符 如何使用？如何使用？ 可以在条件语句中使用比较运算符对值进行比较，然后(rnhu)根据结果来采取行动：if (age18) document.write(Too young); 二、关键技术二、关键技术第二十九页，共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)6、 JavaScript 运算符（3）JavaScript比较和逻辑(lu j)运算符 2）逻辑运算符逻辑运算符用于测定变量或值之间的逻辑。给定 x=6 以及 y=3，下表解释了逻辑运算符： 二、关键技术二、关键技术运算符运算符描述描述例子例子&and(x 1) 为 true|or(x=5 | y=5) 为 false!not!(x=y) 为 true第三十页，共八十八页。网页网页(wn y)图片滚动特效制作图片滚动特效制作WEB编程基础(jch)6、 JavaScript 运算符（3）JavaScript比较和逻辑(lu j)运算符 3）条件运算符JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。语法语法 例子例子 如果变量 visitor 中的值是 “PRES”，则向变量 greeting 赋值 “Dear President ”，否则赋值 “Dear”。二、关键技术二、关键技术variablename=(condition)?value1:value2 greeting=(visitor=PRES)?Dear President :Dear ;第三十一页，共八十八页。网页图片滚动网页图片滚动(gndng)特效制特效制作作WEB编程基础(jch)7、 JavaScript If.Else 语句JavaScript 中的条件语句用于完成不同条件下的行为。条件语句条件语句 在编写代码时，经常需要根据不同的条件完成不同的行为。可以在代码中使用条件语句来完成这个(zh ge)任务。在 JavaScript 中，我们可以使用下面几种条件语句：if if 语句：语句：在一个指定的条件成立时执行代码。if.else if.else 语句：语句：在指定的条件成立时执行代码，当条件不成立时执行另外的代码。if.else if.else if.else if.else 语句：语句：使用这个语句可以选择执行若干块代码中的一个。二、关键技术二、关键技术第三十二页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制作制作WEB编程基础(jch)7、 JavaScript If.Else 语句（1）If 语句 如果希望指定的条件成立时执行代码，就可以使用这个语句。语法语法(yf)(yf)：if (条件)条件成立时执行代码 注意：请使用小写字母。使用大写的 IF 会出错！二、关键技术二、关键技术第三十三页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制制作作WEB编程基础(jch)7、 JavaScript If.Else 语句（1）If 语句实例实例(shl)(shl) 1 1：执行结果：Good morning二、关键技术二、关键技术/Write a Good morning greeting if/the time is less than 10var d=new Date()var time=d.getHours()if (time10) document.write(Good morning)第三十四页，共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)7、 JavaScript If.Else 语句（1）If 语句实例实例 2 2：注意：请使用双等号 (=) 来比较变量(binling)！注意：在语法中没有 else。仅仅当条件为 true 时，代码才会执行。二、关键技术二、关键技术/Write Lunch-time! if the time is 11var d=new Date()var time=d.getHours()if (time=11) document.write(Lunch-time!)第三十五页，共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)7、 JavaScript If.Else 语句（2）If.else 语句 如果希望条件成立(chngl)时执行一段代码，而条件不成立(chngl)时执行另一段代码，那么可以使用 if.else 语句。语法：语法：if (条件)条件成立时执行此代码else条件不成立时执行此代码二、关键技术二、关键技术第三十六页，共八十八页。网页图片滚动网页图片滚动(gndng)特效制特效制作作WEB编程基础(jch)7、 JavaScript If.Else 语句（2）If.else 语句实例：实例： 执行(zhxng)结果： Good morning二、关键技术二、关键技术var d = new Date()var time = d.getHours()if (time 10) document.write(Good morning!)elsedocument.write(Good day!)第三十七页，共八十八页。网页图片网页图片(tpin)滚动特效制作滚动特效制作WEB编程基础(jch)7、 JavaScript If.Else 语句（3） If.else if.else 语句 当需要选择(xunz)多套代码中的一套来运行时，请使用 if.else if.else 语句。语法：语法：二、关键技术二、关键技术if (条件1)条件1成立时执行代码else if (条件2)条件2成立时执行代码else条件1和条件2均不成立时执行代码第三十八页，共八十八页。网页图片网页图片(tpin)滚动特效制作滚动特效制作WEB编程基础(jch)7、 JavaScript If.Else 语句（3） If.else if.else 语句实例：实例：执行(zhxng)结果：Good morning二、关键技术二、关键技术var d = new Date()var time = d.getHours()if (time10)document.write(Good morning)else if (time10 & time16)document.write(Good day)elsedocument.write(Hello World!)第三十九页，共八十八页。网页图片网页图片(tpin)滚动特效制作滚动特效制作WEB编程基础(jch)8、 JavaScript Switch 语句JavaScript 中的条件语句用于完成基于不同条件的行为。如果(rgu)希望选择执行若干代码块中的一个，你可以使用 switch 语句：语法：语法：二、关键技术二、关键技术switch(n) case 1: 执行代码块 1 break case 2: 执行代码块 2 break default: 如果n即不是1也不是2，则执行此代码 第四十页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制作制作WEB编程基础(jch)8、 JavaScript Switch 语句(yj)工作原理： switch 后面的 (n) 可以是表达式，也可以（并通常）是变量。然后表达式中的值会与 case 中的数字作比较，如果与某个 case 相匹配，那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。二、关键技术二、关键技术第四十一页，共八十八页。网页图片网页图片(tpin)滚动特效制作滚动特效制作WEB编程基础(jch)9、 JavaScript消息框 可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。（1）警告框 警告框经常用于确保用户可以得到某些(mu xi)信息。 当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法：语法： alert(文本) 二、关键技术二、关键技术function disp_alert()alert(我是警告框！)第四十二页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制作制作WEB编程基础(jch)9、 JavaScript消息框（2）确认框 确认框用于使用户可以验证或者接受(jishu)某些信息。 当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。 如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。语法：语法： confirm(文本) 二、关键技术二、关键技术第四十三页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制制作作WEB编程基础(jch)9、 JavaScript消息(xio xi)框（2）确认框二、关键技术二、关键技术function show_confirm()var r=confirm(Press a button!);if (r=true) alert(You pressed OK!); else alert(You pressed Cancel!); 第四十四页，共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)9、 JavaScript消息框（3）提示框提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。语法语法(yf)(yf)： prompt(文本,默认值) 二、关键技术二、关键技术第四十五页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制作制作WEB编程基础(jch)9、 JavaScript消息(xio xi)框（3）提示框二、关键技术二、关键技术function disp_prompt() var name=prompt(请输入您的名字,Bill Gates) if (name!=null & name!=) document.write(你好！ + name + 今天过得怎么样？) 第四十六页，共八十八页。网页图片网页图片(tpin)滚动特效制滚动特效制作作WEB编程基础(jch)10、 JavaScript函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。将脚本编写为函数，就可以避免页面载入时执行该脚本。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入(qin r)一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。函数在页面起始位置定义，即 部分。二、关键技术二、关键技术function displaymessage()alert(Hello World!)第四十七页，共八十八页。网页图片网页图片(tpin)滚动特效制作滚动特效制作WEB编程基础(jch)10、 JavaScript函数（1）如何定义函数语法：语法：function 函数名(var1,var2,.,varX) 代码 var1, var2 等指的是传入函数的变量(binling)或值。 和 定义了函数的开始和结束。二、关键技术二、关键技术第四十八页，共八十八页。网页图片网页图片(tpin)滚动特效制作滚动特效制作WEB编程基础(jch)10、 JavaScript函数（1）如何定义函数无参数的函数必须在其函数名后加括号：function 函数名()代码(di m)注意：别忘记 JavaScript 中大小写字母的重要性。function 这个词必须是小写的，否则 JavaScript 就会出错。另外需要注意的是，必须使用大小写完全相同的函数名来调用函数。二、关键技术二、关键技术第四十九页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制作制作WEB编程基础(jch)10、 JavaScript函数（2）return 语句 return 语句用来规定从函数返回的值。因此，需要返回某个值的函数必须使用这个 return 语句。例子例子(l zi)(l zi)：下面的函数会返回两个数相乘的值（a 和 b）： 当您调用上面这个函数时，必须传入两个参数：product=prod(2,3)。而从 prod() 函数的返回值是 6，这个值会存储在名为 product 的变量中。二、关键技术二、关键技术function prod(a,b)x=a*breturn x第五十页，共八十八页。网页图片滚动网页图片滚动(gndng)特效制特效制作作WEB编程基础(jch)11、 JavaScript 循环 JavaScript 中的循环用来将同一段代码执行指定的次数（或者当指定的条件(tiojin)为 true 时）。 在编写代码时，你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码。 JavaScript 有两种不同种类的循环：for：将一段代码循环执行指定的次数while: 当指定的条件为 true 时循环执行代码 二、关键技术二、关键技术第五十一页，共八十八页。网页图片网页图片(tpin)滚动特效制滚动特效制作作WEB编程基础(jch)11、 JavaScript 循环（1）JavaScript for 循环 将一段代码循环执行指定的次数。语法语法(yf)(yf)：for (变量=开始值;变量=结束值;变量=变量+步进值) 需执行的代码实例：实例：下面的例子定义了一个循环程序，这个程序中 i 的起始值为 0。每执行一次循环，i 的值就会累加一次 1，循环会一直运行下去，直到 i 等于 10 为止。二、关键技术二、关键技术第五十二页，共八十八页。网页图片滚动网页图片滚动(gndng)特效制作特效制作WEB编程基础(jch)11、 JavaScript 循环（1）JavaScript for 循环注释注释： 步进值可以为负。如果步进值为负，需要调整(tiozhng) for 声明中的比较运算符。二、关键技术二、关键技术var i=0for (i=0;i=10;i+)document.write(The number is + i)document.write()The number is 0The number is 1The number is 2The number is 3The number is 4The number is 5The number is 6The number is 7The number is 8The number is 9The number is 10第五十三页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制作制作WEB编程基础(jch)11、 JavaScript 循环（2）JavaScript While 循环 JavaScript 中的循环用来将同一段代码执行指定(zhdng)的次数（或者当指定(zhdng)的条件为 true 时）。 1）while 循环 while 循环用于在指定条件为 true 时循环执行代码。 语法：语法：while (变量=结束值) 需执行的代码注意：除了=，还可以使用其他的比较运算符。 二、关键技术二、关键技术第五十四页，共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)11、 JavaScript 循环（2）JavaScript While 循环 1）while 循环 下面的例子定义(dngy)了一个循环程序，这个循环程序的参数 i 的起始值为 0。该程序会反复运行，直到 i 大于 10 为止。i 的步进值为 1。 二、关键技术二、关键技术var i=0while (i=10)document.write(The number is + i)document.write()i=i+1The number is 0The number is 1The number is 2The number is 3The number is 4The number is 5The number is 6The number is 7The number is 8The number is 9The number is 10第五十五页，共八十八页。网页图片滚动特效网页图片滚动特效(txio)制作制作WEB编程基础(jch)11、 JavaScript 循环（2）JavaScript While 循环 2） do.while 循环 do.while 循环是 while 循环的变种。该循环程序在初次运行时会首先执行一遍其中的代码，然后(rnhu)当指定的条件为 true 时，它会继续这个循环。所以可以这么说，do.while 循环为执行至少一遍其中的代码，即使条件为 false，因为其中的代码执行后才会进行条件验证。语法：语法：do 需执行的代码while (变量=结束值)二、关键技术二、关键技术第五十六页，共八十八页。网页图片网页图片(tpin)滚动特效制作滚动特效制作WEB编程基础(jch)11、 JavaScript 循环(xnhun)（2）JavaScript While 循环 2） do.while 循环 二、关键技术二、关键技术var i=0do document.write(The number is + i)document.write()i=i+1while (i0)The number is 0第五十七页，共八十八页。网页网页(wn y)图片滚动特效制作图片滚动特效制作WEB编程基础(jch)11、 JavaScript 循环（3）JavaScript Break 和 Continue 1）Break Break 命令可以终止循环的运行，然后继续执行循环之后的代码（如果(rgu)循环之后有代码的话）。 二、关键技术二、关键技术var i=0for (i=0;i=10;i+)if (i=3)breakdocument.write(The number is + i)document.write()The number is 0The number is 1The number is 2第五十八页，共八十八页。网页图片滚动网页图片滚动(gndng)特效特效制作制作WEB编程基础(jch)11、 JavaScript 循环（3）JavaScript Break 和 Continue 2）Continue Continue 命令会终止当前的循环，然后(rnhu)从下一个值继续运行。二、关键技术二、关键技术var i=0for (i=0;i=10;i+)if (i=3)continuedocument.write(The number is + i)document.write()The number is 0The number is 1The number is 2The number is 4The number is 5The number is 6The number is 7The number is 8The number is 9The number is 10第五十九页，共八十八页。网页网页(wn y)图片滚动特效制图片滚动特效制作作WEB编程基础(jch)11、 JavaScript 循环（4）JavaScript for.in 语句 for.in 语句用于遍历数组或者对象(duxing)的属性（对数组或者对象(duxing)的属性进行循环操作）。 for.in 语句用于对数组或者对象的属性进行循环操作。 for . in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。语法：语法：for (变量 in 对象) 在此执行代