JavaScript脚本语言.ppt

《JavaScript脚本语言.ppt》由会员分享，可在线阅读，更多相关《JavaScript脚本语言.ppt（49页珍藏版）》请在装配图网上搜索。

1、,JavaScript脚本语言,脚本语言是一种简单的描述性语言，它的语法结构与计算机其他高级语言相似。脚本语言的出现较好地解决了Web页的动态交互问题。将脚本语言嵌入到HTML页中，通过编程对Web页元素进行控制，从而实现Web页的动态化和交互式化。,4.1,JavaScript 语言,JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言,基于对象的语言 以“对象”的角度认识和理解HTML文档中的各个元素，对象又有自己的子对象，每个对象又有自己的方法（alert,open,setTimeout等）和属性(style,src,value

2、等)。,例：window.document.form.text.value=123,事件驱动 就是在主页中执行了某种操作所产生的动作。如按下鼠标等都可以视为事件，当事件发生后,可能会引起事件响应。,例：,一些常用的事件 onClick事件：鼠标点击时触发 onMouseOver事件：鼠标移入时触发 onMouseOut事件：鼠标移出时触发 onLoad事件：当HTML文件被浏览器打开时触发该事件 onUnload事件：在浏览器关闭HTML时，被触发 onFocus事件：在窗口获得焦点时发生 onBlur事件：在窗口失去焦点时发生 onResize事件：在改变窗口大小时发生,例4.1一个简单的J

3、avaScript程序 第一次使用Javascript 主体内容 document.write (嗨，你好，这是我第一次用JavaScript语言编写网页); ,实例,客户端和服务器端句法,4.1.1,JavaScript脚本嵌套在HTML文档中，既可以在客户端执行，也可以在服务器端执行。 在客户端执行，就是将脚本代码下载到客户的浏览器中，在客户的计算机上执行；在服务器端执行，代码并不下载到客户的浏览器上，全部在服务器上执行。 JavaScript脚本在服务器端执行，则不必考虑用户使用的是什么样的浏览器，数据的计算等都是在服务器上完成，减轻了客户端浏览器的负担，提高了交互的速度。而且，代码不传

4、到客户端的浏览器上，避免源程序被复制，从而提高了程序的安全性。,将JavaScript客户端代码放置在和标记之间，其格式如下： 代码 使用SCRIPT标记指定代码在服务器端的格式如下： 代码 如果代码是零零散散的，可以将代码包含在标记里面，其格式如下： 使用标记指定编程语言的格式如下： ,JavaScript脚本语言基础,4.1.2,1、数据类型,JavaScript中的四种基本数据类型是：数值型（整数和实数）、字符串型（用双引号或单引号括起来的字符或字符串）、布尔型（用True或False表示）和空值。无论是常量还是变量，都具有确定的类型。由于JavaScript采用弱类型的形式，因而一个数

5、据的变量或常量不必首先声明其类型，而是在使用或赋值时确定其数据类型。当然也可以先声明其数据类型。,2、常量,（1）整型常量：如123、-789等； （2）实型常量：123.456、54.32等，也可以使用科学记数法：1.23e5、-4E7等； （3）布尔值只有两个：true和false； （4）字符型常量：” JavaScript脚本语言”、”ASP”、”123456”等； （5）空值：Null，表示什么也没有或未确定。,3、变量,JavaScript脚本语言中变量的命名规则和其他语言一样，即字母开头，中间可以出现数字、下划线，但不能使用JavaScript保留字做变量名。尤其要注意的是：Ja

6、vaScript脚本语言是区分字母大小写的。另外，任何变量都要有一定的数据类型，是由它保存的数据的类型来决定的，当变量赋以其他类型的值时，其类型也随之改变。 变量可以在使用前用var 作声明： var 变量名1=初值1，变量名2=初值2 var name; var s1=”This is a JavaScript String”，n1=345;,4、运算符,不同的运算符代表了不同的运算功能，程序在运行过程中会按照给定的运算符进行操作，运算符主要有以下几类： （1）赋值运算符：=（赋值）； （2）算术运算符：+（加）、-（减）、*（乘）、/（除）和%（求余）； （3）关系运算符：=（等于）、!=

7、（不等于）、（大于）、=（大于等于）、（小于）、=（小于等于）； （4）逻辑运算符： if (ab) document.write (a+b:,a+b); else document.write (a-b:,a-b); ,例4. 2编写一个程序，如果a大于b，则输出a+b，否则输出a-b。,实例,6、循环语句,（1）for语句 for语句可以说是一种计数循环，它的循环是在用户给定的计数范围内进行的，不会对外部的影响有所反应，除非所计的数超过了给定的计数范围。 它的使用格式如下： for（start; end; step） 程序代码 start参数代表初始化条件；end参数代表终止条件；step

