收藏 分销(赏)

JavaScript程序设计教程 第3章 JavaScript程序构成.pdf

上传人:曲**** 文档编号:231287 上传时间:2023-03-21 格式:PDF 页数:66 大小:1.74MB
下载 相关 举报
JavaScript程序设计教程 第3章 JavaScript程序构成.pdf_第1页
第1页 / 共66页
JavaScript程序设计教程 第3章 JavaScript程序构成.pdf_第2页
第2页 / 共66页
JavaScript程序设计教程 第3章 JavaScript程序构成.pdf_第3页
第3页 / 共66页
JavaScript程序设计教程 第3章 JavaScript程序构成.pdf_第4页
第4页 / 共66页
JavaScript程序设计教程 第3章 JavaScript程序构成.pdf_第5页
第5页 / 共66页
点击查看更多>>
资源描述

1、O第3章JavaScript程序构成3.1程序控制流O63.2函数OO3.3事件及事件处理OO3.4实战o?3.1程序控制流程序是算法的实现,在实现算法时,经常会出现重复、选 择分支等操作。这些操作控制着程序的流程向正确的方向进行 Ja va Sc ript提供了丰富的流程控制语句。57.7,条件错句if条件语句是绝大多数编程语言都使用的一个语句。if语 句的语法如下。if(c ondition)sta tement1 else sta tement2;ooW M.7.2加循林错旬for循环语句属于前测试循环语句,它具有在执行循环之前;初始化变量和定义循环后要执行代码的能力。for循环语句的语

2、 法如下。for(initia liza tion;expression;post-1oop-expression&)sta tement;3.1.3仰为循林语句?forin语句是一种精准的迭代语句,可以用来枚举对象的A属性,forin语句语法如下。for(property in expression)sta tement;oo?3.1.4 4循球语句L whi 1 e语句同样是前测试循环语句,在循环体内的代码被执行之前,就会对出口条件求值。循环体内的代码有可能永远不 会被执行。while语句语法如下。&while(expression)sta tement;3.1.5力施婿句?la bel语

3、句用来给代码中加入标签,以便以后调用,la bel语句语法如下。la bel:sta tementOo 3.1.6氏以而H cm3加隔句brea k和c ont inue语句用于循环中精确地控制代码的执 行。brea k语句可以立即退出循环,阻止再次反复执行任何 代码。而c ontinue语句只是退出当前循环,根据控制表达式 t还允许继续进行下一次循环。S.1.7 d.错句dofwhile循环是while循环的变体。该循环会在检查条 件是否为真之前执行一次代码块,然后如果条件为真,就会 重复这个循环。dowhile语句的语法如下。QdoOsta tements;o while(c onditi

4、on)3.1.g 语句switc h语句是if语句的兄弟语句。可以使用switc h语句 为表达式提供一系列的情况(c a se)o switc h语句的语法如下:switc h(expression)c a se va lue:sta tement;brea k;c a se va lue:sta tement;brea k;c a se va lue:sta tement;brea k;c a se va lue:sta tement;brea k;c a se va lue:sta tement;brea k;defa ult:sta tement;oo 首先设置表达式expressio

5、n(通常是一个变量)。随后1将表达式的值与结构中的每个c a se的值做比较,如果存在匹配,则与该c a se关联的代码块会被执行。关键字brea k会使代 码跳出swi t c h语句。如果没有关键字brea k,代码执行就会继续进入下一个 c a seo关键字defa ult说明了表达式的结果不等于任何一种情 况时执行的操作。Oo;3.2函数 如果在实际编程中,需要重复使用同一组语句,则可以把这组语句打包为一段函数并命名。然后在需要使用这组语句的 地方调用函数名称即可。所谓函数,通俗地理解就是一组允许人们在代码里随时调 用的语句。函数的使用不仅使代码看起来简洁,而且也方便了 代码的维护。O

