JAVASCRIPT事件与动态页面编程.pdf

《JAVASCRIPT事件与动态页面编程.pdf》由会员分享，可在线阅读，更多相关《JAVASCRIPT事件与动态页面编程.pdf（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、电脑学习990 2 0 9电脑学习 CO M PU T ER ST U D Y 1999年第2 期No.2 1999JA VA SCRI PT 事件与动态页面编程张慧成魏鸿摘要介绍了Ja v a s c r i p t 的事件、事件监视器和事件处理器，并通过一个例程详细介绍了利用Ja v a s c r i p t 事件处理器进行动态页面编程的方法。关键词Ja v a s c r i p t 事件动态页面监视器Javascript Event and Dynamic Page-turning ProgrammingZh a n g H u i c h e n g W e i H o n gA

2、b s t r a c t：Ja v a s c r i p t e v e n t,e v e n t m o n i t o r a n d e v e n t p r o c e s s o r a r e d e s c r i b e d i n t h i s p a p e r.A n d i n a n e x a m p l e,d y n a m i c p a g e-t u r n i n g p r o g r a m m i n g m e t h o d w i t h Ja v a s c r i p t e v e n t p r o c e s s o r

3、i s d i s c u s s e d i n d e t a i l.K e y w o r d s:Ja v a s c r i p t e v e n t D y n a m i c p a g e M o n i t o rJa v a s c r i p t 语言的一个特色就是它的动态性，即以事件驱动的方式对用户输入作出反应而不需要依赖服务器端程序。一般来说事件是指人机交互的结果，如鼠标移动，单击按钮，在表单中输入数据或载入新的W EB页面等。Ja v a s c r i p t 为这些事件定义了相应的事件监视器。事件监视器告诉Ja v a s c r i p t 解释器当指定事

4、件发生时，运行何种Ja v a s c r i p t 代码。1Ja v a s c r i p t 事件监视器的使用原则 要在H T M L文档中使用事件监视器，以便在人机交互某事件发生时，调用相应的处理函数(或以分号分隔的Ja v a s c r i p t 语句)进行某种处理操作，需遵循以下原则：1.事件监视器须作为某H T M L标记(如BO D Y、FO RM、I M G 等)的一个属性名；2.嵌入H T M L文档的事件处理函数(内置或自定义的Ja v a s c r i p t 函数或代码)要用双引号封闭后再赋值给事件监视器，其格式为o n Ev e n t=“Ja v a Sc

5、 r i p t c o d e”；3.传递给事件处理函数的参数或变量必须用单引号封闭，以便使Ja v a s c r i p t 可区分出封闭于双引号内的属性参数；4.若事件处理器不是函数而直接用Ja v a s c r i p t 语句，则各语句间要用分号分开且在需要用引号的地方只能用单引号(因为双引号的出现意味着Ja v a s c r i p t 的描述结束)；5.事件处理器(Ja v a s c r i p t c o d e)对引用变量的大小写敏感”。2 动态W EB页面的编程示例 2.1介绍两个常用的Ja v a s c r i p t 内置函数 f i l e:/E|/q k/

6、d n x x/d n x x 99/d n x x 990 2/990 2 0 9.h t m（第 15 页）2 0 10-3-2 2 17:31:47万方数据电脑学习990 2 0 91.s e t T i m e o u t(e x p r,m s e c o n d s t)。函数的作用是：在等待m s e c o n d s 毫秒后执行表达式e x p r。它相当于给程序设置了一个定时器，为在一个特定的时间段后调用Ja v a s c i p t语句提供了方便。需要说明的是：当表达式执行完后并不会再执行第二次，除非你在这个表达式中再调用s e t T i m e o u t()。2.

7、c l e a r T i m e o u t(T i m e O u t I D)。函数的作用是：将定时器T i m e O u t I D 清零。2.2 示例程序及说明(1)本程序在页面中显示一动态图像(图像以每50 0 毫秒一帧的速率变化)、一个在线时钟和一个类似于霓虹灯广告牌动态效果的从左到右滚动显示信息的窗口。(2)在程序的H EA D 和BO D Y标记内均嵌入有Ja v a s c r i p t 代码，这是为了说明H T M L解释器对他们的处理顺序不同：H T M L解释器是对H EA D 标记内所有Ja v a s c r i p t 代码先做解释然后才能执行；而对放在BO

8、 D Y标记内的Ja v a s c r i p t 代码，H T M L解释器是解释一句执行一句。(3)在显示动态图像之前，需先将组成该动态图像的G o p h e r Pr o x y:(留空)各帧图形文件以i m a g e l.g i f,i m a g e 2.g i f,，i m a g e n.g i f)形式命名其中n 为图像的总帧数，。(4)程序分别在BO D Y和I M G 标记的属性中使用了三个事件监视器：两个o n Lo a d,一个o n U n l o a d,在I M G o n Lo a d=.中，由于调用c h a n g e G i f()每装载一帧新的图像

9、都会触发Lo a d 事件，故其时钟设置s e t T i m e o u t()不需在c h a n g e G i f()中循环调用。(5)若要改变帧频变化，可根据需要设置变量m s e c o n d x。如果改变总帧数，可改变i m a g e M a x 的值。(6)U p d a t e T e s t()函数每隔10 0 m s 将表单的第二个元素e l e m e n t s 1(亦n a m e 为t e s t b o x的正文输入框)的值更新一次。表单值的变化会被立即显示出来，从而动态显示出正文框中数据的变化，它反映了表单对象的更新能力。其中两行代码是：Po s i t