8、参数指定循环步长。循环中的程序代码将重复执行，直到循环结束。, Javascript循环语句 循环语句练习 var i,sum=0; for (i=100;i=1;i-) /从100到1循环，i-相当于i=i-1 sum=sum+i; document.write (100+99+98+2+1=,sum); ,例4. 3求100+99+98+2+1的和,实例,图4-2 循环语句执行结果,（2）while语句 While语句的功能是只要指定的条件为true，就会重复执行一系列语句。它的使用格式如下： while （判定条件） 程序代码 “判定条件”可以是数值或字符串表达式（或变量），只要计算结果

9、为true或false即可。只要“判定条件”为true就执行程序代码，一直执行到“判定条件”为false。,（3）Do while语句 Dowhile语句是while语句的简单变形，二者之间除了语法格式之外，唯一的不同之处在于Dowhile语句先执行一次循环体然后再去判断“判定条件”。它的使用格式如下： Do 程序代码 while 判定条件,（4）break和continue语句 使用break语句可使得循环从for或while中跳出，continue语句则可以提前结束本次循环，即跳过循环体内剩余语句进入下一次循环。,7、函数,函数是指程序中定义的一个独立的程序模块。在程序中，函数可以被多次调

10、用，既减少了代码的重复编写，又使整个程序结构清晰、紧凑。在JavaScript中，函数是由保留字function引起的： function 函数名称（参数1，参数2，） 语句代码； return 返回值； 函数的主体是一对大括号 中的一组JavaScript语句，通过这些语句实现函数的功能。如果函数有返回值，则在语句中要有一个return语句，当程序执行到return时结束。,例4.4求1到100之间的素数 Javascript函数应用 function isprime(k) /判断一个数是否为素数的函数 var i,flag=1; for(i=2;i ,实例, 从1到100之间的素数 var

11、 i; for (i=2;i ,JavaScript对象,4.1.3,JavaScript是基于对象的语言，它将窗口、文档、表单等都做为不同的对象来处理，从而在程序中可以实现对HTML文档中任何元素的访问。 对象有3个重要的内容：属性、方法和事件。属性是表示对象状态的变量，它的值的集合就是对象所处的某个确定的状态；方法是对象能够做的事情，其实是一些过程或函数；事件则是对象可以对之产生响应的事，我们编写脚本程序的目的就是处理事件。 例如，在页面上有一个按钮，通过鼠标单击按钮，可以显示一些信息或者进入另一个页面等。这是因为单击该按钮时，就会触发该按钮的Click事件，执行该事件中的代码。,例4.5

12、事件驱动应用举例 实例 function changecolor( ) window.document.bgColor=#FF0000; ,函数和事件很相似，但它不是由对象的事件触发的，而是通过调用函数来执行函数内的代码，并把执行的结果返回。事件比较常用的有Click（用鼠标单击对象时触发）、Dbclick（用鼠标双击对象时触发）、onLoad（当一个HTML文件被浏览器打开时激活）、onUnload（在浏览器中关闭一个HTML文件时激活）等。 JavaScript功能强大的原因之一就是它提供了大量的对象，这些对象有丰富的属性和方法。常用的对象有Window窗口对象、日期（Date）对象、数学

13、（Math）对象、字符串（String）对象等。从Window对象到各种标记对象，构成了一个树形对象体系，Window对象是最高层对象，它包括document、location和history等对象，其中document又是其中最常用的一个。,1、Window对象,Window对象代表HTML文件所在的窗口，通过它的属性可以实现对窗口的描述，通过它的方法可以实现对窗口的操作等工作。 表4.1 Window对象属性表,表4. 2 Window对象的方法,（1）alert、confirm和prompt方法（警告框、确认框和输入框） 警告框用来把警告、错误或者提示信息显示给用户，警告框通常只有一个“

14、确定”按钮。一般格式为： window.alert（string）； 其中，string参数是警告框显示的内容。 window对象的confirm方法可以显示一个确认框，把提示信息显示给用户，确认框有“确定”和“取消”两个按钮。如果用户选择“确定”按钮，那么confirm方法返回true，否则返回false。语法格式为： window.confirm（string）； 其中，string参数是确认框显示的内容。,例4.6alert 和 confirm方法应用示例 实例 alert、confirm方法应用举例 function MyClick( ) if (confirm(你确定是这个答案吗?)

15、 document.myform.result.value=哈哈，你答对了！ ; else document.myform.result.value=很遗憾，你答错了！; , ,输入框用来接收来自用户的输入。显示输入框的格式为： window.prompt（message，defstr）； message参数显示输入框中提示信息，defstr参数设置显示在输入框的文本框中的默认数值。 例4.7JavaScript输入输出 实例 var test=window.prompt (请输入数据：, ); /这里默认值为空 document.write (“JavaScript输入输出的例子： +tes

16、t); ,（2）open和close方法 open方法用来打开一个新的窗口，语法格式为： window.open（URL，窗口名字，窗口属性） 其中，URL是新窗口打开后要浏览的网址，如果是空字符串，则打开一个空窗口。窗口属性代表窗口的特征，如果有多个，中间用逗号隔开。,表4-3 窗口属性选项,例4.8设计一个网页，其中只有一个“打开新窗口”按钮，单击该按钮时可以打开一个子窗口。子窗口中有两个按钮：单击“关闭主窗口”，则主窗口关闭；单击“关闭当前窗口”，则新打开的窗口关闭。 实例 function openwindow( ) window.open(sub.htm,新窗口,width=300,

17、height=200,resizable=0); ,文件sub.htm代码如下 ： ,2、document对象及form子对象,document对象是window对象中使用最多的一个对象，它就是在窗口中打开的网页，有大量的属性，如title（当前文档标题）、bgColor（页面的背景色）、fgColor（页面的前景色）、linkColor（超文本链接的颜色）等；也有许多子对象，如link（文档中所有超链接构成的对象）、anchor（文档中所有的锚构成的对象）、image（文档中所有图片构成的对象）、form（文档中所有的表单构成的对象）等，它们被存储在document对象的属性中。要访问相应的

18、子对象，语法为： document.forms|links|anchers .index 其中，index是这个对象组的下标，从0开始计数。例如，document.forms0代表文档中的第一个表单对象；document.images3代表文档中的第四个图片。 document对象常用的方法是write和writeln，用于输出字符到文档的当前位置。,例4.9利用客户端脚本程序和网页对象实现在客户端浏览器中求一个数的阶乘。 实例 网页对象与客户端脚本程序示例 var x,result function factorial(x) if (x=0) return 1 ; else result=x

19、*factorial(x-1); return result; , 网页对象与客户端脚本程序示例 正整数n的阶乘 果 n为: , ,3、日期（ Date）对象,日期对象包含了大量的日期、时间方法，如：getYear( )的功能是返回系统当前年份。类似的方法还有getMonth( )、getDay( )、getDate( )、getHours( )、getMinutes( )、getSeconds( )、getTime( )等。方法setYear()的功能是设置系统当前年份。类似的还有setMonth( )、setDay( )、setDate( )、setHours( )、setMinutes(

20、 )、setSeconds( )、setTime( )等。 使用日期对象，应首先建立日期对象。方法如下： 建立当前日期对象：对象名=new Date( )，如： now= new Date( ) 建立任意日期对象：对象名= new Date（年，月，日，时，分，秒）。 其中，年、月、日、时、分、秒均为数值型数据，且不能超出它们相应含义的范围。,例4.10在网页上的一个文本框中显示出当前的日期时间 实例 function showDateTime( ) now=new Date( ); yy=now.getYear( ); mm=now.getMonth( ); dd=now.getDate(

21、); HH=now.getHours ( ); if (HH10) HH=0+HH; MM=now.getMinutes ( ); if (MM10) MM=0+MM; SS=now.getSeconds ( ); if (SS10) SS=0+SS;,time.value=yy+年+mm+月+dd+日 +HH+时+MM+分+SS+秒; setTimeout(showDateTime( ),1000); 当前日期时间： ,4、字符串（ String）对象,字符串对象可以是单引号或双引号括起来的任何字符串。该对象只有一个属性length，表示字符的长度，包括所有符号。 字符串对象的方法主要用于字

22、符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换等。,例4.11设计一个跑马灯的文档，在状态栏滚动显示一行文字。 实例 跑马灯 string0=欢迎使用跑马灯实例程序。祝君好运！; n=string0.length; /把字符串的长度赋给变量n function pmd( ) string0=string0.substring (1,n)+string0.substring(0,1); /字串的首字符移到字符串末尾 window.status=string0; /字符串赋给窗口的STATUS属性 setTimeout(pmd( ),150); /每隔150毫秒执行一次本函数 ,本章结束,