6、.3.2.1备教表达式及语法函数表达式是Ja va Sc ript中的一个既强大又容易使人产 生困惑的特性。L 第1种为使用函数声明语法;第2种为使用函数表达式定义。函数声明语法如下:func tion sum(numl,num2)A/函数体?这种方式,函数声明后不会立即执行,会在程序中需要1的时候通过调用函数名称来执行。一Q3.2.2徐救参救Ja va Sc ript函数的参数与大多数其他语言的函数参数有所 不同。函数不介意传递进来多少个参数,也不在乎传进来的参 数是什么数据类型,甚至可以不传参数,看下面的脚本3-2。OOOOOQ JavaScript函数参数v/titlefunction

7、sum(x)return x+1;)console.Iog(sum(1);console.Iog(sum(1);console.Iog(sum();console.Iog(sum(1,2);脚本32.html运行脚本3-2显示结果如图3.6所示。Developer Tools-file:/G:/ziliao/JavaScript%E7%A8%.XG flElements Console Sources Network Timeline 0 Y top U Preserve log211NaN2脚本3-2.卜:眈本3-2.E=:12脚本 3-2.html:13脚本3-2.卜:Fl图3.6 Jav

8、aScript函数不同实参显示结果oo由此可以看出,Ja va Sc ript中的函数定义并未指定函数形 参的类型,函数调用也未对传入的实参值做任何类型检查,甚 至不检查传入的实参个数。一般情况下,Ja va Sc ript函数调用时可以接收的参数个数 为25个,当然不同的浏览器可能会有差异。当实参比函数声明 指定的形参个数要少时,剩下的形参都将设置为undefined。func tion sum(x,y)c onsole.log(x,y);)sum(l);运行显示结果如图3.7所示。Developer Tools-file:/C:/Users/1/Desktop/%E8%84.XG flEl

9、ements Console Sources Network Timeline 0 Y top U Preserve log1 undefined I脚本图3.7 JavaScript函数实参少于形参示例结果O 当实参比形参个数要多时,剩下的实参没有办法直接获得,可以使用函数的a rguments对象。Ja va Sc ript中的函数参数在 内部是用一个数组来表示的。函数接收到的始终都是这个数组,而不关心数组中包含哪些参数。在函数体内可以通过a rguments 对象来访问这个参数数组,从而获取传递给函数的每一个参数及 传入参数的个数。I func tion sum(x)c onsole,l

10、og(a rguments0 ,a rguments1 ,a rguments2);c onsole,log(a rguments,length);?)sum(l,2,3);运行显示结果如图3.8所示。oDeveloper Tools-file:/C:/Users/1/Desktop/%E8%84.XG E Elements Console Sources Network Timeline 0 q top Preserve log12 3 脚本3 脚本 I图3.8 JavaScript函数实参多于形参示例结果o函数a rguments对象的另一个常用属性是c a llee,该属性 是一个指针,

11、指向拥有这个a rguments对象的函数。Developer Tools-file:/C:/Users/1/Desktop/%E8%84.XG flElements Console Sources Network Timeline 0 topU Preserve log120 脚本Q图3.12 arguments.callee消除函数解耦示例结果o7 Ja va Sc ript中的参数传递都是按值传递的。也就是说,把函数外部的值复制到函数内部的参数,就和把值从一个变量复 制到另一个变量一样。在向参数传递基本数据类型的值时,被传递的值会被复制 给另一个局部变量(命名参数或者a rguments

12、对象的一个元素)O 在向参数传递引用数据类型的值时,会把这个值在内存中T的地址复制给一个局部变量,因此这个局部变量的变化会反映 在函数的外部。当在函数内部重写引用类型的形参时,这个变量引用的就 o是一个局部对象了。而这个局部对象会在函数执行完毕后立即 被销毁。o 5.Z3蠲敷迨值Ja va Sc ript函数返回值关键字是return。一个函数内处理 的结果可以使用return返回,这样在调用函数的地方就可以用 变量接收返回结果。return关键字内任何类型的变量数据或表达式都可以进行 返回,甚至什么都不返回也可以。OOOoQOOO3.24善毅惆用模式在Ja va Sc ript中,函数是一种

13、数据类型,而非像C#或者其 他描述性语言那样仅仅作为一个模块来使用。Ja va Sc ript函数有 4种调用模式,分别是:函数调用模式、方法调用模式、构造器 调用模式以及Apply调用模式。这4种调用模式的区别就在于初始 化关键参数this。1.函数调用模式函数调用模式是最常见也是最好理解的,即声明函数后直QO接调用,例如:func tion func()a lert(,zHello World!);Qfunc();o 2.方法调用模式9 如果将一个函数赋值给对象的成员,那么这里不再称为函1数,而应该叫作方法,例如:va r func=func tion()/定义一个函数funca lert

14、(z,Hello World!);:8 va r obj=;obj.fn=func;/将函数func赋值给一个对象obj,注意这里不加o 0obj.fn();/调用oQi 3.构造器调用模式使用构造器调用函数的模式即在函数调用前面加上一个 new关键字,代码如下。va r Person=func tion()/定义一个构造函数this,na me=World”;this.sa yHello=func tion()p a lert(Hello/z+this.na me);1 va r p=new Person();/调用构造器,创建对象9 p.sa yHello():/使用对象4.Apply调用

15、模式Apply调用模式既可以像函数一样使用,也可以像方法 样使用,其语法如下。函数名.a pply(对象,参数数组);Apply方法接受两个参数,第1个是将被绑定给this的值上,第2个是一个参数数组。va r funl=func tion()o this,na me=Hello;:funl.a pply(null);a lert(na me);Qva r fun2=func tion()this.na me=World”;o va r obj=;fun2.a pply(obj);al prt fob i.name):o 3.2.5的岭和%妙6区期|c a ll和a pply都是为了改变某个函

16、数运行时的c ontext(即 上下文)而存在的,换句话说,就是为了改变函数体内部this 的指向。c a ll和a pply二者的作用完全一样,只是接受参数的方 L式不太一样。1.c a ll方法 语法定义为:c a ll(thisObj,a rgl,a rg2,.a rgN )参数thisObj为可选项,是将被用作当前对象的对象。a rgl,a rg2,a rgN也为可选项,是传递的参数序列。9 c a ll方法可以用来代替另一个对象调用一个方法。c a ll方1法可将一个函数的对象上下文从初始的上下文改变为由thisObj 指定的新对象。如果没有提供thisObj参数,那么Globa l

17、对象 被用作thisObj。说明白一点其实就是更改对象的内部指针,即 改变对象的this指向的内容。ooooo2.a pply方法语法定义为:a pply(thisObj,a rgArra y)应用某一对象的一个方法,用另一个对象替换当前对象ooo如果a rgArra y不是一个有效的数组或者不是a rguments 对象,那么将导投一个TypeError。如果没看提供a rgArra y和thisObj任何一个参数,那么Globa l对象将被用作thisObj,并且无法被传递任 何参数。一3.2.6邃爆惆用所谓递归函数,就是在函数体内调用函数本身。Ja va Sc ript递归函数最常用的实

18、例就是递归阶乘函数,如 下所示。func tion fa c toria l(num)if(num=1)return 1;elsereturn num*fa c toria l(num-1);)Ja va Sc ript函数有很大的灵活性,这也导致在递归时使用 函数名遇到困难,对于上面变量声明式,fa c toria l是一个变量,所以它的值很容易被替换。3.2.7作用域任何程序设计语言都有作用域的概念。作用域就是变量和函数的可访问范围,即作用域控制着变量与函数的可见性和周期性。在Ja va Sc ript中函数作用域即变量在声明它们的函数体 以及这个函数体嵌套的任意函数体内都是有定义的,先来

