javascript基础入门ppt课件.ppt

JavaScript,1,主要内容,了解JavaScriptJavaScript入门语言基础内置对象对象与DOM图像处理框架表单与事件处理,2,一、了解JavaScript,1.了解JavaScript2.JavaScript与Java3.JavaScript与Java不同点4.JavaScript工作流程5.JavaScript可以做什么6.JavaScript不可以做什么,3,了解JavaScript,是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web客户交互。弥补了HTML的缺陷。,页面,标准,行为,表示CSS,结构HTML,4,JavaScript与Java,处于两家不同的公司，属于两种完全不同的产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合Internet应用程序开发，前生是Oak语言。JavaScript是Netscape公司的产品，是一种可嵌入到WEB当中的基于对象和事件驱动的解释性语言，前生是LiveScript。,5,JavaScript与Java不同点,基于对象和面向对象解释和编译强变量和弱变量代码格式不一样嵌入方式不一样静态联编和动态联编（对象引用在运行时进行检查，对象引用必须在编译时的进行）,6,JavaScirpt可以做什么,使网页更具有交互性，给用户提供更好，更令人兴奋的体验。确保用户在表单中输入有效的信息，可以节省你的业务开支。即时创建HTML页面。还可以处理表单，设置cookie，创建基于Web的应用程序。,7,JavaScirpt不可以做什么,不允许读写客户机器上的文件。不允许写服务器上的文件。不能关闭不是由它打开的窗口。不能从来自另一个服务器的已经打开的网页中读取信息。,8,二.JavaScript入门,1.脚本写在哪里？2.第一个JavaScript程序3.在脚本中写注释4.弹出对话框5.关闭一个浏览器窗口,9,脚本写在哪里？,.,HTML文档,functionHELLO().,src=,10,第一个JavaScript程序,document.write(HelloWorld!);,11,在脚本中写注释,两种注释示例/*/与/*ThisisanexampleofalongJavaScriptcomment.Notethecharactersatthebeginningendingofthecomment.*/FunctionEmg()/ThisiswriteMessage.,12,弹出对话框,三种对话框functionDialogBox(),/alert(welcome!);一个按钮/confirm(canyouspeakenglish?);两个按钮prompt(“howoldareyou?”,”23”);有默认回答，两个按钮,13,关闭一个浏览器窗口,两种关闭方式标签关闭与按钮关闭,关闭窗口,functionNVGClose()window.close();,14,三.语言基础,1.基本数据类型常量2.基本数据类型变量3.转义字符4.表达式5.运算符6.控制语句7.JavaScript函数8.错误处理,15,基本数据类型常量,整型只能储存整数。可以是正整数、0、负整数，可以是十进制、八进制、十六进制。八进制数的表示方法是在数字前加“0”，如“0123”表示八进制数“123”。十六进制则是加“0 x”：“0 xEF”表示十六进制数“EF”。浮点型即“实型”，能储存小数。有资料显示，某些平台对浮点型变量的支持不稳定。没有需要就不要用浮点型。字符串型是用引号“”“”、“”包起来的零个至多个字符，而且单双引号可嵌套使用。布尔型常用于判断，只有两个值可选：true（表“真”）和false（表“假”）。true和false是JavaScript的保留字。它们属于“常数”。,16,基本数据类型变量,变量的命名变量的命名有以下要求：1.只包含字母、数字和/或下划线；2.要以字母开头；3.不能太长；4.不能使用JavaScript中的关键字作为变量；变量是区分大小写的，例如，variable和Variable是两个不同的变量变量需要声明没有声明的变量不能使用，否则会出错：“未定义”。声明变量可以用：var=变量作用域。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。,17,转义字符,由于一些字符在屏幕上不能显示，或者JavaScript语法上已经有了特殊用途，在要用这些字符时，就要使用“转义字符”。转义字符用斜杠“”开头：单引号、“双引号、n换行符、r回车。于是，使用转义字符，就可以做到引号多重嵌套：Micro说：”这里是“JavaScript教程”。,18,表达式,表达式在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常又叫称一个叫表达式来完成，可以说它是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。varm=1+9;varm=“hello”+”world”;varm=100;varm=false;,19,运算符,1算术运算符JavaScript中的算术运算符有单目运算符和双目运算符。双目运算符：+（加）、-（减）、*（乘）、/（除）、%（取模）、|（按位或）、varn=3;varbol=(mn)?m:n;,23,多目选择,基本格式解决多种条件判断switch(e)caser1:（注意：冒号）.break;caser2:.break;default:.,24,循环语句for,基本格式for（初始化；条件；增量）语句集；功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体,25,循环语句while,基本格式while（条件）语句集；该语句与For语句一样，当条件为真时，重复循环，否则退出循环。*break和continue语句与C+语言相同，使用break语句使得循环从For或while中跳出，continue使得跳过循环内剩余的语句而进入下一次循环。,26,do-while循环,基本格式dowhile(条件);功能：do.while循环与while循环相似，在循环的末尾检查条件，它总是至少运行一次。,27,forin循环,JScript提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。for.in循环中的循环计数器是一个字符串，而不是数字。它包含当前属性的名称或者当前数组元素的下标。/创建具有某些属性的对象varmyObject=newObject();myO=James;myObject.age=22;myObject.phone=5551234;/枚举（循环）对象的所有属性for(propinmyObject)/显示ThepropertynameisJames，等等。window.alert(Theproperty+prop+is+myObjectprop);,28,JavaScript函数,Function函数名（参数,变元）函数体;.Return表达式;说明：当调用函数时,所用变量或字面量均可作为变元传递。函数由关键字Function定义。函数名：定义自己函数的名字。参数表，是传递给函数使用或操作的值，其值可以是常量，变量或其它表达式。通过指定函数名（实参）来调用一个函数。必须使用Return将值返回。函数名对大小写是敏感的,29,JavaScript函数,在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments.Length来检查参数的个数。Functionfunction_Name(exp1,exp2,exp3,exp4)Number=function_Name.arguments.length;if(Number1）document.wrile(exp2);if(Number2)document.write(exp3);if(Number3)document.write(exp4);,30,错误处理,基本语句try/throw/catchtry语句块thrownewError(“”);catch(errMsg)alert(errMsg.message);,eg:functionAge()tryvarm=age;varn=20;document.write(parseInt(m)+n);/抛出语句thrownewError(notavalidnumber);catch(errMsg)alert(errMsg.message);,31,四、内置对象,1.对象化编程2.对象的基本知识3.内置对象4.String字符串5.Array数组6.Math7.Date日期,8.全局对象9.自定义构造函数10.自定义对象11.expando属性12使用原型对象13.数组对象14.With语句,32,对象化编程,JavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。虽然JavaScript语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大的Web文文件。,33,对象的基本知识,对象是可以从JavaScript“势力范围”中划分出来的一小块，可以是一段文字、一幅图片、一个表单（Form）等等。每个对象有它自己的属性、方法和事件。对象的属性是反映该对象某些特定的性质的，例如：字符串的长度、图像的长宽、文字框（Textbox）里的文字等等；对象的方法能对该对象做一些事情，例如，表单的“提交”(Submit)，窗口的“滚动”(Scrolling)等等；而对象的事件就能响应发生在对象上的事情，例如提交表单产生表单的“提交事件”，点击连接产生的“点击事件”。不是所有的对象都有以上三个性质，有些没有事件，有些只有属性。引用对象的任一“性质”用“.”这种方法。,34,内置对象,MicrosoftJscript提供了11个内部（或“内置”）对象。它们是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error以及String对象。每一个对象有相关的方法和属性，这在语言参考中有详细的描述。,35,String字符串,属性length用法：.length；返回该字符串的长度。方法charAt()用法：.charAt()；返回该字符串位于第位的单个字符。注意：字符串中的一个字符是第0位的，第二个才是第1位的，最后一个字符是第length-1位的。charCodeAt()用法：.charCodeAt()；返回该字符串位于第位的单个字符的ASCII码。fromCharCode()用法：String.fromCharCode(a,b,c.)；返回一个字符串，该字符串每个字符的ASCII码由a,b,c.等来确定。,36,String字符串,indexOf()用法：.indexOf(,)；该方法从中查找（如果给出就忽略之前的位置），如果找到了，就返回它的位置，没有找到就返回“-1”。所有的“位置”都是从零开始的。lastIndexOf()用法：.lastIndexOf(,)；跟indexOf()相似，不过是从后边开始找。split()用法：.split()；返回一个数组，该数组是从中分离开来的，决定了分离的地方，它本身不会包含在所返回的数组中。例如：1这样就定义了一个空数组。以后要添加数组元素，就用：=.;注意这里的方括号不是“可以省略”的意思，数组的下标表示方法就是用方括号括起来。如果想在定义数组的时候直接初始化数据，请用：var=newArray(,.);,39,Array数组,例如，varmyArray=newArray(1,4.5,Hi);定义了一个数组myArray，里边的元素是：myArray0=1;myArray1=4.5;myArray2=Hi。但是，如果元素列表中只有一个元素，而这个元素又是一个正整数的话，这将定义一个包含个空元素的数组。注意：JavaScript只有一维数组！千万不要用“Array(3,4)”这种愚蠢的方法来定义4x5的二维数组，或者用“myArray2,3”这种方法来返回“二维数组”中的元素。任意“myArray.,3”这种形式的调用其实只返回了“myArray3”。要使用多维数组，请用这种虚拟法：varmyArray=newArray(newArray(),newArray(),newArray(),.);其实这是一个一维数组，里边的每一个元素又是一个数组。调用这个“二维数组”的元素时：myArray23=.;,40,Array数组,属性length用法：.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。所以，想添加一个元素，只需要：myArraymyArray.length=.。方法join()用法：.join()；返回一个字符串，该字符串把数组中的各个元素串起来，用置于元素与元素之间。这个方法不影响数组原本的内容。reverse()用法：.reverse()；使数组中的元素顺序反过来。如果对数组1,2,3使用这个方法，它将使数组变成：3,2,1。slice()用法：.slice(,)；返回一个数组，该数组是原数组的子集，始于，终于。如果不给出，则子集一直取到原数组的结尾。sort()用法：.sort()；使数组中的元素按照一定的顺序排列。如果不指定，则按字母顺序排列。在这种情况下，80是比9排得前的。如果指定，则按所指定的排序方法排序。比较难讲述，这里只将一些有用的介绍给大家。,41,math,Math对象，提供对数据的数学计算。用法为“Math.”这种格式。属性E返回常数e(2.718281828.)。LN2返回2的自然对数(ln2)。LN10返回10的自然对数(ln10)。LOG2E返回以2为低的e的对数(log2e)。LOG10E返回以10为低的e的对数(log10e)。PI返回（3.1415926535.)。SQRT1_2返回1/2的平方根。SQRT2返回2的平方根。,42,math,方法abs(x)返回x的绝对值。acos(x)返回x的反余弦值（余弦值等于x的角度），用弧度表示。asin(x)返回x的反正弦值。atan(x)返回x的反正切值。atan2(x,y)返回复平面内点(x,y)对应的复数的幅角，用弧度表示，其值在-到之间。ceil(x)返回大于等于x的最小整数。cos(x)返回x的余弦。exp(x)返回e的x次幂(ex)。floor(x)返回小于等于x的最大整数。,43,math,log(x)返回x的自然对数(lnx)。max(a,b)返回a,b中较大的数。min(a,b)返回a,b中较小的数。pow(n,m)返回n的m次幂(nm)。random()返回大于0小于1的一个随机数。round(x)返回x四舍五入后的值。sin(x)返回x的正弦。sqrt(x)返回x的平方根。tan(x)返回x的正切。,44,Date日期,这个对象可以储存任意一个日期，从0001年到9999年，并且可以精确到毫秒数（1/1000秒）。在内部，日期对象是一个整数，它是从1970年1月1日零时正开始计算到日期对象所指的日期的毫秒数。如果所指日期比1970年早，则它是一个负数。所有日期时间，如果不指定时区，都采用“UTC”（世界时）时区，它与“GMT”（格林威治时间）在数值上是一样的。定义一个日期对象：vard=newDate();这个方法使d成为日期对象，并且已有初始值：当前时间。,45,Date日期,如果要自定初始值，可以用：vard=newDate(99,10,1);/99年10月1日vard=newDate(Oct1,1999);/99年10月1日等等方法。方法以下有很多“g/setUTCXXX”这样的方法，它表示既有“getXXX”方法，又有“setXXX”方法。“get”是获得某个数值，而“set”是设定某个数值。如果带有“UTC”字母，则表示获得/设定的数值是基于UTC时间的，没有则表示基于本地时间或浏览期默认时间的。,46,Date日期,g/setUTCFullYear()返回/设置年份，用四位数表示。如果使用“x.setUTCFullYear(99)”，则年份被设定为0099年。g/setUTCYear()返回/设置年份，用两位数表示。设定的时候浏览器自动加上“19”开头，故使用“x.setUTCYear(00)”把年份设定为1900年。g/setUTCMonth()返回/设置月份。g/setUTCDate()返回/设置日期。g/setUTCDay()返回/设置星期，0表示星期天。g/setUTCHours()返回/设置小时数，24小时制。g/setUTCMinutes()返回/设置分钟数。g/setUTCSeconds()返回/设置秒钟数。g/setUTCMilliseconds()返回/设置毫秒数。,47,Date日期,g/setTime()返回/设置时间，该时间就是日期对象的内部处理方法：从1970年1月1日零时正开始计算到日期对象所指的日期的毫秒数。如果要使某日期对象所指的时间推迟1小时，就用：“x.setTime(x.getTime()+60*60*1000);”（一小时60分，一分60秒，一秒1000毫秒）。getTimezoneOffset()返回日期对象采用的时区与格林威治时间所差的分钟数。在格林威治东方的市区，该值为负，例如：中国时区（GMT+0800）返回“-480”。toString()返回一个字符串，描述日期对象所指的日期。这个字符串的格式类似于：“FriJul2115:43:46UTC+08002000”。toLocaleString()返回一个字符串，描述日期对象所指的日期，用本地时间表示格式。如：“2000-07-2115:43:46”。toGMTString()返回一个字符串，描述日期对象所指的日期，用GMT格式。toUTCString()返回一个字符串，描述日期对象所指的日期，用UTC格式。parse()用法：Date.parse()；返回该日期对象的内部表达方式。,48,全局对象,全局对象从不现形，它可以说是虚拟出来的，目的在于把全局函数“对象化”。在MicrosoftJScript语言参考中，它叫做“Global对象”，但是引用它的方法和属性从来不用“Global.xxx”（况且这样做会出错），而直接用“xxx”。方法eval()把括号内的字符串当作标准语句或表达式来运行。isFinite()如果括号内的数字是“有限”的（介于Number.MIN_VALUE和Number.MAX_VALUE之间）就返回true；否则返回false。isNaN()如果括号内的值是“NaN”则返回true否则返回false。parseInt()返回把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”。,49,全局对象,parseFloat()返回把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。toString()用法：.toString()；把对象转换成字符串。如果在括号中指定一个数值，则转换过程中所有数值转换成特定进制。escape()返回括号中的字符串经过编码后的新字符串。该编码应用于URL，也就是把空格写成“%20”这种格式。“+”不被编码，如果要“+”也被编码，请用：escape(.,1)。unescape()是escape()的反过程。解编括号中字符串成为一般字符串。,50,自定义构造函数,我们已经知道，Array()，Image()等构造函数能让我们构造一个变量。其实我们自己也可以写自己的构造函数。自定义构造函数也是用function。在function里边用this来定义属性。function().this.=;.然后，用new构造函数关键字来构造变量：var=new();构造变量以后，成为一个对象，它有它自己的属性用this在function里设定的属性。,51,自定义构造函数,例如，下面的示例为pasta对象定义了构造函数。注意this关键字的使用，它指向当前对象。/pasta是有四个参数的构造器。functionpasta(grain,width,shape,hasEgg)this.grain=grain;/是用什么粮食做的？this.width=width;/多宽？（数值）this.shape=shape;/横截面形状？（字符串）this.hasEgg=hasEgg;/是否加蛋黄？（boolean）this.toString=pastaToString;/这里添加toString方法（如下定义）。/注意在函数的名称后没有加圆括号；/这不是一个函数调用，而是对函数自身的引用。,52,自定义构造函数,/实际的用来显示past对象内容的函数。functionpastaToString()/返回对象的属性。returnGrain:+this.grain+n+Width:+this.width+n+Shape:+this.shape+n+Egg?:+Boolean(this.hasEgg);,53,自定义对象,functionStudent(name)=name;this.getName=getName;functiongetName();functionButton1_onclick()vars=newStudent(lijie,20,asdad,13971212);alert(s.getName();alert();,54,使用自己的对象,定义了对象构造器后，用new运算符创建对象实例。varspaghetti=newpasta(wheat,0.2,circle,true);/将调用toString()并显示spaghetti对象的属性。window.alert(spaghetti);,55,expando属性,可以给对象实例添加属性(expando属性)以改变该实例，但是用相同的构造器生成的其他对象定义中并不包括这些属性，而且除非你特意添加这些属性那么在其他实例中并不显示出来。spaghetti.color=palestraw;spaghetti.drycook=7;spaghetti.freshcook=0.5;varchowFun=newpasta(rice,3,flat,false);/chowFun对象或其他现有的pasta对象/都没有添加到spaghetti对象的三个新属性。,56,使用原型对象,如果要将对象所有实例的附加属性显示出来，必须将它们添加到构造函数或构造器原型对象中。例如：将属性foodgroup加到pasta原型对象中，这样pasta对象的所有实例都可以有该属性，包括那些已经生成的实例。totype.foodgroup=carbohydrates现在spaghetti.foodgroup、chowFun.foodgroup，等等均包含值“carbohydrates”。,57,使用原型对象,例如，如果想要能够删除字符串的前后空格（与VBScript的Trim函数类似），就可以给String原型对象创建自己的方法。Stotype.trim=function()/用正则表达式将前后空格用空字符串替代。returnthis.replace(/(s*)|(s*$)/g,);vars=leadingandtrailingspaces;/显示leadingandtrailingspaces(35)window.alert(s+(+s.length+);/删除前后空格s=s.trim();/显示leadingandtrailingspaces(27)window.alert(s+(+s.length+);,58,数组和对象,通常，使用点运算符“.”访问对象的属性。例如，myObject.aProperty也可以用索引运算符“”访问对象的属性。在这里，是把对象看作一个关联数组。关联数组是一种数据结构，它可以动态地将任意的数据的值与任意的字符串相关联。例如myObjectnotavalididentifier=Thisisthepropertyvalue;myObject100=100;索引“”字符串文字能被作为数据处理在运行之前并不知道属性名称时，这个差异会有用（比如基于用户输入构造对象时）。要想从一个关联数组提取所有的属性，必须用forin循环。,59,数组和对象,由于所有的数组也是对象，也支持expando属性。请注意，虽然如此，添加的属性并不以任何方式与length属性相交互。例如：/三个元素的数组varmyArray=newArray(3);myArray0=Hello;myArray1=42;myArray2=newDate(2000,1,1);window.alert(myArray.length);/显示数组的长度3myArray.expando=JScript!;/添加某些expando属性myArrayanotherExpando=Windows;/仍然显示3，因为两个expando属性，并不影响长度。window.alert(myArray.length);,60,with语句,为一个或一组语句指定默认对象。用法：with();with语句通常用来缩短特定情形下必须写的代码量。在下面的例子中，请注意Math的重复使用：x=Math.cos(3*Math.PI)+Math.sin(Math.LN10);y=Math.tan(14*Math.E);当使用with语句时，代码变得更短且更易读：with(Math)x=cos(3*PI)+sin(LN10);y=tan(14*E);,61,五.对象与DOM,1、宿主对象2、浏览器对象(Navigator)3、屏幕对象(screen)4、窗口对象(Windows)5、位置对象(Location)6、历史对象(History)7、文档对象(Document)8、文档DOM9、DOM结构图10、添加节点11、删除节点12、插入节点13、替换节点,62,宿主对象,使用浏览器的内部对象系统（宿主对象）,可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。浏览器对象(Navigator)提供有关浏览器的信息屏幕对象(screen)反映了当前用户的屏幕设置窗口对象(Windows)Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。位置对象(Location)Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。历史对象(History)History对象提供了与历史清单有关的信息。文档对象(Document)document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。,63,浏览器对象(Navigator),属性：appCodeName：返回浏览器的代码名，IE返回MozillaappName：返回浏览器名，IE返回“MicrosoftInternetExplorer”appVersion：返回浏览器版本，包括版本号、语言、操作平台等language：返回浏览器编译语言platform：返回操作平台Navigator对象的plugin属性以数组表示已安装的外挂程序description外挂程序模块的描述filename外挂程序模块的文件名length外挂程序模块的个数name外挂程序模块的名称,64,浏览器对象(Navigator),Eg:varlen=navigator.plugins.length;with(document)write(你的浏览器共支持+len+种外挂插件：);write()write(外挂插件清单)write(名称描述文件名)for(vari=0;i+i++navigator.pluginsi.description+navigator.pluginsi.filename);,65,屏幕对象(screen),属性screen对象屏幕对象，描述屏幕的显示及颜色属性availHeight屏幕区域的可用高度availWidth屏幕区域的可用宽度colorDepth颜色深度256/816/1632M/32height屏幕区域的实际高度width屏幕区域的实际宽度,66,屏幕对象(screen),Eg：if(screen.width,67,窗口对象(Windows),属性：name：窗口名称status：改变状态栏的信息self：当前窗口top：最顶端的框架页parent：窗口所属的框架页,68,窗口对象(Windows),Eg：functioncfm()if(confirm(确定离开么?)/关闭当前窗口,下面两个方法都可以/window.close();self.close();elsereturnfalse,69,窗口对象(Windows),window对象的open()方法：打开一个新窗口参数：alwaysLowered是否将窗口显示的堆栈后推一层alwaysRaised是否将窗口显示的堆栈上推一层dependent是否将该窗口与当前窗口产生依存关系fullscreen是否满屏显示directories是否显示连接工具栏location是否显示网址工具栏menubar是否显示菜单工具栏scrollbars是否显示滚动条,70,窗口对象(Windows),status是否显示状态栏titlebar是否显示标题栏toolbar是否显示标准工具栏resizable是否可以改变窗口的大小screenX窗口左边界距离screenY窗口上边界距离top窗口上边界width窗口宽度height窗口高度left窗口左边界outerHeight窗口外边界的高度personalbar是否显示个人工具栏,71,位置对象(Location),属性：hash锚点名称host主机名称hostnamehost:porthref完整的URL字符串pathname路径port端口protocol协议search查询信息方法：reload()重新加载replace()用指定的网页取代当前网页，并且当按下浏览器的“后退”键时将不能返回原先的网页,72,位置对象(Location),Eg:,73,历史对象(History),属性：current当前历史记录的网址length存储在记录清单中的网址数目next下一个历史记录的网址previous上一个历史记录的网址方法：back()回到上一个历史记录中的网址（和按下“后退”键等效）forward()回到下一个历史记录中的网址（和按下“前进”键等效）go(整数或URL)前往历史记录中的网址（如果整数x0，则前进x个地址，如果整数x1)varlastGraf=allGraffs.item(allGrafs.length-1)vardocBody=document.getElementsByTagName(body)0docBody.removeChild(lastGraf),85,插入节点,.insertBefore(newnode,oldnode)释：父节点下的.insertBefore()方法中，在原始节点前插入新的节点。,86,替换节点,.replaceChild(newnode,oldnode)释：父节点下的.replaceChild()方法中，用新节点替换原始的节点。,87,六.图像处理,1.翻转器（rollover）2.低级翻转器3.高级翻转器4.链接式翻转器5.三状态翻转器,88,翻转器（rollover）,JavaScript实现的一种常见且有效的效果是，当用户将鼠标移动到图像上时，改变网页上的图像，从而让页面对用户的操作做出反应。这种称为翻转器（rollover）的效果很容易实现，而且有许多可以应用它的场合,89,低级翻转器,onmouseover=document.arrow.src=arrow_on.jpgonmouseout=document.arrow.src=arrow_off.jpg释：当鼠标移动到图片上或离开，重定向到另一张图片,缺点：察觉到延迟，需要下载,90,高级翻转器,window.onload=setup;functionsetup()varthisImage=document.images0;/获取图像thisImage.outImage=newImage();/定义图像的属性为一图像thisImage.outImage.src=thisImage.src;/定义属性指向的地址thisImage.onmouseout=rollout;/调用事件thisImage.overImage=newImage();thisImage.overImage.src=arrow_on.jpg;thisImage.onmouseover=rollover;,91,高级翻转器,functionrollout()this.src=this.outImage.src;functionrollover()this.src=this.overImage.src;,优点：一次性将图片下载到客户段的内存当中，不会出现延时。,92,链接式翻转器,window.onload=setup;functionsetup()varthislinks=document.links0;/获取链接对象thislinks.thisImage=document.images0;/定义属性thislinks.outImage=newImage();thislinks.outImage.src=thisImage.src;thislinks.onmouseout=rollout;thislinks.overImage=newImage();thislinks.overImage.src=arrow_on.jpg;thislinks.onmouseover=rollover;,93,链接式翻转器,functionrollout()this.thisImage.src=this.outImage.src;functionrollover()this.thisImage.src=this.overImage.src;,94,三状态翻转器,三状态翻转器就是在高级翻转器中加入一条点击的过程中出现的图片；thisImage.onclickImage=newImage();thisImage.onclickImage.src=图片地址;thisImage.onclick=rollClick;functionrollClick()this.src=this.onclickImage.src;,95,七.框架,1、框架概述2、一个简单的框架3、防止页面显示在框架中4、迫使站点显示在框架中5、创建和装载动态框架6、在框架间共享函数7、用javascript装载iframe,96,框架概述,框架由至少三个HTML页面组成。第一个页面称为框架集（frameset），它设置每个子框架的尺寸。框架集在JavaScirpt中称为顶层页面（top）或父页面（parent）。,框架集,left框架,content框架,97,一个简单的框架,scrolling：是否显示滚动条noresize:是否允许调整框架大小,98,防止页面显示在框架中,抢劫,我的页面,新闻网页贴吧知道MP3图片视频帮助高级空间hao123|更多把百度设为首页企业推广|搜索风云榜|关于百度|AboutBaidu2008Baidu使用百度前必读京ICP证030173号,百度一下,if(top.location!=self.location)top.location.replace(self.location);注意：直接用top.location!=self.locationIE的Back按钮不能用,防止,99,迫使站点显示在框架中,varframesetPage=frameset3.html;varcurrPage=justTheFilename(self.location.pathname);if(top.location=self.location检查top.location是否与self.location相同,100,迫使站点显示在框架中,window.onload=chgFrame;functionchgFrame()if(top.location=self.location,101,迫使站点显示在框架中,functionjustTheFilename(thisFile)if(thisFile.indexOf(/)-1)thisFile=thisFile.substring(thisFile.lastIndexOf(/)+1);if(thisFile.indexOf(?)=0)thisFile=thisFile.substring(1);returnthisFile;,102,创建和装载动态框架,window.onload=initLinks;functioninitLinks()for(vari=0;iYouarenowlookingatpage+this.thisPage+.;varcontentWin=parent.document.getElementById(content).contentWindow;contentWin.document.body.innerHTML=newText;returnfalse;,103,在框架间共享函数,varbannerArray=newArray(images/redBanner.gif,images/greenBanner.gif,images/blueBanner.gif);window.onload=initFrames;functioninitFrames()varleftWin=document.getElementById(left).contentWindow.document;for(vari=0;ileftWin.links.length;i+)leftWin.linksi.target=content;leftWi