《JavaScript课件0803.ppt》由会员分享，可在线阅读，更多相关《JavaScript课件0803.ppt（99页珍藏版）》请在三一办公上搜索。
1、JavaScript,马远志2011-08-03,目 录,JavaScript概述JavaScript的变量、表达式和操作符JavaScript的基本语句JavaScript的对象模型内置对象和函数浏览器对象navigator对象窗口对象window文档对象document在JavaScript中处理事件浏览器事件鼠标事件键盘事件利用JavaScript制作网页特效,JavaScript概述,JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并且安全的脚本语言。它被嵌入到HTML文件中，无须编译就可在浏览器中运行，大大增强了Web页的交互性、动态性。它可用
2、来开发客户端和服务器端的应用程序。由于JavaScript由Java集成而来，因此它是一种面向对象的程序设计语言。它所包含的对象有两部分组成，即变量和函数，也称为属性和方法。,JavaScript的书写格式,JavaScript标记（加入JavaScript脚本）为了使代码不出现在不支持JavaScript的浏览器中，可以将所有的代码书写在注释中。象C语言一样，JavaScript允许用/来做注释。另外还可以用：(这里写不支持JavaScript的浏览器中显示的内容),JavaScript特点,JavaScript为网页设计人员提供了极大的灵活性，它能够将网页中的文本、图形、声音、和动画等各种
3、媒体形式捆绑在一起，形成一个紧密结合的信息源。特点：（1）Javascript是一种脚本编写语言，采用小程序段的方式实现编程，开发过程非常简单。（2）Javascript是一种基于对象语言，它能运用已经创建的对象。（3）Javascript具有简单性。（4）Javascript是动态的。（5）Javascript是一种安全性语言，它不允许访问本地磁盘，并且不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据丢失。（6）Javascript具有跨平台性，它依赖于浏览器本身，与操作系统无关。,例1 通过JavaScript在浏览器窗口中
4、显示一行文字，使用的是document对象的write方法。例2 自定义函数、window对象的alert方法、通过表单中的按钮的Onclick事件调用自定义函数。例3 发生失去焦点事件onBlur时调用自定义函数。例4 发生onMouseOver事件时调用自定义函数。例5 创建Date()对象的实例、使用该对象的方法来获取日期和时间。例6 产生随机数，使用了数学对象Math的绝对值方法abs，正弦方法sin方法。例7 用Window对象的open()方法打开一个新的窗口，并设置窗口选项。,JavaScript程序举例,JavaScript的开发环境,并不存在一个专门的JavaScript的开
5、发环境。我们可以使用：NotepadFrontPageDreamweaverVisual InterDev等来开发JavaScript程序,JavaScript的数据类型,数值 实数和整数不严格区分逻辑值 只有两个常量true和false字符串 用单引号或双引号括起的一串字符undefined 指已经创建但还没有赋初值的变量对象 具有特定属性和方法的集合体,变量,变量是代表某个值的名字，可以用var来声明一个变量，也可以不声明而直接使用。好的习惯是声明以后再使用。JavaScript中的变量名是大小写敏感的。变量命名要遵守一定的规则。字母开头，后面的可以是数字、字母、下划线，除此之外不能有空格
6、和其他符号。变量名不能是Javascript中的关键字。全局变量和局部变量,JavaScript的常量,整型常量 包括十进制，八进制（0开头），十六进制（0 x开头）浮点常量 如3.1416，-3.4e12布尔常量 有两个取值true和false字符串常量 由单引号或双引号括起来的若干个字符特殊常量 字符前加的转义字符，如退格b，回车r等null常量 可以转换成0或空串的特殊常量,JavaScript的表达式,表达式是由常量、变量和操作符相连接而组成的有意义的式子，该式子可以唯一地得到一个值，值的类型可以是数值、逻辑值和字符串等，甚至可以是一个对象。关于表达式的有关概念：表达式使用的赋值操作符
7、是:=例如：x=y+10条件表达式：一般格式为（条件）？A:B 例：status=(grade=60)?pass:fail“;,JavaScript的运算符,算术运算符 如+、-、*、/、%、+、-等位运算符 如与&或|异或取反等，用于整数的二进制位的操作逻辑运算符 如与&，或|、非！用于两个逻辑条件之间比较运算符符 如等于=、不等于！=、大于等于=等字符串运算符 如字符串连接符+及其变形+=，等,JavaScript的基本语句,语句：是由计算机执行的、达到某种目的的指令，JavaScript的语句可以分为以下几类：变量声明、赋值语句：var函数定义语句：function，return条件和分
8、支语句：ifelse，switch循环语句：for，while，dowhile，break（终止循环），continue（终止之前的循环，继续向下循环）对象操作语句：forin，with，new（实例化），this注释语句：/，/*/语句之间可以用空格、分号来分隔，也可以把若干条语句放在一对大括号 中组成语句块。,函数定义语句,函数：函数是拥有一个名字的完成一定功能的程序段，除系统内置函数外，用户也可以通过关键字function来定义用户自己的函数。用户自定义函数格式如下：function 函数名称（参数表）函数执行部分函数中可以使用（也可以不用）：return 表达式来返回表达式的值（若省略
9、表达式或函数定义时没有return，则返回一个undefined类型的值）最好在HTML文档的head中定义所有的函数，以保证页面被装载时首先装载函数。,条件语句ifelse,ifelse语句完成程序流程分支功能，如果其中条件成立，则执行紧接着的语句序列，否则执行else语句序列。语法格式如下：if（条件）语句序列1else语句序列2,多分支语句switch,多分支语句switch根据表达式的不同取值可采用多种不同的处理方法，因此叫做多分支语句。语法格式如下：switch(expression)case label 1:语句序列1（可选break）；case label 2:语句序列2（可选b
10、reak）；default:语句序列n注：若省略break，则满足某个case语句及之后的所有语句将依次执行。,function getMonthDays(int year,month)switch(month)case 1:case 3:case 5:case 7:case 8:case 10:case 12:return 31;case 4:case 6:case 9:case 11:return 30;case 2:return isLeapYear(year)?29:28;return 0;,function isLeapYear(year)return(year%4=0),循环语句f
11、or,for循环语句完成循环，即当循环条件成立时反复执行循环体的语句序列。语法格式如下：for（初始化部分可选；条件部分可选；更新部分可选）语句序列其中：初始化部分通常用来初始化一个循环控制变量；条件部分用来设定循环成立的条件；更新部分用来更新循环控制变量的值。,循环语句while,while语句反复测试循环条件，当条件成立时执行循环体内的语句序列，直到循环条件不成立退出循环，去执行后面的语句。语法格式如下：while（循环条件）语句序列注：循环体内必须有改变循环条件的语句，否则可能造成死循环。,循环语句dowhile,dowhile语句也是循环语句，与while语句不同的是，dowhile语
12、句无论while语句中的循环条件是否成立，总是先执行一次循环体中的语句序列，然后再判断循环条件，当条件成立时继续执行循环，直到条件不成立退出循环。语法格式如下：do语句序列while（循环条件）,break和continue语句,break语句用于结束当前的for循环、while循环、dowhile循环或者switch多分支语句，并把程序的控制权交给后面的语句。continue语句结束当前的循环并重新开始下一次循环。,对象操作语句1/2,forin语句 一般格式：for(代表对象属性的变量名 in 已知对象名)用于对已知对象的所有属性进行操作的循环控制例 用forin循环显示document对
13、象的所有属性with语句 一般格式：with(object)语句 规定在with语句后花括号里的语句体内对所有属性和方法的引用都指的是默认对象object。例 用with(对象)来指定默认的对象,对象操作语句2/2,new操作符 用于创建对象的一个实例（即创建一个新的对象）创建实例的一般格式：实例名=new object(参数1,参数2参数n)this关键字 表示当前对象 例 用new操作符创建Date()对象的实例currentDate，在失去焦点事件中用this关键字表示当前对象delete操作符用于删除一个对象的实例。一般格式：delete 实例名,JavaScript的对象模型,对象、
14、属性、方法、事件的概念对象：具有特定属性和方法的集合体。属性：属性的值确定对象的当前状态。方法：方法是对象自己所属的函数，是对象可以做的事情。事件：事件是浏览器响应用户交互操作的一种机制，当事件发生后系统自动调用相应的事件处理函数，完成事件处理过程。,JavaScript中的几种对象,由浏览器根据Web页面的内容自动提供的对象（即浏览器对象），如window对象及其子对象document等JavaScript内置的对象，如Date、Math、String等服务器上固有的对象用户自定义对象,JavaScript的对象属性,对象属性集的值确定了对象的当前状态。定义对象属性的语法：对象.属性名=属性
15、值属性引用的方法：使用点（.）运算符,如obj.name=“李四”通过对象的下标引用,如obj0=“李四”通过字符串的形式,如obj“name”=“李四”提示：引用对象属性时，必须指明属性的所有父对象，如document.MyForm.Text1.Value 例 document对象的lastModified属性引用示例document.write(本网页的最后更新时间为：+document.lastModified);,JavaScript的方法,方法是对象自己所属的函数，是对象可以做的事情。对象方法的定义与普通函数的定义方法一样。引用对象方法的语法：对象.方法()对象方法通常都有一个返回值
16、，该值一般是从脚本的某处获得，通常来自一个函数。例 通过Date()对象的实例today引用getHours()、getMonth()等方法示例,创建新对象,除了JavaScript预先定义好的对象以外，用户可以创建自己的对象，自定义对象有自己的属性和方法。创建对象要做三项工作：定义对象方法，即定义一个或多个将成为对象方法的（普通）函数。对象方法或者说函数的名字在程序中应该是唯一的并且不能与JavaScript的保留字冲突；定义一个构造函数（该构造函数的名字就是对象的名字），在构造函数中说明该对象的属性并对各属性初始化（即用构造函数接受的参数分别赋值给对象属性），并将定义的对象方法（函数）注册
17、到对象上；用new语句创建对象的实例,自定义对象（用户创建对象）示例,例自定义对象Person，给该对象定义了3个属性name、sex、age等并进行了初始化，通过fonin语句并采用对象的关联数组格式引用对象属性，定义对象实例来使用对象。例（在上例基础上，）给某对象的某个实例动态加入一个属性current，这并不影响用该对象创建的其他实例和对象本身。例定义对象的方法函数，用构造函数定义对象，在函数中说明对象的属性并对各属性初始化，注册对象的方法，用new语句创建对象的实例并使用实例。,内置对象和函数,JavaScript提供了一些内置的对象和函数。内置对象提供了编程的几种最常用的功能，如数学
18、运算，时间处理等。内置函数主要用于各种数据类型的转换。,内置对象,JavaScript的内置对象有：String对象：处理字符串操作 Math对象：处理数学运算 Date对象：处理日期及时间 Array对象：处理数组 Event对象：处理事件信息 RegExp对象：处理正则表达式,静态对象和动态对象,可以将内置对象分为以下两类：静态对象 引用静态对象的属性和方法时不需要为它创建实例。（静态对象只有一个Math）动态对象 引用动态对象的属性和方法时必须为它创建一个实例。,String对象方法1/3,String对象提供了一组进行字符串操作的方法，字符串是指括在双引号或单引号中的一串字符。字符串的
19、转换方法toUpperCase()：将字符串所有字母转为大写toLowerCase()：将字符串所有字母转为小写toString()：将非字符串对象转换为字符串字符串的处理方法substring(start,end)：返回指定范围的子串chaAt(idx)：返回字符串指定位置的一个字符split()：用指定的分割符把字符串划分为字符串数组,String对象方法2/3,字符串外观的改变方法big()：用大字体显示字符串bold()：用粗体字显示字符串fontcolor()：使用指定的字体颜色(“#hhhhhh”)显示fontsize()：指定用“1-7”号字体显示italics()：用斜体字显示
20、文本small()：用小字体显示字符串strike()：在所显示的字符串上加删除线sub()：以下标形式显示strike()：以上标形式显示链接处理方法link()：用来创建超链接，等效于标记中设定HREF属性。abchor()：创建链接的目标，等效于中设定NAME属性。例 本页和上页中的方法示例,String对象方法3/3和属性,字符串的搜索方法indexOf(character,fromIndex)：从fromIndex位置开始搜索character第一次出现的位置（以上是String对象的方法）String对象的属性 length：返回字符串的长度-字符数,Math对象属性,Math是静
21、态对象，不需要也不能为它创建实例。Math有8个属性（即提供了8个算术常数）：E（必须大写）：欧拉常数，即自然对数的底数ln2：以2为底的自然对数ln10：以10为底的自然对数log2e：以2为底的e的对数log10e：以10为底e的对数PI（必须大写）：圆周率sqrt1_2：0.5的平方根sqrt2：2的平方根属性的引用格式是 Math.constant/这里constant为上列常数例如：Math.PI,Math对象方法,Math对象的主要方法（函数）abs()：计算绝对值ceil()、floor()：向上、向下四舍五入pow(base,exponent)：数的幂round()：取数值最近
22、的整数值sqrt()：计算平方根random()：产生0-1之间的随机数sin()、acos()等：三角函数log()、exp()：数的自然对数值、e的幂值max()、min()：求两个数中最大或最小的数,Math对象属性和方法用法示例,例 Math属性PI、E和方法向上四舍五入(ceil)、向下四舍五入(floor)、random()、sin()等使用示例）例 计算器示例程序，能够实现一个简单的计算器的基本功能。,日期及时间对象Date,日期和时间对象Date是动态对象，使用前必须用new运算符创建一个实例，例如：todayDate=new Date()Date对象没有提供直接访问的属性，只
23、有提供的获取和设置日期及时间的方法。日期起始值:年月日:,日期及时间对象Date方法1/3,获取日期和时间的方法：getYear()：获得当前年份getMonth()：获得当月月数（0表示1月，1为2月）getDate()：获得当日号数getDay()：获得当日是星期几（0为星期日，1为一）gerHours()：获得当前的小时数getMintes()：获得当前的分钟数 getSeconds()：获得当前的秒数getTime()：获得毫秒数（从1970年1月1日到当前时间的毫秒数）例 获取日期和时间的方法简单示例例 获取日期和时间示例，程序中对小于10的分、秒数前加0,设置日期和时间的方法：se
24、tYear()：设置年数setMonth()：设置月数setDate()：设置号数getHours()：设置小时数setMintes()：设置分钟数setSeconds()：设置秒数setTime()：设置毫秒数,日期及时间对象Date方法2/3,处理时区的方法：getTimezoneOffset()：用于给出时差值toGMTString()：将日期时间值转换为格林威治时间（GMT）表达的字符串toLocaleString()：将日期时间值转换为当地时间表达的字符串日期格式转换：Date.UTC()：返回星期几,日期及时间对象Date方法3/3,Array对象,定义数组的方法：数组在使用之前必
25、须为它创建一个实例，亦即要先定义再使用，例如：myArray=new Array(n)/n为维数，可以省略。更加简便的定义数组的形式是在定义一个数组的同时给数组赋以初值，如：dayArray=new Array(Sun,Mon,Tue,Wed,Thu,Fri,Sat)数组的下标是从0开始的。例 数组的定义、赋值和使用,Array对象属性和方法,属性length：指明数组的长度方法(部分方法)join()：将数组值连接变成为一个字符串reverse()：将数组值倒序sort()：对数组值进行排序，对字符串按字母顺序排序,内置函数,JavaScript提供了一些内置函数：（这些函数不属于任何对象，
26、在程序任何地方都可以使用。）eval(str):接受一个字符串形式的表达式str，并试图求出表达式str的值，如果str是JavaScript命令，则执行该命令。例 体验eval()函数的用法parseInt(str,radix)：试图从一个字符串中提取一个整数，也可以返回一个n进制的整数。例 提交表单前验证输入数据的正确性此外还有：escape(str),unescape(str),parseFloat(str),isNaN(),isFinite(number)等内置函数。,JavaScript中的系统函数,JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数，使用
27、这些函数不需创建任何实例,可直接用。1返回字符串表达式中的值：方法名：eval（字串表达式），例：test=eval(“8+9+5/2”);2.返回字符串ASCI码：方法名：unEscape(string)3返回字符的编码：方法名：escape(character)4返回实数：parseFloat(floustring);5返回不同进制的数：parseInt(numbestring,rad.X)其中radix是数的进制，numbs字符串数,浏览器对象,浏览器对所载入的网页，会根据网页内容向JavaScript提供了一些对象，另外，根据浏览器本身的配置和属性也会提供另一些对象，JavaScrip
28、t程序可以访问它们。浏览器对象就是网页和浏览器本身各种实体元素组成的可供JavaScript程序访问的对象。浏览器对象之间存在着从属关系或者说层次关系，但这种从属关系涉及到的两个对象在属性和方法上并不存在共同点或者说继承关系，这与一般的面向对象程序设计语言中的从属关系是不同的，因此称之为层次关系似乎更恰当些。,一些常见的浏览器对象举例,window对象：是HTML文档的所有其他对象最高级别的对象，是浏览器窗口和窗口属性的集合。frame对象：当定义了多个帧后，每个帧对应一个frame对象，相当于一个widow对象。location对象：含有基于当前的URL属性，是window的子对象。hist
29、ory对象：包含用户先前已经访问过的URL，是window的子对象。document对象：包含基于文档内容的属性，是window对象的子对象。form对象：是document对象的子对象。,JavaScript对象的层次结构,navigator对象.属性1/2,navigator对象提供关于整个浏览器环境的信息navigator属性(以某机器为例)：appCodeName=Mozilla（当前浏览器代码名称）appName=Microsoft Internet Explorer（浏览器正式名称）cpuClass=x86 platform=Win32（浏览器适用平台名称）systemLangua
30、ge=zh-cn（浏览器当前语言设定）userLanguage=zh-cn cookieEnabled=true,navigator对象.属性2/2.方法,navigator属性(以某机器为例)：appVersion=4.0(compatible;MSIE 5.5;Windows 98;Win 9x 4.90)（浏览器版本号、平台相关信息）userAgent=Mozilla/4.0(compatible;MSIE 5.5;Windows 98;Win 9x 4.90)（浏览器版本号、平台相关信息）注：属性在不同浏览器、不同版本中的含义可查阅相关手册。例 显示navigator所有属性navig
31、ator方法javaEnabled()返回一个布尔值反映浏览器是否允许运行java。,窗口对象window,窗口对象window是浏览器自动定义的顶层对象，它是浏览器对象中其他对象的共同祖先，一般在JavaScript程序中可以直接引用window对象的属性和方法，JavaScript总是自动地在引用前面加上window对象。例如，在程序中可以直接用document而不需要写成window.document,直接用confirm（）而不用window.confirm（）。,窗口对象window属性1/3,status：浏览器窗口底部状态栏出现的临时性消息defaultstatus：浏览器窗口底
32、部默认的状态行信息Name:窗口名location:与窗口相关联的URL地址History:当前窗口的历史记录，可用于网页导航Closed:窗口是否关闭（closed用法可参看后面例子）,例 设定状态栏的显示信息（window对象的defaultStatus属性和status属性的使用）,例 14-04.htm用defaultStatus属性规定浏览器窗口打开后在状态栏显示的信息用status属性定义了通过鼠标指针“指向”或“离开”超链接时状态栏显示的内容（系统默认显示的内容是URL，程序中将它改为新指定的内容）本例用到onMouseOver和onMouseOut事件,例 状态栏创建滚动文字串
33、（window对象的status属性，String对象的substring方法和length属性）,例 14-18.htm 在状态栏创建滚动文字串本例使用了window对象的status属性以及onLoad事件，使用了string对象的substring方法和length属性。,窗口对象window属性2/3,Frame:帧对象Frames:帧对象的数组Parent:多帧窗口中某个窗口的父窗口Top:一系列嵌套窗口中最上层的浏览器窗口Window:当前窗口self：当前窗口length：窗口中包含的帧的个数opener：打开子窗口的父窗口对象(opener的概念和用法可参看后面例 14-29.
34、htm),窗口对象window属性3/3,innerHeight 窗口或框架对象的活动文档区高度innerWidth 或宽度象素数（用法可参见例14-41.htm）outerHeight 窗口对象或框架对象的窗口外边界高度象素数outerWidth 窗口对象或框架对象的窗口外边界宽度象素数pageXOffset 浏览器内容区左上角元素的水平或垂直位pageYOffset 移象素值，可以是正值，也可以是负值（用法可参看例14-42.htm）,例 self属性的使用,例 14-04self.htm与例14-04相同，但是是用self属性代替该例中对窗口对象window的引用。（14-04的解释：用
35、defaultStatus属性规定浏览器窗口打开后在状态栏显示的信息。用status属性定义了通过鼠标指针“指向”或“离开”超链接时状态栏显示的内容（系统默认显示的内容是URL，程序中将它改为新指定的内容）。本例用到onMouseOver和onMouseOut事件）。,窗口对象window方法1/3,alert(text)：弹出信息对话框confirm(text)：弹出确认对话框prompt(text,defaultinput)：弹出提示对话框blur()：删除窗口的焦点属性focus()：将焦点属性移到指定的窗口close()：关闭指定窗口,例 弹出几种对话框方法（window对象的aler
36、t、prompt、confirm方法的使用）,例 3-4.htm本例使用 window对象的下列方法：alert(text)弹出信息框prompt(text,defaultinput)弹出提示框confirm(text)弹出确认对话框,例 window对象的有关焦点的方法（focus()方法和blur()方法示例）,例 14-29.htm在主窗口中用open()方法打开一个子窗口，打开之前设定了子窗口的大小、背景色及所显示的文字，并在子窗口中设置了两个表单按钮，分别可以将主窗口或子窗口放到前台（使用focus方法和blur方法，self.opener用来指定主（父）窗口）。,窗口对象windo
37、w方法2/3,setTimeout(expression,milliseconds)：经过设置的时间（超时若干毫秒）后执行表达式描述的代码 setTimeout(function,time,args)：经过设置的时间（超时若干毫秒）后调用函数clearTineout():清除以前的超时设置setInterval(function,time,args)：经过ms时间后重复调用函数或对表达式求值 注：以上args是函数自变量列表，IE和Navigate的处理方法不同clearInterval(id)：清除由setInterval()方法创建的超时，参数id是由setInterval方法返回的ID值
38、，参看例14-42,例 超时设置例子1(setTimeout 和clearTimeout方法的使用),例 14-23.htm 倒计时的例子setTimeout(function,time,args)经过设定的超时时间后，自动调用函数；clearTineout():清除以前的超时设置。程序中用到Date对象的getTime()、getMinutes()和getSeconds()方法,例 超时设置例子2（window对象的setTimeout方法、onLoad事件）,例 14-44.htm 在状态栏显示当前时间setTimeout(function,time,args)经过ms超时时间后，调用函数
39、利用window.status在状态栏显示当前时间，判断是上午还是下午显示为AM或PM，每秒后面的*号闪烁一次。使用了window对象的onLoad事件,窗口对象window方法3/3,scroll(x,y)：将窗口内容滚动到坐标指定的位置resizeBy(horiz,vert)：移动窗口右下角以调整窗口大小resizeTo(width,height)：将窗口调整到指定大小scrollBy(deltaX,deltaY)：按指定距离(象素点)滚动窗口scrollTo(x,y)：将窗口内容滚动到指定的位置moveBy(horiz,vert)：将窗口内容移动指定的位移量moveTo(x,y)：将窗口
40、内容移动到指定的坐标处open(url,name,options)：打开并创建新的窗口对象,例 窗口内容滚动到坐标指定的位置 scroll(x,y)方法的使用,例 14-37用FRAMESET定义框架网页，用两个FRAME分别定义两个帧，分别装载14-38和14-39，其中14-39中加载了图象tupian.jpg。scroll(x,y)方法：将窗口中的由(x,y)坐标指定的位置的内容滚动到窗口左上角的第0,0个象素位置开始显示，自定义函数scrollFunction和customScroll中的parent.frames0代表父框架的第0个子框架即上框架的内容，亦可直接用上框架的名字而写成p
41、arent.display.scroll(x,y)。其中用到的parseInt()是内置函数，作用是将字符串转换为数值。运行时为体现效果，可将窗口缩小（在窗口最大化时，有些效果体现不出来）。,例 重设浏览器窗口大小 resizeBy(x,y)方法和resizeTo(x,y)方法的使用,例 14-36Window的resizeBy(x,y)方法通过移动窗口右下角以调整窗口大小；Window的resizeTo(x,y)方法将窗口调整到指定大小。其中用到的parseInt()是内置函数，作用是将字符串转换为数值。,例 控制窗口内容滚动（相对位移）（window对象的scrollBy(x,y)方法的使
42、用）,14-40（框架网页）嵌入了下面两个网页14-38（上框架网页，其中加载了图象tupian.jpg），显示一幅图片14-41（下框架网页）利用scrollBy方法移动上框架网页的内容，可以指定水平和垂直滚动象素数后单击click to scrollBy()按钮来滚动（窗口不要最大化，否则水平方向效果不明显），也可以单击PageDown或PageUp上下滚动（程序中设定每次滚动30个象素）。,例 双框架环境控制文档滚动（window对象的scrollBy()、setInterval()、clearInterval()方法和onLoad事件使用示例）,14-42.htm是框架网页，上框架中放
43、14-43.htm，下框架中放14-45.htm 14-43.htm中用window对象的setInterval()方法做控制器，给出7个按钮来控制下框架中14-45.htm文档内容的滚动开始、停止、滚动的时间间隔、每次滚动的步长、滚动的方向。,Open()方法的语法1/2,使用格式:variale=open(url,name,options)variable:窗口对象的变量名 url:文档的URL地址 name:与窗口相关联的名称,可以用在、标记的属性中 options 指定窗口的不同属性（之间用逗号分隔）:toollbar=yes|no(工具栏)location=yes|no(地址栏)di
44、rectory=yes|no(链接按钮)status=yes|no(状态栏)menubar=yes|no(菜单栏)scrollbars=yes|no(滚动条)resizable=yes|no(窗口缩放)copyhistory=yes|no(为新窗口复制go菜单)width=窗口宽度象素数 height=窗口高度象素数 outerWidth=窗口外部宽度 outerHeight=窗口外部高度left=距屏幕左边距 top=距屏幕顶边距,例 Open()方法和close()方法使用示例,例 3-1.htm使用open()方法在新的窗口中打开指定的网页3-2.htm网页3-2.htm内使用图imag
45、e.jpg，在3-2.htm中使用close（）方法关闭窗口,例 open()方法和window对象的opener属性的使用,例 14-10.htm 用open()方法打开另外一个窗口，主窗口程序中规定了子窗口的大小，要求用户选择子窗口的颜色。单击“打开新的窗口”按钮时调用 14-11.htm，由子窗口中的程序来判断所选的颜色并按此颜色来设置背景色，并且在打开后的子窗口可发信息给主窗口（OPENER属性的使用）,options 扩展属性:（扩展属性被认为有安全风险，主要用于Navigator4，需要script签名支持，在不同的浏览器中的表现不同）alwayLowered=yes|no(总在其
46、它浏览器的后面)alwaysRaised=yes|no(总在其它浏览器的前面)dependent=yes|no(若opener关闭，则子窗口关闭)hotkey=yes|no(菜单栏关闭时，快捷菜单是否有效)titlebar=yes|no(标题栏及其所有其它边界元素)z-lock=yes|no(窗口层固定在浏览器下面),Open()方法的语法2/2,例 open()各种属性的使用示例,例 14-31.htm本例演示怎样使用open()方法的各种option属性，在打开的主窗口中由用户选择将要打开的子窗口的属性和扩展属性（属性列在表格分隔出的表单的多选框中），然后根据用户选择的属性打开bofrig
47、ht.htm作为新窗口,文档对象document,每个window对象都包括一个document对象，document对象的属性结构对应网页中的每一个超链接、表单元素的组织结构，包含HTML文档的标题、前景色、背景色、链接颜色和网页的其他属性。,文档对象document.属性,title：文档的标题（参见例16-13）lastModified：文档最后修改时间（参看例1-4）URL：文档对应的URL（参看16-07）Cookie：得到和创建Cookie信息bgColor：文档的背景色fgColor：文档的前景色location：保存文档所有的URL信息（参看16-07）alinkColor：激
48、活的超链接的颜色（IE忽略此属性）linkColor：超链接的颜色vlinkColor：已浏览过的超链接颜色,例 document.URL属性、document.location属性和title属性的使用，访问不同窗口和框架,例16-07是个上下结构的框架网页，上框架中是16-09，下框架中是16-08。16-08使用document.URL属性和document.location属性分别访问父框架、别的框架和自身，分别得到它们的URL和Title。程序中用到的unescape()是内置函数，返回一个URL编码的字符串，程序中还用到frames0数组,文档对象document.属性（数组）,文
49、档对象document还包含一些以数组形式使用的属性，这些（数组）属性同网页的结构相对应。这些属性数组都有一个相应的length属性，该属性的值表示整个数组元素的个数。areas:网页中所有区域构成的数组，每个区域是数组的一个元素forms:网页中所有表单构成的数组，每个表单是数组的一个元素（用法可参见例16-07,该例中用top.frames0代表上框架）images:网页中所有图象构成的数组，每个图象是数组的一个元素applets:网页中所有applets构成的数组，每个applets是数组的一个元素anchors:网页中所有超链接构成的数组，每个超链接是数组的一个元素links:网页中所
50、有超链接构成的数组，每个超链接是数组的一个元素layers:网页中所有层构成的数组，每个层是数组的一个元素plugins:网页中所有插件构成的数组，每个plug-in是数组的一个元素,文档对象document.方法,document对象的方法有：clear():清除浏览器窗口的内容open(mimeType):使用MIME（Multipurpose Internet Mail Extension）类型打 开一个缓冲区，将write()和 writeln()的内容写入缓冲区close():关闭缓冲区，将缓冲区的内容全部写入 网页，即将write()和 writeln()的内容写在网页中write