19、看 一小段代码。va r sc ope=globa l;func tion fun()c onsole,log(sc ope);va r sc ope=loc a l”;c onsole,log(sc ope);fun();32g异库处理 Ja va Sc ript异常,即Ja va Sc ript引擎执行Ja va Sc ript代码时,发生错误,会导致程序立即停止。Ja va Sc ript引入try-O c a tc h语句,作为Ja va Sc ript中处理异常的一种标准方式,其1语法结构如下。try(。/可能发生错误的代码 c a tc h(error)./发生错误时的处理方式)T

20、 如果try块中任何代码发生错误,都会立即退出代码的执6行过程,然后接着执行c a t c h块内容。此时,c a tc h块会接收到 一个包含错误信息的对象。这个对象中包含的实际信息会因为P浏览器的不同而不同,但共同的是有一个保存错误消息的 messa ge 属性。o329国包QOO前面章节已经学习了 Ja va Sc ript变量作用域有全局和局 部变量两种,在函数内部可以直接读取全局变量,而在函数 外部自然无法读取函数内的局部变量。然而在实际中,有时候需要得到函数内的局部变量。正 常情况下,这无法办到,只有通过变通的方法才能实现。即 在函数内部再定义一个函数,如下代码所示。func ti

21、on funl()va r n=999;func tion fun2()a lert(n);/输出999ooQOOOQ在这段代码中,函数fun2被包括在函数funl内部,这时 funl内部的所有局部变量,对fun2都是可见的。但是反过来,fun2内部的局部变量,对funl是不可见的。这就是Ja va Sc ript 语言特有的“链式作用域”结构(c ha in sc ope),子对象会 一级一级地向上寻找所有父对象的变量。所以,父对象的所有 变量,对子对象都是可见的,反之则不成立。OOo 3.3事件及事件处理3.3.1什么臭秘4s勿滋*件1 Ja va Sc ript与HTML之间的交互是通过