10、i o n=Po s i t i o n+1;d o c u m e n t.f o r m s 0.e l e m e n t s 1.v a l u e=M y St r i n g.s u b s t r i n g(Po s i t i o n%St r i n g Le n g t h,Po s i t i o n+40%St r i n g Le n g t h);作用是更新Fo r m 元素的值。方法s u b s t r i n g(起始位置序号，结束位置序号)截取串的一个子串放入正文输入框中。其中：%St r i n g Le n g t h 表示对串长度取模，以保证位置序号

11、总是在零和串长度之间。示例程序 h t m l h e a d t i t l e D y n a m i c G r a p h i c s w i t h Ja v a Sc r i p t/t i t l e s c r i p t LA NG U A G E=“Ja v a Sc r i p t”!-v a r M y St r i n g=“显示类似于霓虹灯广告牌的动态效果!”；v a r T e s t Ru n n i n g=f a l s e;v a r Po s i t i o n=0;v a r St r i n g Le n g t h=M y St r i n g.l

12、 e n g t h;v a r T i m e ID 1=n u l l;v a r T i m e ID 2=n u l l;v a r T i m e r Ru n i n g=f a l s e;f u n c t i o n U p d a t e T e s t()f i l e:/E|/q k/d n x x/d n x x 99/d n x x 990 2/990 2 0 9.h t m（第 2 5 页）2 0 10-3-2 2 17:31:47万方数据电脑学习990 2 0 9用截取子串放入表单正文输入框的方法制造走马灯效果 Po s i t i o n=Po s i t i

13、 o n+1;d o c u m e n t.f o r m s 0.e l e m e n t s 1.v a l u e=M y St r i n g.s u b s t r i n g(Po s i t i o n%St r i n g Le n g t h,Po s i t i o n+40%St r i n g Le n g t h);T i m e ID 1=s e t T i m e o u t(“U p d a t e T e s t()”，10 0)；循环设定计时器 T e s t Ru n n i n g=t r u e；f u n c t i o n p a d n a

14、m(n)i f(n s c r i p t h e a d b o d y BG CO LO R=f f f f e 0 o n Lo a d=St a r t T e s t()o n U n l o a d=St o p T e s t()s c r i p t LA NG U A G E=Ja v a Sc r i p t !-v a r m s e c o n d s=50 0 等待时间定为50 0 毫秒 v a r i m a g e Nu m=1第一帧图像序号 f i l e:/E|/q k/d n x x/d n x x 99/d n x x 990 2/990 2 0 9.h

15、t m（第 35 页）2 0 10-3-2 2 17:31:47万方数据电脑学习990 2 0 9v a r i m a g e M a x=14图像的总帧数 m y Im a g e s=n e w A r r a y()建立一数组用以装入图像各帧 f o r(i=1;i(i m a g e M a x+1);i+)m y Im a g e s i=n e w I m a g e()m y Im a g e s i.s r c=i m a g e+i+.g i f f u n c t i o n c h a n g e G i f()构造图像变化函数，用以在定时超时时改变名为d y n a

16、m i c I m a g e 的图像 d o c u m e n t.d y n a m i c I m a g e.s r c=m y I m a g e s i m a g e Nu m.s r c i m a g e Nu m+i f(i m a g e Nu m i m a g e M a x)i m a g e Nu m=1 -s c r i p t d i v a l i g n=c e n t e r c e n t e r t a b l e t r t d BG CO LO R=3399f f f o n t CO LO R=f f f f e 0 SI ZE=+2 用Ja

17、 v a Sc r i p t 制作动态图像示例f o n t t d t r t r t d p a l i g n=“c e n t e r”此图像每50 0 毫秒变化一帧。t d t r t a b l e c e n t e r d i v p a l i g n=c e n t e r i m g NA M E=d y n a m i c I m a g e SRC=i m a g e 1.g i f W ID T H=2 0 0 H EI G H T=10 0 A LT=D y n a m i c G i f o n Lo a d=s e t T i m e o u t(c h a

18、 n g e G i f(),m s e c o n d s)p f o r m NA M E=T e s t o n s u b m i t=0 p 动态显示时钟和文字行：p p i m p u t t y p e=t e x t s i z e=8 i m p u t T YPE=t e x t NA M E=t e s t b o x VA LU E=SIZE=40 b r p f o r m b o d y h t m l 作者单位：张慧成，河南省郑州市信息工程学院研究所研究生队（450 0 0 2）参考文献 1张廷圆主编.Ja v a s c r i p t 程序设计及应用.西安：西

19、北工业大学出版社，1997.4 2 美K RIS JA M SA Ph.D 等著，王玉琳等译.W EB程序设计教程.北京：电子工业出版社，1997.4f i l e:/E|/q k/d n x x/d n x x 99/d n x x 990 2/990 2 0 9.h t m（第 45 页）2 0 10-3-2 2 17:31:47万方数据电脑学习990 2 0 9收稿日期：1998-0 8-0 3f i l e:/E|/q k/d n x x/d n x x 99/d n x x 990 2/990 2 0 9.h t m（第 55 页）2 0 10-3-2 2 17:31:47万方数据JAVASCRIPT事件与动态页面编程JAVASCRIPT事件与动态页面编程作者：张慧成，魏鸿，Zhang Huicheng，Wei Hong作者单位：河南省郑州市信息工程学院研究所研究生队,450002刊名：电脑学习英文刊名：COMPUTER STUDY年，卷(期)：1999(2)参考文献(2条)参考文献(2条)1.KRIS JAMSA;王玉琳 WEB程序设计教程 19972.张廷圆 Javascript程序设计及应用 1997 本文链接：http:/