JavaScript特效在网.ppt

第5章JavaScript特效在网页中的应用,本章内容：JavaScript语言的基本概念和语法；JavaScript语句和函数；JavaScript对象的方法和属性。,5.1JavaScript语言的基本概念和语法,5.1.1JavaScript语言的基本概念JavaScript是一种基于对象(Object)和事件驱动(EventDriven)的脚本语言。所谓脚本语言，就是可以和HTML语言一起使用的语言。JavaScript是一种运行于浏览器环境中的语言，被用来向HTML页面添加交互行为。,JavaScript的功能,利用JavaScript可以将文本动态的放入HTML页面；可以对事件做出响应；可以读写HTML元素；可被用来验证用户输入的数据；可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面等等。,JavaScript程序的主要特点,解决人机交互问题。下面通过记事本，编写第一个JavaScript程序。通过这个例子可以说明JavaScript的脚本是怎样嵌入到HTML文档中的，以便对JavaScript有一个大概的认识。,【例5-1】在页面中输出字符串。第一个JavaScript程序,基本语法说明,在标记之间可以加入JavaScript脚本。脚本标记script必须以开头，以结束，界定程序开始的位置和结束的位置。JavaScript语言提供了注释，其作用是为代码添加阅读说明。注释有两种：一是以/开始的单行注释，二是以/*开头，以*/结尾的多行注释。浏览器在解释脚本语句时，忽略注释。,基本语法说明（续）,在书写JavaScript程序时，每条语句后面加一个分号“；”。JavaScript程序本身不能独立存在，它依附于某个HTML页面，在浏览器端运行。,如果把脚本放置到head部分，在页面载入的时候，就同时载入了代码。通常这个区域的JavaScript代码是为body区域程序代码所调用的事件处理函数。如果把脚本放置于body部分后，在页面载入时不属于某个函数的脚本就会被执行，执行后的输出就成为页面的内容。下面给出了位于head部分的代码和位于body部分的代码。,位于head部分的代码实例,位于head部分的代码functionshow()alert(欢迎进入JavaScript精彩世界!);/调用head部分的函数show(),位于body部分的代码实例,位于body部分的代码,2.JavaScript语言的特点,JavaScript语言具有以下基本特点：JavaScript是一种解释性脚本语言。它采用小程序段的方式实现编程，并与HTML标记结合在一起，从而方便用户的使用操作。JavaScript是一种基于对象的语言。用户可以直接使用对象，而不必创建对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。JavaScript的变量类型采用弱类型。没有使用严格的数据类型，因此易于操作和维护。,2.JavaScript语言的特点(续),JavaScript是一种安全性语言。它不允许访问本地的磁盘，并不能将数据存放到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据丢失。JavaScript是动态的。它可以直接对用户的输入做出响应，无须经过web服务程序。它对用户的响应是采用事件驱动的方式进行的。事件驱动是指在主页(HomePage)中执行了某种操作所产生的动作，就称为事件。例如，单击或双击鼠标等。JavaScript是一种跨平台语言。只要能运行浏览器的计算机，并且浏览器支持JavaScript，就可以正确执行。,5.1.2JavaScript语言的基本语法,1常量JavaScript的常量是不能改变的数据。下面介绍JavaScript中几种基本类型的常量。字符串常量字符串是用单引号或双引号括起来的字符序列（可以使用单引号来输入包含双引号的字符串，反之亦然）。,【例5-2】输出本身包含双引号的字符串。带双引号的字符串的输出,1常量（续）,数值常量JavaScript支持整数和浮点数。下面是一些关于数的表示。整数：1、30、-1、-30；浮点数：10.3、-10.3；指数：5.1E4表示5.1*10*10*10*10；八进制数：八进制数是以0开头的数，如070代表10进制的56；十六进制数：16进制数是以0 x开头的数，如0 x1f代表10进制的31。,1常量（续）,布尔型常量布尔值有两个取值：true（真）和false（假）。空值空值就是null，就是没有任何值，什么也不表示，它是JavaScript的保留值。特殊字符JavaScript中也有以反斜杠()开头的不可显示的特殊字符，通常称为控制字符。反斜杠是一个转义字符，表示JavaScript解析下面的字符为特殊字符。如，b表示退格，n表示换行，r表示回车。,2变量,变量对应计算机内存中的某个单元。为了使用计算机处理数据，应事先将数据存放在内存中。为了将数据存放在内存，应先根据要保存的数据类型，声明属于这种类型的变量，计算机根据数据类型分配相应的内存单元，并将该内存单元与声明的变量对应上。通过该变量，就可以将数据保存到内存中或从内存中取出数据了。变量必须经过变量的声明，明确变量的命名、变量的类型以及变量的作用域。,变量的声明,在使用一个变量保存值之前要事先声明一下这个变量。其基本语法是：var变量名=初值，变量名=初值其中，var是关键字，声明变量时至少要有一个变量，需要给每个变量起一个合适的名字。变量的起名应该符合标识符的规定。varaccount;vararea=0;vara,b,c;,变量的类型JavaScript的变量有以下4种类型：整型变量、实型变量、字符串变量和布尔型变量。分别举例如下：varx=28;vary=12.5;varname=张三;varstatus=true;,【例5-3】声明变量时不赋值。声明变量时不赋值,【例5-4】声明变量时赋值。声明变量时赋值,说明：,不能使用JavaScript中的保留字作为变量名。例如int、var、double等不能作为变量名。JavaScript的变量名区分大小写。例如，str和STR分别代表不同的变量。,3.运算符和表达式,JavaScript运算符的类型有：算术运算符、赋值运算符、自增、自减运算符、比较运算符、逻辑运算符、条件运算符、位运算符。根据运算符需要操作数的个数，把运算符分为一目运算符、二目运算符和三目运算符。由操作数（变量、常量、函数调用等）和运算符结合在一起构成的式子称为“表达式”。对应的表达式包括：算术表达式、赋值表达式、自增、自减表达式、比较表达式、逻辑表达式、条件表达式、位表达式。,算术运算符和表达式,JavaScript算术运算符负责算术运算，如表5-1所示。用算术运算符和运算对象(操作数)连接起来符合规则的式子，称为算术表达式。,算术运算符,【例5-5】使用算术运算符进行计算。使用算术运算符进行计算);document.write(a+b=);document.write(a+b);document.write();document.write(a*b=);document.write(a*b);-,比较运算符和表达式,比较运算符负责判断两个值是否符合给定的条件。用比较运算符和运算对象(操作数)连接起来，符合规则的式子，称”比较表达式”。比较表达式返回的结果为“true”或“false”，分别代表符合给定的条件或者不符合。比较表达式一般用在分支和循环控制语句中，根据逻辑值的真假来决定程序的执行流向。,比较运算符,【例5-6】使用比较运算符进行计算。使用比较运算符进行计算);document.write(ab=);document.write(ab);document.write();document.write(a!=b=);document.write(a!=b);-,逻辑运算符和表达式,逻辑运算符包括2个双目运算符“逻辑或(|)”和“逻辑与(document.write(a-,赋值运算符和表达式,赋值运算符由等号（=）实现，只是把等号右边的值赋予等号左边的变量。赋值运算是最常用的一种运算符，通过赋值，可以把一个值用一个变量名来表示。例如，area=3.14*radius*radius;表示将等号右侧的表达式作为一个整体赋给变量area。,【例5-8】赋值运算符的使用。赋值运算符的使用);document.write(x+=10后x=);document.write(x+=10);document.write();x=20;document.write(x-=10后x=);document.write(x-=10);document.write();x=20;document.write(x*=10后x=);document.write(x*=10);-,条件运算符和表达式,条件运算符是一个3目运算符，其基本语法如下：variable=boolean_expression?true_value:false_value;表示boolean_expression的结果为true，则variable的值取true_value，否则取false_value。,【例5-9】条件运算符的使用。条件运算符的使用=60)?及格:不及格;document.write(她考试+dengji+了！);-,5.2JavaScript语句和函数,5.2.1JavaScript语句JavaScript语句是发给浏览器的命令，这些命令的作用是告诉浏览器要做的事情。例如：document.write(“欢迎进入JavaScript学习之旅!”);。JavaScript常用的程序语句有：选择语句、分支语句和循环语句。,1.选择语句,选择语句又称为条件语句，其基本语法如下：if(条件)执行语句1else执行语句2如果if()中的条件成立，则执行语句1，否则执行语句2。,【例5-10】选择语句的使用。选择语句的使用,2.分支语句,分支语句switch可以根据一个变量的不同取值采取不同的处理方法。基本语法如下：switch(表达式)caselabel1：语句块1；caselabel2：语句块2；caselabel3：语句块3；default：语句块n；根据表达式的不同值，执行对应的语句；如果表达式的值同程序中的任何一条语句都不同，将执行default后的语句。,【例5-11】switch分支语句的使用。switch分支语句的使用,说明：,alert()语句表示弹出一个对话框；break表示跳出该switch语句。,3.循环语句,常见的循环语句有：for语句，dowhile语句，break语句，continue语句。for语句的基本语法如下：for(初始化表达式；判断表达式；循环表达式)语句块表示循环条件成立，执行语句块；更新新条件，重新判断条件，执行语句，直到条件不成立，跳出循环体。,【例5-12】for循环语句的使用。for循环语句的使用,3.循环语句（续）,dowhile语句的基本语法如下：do执行语句while(条件)表示先执行语句，再判断条件是否成立，直到条件不成立为止。该语句至少要执行一次。,【例5-13】dowhile循环语句的使用。dowhile循环语句的使用,break和continue的作用,前面介绍了三种类型的循环，每次循环都是从头执行到尾，然而情况并不都是如此，有时在循环中，可能碰到一些需要提前中止循环的情况，或者放弃某次循环的情况。break语句的作用就是立即结束循环，转到循环后的语句继续执行。continue语句的作用则是结束本次循环，开始下一次的循环（如果还有的话）。,5.2.2JavaScript函数,在JavaScript中，函数(Function)一般是由若干条语句构成的，代表了一种特定的功能。1.函数的定义函数的基本语法如下：function函数名(参数1,参数2,参数n)函数体；,说明：组成一个函数必须有“function”关键字、自定义的函数名、放在小括号中的可选参数（可以没有参数，但括号必须保留）、以及包含在大括号内的由若干条语句构成的函数体。,【例5-14】函数定义的实例。函数定义的实例functionwelcome(name)/name为函数welcome()的形式参数alert(name+，欢迎您进入函数世界!);姓名：,注意：不能在其他语句或其自身中嵌套function语句，也就是说，每个函数声明都是独立的。,2.函数的参数,在实例【5-14】中定义的函数welcome(name)里的“name”是参数变量，简称为“形参”。参数变量的作用是用来接收函数调用者传递过来的“实参”。函数声明时的形式参数代表了函数在执行时需要这些形式参数接收传递过来的值，并在代码中具体应用，因此，声明函数的形式参数时应该事先明确每个参数的作用。,2.函数的参数（续）,JavaScript函数的参数是可选的。它有下面几个特点：JavaScript本身是弱类型，所以，它的函数参数也没有类型检查和类型限定，一切都要靠编程者自己去进行检查；实参的个数可以和形参的个数不匹配。在实际使用中，可以传任意个参数给这个函数。如果函数在执行时，发现参数不够，不够的参数被设置为undefined类型。,3.函数的调用,函数必须被调用才能发挥作用。具体调用规则是：函数必须通过名字加上括号才能调用，例如【例5-4】中的welcome()，括号必不可少；函数调用时，必须满足参数传递的要求，按照形式参数的声明要求，保证类型、顺序和个数的统一。函数可以在执行后返回一个值来代表执行后的结果，当然有些函数基于功能的需要并不需要返回任何值。,函数返回一个值非常简单，一般在一个函数代码的最后一行是return语句。return的作用有两点：结束程序的执行，也就是说return之后的语句就不会再执行了；利用return可以返回一个结果。return语句后可以跟上一个具体的值，也可以是简单的变量，还可以是一个复杂的表达式。,【例5-15】函数调用的实例。函数调用的实例,5.3JavaScript语言对象,5.3.1JavaScript语言对象的概念“对象”是现实世界中客观存在的事物，例如，教师、学生、手机等。而一个JavaScript对象是由属性和方法两个基本要素构成的。“属性”主要是用于描述一个对象，说明其特征。例如，学生具有学号、姓名、年龄等属性；手机具有大小、颜色等属性。“方法表示对象可以做的事情。例如，人可以吃饭、睡觉等；汽车可以行驶、停止等。,通过访问或者设置对象的属性，调用对象的方法，就可以完成各种各样的任务。对象包含属性和方法，使用对象就是调用它的属性和方法。在调用对象的属性和方法时，最常用的使用方法如下：对象名.属性名对象名.方法名()建立对象的目的是将对象的属性和方法封装在一起，提供给程序设计人员使用，从而减轻编程人员的劳动，提高设计Web页面的能力。例如，通过document对象，可以获得页面表单内的输入内容，也可以直接用程序更改一个表格的显示样式。,2.JavaScript对象的类型,JavaScript本地对象(nativeobject)，这种对象无需具体定义，直接就可以通过名称引用它们的属性和方法，例如数学对象Math，调用其PI属性，求圆周率，可以使用Math.PI；JavaScript的内建对象(built-inobject)，如Array,String等。这些对象在JavaScript程序内由程序员定义具体对象，并可以通过对象名来使用；宿主对象(hostobject)是被浏览器支持的，目的是为了能和被浏览的文档乃至浏览器环境交互，如document，window和frames等；自定义对象，是程序员基于需要自己定义的对象类型。,5.3.2JavaScript语言的常用对象,JavaScript的对象包括：Array，Date，Math，String，window，document和form对象等。这些对象同时在客户端和服务器端的JavaScript中使用。,1.Array对象,数组(Array)对象用来在单独的变量名中存储一系列的值，避免了同时声明很多变量使得程序结构变得复杂，导致难于理解和维护。数组一般用在需要对一批同类的数据逐个进行一样的处理中。通过声明一个数组，将相关的数据存入数组，使用循环等结构对数组中的每个元素进行操作(使用循环语句的语句体)。定义数组并直接初始化数组元素varcourse=newArray(Java程序设计,HTML开发基础,数据库原理,计算机网络);,1.Array对象（续）,先定义数组后初始化数组元素varcourse=newArray();course0=Java程序设计;course1=HTML开发基础;course2=数据库原理;course3=计算机网络;数组的长度可以通过“数组名.length”来获得指定数组的实际长度。,2.Date对象,Date对象用来处理和日期时间相关的事情，可以用来帮助网页制作人员设置日期和时间。其基本语法格式如下：变量名=newDate()定义日期对象几种定义日期对象的方法：newDate()newDate(monthday,yearhours:minutes:seconds)newDate(yr_num,mo_num,day_num)newDate(yr_num,mo_num,day_num,hr_num,min_num,sec_num),定义日期对象（续）,具体应用如下：vartoday=newDate();/自动使用当前的日期和时间作为其初始值varbirthday=newDate(“December17,199103:24:00”);/按照日期字符串设置对象birthday=newDate(1991,11,17);/根据指定的年月日设置对象birthday=newDate(1991,11,17,3,24,0);/根据指定的年月日时分秒设置对象,获得日期对象的各个时间元素,根据定义对象的方法，可以看出日期对象包括年月日时分秒等各种信息，Date对象提供了获得这些内容的方法。例如：getDate()：返回一个月中的某一天(131)getDay()：返回一周中的某一天(06)getMonth()：返回月份(011)getFullYear()：以四位数字返回年份getHours()：返回Date对象的小时(023)getMinutes()：返回Date对象的分钟(059)getSeconds()：返回Date对象的秒数(059)getMilliseconds()：返回Date对象的毫秒(0999),【例5-16】Date对象的演示。Date对象的演示+现在是+year+年+month+月+day+日+hour+时+minute+分+second+秒+);-,3.Math对象,Math对象提供多种算数常量和函数，执行普通的算数任务。使用Math对象无需像数组和日期对象一样要首先定义一个变量，可以直接通过“Math”名来使用它提供的属性和方法。例如，使用Math.PI求圆周率；使用Math.random()生成介于0.01.0之间的一个伪随机数；使用sqrt()求一个数的平方根，还有其他一些函数，如max()、min()、ceil()、floor()、round(),exp()、log()和pw()等函数。,4.String对象,字符串(String)是JavaScript程序中使用非常普遍的一种类型。JavaScript为String提供丰富的属性和方法，来完成各种各样的要求。两种不同的定义字符串对象的方式：vars1=Welcometoyou!;vars2=newString(Welcometoyou!);,获取字符串的长度,每个字符串都有一个length属性来说明该字符串的字符个数，例如：vars1=Welcometoyou!;varlen=s1.length;/s1.length返回15，也就是s1所指向的字符串中有15个字符,【例5-17】通过创建自定义对象来求字符串长度。求字符串长度,获取字符串中指定位置的字符,通过charAt()方法可以获得一个字符串指定位置上的字符。例如，要想获得Welcometoyou!这个字符串中第四个字符c，可以这样：varch=s1.charAt(3);因为字符串的字符位置是从0开始的，所以给charAt()方法传递了数值3，却取得第4个字符c。,字符串查找,字符串对象提供了在字符串内查找一个字串是否存在的方法，它们是：indexOf(searchvalue,fromindex);返回某个指定的字符串值在字符串中首次出现的位置,在一个字符串中的指定位置从前向后搜索，如果没有发现，返回-1。lastIndexOf()：可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索，如果没有发现，返回-1。,字符串的分割,split()方法用于把一个字符串分割成字符串数组。例如Welcometoyou!中的三个单词之间都用空格间隔，就可以把这个字符串按照空格分成3个字符串。vars1=Welcometoyou!;varsub=s1.split();/sub是一个数组for(vari=0;i);,5.window对象,window对象是JavaScript层级中的顶层对象。这个对象会在一个页面中或出现时被自动创建，即一个浏览器中显示的网页会自动拥有相关的window对象。window除了页面的内容以外，还包含其它特性，如窗口的尺寸、滚动条、菜单栏、状态栏等元素。对于这些元素，window对象提供了一些方法和属性来进行一定的控制。,window对象中的主要属性,history：记录了一系列用户访问的网址，可以通过history对象的back()、forward()和go()方法来重复执行以前的访问；location：表示本窗口中当前显示文档的Web地址，如果把一个含有URL的字符串赋予location对象或它的href属性，浏览器就会把新的URL所指的文档装载进来，并显示在当前窗口；screen：存放着有关显示浏览器屏幕的信息；parent：获得当前窗口的父窗口对象引用；top：窗口可以层层嵌套，典型的如框架，top表示最高层的窗口对象引用；self：返回对当前窗口的引用，等价于window属性。,window对象中的主要方法,close()：关闭浏览器窗口；createPopup()：创建一个右键弹出窗口；open()：打开一个新的浏览器窗口或查找一个已命名的窗口；alert(message)：弹出一个警示对话框；prompt(message,deafultmessage)：弹出一个提示对话框；confirm(message)：弹出一个确认对话框。,【例5-18】窗口打开和关闭方法的演示。窗口打开和关闭方法的演示functionopenwindow()/定义打开新窗口函数，窗口内容为安徽师大网window.open(,window,width=600,height=400),【例5-19】提示对话框的演示。提示对话框的演示varage;age=prompt(您多大了？,请在这里输入您的年龄);alert(age),6.document对象,document对象代表了整个HTML文档，可用来访问页面中的所有元素。document对象是window对象的一个部分，虽然可通过window.document属性来访问，但编程中，可以直接使用document名称来访问页面元素。页面就是按照规则由一系列如、和等各种标签组成的规范文档。这些标签之间存在着一定的关系，例如被所包含，而标签又被包含在内，这些页面元素之间存在嵌套关系。,通过ID访问页面元素,语法：document.getElementById(id)参数：id是必选项，为字符串(String)返回值：返回相同id对象中的第一个，如果无符合条件的对象，则返回null。使用该方法开发页面时，最好给每一个需要交互的元素设定一个唯一的id便于查找。,通过Name访问页面元素,语法：document.getElementsByName(name)参数：name是必选项，为字符串(String)返回值：数组对象，如果无符合条件的对象，则返回空数组。由于该方法的返回值是一个数组，所以可以通过位置下标来获得页面元素，例如：varuserNameInput=document.getElementsByName(userName);varuserName=userNameInput0.value;,注意：,哪怕一个名字指定的页面元素确实只有一个，该方法也返回一个数组，所以在上面代码段中，用位置下标0本来获得“用户名输入框”元素，如userNameInput0；如果指定名字，在页面中没有对应的元素存在，则返回一个长度为0的数组，程序中可以通过判断数组的length属性值是否为0来来判断是否找到了对应的元素。,通过标签名访问页面元素,语法：document.getElementsByTagName(tagname)参数：tagname是必选项，为字符串(String)返回值：数组对象，如果无符合条件的对象，则返回空数组document对象的方法write()，表示想文档中写入文本。,【例5-20】document对象的演示。document对象的演示document.write(当前文档的标题：+document.title+);document.write(当前文档的最后修改日期：+document.lastModified);,7.form对象,form是表单对象，是网页设计中和用户进行交互的一种重要工具，它用于搜集不同类型的用户输入。form对象的属性name：表单名称；length：表单元素的个数；action：表单在提交时执行的动作，通常是一个服务器端脚本程序的URL；elements：表单中所有的控件元素的数组。,form对象的方法,reset()：相当于表单中的“重置”按钮；submit()：相当于表单中的“提交”按钮。,【例5-21】form对象的演示。form对象的演示functionclear(form)form.text1.value=;form.text2.value=;,5.3.3JavaScript语言的事件,每个对象可以识别和响应某些行为，这些操作行为称为事件。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。网页访问中常见的事件有：鼠标单击；鼠标进入、悬浮或退出页面的某个热点；页面或图像载入；在表单中选取输入框或改变输入框中文本的内容；确认表单；键盘按键。,为了使用这些事件，需要使用相应事件的事件处理程序，它的使用方法为在用户指定的HTML代码中插入事件处理程序，其基本格式如下：on事件名=”引号内可以是用户编写的任何JavaScript语句、方法或者函数等。所谓的事件处理程序，指该事件被激活时，所要执行的JavaScript程序代码。下面是一些常用的事件。,1.click事件与dblclick事件,当页面上的任何一个元素，如按钮、文本框或者超链接被用户单击时，都会产生一个click事件。当页面上的任何一个元素被用户双击时，都会产生一个dblclick事件。,【例5-22】click事件演示。click事件演示,程序中，事件处理程序onclick在执行过程中，调用了”history”对象的back()方法和forward()方法。history对象是指浏览器历史列表，使用户可以跟踪浏览器曾经使用过的URL。history.back()方法是指回到历史列表中上一个URL。history.forward()方法是指回到历史列表的下一个URL。,2.load事件与unload事件,当窗口和框架完成加载时，就产生了一个load事件。当窗口和框架内的文档被退出时，就产生了一个unload事件。,【例5-23】load事件演示。load事件演示,3.mouseover事件与mouseout事件,当用户将鼠标移至一个超链接或者网页其它元素时，就会产生一个mouseover事件。mouseout事件是伴随着mouseover事件的，当用户将鼠标移开一个超链接或者网页其它元素时，就会产生一个mouseout事件。在show()函数中，将window对象的status(状态栏)属性设置为“鼠标已经从文字上离开！”，就是在状态栏显示文本“鼠标已经从文字上离开！”。,【例5-24】mouseover事件和mouseout事件演示。mouseover事件和mouseout事件演示functionshow()window.status=鼠标已经从文字上离开！安徽师范大学,4.submit事件与reset事件,当用户单击表单中的提交按钮，准备向服务器提交信息时，就会产生一个submit事件。当用户单击表单中的重置按钮时，就产生一个reset事件。代码第7行是一个赋值语句，将form1表单中名为text1的文本框中的数值赋给变量score。在表单提交时调用了show()函数。,【例5-25】submit事件演示。submit事件演示functionshow()score=document.form1.text1.valueif(0,