22、事件来实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以用侦 听器来预订事件,以便事件发生的时候执行相应的代码。当浏览器检测到一个事件时,比如用鼠标单击或者敲击键盘,它可以触发与这个事件相关联的Ja va Sc ript对象,这些对象称 为Ja va Sc ript事件处理程序。OOO,3.3.2的S“净件处理福本方式Ja va Sc ript响应事件的函数叫作事件处理程序或者事件侦 T听器。事件处理程序的名字以“on”开头,如c lic k事件的事件;处理程序就是onc lic k,loa d事件的事件处理程序就是onloa d。为事件指定处理程序的方式有好几种。1.HTML

23、事件处理程序i 某个元素支持的每种事件都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的 o Ja va Sc ript 代码。1 例如要W鼠标单击按钮时执行一些Ja va Sc ript代码,可以编写代码如下。在运用HTML事件处理程序时,必须得了解使用HTML事 件处理程序的三大缺点。(1)时差问题:用户可能会在HTML元素一出现在页面上 就触发相应的事件,但是当时事件处理程序可能不具备执 行条件。(2)览器兼容问题:这样扩展事件处理程序的作用域 链在不同浏览器中会导致不同的结果。不同Ja va Sc ript引 擎遵循的标识符解析规则略有差异,很可能会

24、在访问非限 定对象成员时出错。(3)代码耦合:HTML事件处理程序会导致HTML代码和 Ja va Sc ript代码紧密耦合。如果要更改事件处理程序需要 同时修改HTML代码和Ja va Sc ript代码。o 2.DOMO级事件处理程序 通过Ja va Sc ript指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。这样的优势一是简单,二是 可以跨浏览器使用。要使用Ja va Sc ript指定事件处理程序,首先 人 必须要取得一个要操作的对象的引用。每个元素都有自己的事件处理程序属性,这些属性通常全部 小写,例如onc lic k。将这种属性的值设置为一个函数,就可以

25、 A指定事件处理程序,如下所示。,va r btn=doc ument.getElementById(,btn,);p btn.onc lic k=func tion()A a lert C c lic ked);ooo1 这段代码中,通过文档对象取得了 一个按钮的引用,然后为它指定了onc lic k事件处理程序。但要注意,在这些代!码运行之前不会指定事件处理程序,因此如果这些代码在页1 面中位于按钮后面,就有可能在一段时间内怎么单击都没有反应。通过D0 M0级方式指定的事件处理程序被认为是元素的方 法。因此,这时候的事件处理程序是在元素的作用域中运行 的;换句话说,程序中的this引用的是

