网页设计之-javascript语言.ppt
JavaScript 脚本编程,内容提要,JavaScript概述词法规则基本数据类型运算符和表达式核心语句函数复合数据类型对象模型事件处理,JavaScript概述,JavaScript是由Netscape和Sun公司联合开发的基于对象和事件驱动的客户端脚本编程语言,通过它与HTML、XML、DOM、CSS、JavaApplet等技术的有机结合,可以开发出具有很强交互性的动态页面。,第一个JavaScript程序,实时显示时间当前时间:+s+;/-,基于对象事件驱动解释性语言简单性实时性跨平台性安全性,JavaScript的特点,JavaScript脚本的引入方法通过与标签对引入。将JavaScript脚本代码放在与之间,浏览器自动识别该标签对并逐行解释其间的代码。通过标签的src属性引入。将包含在与标签对之间的代码放入扩展名为.js的脚本文件中,然后在HTML文档中通过标签的src属性来引用该脚本文件。,在网页中嵌入JavaScript脚本,JavaScript脚本的引入方法通过JavaScript伪协议引入。伪协议是非标准化通信机制的统称,JavaScript伪协议的一般格式为:javascript:URL。其中“javascript:”是伪协议说明符,URL的主体可以是任意的JavaScript代码,多个语句之间使用分号进行分隔。例如:,在网页中嵌入JavaScript脚本,JavaScript脚本的引入方法通过HTML的事件属性引入。HTML元素的事件属性用于指示如何处理特定的事件,方法是将脚本指定为事件属性的值,以响应系统或用户的动作。事件属性名称由事件名称加一个“on”前缀构成,如onClick,onMouseOver等。例如:,在网页中嵌入JavaScript脚本,嵌入JavaScript脚本的位置 JavaScript脚本可放在HTML文档中任何需要的位置。一般来说,可以在与标签对、与标签对之间放置JavaScript脚本代码。放置在与标签对之间的JavaScript脚本一般用于提前载入,以响应用户的页面动作,且一般不影响HTML文档的浏览器显示格局。如果需要在页面载入时动态生成页面内容,应将JavaScript脚本放置在与标签对之间。,在网页中嵌入JavaScript脚本,标识符 在JavaScript中,标识符用来命名变量和函数。标识符的第一个字符必须是字母、下划线或美元符号,后续字符可以是字母、数字、下划线或美元符号。例如:x、user_name、U571、_pswd、$money都是合法的标识符。不能使用JavaScript中的关键字作为标识符。在JavaScript中定义了20多个关键字,这些关键字是JavaScript内部使用的,如var、for、function、if等,它们都不能作为标识符使用。,词法规则,词法规则,关键字和保留字 关键字是JavaScript语法自身的一部分,具有特殊的意义,不能用作标识符。保留字是为将来的关键字而保留的单词,由于未来浏览器可能会实现这些保留字,因此它们最好也不要作为标识符使用。,JavaScript的保留字,词法规则,大小写敏感JavaScript是一种区分大小写的脚本语言。在输入关键字、变量名、函数名以及其它所有标识符时,都必须采取一致的字符大小写形式。例如,“username”、“userName”、“UserName”代表三个不同的变量名。许多JavaScript对象的属性和它们所代表的HTML标签的属性同名,在HTML中这些标签的属性可以以任意大小写的方式输入,但是在JavaScript中它们通常都有固定的大小写格式。例如,body标签的背景颜色属性可以声明为“bgcolor”、“bgColor”或者“BGCOLOR”,但代表body标签的document对象的背景颜色属性只能声明为“bgColor”。,词法规则,空白字符空白字符包括空格、制表符和换行符等,在编写脚本时占据一定的空间,以增强代码的可读性,方便开发人员查看和维护。空格是使用最为频繁的空白字符,常被用作分隔符。,例1:sum=3+10;sum=3+10;,例2:var x=typeof JavaScript;,词法规则,语句结束符JavaScript使用分号作为语句结束符,多个语句可写在不同行或同一行。例如:var str=Welcome to JavaScript World!;document.write(str);也可写成:var str=Welcome to JavaScript World!;document.write(str);语句分行后,作为语句结束符的分号可以省略。例如:var str=Welcome to JavaScript World!document.write(str),注意:省略分号不是一个好的编程习惯,它可能导致程序产生一种不明确的状态。,词法规则,注释 JavaScript有单行注释和多行注释两种形式。单行注释以“/”开头,处于“/”和一行结尾之间的任何文本都被当作注释而被浏览器忽略掉。多行注释以“/*”开头,以“*/”结尾,处于“/*”和“*/”之间的文本被当作注释,这些文本可以跨越多行,但是其中不能有嵌套的注释。例如:/这是单行注释/*这是多行注释*它是多行的*它是多行的*/,基本数据类型,基本数据类型定义了一组不可再分的值的集合,以及作用于该集合上的操作集。JavaScript支持的基本数据类型包括数值型、字符串型和布尔型,分别对应于不同的存储空间。基本数据类型和常量 当某种基本类型的数据项直接出现在程序中时,称之为常 量,即值不能被改变的量。数值型:最基本的数据类型,包括整型和浮点型整型常量:可以使用十进制、八进制或十六进制表示,如1234、0745、0 x93C等。浮点型常量:可以使用小数或指数方法表示,如12.34、5.9e7、4.3e-5等。特殊的数值型常量:Infinity表示正无穷大,-Infinity表示负无穷大,NaN表示“不是一个数值”、“没有意义的运算”或“无法转换成数值类型”。如5/0的运算结果为Infinity,-5/0的运算结果为-Infinity,0/0的运算结果为NaN。,基本数据类型,基本数据类型和常量字符串型:表示文本的数据类型字符串常量:用 或 括起来的若干个字符,如JavaScript、This is a book of C+等。转义字符:以反斜杠 开头的具有特殊功能的字符。,基本数据类型,基本数据类型和常量布尔型:表示状态的数据类型布尔常量:只有两个可能的值true和false,表示“真”和“假”两种状态。如53的运算结果为true,“Chinese”“China”的运算结果是false。变量 变量是存放常量的容器,主要作用是存取数据。变量的声明:在JavaScript中,可以先通过关键字var来声明变量,然后再使用。例如:var num;var str,flag;num=100;str=JavaScript Language;flag=true;,变量的初始化:变量可以在声明的同时指定初始值。例如:var num=100;var str=JavaScript Language,flag=true;仅用var声明但未初始化的变量获得默认初值undefined。变量的类型实际类型视变量内容而定。例如,上例中的num为数值型变量,str为字符串型变量,flag为布尔型变量。变量的类型可以根据变量内容的改变而自动更改。例如:var num=1;/num为数值型变量 num=Hello World!;/num为字符串型变量变量可以不经过var声明就直接使用,而在变量赋值时自动声明该变量。例如:num=100;str=JavaScript Language;flag=true;好的编程风格:所有变量在第一次使用前都用var进行声明!,基本数据类型,运算符和表达式,运算符是完成操作的一系列符号,JavaScript支持的运算符包括算术运算符、比较运算符、逻辑运算符等。表达式是由变量、常量和运算符连接起来的式子,根据运算符类型的不同,表达式可分为算术表达式、比较表达式、逻辑表达式等。算术运算符和算术表达式,运算符和表达式,比较运算符和比较表达式,当操作数类型不同时进行类型转换,当操作数类型不同时不进行类型转换,运算符和表达式,逻辑运算符和逻辑表达式,运算符和表达式,位运算符和位表达式,运算符和表达式,赋值运算符和赋值表达式,条件运算符和条件表达式 条件运算符有3个操作数,一般格式如下:条件式?valueB:valueC 当条件式成立时,valueB会被赋给整个条件表达式,否则将valueC赋给条件表达式。例如:var min=67?6:7;思考:假设x、y、z三个变量均已赋值,请写出求三个变量中最大值和最小值的条件表达式。,运算符和表达式,字符串运算符和字符串表达式,运算符和表达式,逗号运算符和逗号表达式 逗号既可以作为分隔符,也可以作为运算符。逗号表达式的一般格式如下:表达式1,表达式2,表达式n 逗号表达式的求值过程:先求表达式1的值,再求表达式2的值,依次下去,最后求表达式n的值,表达式n的值即为整个逗号表达式的值。例如:var a=2,b=4,c=6,x,y;/逗号作为分隔符 y=(x=a+b,x+c);/逗号作为运算符,运算符和表达式,基本控制结构 基本控制结构用来决定程序的处理流程,JavaScript 支持三种结构:顺序、选择和循环。,核心语句,分支结构,多分支结构,循环结构,表达式和复合语句由各种类型的表达式加上分号组成的语句被称为表达式语句。例如:sum+;/算术表达式语句 str=Olympic+2008;/赋值表达式语句用大括号“”括起来的语句序列称为复合语句,用来在需要使用单行语句的地方完成多项任务。例如:var angle=Math.PI;var cosine=Math.cos(angle);alert(cos(+angle+)=+cosine);,核心语句,条件语句 选择结构的核心语句是条件语句,通过判断某个逻 辑条件是否成立,从给定的各种可能操作中选择一 种执行。条件语句包括if语句和switch语句。if语句的三种形式单分支选择。其一般格式如下:if(表达式)语句;功能:计算表达式的值,若计算结果为true,执行语句;否则跳过if语句执行其后的语句。例1:if(count 10)count=0;例2:if(count 10)count=0;alert(count被重设为0!);,核心语句,双分支选择。其一般格式如下:if(表达式)语句1;else 语句2;功能:如果表达式的计算结果为true,执行语句1;否则执行语句2。例如:var num=Math.round(Math.random()*100);if(num%2=0)alert(num+是一个偶数);else alert(num+是一个奇数);,核心语句,多分支选择。其一般格式如下:if(表达式1)语句1;else if(表达式2)语句2;else if(表达式n)语句n;else 语句n+1;功能:如果表达式1的值为true,执行语句1;否则计算表达式2的值,如果返回true则执行语句2;如果所有表达式都不成立,则执行else后面的语句n+1。例如:var age=parseInt(prompt(请输入您的年龄,);if(age10)alert(黄口小儿);else if(age20)alert(年方弱冠);else if(age30)alert(三十而立);else if(age40)alert(四十不惑);else alert(英雄迟暮);,核心语句,if语句的嵌套:在if语句中又包含一个或多个if语句。在嵌套的if 语句中,可能包含多个if和else,它们的匹配原则是:一个else总是与其之前距离最近且尚未配对的if 匹配。例如:var max,a=15,b=36,c=28;if(a=b)if(a=c)max=a;else max=c;else if(b=c)max=b;else max=c;alert(max=+max);,核心语句,switch语句 switch语句用来实现多分支选择结构,其一般形式如下:switch(表达式)case 常量表达式1:语句1;break;case 常量表达式2:语句2;break;case 常量表达式n:语句n;break;default:语句n+1;功能:比较表达式的值是否与某一个case后面的常量表达式的值相等,如果相等,则执行相应的语句;如果所有case后面常量表达式的值都不与表达式的值相等,则执行default后面的语句。default子句可以省略,即所有常量表达式的值都不满足条件时直接跳过switch语句执行其后的语句。,核心语句,例如:var age=parseInt(prompt(请输入您的年龄,);age=Math.floor(age/10);switch(age)case 0:alert(黄口小儿);break;case 1:alert(年方弱冠);break;case 2:alert(三十而立);break;case 3:alert(四十不惑);break;default:alert(英雄迟暮);break语句用来直接跳出整个switch语句。如果省略break语句,在执行完某个case子句后会继续执行下一个case子句,直到遇上break语句或者所有的子句都被执行完为止。,核心语句,循环语句 循环语句允许在逻辑条件成立时反复执行相同 的语句(循环体)。while语句一般格式:while(表达式)语句;功能:计算表达式的值,如果计算结果为true,反复执行语句;否则结束循环。语句可以是单行语句或者复合语句。例如:用while语句编写求1+3+5+99累加和的程序:var sum=0,i=1;while(i=100)sum+=i;i+=2;,核心语句,do-while语句一般格式:do 语句;while(表达式);功能:反复执行语句,直到表达式的计算结果为false时结束循环。例如:用do-while语句编写求1+3+5+99累加和的程序:var sum=0,i=1;do sum+=i;i+=2;while(i=100);,核心语句,for语句一般格式:for(表达式一;表达式二;表达式三)语句;功能:(1)计算表达式一的值;(2)计算表达式二的值,如果计算结果为true,进入(3),否 则进入(6);(3)执行语句;(4)计算表达式三的值;(5)回到(2)继续执行;(6)结束循环,执行for语句的后续语句。例如:用for语句编写求1+3+5+99累加和的程序:var sum=0,i;for(i=1;i=100;i+=2)sum+=i;,核心语句,循环语句的嵌套 循环语句中又包含一个或多个循环语句称为循环语句的嵌套。例如:var i,j;for(i=1;i);for(j=1;j);for(i=1;i);for(j=1;j);,核心语句,break和continue语句 break语句只能用在循环语句和switch语句中,作用是停止执 行尚未执行的部分,直接从循环语句或switch语句中跳出来。continue语句只能用在循环语句中,作用是跳过循环体内剩 余的语句而提前进入下一次循环。例如:var sum=0,i=0;while(true)i+;if(i100)break;if(i%2=0)continue;sum+=i;,核心语句,标签语句在JavaScript中,语句可以在其前面加上标签,一般格式为:标识符:语句;标签必须是合法的JavaScript标识符,不能是关键字或保留字。标签可以与程序中的变量或函数同名。通过给语句加标签,达到在程序其他位置引用该语句的目的。例如:outer:for(i=0;ii)document.write();continue outer;k=i*j;document.write(k+,核心语句,在JavaScript中,函数用来封装那些在程序中反复使用的程序段,常作为事件处理程序被调用。函数的基本组成函数定义 一般格式:function 函数名(参数列表)函数体;return 返回值;说明:function:定义函数的关键字。函数名:函数的标识符,表示函数的入口地址。参数列表:包含若干个参数,不同参数间用逗号间隔。当调用函数时,可以向参数列表中传入常量值、变量值或其它表达式的值,函数内的程序语句可以通过参数名称来引用传进来的这些值。参数列表也可以为空。函数体:实现函数功能的程序语句。return:指定函数返回值的关键字。return语句负责将函数的执行结果返回到程序中函数调用的位置,一个函数中最多只能有一条return语句。,函数,例 定义一个求阶乘的函数 function fact(n)var s=1,i;for(i=1;i=n;i+)s=s*i;return s;,函数,函数调用 一般格式:函数名(实参列表);说明:实参列表中包含若干个实际参数,参数之间用逗号间隔,实参个数应与函数定义时参数列表中的参数个数相等。实参的表示形式可以是常量、变量或者表达式,所有实参都必须得到具体的赋值。函数调用时的参数传递都是以值传递的方式进行的。也就是说,在函数中将某个传进来的变量值改变了,并不会影响原来函数外的变量值。例如:function inc(n)n+;alert(n);var x=5;inc(x);alert(x);,函数,函数调用,程序运行结果:n=6 x=5,函数的作用域 在函数外部声明的变量称为全局变量,全局变量在程序的 任何地方都可以使用。在函数内部声明的变量称为局部变 量,局部变量应用关键字var声明,没有用var声明的局部 变量在函数执行完毕后会变成全局变量。,程序运行结果:sum=8,程序运行结果:y 未定义,function inc(n)y=+n;return y;var x=3;var sum=inc(x)+y;alert(sum);,function inc(n)var y=+n;return y;var x=3;var sum=inc(x)+y;alert(sum);,函数,函数的嵌套与递归函数的嵌套:嵌套定义是指在定义一个函数的过程中定义另一个函数,定义在某个函数内部的函数称为局部函数,其作用域局限在所属的框架函数。嵌套调用是指在调用一个函数的过程中又调用另一个函数。例如:function lcm(m,n)/框架函数,求最小公倍数 var res;function gcd(m,n)/局部函数,求最大公约数 var a,b,t;if(mn)t=m;m=n;n=t;a=m;b=n;while(r=a%b)!=0)a=b;b=r;return b;res=m*n/gcd(m,n);/嵌套调用gcd函数 alert(m+和+n+的最小公倍数是+res);,函数,函数的递归:递归调用是指函数在调用过程中直接或间接调用自身,是一种特殊的嵌套调用。例如:function fac(n)var res;if(n=1)res=1;else res=n*fac(n-1);/递归调用 return res;var n=parseInt(prompt(请输入整数,);var f=fac(n);alert(n+的阶乘是+f);,函数,对象 对象是属性与方法的集合,这些属性和方法被用来 描述对象的特性与行为。创建对象方式一:var 对象名=new Object();用Object()建立的对象没有任何属性,可以通过“对象名.属性名=属性值;”的方式为新建对象增加属性并指定属性值。例如:var teacher=new Object();teacher.name=杨鏖丞;teacher.age=32;teacher.sex=男;注意:Object()实际上是内部对象Object的构造函数。Object对象是所有JavaScript对象的父对象,它所提供的属性和方法会被其他的对象继承。,复合数据类型,创建对象方式二:var 对象名=new 自定义构造函数名(实参列表);实参列表用来初始化新建对象的属性。新建对象的属性声明是在属性名称前加上“this.”,然后将参数值指定给它,或是直接设定属性的初始值。例如:function person(n,a,s)this.name=n;this.age=a;this.sex=s;var yac=new person(杨鏖丞,32,男);var yyq=new person(余颖秋,30,女);注意:关键字this是对当前对象的引用。,复合数据类型,存取对象属性方式一:对象名.属性名 例如:function birthday(y,m,d)this.year=y;this.month=m;this.day=d;var p1=new birthday(2000,7,25);alert(生于+p1.year+年+p1.month+月+p1.day+日);可以根据对象的个别需求来增加它自己的属性,个别定义的对象属性不会影响其他对象。例如:var p2=new birthday(1976,2,15);p2.time=3:25;/p1对象不具备time属性,复合数据类型,存取对象属性方式二:对象名属性名|属性索引值 例如:,var p1=new Object();p1year=2000;p1month=7;p1day=25;alert(生于+p1.year+年+p1.month+月+p1.day+日);,var p2=new Object();p20=1976;p21=2;p22=15;alert(生于+p20+年+p21+月+p22+日);,复合数据类型,定义和调用对象方法 对象的方法是描述对象动态特征的操作序列,即函数。定义对象方法和定义对象属性非常类似,只需要将已定义函数的名称指定给对象方法名,或者直接定义函数。一般格式为:对象名.方法名=已定义函数名;或者 对象名.方法名=函数定义;例如:function calAge()return(new Date().getYear()-this.year;function birthday(y,m,d)this.year=y;this.month=m;this.day=d;this.getAge=calAge;/定义对象方法 var p=new birthday(2000,7,25);alert(年龄:+p.getAge();,复合数据类型,定义和调用对象方法 上述对象方法定义也可写成:function birthday(y,m,d)this.year=y;this.month=m;this.day=d;this.getAge=function()return(new Date().getYear()-this.year;调用对象方法的一般格式为:对象名.方法名(实参列表)例如:var p1=new birthday(1997,7,1);var p2=new birthday(2008,8,1);document.write(年龄1:+p1.getAge()+年龄2:+p2.getAge();,复合数据类型,对象操作语句及运算符for.in语句 一般格式:for(变量名 in对象名)循环体;该语句会将对象包含的所有属性逐个取出来,当取得对象的一个属性后会将该属性的名称指定给变量,并继续执行for循环直到取得对象的最后一个属性。该语句的优点是无需知道对象中属性的名称和个数即可进行操作。例如:var p=new birthday(1978,10,1);for(var prop in p)document.write(属性名:+prop+,复合数据类型,对象操作语句及运算符with语句 一般格式:with(对象名)语句段;该语句会将语句段内出现的任何变量和函数都认为是对象的属性和方法,从而简化对象的引用过程。如果语句段内的变量或函数不是对象的属性或方法,则会自动引用with语句外部的变量或函数。例如:var nativity=湖北省武汉市;var p=new birthday(1992,11,3);with(p)alert(生于+year+-+month+-+day);alert(籍贯:+nativity);,复合数据类型,对象操作语句及运算符typeof运算符 一般格式:typeof 运算量 typeof运算符可放在任意类型的运算量之前,返回结果是一个字符串,表明运算量的数据类型。例如:var p=new birthday(1985,8,8);var str=JavaScript;var num=1000;var flag=false;function func()alert(typeof p);/返回object alert(typeof str);/返回string alert(typeof num);/返回number alert(typeof flag);/返回boolean alert(typeof func);/返回function alert(typeof x);/返回undefined,复合数据类型,对象操作语句及运算符delete运算符 一般格式:delete 运算量 delete运算符用来删除放在其后的运算量,如果运算量被删除,返回true,否则返回false。运算量可以是变量、对象属性和数组元素。例如:var str=Hello World;num=123;var p=new birthday(1985,8,8);var ary=new Array(1,2,3);alert(delete str);/返回false alert(delete num);/返回true alert(delete p.year);/返回true alert(delete Math.PI);/返回false alert(delete ary2);/返回true注意:用关键字var声明的变量,内部对象的属性不能用delete运算符删除。,复合数据类型,内部对象 JavaScript提供了非常丰富的内部对象,用户可以直接使用这些对象的属性和方法来实现快速的程序开发。String对象 创建String对象的一般格式为:var 对象名=new String();或 var 对象名=new String(字符串参数);例如:var strObj=new String(Hello World!);注意:在实际应用中,很少通过new运算符和String()构造函数创建String对象,而是直接使用字符串变量或字符串常量。例如:var strVar=Java is a oriented-object language;strVar是一个存储了字符串值的基本类型变量,JavaScript规定可以将其作为拥有属性和方法的String对象处理。,复合数据类型,内部对象Math对象 Math对象用于完成比简单算术运算更高级的数学处理。Math对象不需要通过new运算符和构造函数创建,用户可以通过以下方式直接访问它的属性和方法:Math.属性名 Math.方法名(实参列表)例如:log=Math.LN10;root=Math.SQRT2;alert(Math.floor(log);alert(Math.ceil(log);alert(Math.round(root);alert(Math.max(log,root);alert(Math.floor(Math.random()*6)+1);,复合数据类型,内部对象Date对象 Date对象提供了处理日期和时间的强大功能,创建Date对象的一般格式为:var 对象名=new Date(实参列表);例如:var d1=new Date();var d2=new Date(2008,7,8,20,0,0);注意:在使用Date对象进行日期和时间处理时要考虑时区的因素。在JavaScript中,Date对象中包含的日期和时间信息实际上是一个以毫秒为单位的值,该值从GMT(格林尼治标准时间)时区的1970年1月1日0时0分0秒开始计算。以上面的d2对象为例,如果PC内部时钟设置的时区为东八区(北京所在时区),那么可认为d2中包含的具体时间是北京时间2008年8月8日20时0分0秒,但实际存储的是格林尼治标准时间2008年8月8日12时0分0秒的毫秒值。,复合数据类型,内部对象Date对象 Date对象的方法主要分为两类:一类用来读取存储在对象中的日期和时间信息,方法名以get开始;一类用来设置存储在对象中的日期和时间信息,方法名以set开始。get或set方法又可以分为两类:一类以本地时间格式来读取或设置存储在对象中的日期和时间信息,读取时会完成GMT时间到本地时间的转换,设置时会完成本地时间到GMT时间的转换。另一类以GMT时间格式来直接读取或设置存储在对象中的日期和时间信息。例如:var d=Date.parse(August 8,2008 20:00:00);alert(new Date(d).getUTCHours();/返回12 var t=Date.UTC(2008,7,8,20,0,0);alert(new Date(t).getUTCHours();/返回20,复合数据类型,数组 数组是一种经常使用的复合数据类型,它包含若干编码的数据段。每个编码的数据段被称为该数组的一个元素,每个元素的编码被称为下标,下标从0开始。数组在JavaScript中是以对象的方式实现的,同一数组中的不同元素可以具有不同的数据类型,元素的个数(数组长度)也可以是不固定的。创建数组方式一:var 数组名=new Array();用这种方式创建的数组是一个不包含元素的空数组,数组长度为0。例如:var ary=new Array();,复合数据类型,方式二:var 数组名=new Array(初值1,初值2,初值3,初值n);用这种方式创建的数组包含n个元素,通过构造函数Array()带的实参列表给每个元素赋予明确的初值,初值的数据类型可以各不相同。例如:Date d=new Date();var ary=new Array(123,JavaScript,true,d);方式三:var 数组名=new Array(数值);用这种方式创建的数组具有指定的元素个数,传入构造函数Array()的数值参数明确指定了数组长度。例如:var ary=new Array(10);方式四:var 数组名=初值1,初值2,初值3,初值n;例如:var ary=Hello,5.68,false;,复合数据类型,引用数组元素 一般格式:数组名下标 其中下标的取值范围为0下标数组长度-1。例如:var ary=new Array(4);ary0=123;ary1=true;ary2=JavaScript;ary3=new Date();for(var i=0;i);,复合数据类型,不固定的数组长度JavaScript中的数组可以具有任意个数的元素,可以在任何时候改变数组的长度。例如:var ary=new Array();/数组长度为0 ary0=China;/数组长度为1 ary1=new Date();/数组长度为2 ary2=78.59;/数组长度为3数组的length属性可读可写。如果给length设置一个比它当前值小的值,那么数组将会被截断,这个长度之外的元素都会被抛弃;如果给length设置的值比当前值大,那么新的、未定义初值的元素就会添加到数组中,使数组增长到新指定的长度。,复合数据类型,例如:var ary=China,3.14,true,911;alert(ary.length);/数组长度为4 ary.length=3;/数组被截断,长度为3 alert(ary3);/ary3的值为undefined多维数组当数组元素是数组时,就可以定义出多维数组。例如,定义一个43的二维数组:var mulAry=new Array(4);for(var x=0;xmulAry.length;x+)mulAryx=new Array(3);引用二维数组元素:数组名行下标列下标例如:for(var i=0;imulAry.length;i+)for(var j=0;jmulAryi.length;j+)mulAryij=i+j;,复合数据类型,浏览器对象模型(BOM)BOM提供了独立于内容而与浏览器窗口进行交互的对象,如window、location、history等,其中window对象是整个BOM的核心。window对象 window对象表示整个浏览器窗口,是BOM的顶级对象,其常用属性和方法参考教材P197的表7-9和表7-10。注意:window对象是默认的参考对象,因此在引用该对象的属性和方法时,可以不指定window。例如:window.alert(欢迎光临);等价于 alert(欢迎光临);,对象模型,window对象常用属性:frames-window对象数组 self-当前窗口 parent-某个窗口的父窗口 name-窗口名称 status-当前的状态信息常用方法:alert(x)显示警告对话框 confirm(x)-显示确认对话框 prompt(x,y)-显示提示对话框 open(url,name,features,replace)-打开新窗口 setInterval(expression,milliseconds)定时执行操作,对象模型,2023/11/16,网页设计与制作,71,history对象 history对象是window对象的属性,代表浏览器窗口最近访问页面的URL列表。用户可以通过back()、forward()或go()方法来寻找符合条件的历史记录。back():浏览器载入历史URL地址列表中当前URL的前一个URL,如同按下工具栏的Back按钮。forward():浏览器载入历史URL地址列表中当前URL的下一个URL,如同按下工具栏的Forward按钮。go(n):参数n表示前进或后退的页面数,正数表示前进,负数表示后退。如history.go(-2)是后退到前两页,history.go(1)是前进到下一页。,对象模型,location对象 location对象是window对象的属性,代表当前打开窗口或指定框架的URL信息。常用属性和方法包括:href属性:用于获取或设置窗口的URL。例如:location.href=http:/;replace():实现URL地址的导航,并且从历史URL地址列表中删除引用该方法的页面URL。例如:location.replace(http:/);reload(parameter):重载当前页面,与浏览器的Refresh按钮功能类似。参数parameter为false表示从浏览器缓存中载入,为true表示从服务器端载入,默认值为false。,对象模型,document对象 document对象是window对象的属性,代表在浏览器中载入的文档,它是唯一一个既属于BOM,又属于DOM的对象。从BOM角度看,document对象主要用来访问文档的各个部分,并提供页面自身的信息。document对象的最常用方法是write(),用来动态生成页面内容。例如:document.write(Hello+,对象模型,文档对象模型(DOM)DOM是面向HTML和XML的应用程序接口(API),为文档提供结构化表示,并定义如何通过脚本来访问文档结构。DOM独立于具体的编程语言,用户可以使用任何脚本语言来访问文档对象。节点树 DOM将文档表示为一棵由不同层级节点构成的节点树,树上的各个节点表示了文档的不同部分。,节点层次 简单文档,对象模型,DOM Level 1 DOM Level 1规范由DOM Core和DOM HTML两个模块构成。DOM Core:提供了基于XML的文档结构图,以方便访问和操作文档的任意部分。,对象模型,var xm