26、当前元素。O3.D0 M2级事件处理程序o“D0 M2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:a ddEventListener和removeEventListener o所有DOM节点中都包含这两个方法,并且都接收3个参数:要 处理的事件名、作为事件处理程序的函数和一个布尔值。如果这个布尔值参数为true,表示在捕获阶段调用事件处理函数;如果是fa lse,表示在冒泡阶段里用事件处理函数。|va r btn=doc ument.getElementById(,btn,);btn.a ddEventListener(J c lic k,func tion()a lert(

27、this,id);,fa lse);A 这段代码是在按钮上为c lic k事件添加事件处理程序。与DOMO级方法一样,添加的事件处理程序也是在其依附的元素的?作用域中运行,另外,通过这种方式可以添加多个事件处理程 序,添加的事件处理程序会按照添加它们的顺序出发。.3.3.3卒用窗口有件当用户执行某些会影响整个浏览器窗口的操作时,就会 发生窗口事件。最常见的窗口事件是通过打开某个网页来加载;窗口。还有在窗口关闭、移动或转到后台时触发事件处理程序 的事件。下面将具体介绍常用的窗口事件。0 1.on loa d 事件A onloa d事件即页面所有元素都完成加载后触发的事件。在实际项目开发过程中,o

28、nloa d事件有3种常用的使用方?式。第1种在body标签上执行onloa d事件,如下所示。1 oo第2种方式先定义好函数,在页面加载完成后调用,如下所示。sc ript type=text/ja va sc ript”)func tion test()a lert(1 23);window,onloa d 二 testoQOOOQ第3种方式使用匿名函数,如下所示。window.onloa d 二func tion()a lert(123);这3种触发onloa d事件的方式都会在页面完成加载后,弹出 警告框123。但这里介绍的都是在页面完成加载后执行单个操作 o事实上,经常会需要在加载页

29、面时执行多个操作,而onloa d 事件在Ja va Sc ript中有效执行的有且只有一个,声明多次没有 意义,否则后面的会将前面的覆盖。OO2.onunloa d事件onunloa d事件称为卸载事件。当用户退出页面时(页面关 闭、页面刷新等),触发onunloa d事件,同时执行被调用的程?序。,3.onresize事件当浏览器窗口(显示web文档的窗口)或HTML对象被改变大 小时会触发onresize事件。!支持onresize事件的HTML标签有:,o,to,ooO支持onresize事件的Ja va Sc ript对象即为window对象。脚本3-10演示了当浏览器窗口被调整大小

30、时,弹出一个 消息框。OOo脚本310.html运行后调整浏览器窗口大小,显示结果如图3.30所示。此网页显示:浏览器窗口已被改变!禁止此页再显示对话框。确定图3.30改变浏览器窗口大小弹窗o-4.onmove事件onmove事件称为移动事件,是当浏览器的窗口发生移L 动时触发的事件,支持IE、N4和。pera浏览器。5.ona bort事件 ona bort事件可理解为中断触发事件,会在图像加载2 被中断时发生。当用户在图像完成载入之前放弃图像的装载(如单击9 了 Stop按钮)时,就会调用该事件。1 支持该事件的HTML标签为 img标签;支持该事件的Ja va Sc ript 对象为im

31、a ge 对象。Oo在下面的例子中,如果图像的加载被中断,则会显示T 一个对话框。;在本例中,如果图像的加载中断,我们将调用一个函数。代码如脚本3-12所示。OOOfunc tion a bortlma ge()a lert(Error:Loa ding of the ima ge wa s a borted)脚本312.html工 6.onerror事件onerror事件是一种老式的标准的在网页中捕获Ja va Sc ript 7错误的方法。1 前面讲到可以使用try.c a tc h声明来捕获网页中的错误。这里介绍如何使用onerror事件来达到相同的目的。只要页面中出 o现脚本错误,就会

32、触发onerror事件。如果需要使用onerror事件 来捕获网页错误,就必须创建一个处理错误的函数。这个函数叫 作onerror事件处理器(onerror event ha ndler)。这个事件 处理器使用3个参数来调用:msg(错误消息)、url(发生错误的 页面的url)、line(发生错误的代码行)。浏览器是否显示标 6准的错误消息,取决于onerror的返回值。如果返回值为fa lse,则在控制台(Ja va Sc ript c onsole)中显示错误消息,反之则?不会。工 7.onfoc us事件onfoc us为获得焦点事件。页面元素获得焦点时会触发此 9事件,该事件与onb

33、lur事件刚好相反。下面的脚本演示了当文 1本输入域获得输入焦点时,自动清除文本框的内容,获得焦点 的标志是该文本框内将出现输入光标。代码如脚本3-14所示。OI 手机号码:Q脚本314.htmlinput文本框获得焦点后显示结果如图3.34所示手机号码:I图3.34 onfocus事件获得焦点显示结果oW 8.onblur事件onblur为走去焦点事件。在实际项目中经常会检测文本框是否已经被正确输入,检测工作通常在用户单击了提交按钮之后进行,事实上,利用控。件失去焦点的时候,就可以实时进行这个检测工作,这样的话,onblur事件就派上用场了。以下例子有4个文本框,如果还没有任何单击它们当中的

34、任 9意一个的操作,那么什么事情也不会发生,但是,当单击了其!中的任何一个使其拥有了焦点(输入光标在里面),如果什么 都没有输入并且单击了别的地方令其失去焦点,就会弹出一个 警告。Oo 3.S.4停用鼠标事件用户与页面的许多交互都是通过鼠标移动或者鼠标单击进 行的。Ja va Sc ript为这类事件提供了一组强健的处理程序。1.one lic k 事件 onc lic k是鼠标单击事件,当在网页上单击鼠标时,就会触?发该事件。同时one 1 i c k事件调用的程序块就会被执行,one 1 i c k事件通常与按钮一起配合使用实现一些单击效果。O2.ondbc li c k 事件当鼠标双击页

35、面上某个对象时,会触发ondbc lic k事件,如脚本3-17所示。Fieldl:Field2:双击下面的按钮,把Fieldl的内容拷贝到Field2中:Copy TextQ脚本317.htmlo鼠标双击按钮显示结果如图3.37所示。Fieldl:Field2:Hello World!Hello World!双击下面的按钮,把Fieldl的内容拷贝到Field2中:Copy Text|图3.37 onDbClick事件示例结果o0 3.onmousedown事件当鼠标按键(任何一个键)被按下时,会触发onmousedown?事件,如脚本3-18所示。OOOOOQ脚本318.html将鼠标放在

36、图片上,当按下鼠标任何一个键时,就会弹出 提示窗口“您点击了这幅图片!”,如图3.38所示。:应用D百度此网页显示您点击了这幅图片!图3.38 onmousedown事件示例结果.4.onmouseup事件当鼠标按键(任何一个键)被松开时,会触发onmouseup T事件,如脚本3-19所示。Q脚本319.htmloQ在这个例子中,将鼠标放在图片上,当按下任何一个鼠 标键后松开时,就会弹出提示窗口“您单击了这幅图片!”,如图3.39所示。:应用D百度此网页显示您点击了这幅图片!图3.39 onmouseup事件示例结果oQOO5.onmouseover事件和onmouseout事件Onmous

37、eover事桂龙用户鼠标移入元素时触发的事件,并执行onmouseover调用的函数。OOnmouseout事件为用户鼠标移开元素时触发的事件,并 执行onmouseout调用的函数。二者非常相似,只是具体的触Q发动作正好相反。OQoQ6.onmousemove事件onmousemove事彳牛会在鼠标指针移动时发生。下面的例子中,当用户把鼠标移动到图像上时,将显示-2个对话框。O,S.3.5库用表草净件9 1.onblur事件页面元素失去焦点时会触发onblur事件。、onblur事件可以用于浏览器窗口(如前面所示),也经常用于表单上。0 2.onc ha nge事件,表单文本域施选择域发生改

38、变时会触发onc ha nge事件,常用于下拉框联动操作中。下面演示selec t下拉选择列表p,当列表内无合适选择项而让用户自定义选择项的效果。i 3.onfoc us事件当表单元素获得焦点时会触发onfoc us事件,该事件与 onblur事件刚好相反。Oo4.onreset事件9 表单被重置(重置按钮被单击)时会触发onreset事件。如果1表单具有在加载页面时设置的默认值,那么用户单击重置按钮时,就会动态地重新设置默认值。5.onsubmit事件表单被提交时会触发onsubmit事件。单击submit提交按钮后,onsubmit事件是先于表单提交发生的,因此可以利用onsubmit事件

39、执行一些代码,如表单内容检测等。OO 0 0 o O3.3.6停用碗盘净件1.onkeypre s s事件用户按下或按桂一个键盘按键时会触发onkeypress 事件。onkeypress事件在不同的浏览器上使用会有点差异:Internet Explorer 使用 event.keyCode 取回被按下 的字符,而 Netsc a pe/Firefox/Opera 使用 event,whic hoo0 2.onkeydown 事件用户按下一个键盘按键时会触发onkeydown事件。与onkeypress事件不同的是,onkeydown事件是响应任意。键按下的处理(包括功能键),onkeypre

40、ss事件只响应字符键 i按下后的处理。与onkeypress事件一庠,使用onkeydown事件时,Internet Explorer/Chrome 浏览器使用event.keyCode 取回 o被按下的字符,而Netsc a pe/Firefox/!Opera等浏览器使用event,whic ho3.onkeyup 事件键盘按键松开时会触发onkeyup事件。O3.4 实战【藁例3二】一一用循环实现Bingo卡片游戏 1.案例描述o Bingo卡片是5*5的方形,5个列上标着B-I-N-G-0,格子1里包含175的数字。正中间通常是一个空的格子,印着单词 freeo每列可以包含的数字的范围是

41、:B列包含数字115;I 列包含数字1630;N列包含数字3145;G列包含数字46 60;0列包含数字6175。2.实现思路Bingo卡片总共有24个空格需要填充数字,且每个数字互 不重复;每列数字有固定的取值范围。这样首先需要创建一 6个for循环,用i作循环变量,循环24次;每次循环调用函数 依次往Bingo卡片中的空格插入数字。?3.实现代码运行结果如图3.52所示。Create A Bingo CardBINGO14203456701119405772325Free51751226436069817374763Click here to create a new card图3.52案

42、例31运行结果oT【案例3-2 利用递归函数求阶乘相加L 1.案例描述利用递归函数编写求S=1!+2!+3!+9!+10!结果的程序。2.实现思路A s=l!+2!+3!+9!+10!,这里可以用两个递归函数来实现,递归函数一用来计算每个数的阶乘,递归函数二用来将每个数的9阶乘相加起来。1 3.实现代码运行结果如图3.53所示。ODeveloper Tools-file:/G:/ziliao/JavaScript%E7%A8.XQ 521 Elements Console Sources Network Timeline 0 q top U Preserve log运算结果为:4037913 脚本3-8.html:22图3.53案例32运行结果oT 3.5小结本章介绍了Ja va Sc ript程序构成的相关内容:程序控制 流、函数以及事件。程序控制流为实际应用中重复、选择分 支等操作提供了很好的解决方案,控制着程序的流程向正确I 的方向进行。函数的存在使代码看起来更加简洁,大大地方便了代码的维护。而Ja va Sc ript事件则使创建的html页面动 态性更强,用户体验和交互性更好。这些知识将会在接下来?各章节的学习中频繁地使用到。OQ

展开阅读全文
相似文档                                   自信AI助手自信AI助手
猜你喜欢                                   自信AI导航自信AI导航
搜索标签

当前位置:首页 > 应用文书 > 其他

移动网页_全站_页脚广告1

关于我们      便捷服务       自信AI       AI导航        获赠5币

©2010-2024 宁波自信网络信息技术有限公司  版权所有

客服电话:4008-655-100  投诉/维权电话:4009-655-100

gongan.png浙公网安备33021202000488号   

icp.png浙ICP备2021020529号-1  |  浙B2-20240490  

关注我们 :gzh.png    weibo.png    LOFTER.png 

客服