动态网页脚本语言JavaScript(课件PPT).ppt

上传人:文库蛋蛋多 文档编号:2705473 上传时间:2023-02-23 格式:PPT 页数:133 大小:677.50KB
返回 下载 相关 举报
动态网页脚本语言JavaScript(课件PPT).ppt_第1页
第1页 / 共133页
动态网页脚本语言JavaScript(课件PPT).ppt_第2页
第2页 / 共133页
动态网页脚本语言JavaScript(课件PPT).ppt_第3页
第3页 / 共133页
动态网页脚本语言JavaScript(课件PPT).ppt_第4页
第4页 / 共133页
动态网页脚本语言JavaScript(课件PPT).ppt_第5页
第5页 / 共133页
点击查看更多>>
资源描述

《动态网页脚本语言JavaScript(课件PPT).ppt》由会员分享,可在线阅读,更多相关《动态网页脚本语言JavaScript(课件PPT).ppt(133页珍藏版)》请在三一办公上搜索。

1、1,动态网页脚本语言JavaScript,主要内容概述编程基础面向对象的基本概念内置对象浏览器窗口对象,2,JavaScript是由Netscape公司开发的一种跨平台,面向对象(object-oriented)的网页脚本语言(Web Script Language),是目前流行的网页特效设计语言。JavaScript代码可直接嵌入HTML文件中,随网页一起传送到客户端浏览器,然后通过浏览器来解释执行。,JavaScript概述,3,什么是JavaScript脚本语言?(1)脚本语言(Scripting Language)?由ASCII码构成,可直接用任何的文本编辑器开发完成。是一种不必事先编

2、译,只要利用适当的解释器(Interpreter)就可以执行的简单的解释式程序。(2)JavaScript?JavaScript是由Netscape公司开发的一种跨平台,纯面向对象(object-oriented)式的网页式脚本语言(Web Script Language)。JavaScript代码可直接嵌入HTML文件中,随网页一起传送到客户端浏览器,然后通过浏览器的解释器来解释执行。,JavaScript概述,4,脚本编写语言 基于对象的语言 简单性 动态性 跨平台,2.JavaScript的特点,JavaScript概述,5,制作网页特效 提供表单前端验证 窗口动态操作 提高系统工作效率

3、,3.JavaScript的功能,JavaScript概述,6,在HTML标记中直接写入JavaScript代码例:鼠标移过来 运行,4.在HTML文档中嵌入JavaScript代码,JavaScript概述,7,将JavaScript代码放入标记符中例如:document.write(欢迎您学习JavaScript!);运行,4.在HTML文档中嵌入JavaScript代码,JavaScript概述,8,将代码独立存储为以.js 为扩展名的文件,利用SRC属性将该文件调入例如:welcome.js文件内容如下:document.write(欢迎您学习JavaScript!);,4.在HTML

4、文档中嵌入JavaScript代码,JavaScript概述,举例,9,document.write();var A=Uppercase A;document.write(A);document.write(Uppercase A);document.write();document.write(gv=+A+);,10,为避免某些浏览器不完全支持JavaScript,而造成错误,可将JavaScript代码用注释语句括起来例如:,4.在HTML文档中嵌入JavaScript代码,JavaScript概述,11,数值型(Number):包含整数或浮点数。布尔型(Logical):取值为true或

5、false。1,0字符型(String):用单引号或双引号括起来的零个或多个的字符或数字所组成。空类型(null):表示没有值,取唯一值”null”,大小写敏感。注:null不能写成Null或NULL。null既不等于“0”,也不等于“空字符串”。因为“0”是数值,“空字符串”是字符串。,1.数据类型,JavaScript编程基础,12,自动数据类型转换 如果表达式中用(+)运算符,且其中一个操作数为字符串,另一个操作数为数值时,JavaScript自动将数值转成字符串。例如:var x=”我今年”+18;结果:x=“我今年18”var x=”15”+8 结果:x=158 var y=15+8

6、;结果:y=23 如果表达式中用了其它运算符,JavaScript自动将字符串转成数值。例如:var x=”30”/5;结果:x=6 var y=”15”-“8”;结果:y=7 举例,2.数据类型转换,JavaScript编程基础,13,数据类型转换函数 eval(字符串):将字符串参数转换成相应的数值,例如:y=eval(“15”)+8;结果:y=23 parseInt(字符串,底数):将字符串转换成指定底数的数值。parseFloat(字符串):将字符串转换成浮点数值。举例,2.数据类型转换,JavaScript编程基础,14,3.变量,JavaScript编程基础,变量命名 以字母或下划

7、线开头(不能以数字开头),后面接数字、字母或下划线。变量名区分大小写。不能用系统保留字和特殊符号作为变量例:var A=Uppercase A;var a=Lowercase a;document.write(A);document.write();document.write(a);,15,3.变量,JavaScript编程基础,变量的声明 变量声明时,不必定义类型,所有类型均由小写的 var声明。例如:var name;(JavaScript自动给出一个未定义值)var name,sex;(JavaScript自动给出一个未定义值)var name=”张永”,sex=”女生”;(二变量均为

8、 字符串),16,3.变量,JavaScript编程基础,变量的作用域:全局变量(Global variable)局部变量(Local variable)var gv=JavaScript;/gv是全局变量 function test()var lv=VBScript;/lv是局部变量 document.write(gv=+gv+);document.write(lv=+lv+);test();document.write(document的输出:);document.write(gv=+gv+);document.write(lv=+lv+);举例,17,4.常量,JavaScript编程基

9、础,字符串常量:(String Literals)一般字符串常量:,“”特殊字符的字符串常量布尔常量:(Boolean Literals):true或false 1,0数值型:整数常量(Integers Literals)浮点常量(Floating-Point Literals),18,5.运算符与表达式,JavaScript编程基础,赋值运算符,x+=y 等价于 x=x+yx%=y 等价于 x=x%y,19,5.运算符与表达式,JavaScript编程基础,比较运算符 举例,20,5.运算符与表达式,JavaScript编程基础,算术运算符 举例,21,5.运算符与表达式,JavaScrip

10、t编程基础,逻辑运算符 a&b:逻辑与(AND),若a,b都是ture,则结果为ture。a|b:逻辑或(OR),若a,b任一是ture,则结果为ture。!a:逻辑非(NOT),若a是ture,则 结果为false。,22,5.运算符与表达式,JavaScript编程基础,字符串运算符(String operators)f)条件运算符(?)格式:条件表达式?值1:值2 如果条件表达式的结果是ture,返回值1,否则 返回值2。var a,b;max=ab?a:b,举例,23,5.运算符与表达式,JavaScript编程基础,g)typeof:用来判断操作数的类型 格式:typeof 操作数

11、或 typeof(操作数)举例,24,属性对象类型:方法对象实例 对象实例名.属性 对象实例名.方法如:窗口p102,JavaScript编程基础,25,5.运算符与表达式,JavaScript编程基础,h)new:定义对象实例。语法:对象实例名=new 对象类型(参数)例如:myArray=new Array(3)this:代表当前对象,因此用在不同的地方,就有不同的结果。this.属性 this.方法 举例,26,6.程序控制流程,JavaScript编程基础,选择结构,if 语句else 语句,if 语句组 else 语句组,if 语句组 else if 语句组 else 语句组,举例,

12、27,6.程序控制流程,JavaScript编程基础,b)Switch结构,switch()case:;break;case:;break;default:;,28,6.程序控制流程,JavaScript编程基础,循环结构,while()语句组,var i=5;while(i 0)document.write(i=i);i-;例,29,6.程序控制流程,JavaScript编程基础,循环结构,var i=5;do document.write(i=,i,);i-;while(i 0)例,do 语句或语句组 while(),30,6.程序控制流程,JavaScript编程基础,循环结构,for(

13、初始值;条件;增量),for(var i=5;i 0;i-)document.write(i=,i,);,31,6.程序控制流程,JavaScript编程基础,循环结构,for(i in ar)document.write(,ari,);例1,for(变量 in 对象),32,6.程序控制流程,JavaScript编程基础,C)With语句,with(),document.write(限时抢购物品:);document.write(ViewSonic 17 显示器。);document.write(EPSON 打印机。);,with(document)write(限时抢购物品:);write(

14、ViewSonic 17 显示器。);write(EPSON 打印机。);例1,33,6.程序控制流程,JavaScript编程基础,注释语句,/*/,34,JavaScript包含两类函数:系统函数 用户自定义函数,7.JavaScript函数,JavaScript编程基础,35,1)编码函数功能:将字符串中非文字、数字字符(如&,%,#,空格符)转成相对应的ASCII值。语法:escape(字符串)2)译码函数功能:与escape()相反,将ASCII值转回ASCII字符.语法:unescape(ASCII值)3)求值函数功能:通常有两个用途,一个用作字符串的运算,另一个用来指出操作对象。

15、语法:eval(字符串表达式),JavaScript编程基础,36,4)数值判断函数功能:判断变量的值是否为数值,“NaN”代表“Not a Number”,若返回值为true,则表示自变量不是数值。语法:isNaN(测试值)举例:var x=15,y=黄雅玲;document.write(x 不是数值吗?,isNaN(x);document.write(y 不是数值吗?,isNaN(y);执行结果:x 不是数值吗?false y 不是数值吗?True,JavaScript编程基础,举例,37,5)转成整数函数功能:将字符串转换成指定底数的数值。格式:parseInt(字符串,底数)举例:x=

16、parseInt(“27”,8),JavaScript编程基础,38,6)转成浮点函数功能:将字符串转成浮点数值。格式:parseFloat(字符串)举例:document.write(parseFloat(3.123456),);,JavaScript编程基础,举例,39,7)用户自定义函数,function 函数名(参数1,参数2,)return,定义函数的注意事项:易于识别 功能模块化 放置在程序开始部分 例1 例2,JavaScript编程基础,40,函数定义的一般形式,定义无参函数的一般形式为:类型标识符函数名()声明部分 语句部分 函数名();,41,定义有参函数的一般形式为:类型

17、标识符 函数名(形式参数表列)声明部分 语句部分 函数名(实际参数表列);,42,函数参数和函数的值,形式参数和实际参数,形式参数:函数名后面括号中的变量名称为“形式参数”(简称“形参”)。实际参数:主调函数中调用一个函数时,函数名后面括号中的参数(可以是一个表达式)称为“实际参数”(简称“实参”)。函数返回值:return后面的括号中的值作为函数带回的值(称函数返回值)。,43,主调函数和被调用函数之间有数据传递的关系。在不同的函数之间传递数据,可以使用的方法有:参数:通过形式参数和实际参数返回值:用return语句返回计算结果全局变量:外部变量,44,对象.属性对象.方法 new:定义对象

18、实例。语法:对象实例名称=new 对象类型(参数)this:代表当前对象,用在不同的地方,有不同的结果。this.属性 this.方法,面向对象的基本概念,45,JavaScript的事件处理,主要内容1、事件(Event):是指用户在某对象上所作的动作。2、事件驱动(Event Driver):由事件引发的一连串程序的动作,称为事件驱动。3、事件处理程序(Event Handler):对事件进行处理的程序或函数。4、事件处理程序语法:如:onClick,46,JavaScript的事件处理,1、常见事件,47,JavaScript的事件处理,2、事件处理程序语法 1)直接嵌入HTML标记符中

19、 浏览 直接写在对象后面.=document.onLoad=alert(这是事件处理程序);*浏览,48,JavaScript的事件处理,3、应用举例 例1:网络技术学习网 浏览,49,JavaScript的事件处理,3、应用举例例2请输入基本资料:姓名:浏览 p58*,例1 例2,50,JavaScript提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。本节主要介绍JavaScript提供的内置对象:Array():数组 String():字符串 Math():数值计算 Date():日期,JavaScript内置对象,51,JavaSc

20、ript内置对象,1.数组(Array)对象格式:对象名=new Array(元素个数)对象名=new Array(值1,值2,)例如:fruit=new Array()fruit=new Array(2)/声明了有2个元素的数组 fruit=new Array(“苹果”,”橘子”)/声明了有/2个数组元素的数组,并赋值属性:index:数组元素的索引值。*length:数组长度(数组元素个数)。方法:join():将数组内的所有值组合成一个字符串 并用特定符号分开。reverse():将数组内元素的索引次序翻转过来,52,JavaScript内置对象,1.数组(Array)对象举例:例1:一

21、维数组应用例2:二维数组应用,53,JavaScript内置对象,2.字符串(String)对象格式:字符串变量名=new String(“字符串常数”)例如:var str1=new String(”JavaScript”)属性:length:字符串长度*举例:例1:属性length测试,54,JavaScript内置对象,方法:1)indexOf(“子字符串”).*02)replace(“字符串a”,“字符串b”)3)substr(索引值i,长度值)4)substring(索引值i,索引值j)i,j-15)toLowerCase()6)toUpperCase()注意:大小写!,indexO

22、f()函数应用 大、小写转换 substring(),55,JavaScript内置对象,3.数学(Math)对象属性:E:欧拉常量,自然对数的底(约等于2.718)LN2:2的自然对数(约等于0.693)LN10:10的自然对数(约等于2.302)LOG2E:以2为底的e的对数(约等于1.442)LOG10E:以10为底的e的对数(约等于0.434)PI:的值(约等于3.14159)SQRT1_2:0.5的平方根(约等于0.707)SQRT2:2的平方根(约等于1.414),56,JavaScript内置对象,3.数学(Math)对象方法:abs(x)返回x的绝对值 acos(x)返回x的反

23、余弦值(以弧度为单位)asin(x)返回x的反正弦值(以弧度为单位)atan(x)返回x的反正切值(以弧度为单位)ceil(x)返回大于或等于x的最小整数 floor(x)与ceil相反 max(a,b)返回两数间的较大值 min(a,b)返回两数问的较小值 pow(m,n)返回m的n次方(其中m为底,n为指数)random()返回0和1之间的一个伪随机数 round(x)返回X四舍五入之后的整数,57,Math.PIMath.max(a,b)Math.round(x)Math.randow(),举例,var m=new Math();m.max(a,b);,58,JavaScript内置对象

24、,4.日期时间(Date)对象格式:对象实例名=new Date(日期参数)举例:today=new Date()/当日时间为对象初值。today=new Date(“October 1,2002 12:00:00”)/英文表示月份,其余以数值表示:即【”月日,年时:分:秒”】。today=new Date(2002,08,07,0,0,0)/一律以数字表示:即【年,月,日,时,分,秒】。,59,JavaScript内置对象,4.日期时间(Date)对象方法:getYear()返回年份值 getMonth()返回月份值 getDate()并返回日期 getHours()返回小时数 getMin

25、utes()返回分钟数 getSeconds()返回秒数 getDay()返回星期几 getTime()返回完整的时间,60,JavaScript内置对象,4.日期时间(Date)对象方法:setYear()设置年份 setMonth()设置月份 setDate()设置日期 setHours()设置小时数 setMinutes()设置分钟数 setSeconds()设置秒数 setDay()设置返回星期几 setTime()设置完整的时间 注意:setDay(),61,JavaScript内置对象,4.日期时间(Date)对象提示:月份数为(0-11)日期数为(1-31)星期数为(0-6)小时

26、数为(0-23)分钟数为(0-59)秒数为(0-59)毫秒数为(0-999),62,JavaScript内置对象,5.举例 例1:Date对象常用方法测试 例2:显示当天的时间 例3:显示用户的进站时间 例4:时间设置 例5:倒计时,63,对象实例名称.属性对象实例名称.方法 new:定义对象实例 语法:对象实例名称=new 对象类型(参数)引用:对象实例名称.属性 对象实例名称.方法 this:代表当前对象,用在不同的地方,有不同的结果。this.属性 this.方法,面向对象的基本概念,64,Math.*可以直接使用不需要先定义 String(字符串)Array(数组)*必须先定义new后

27、引用 Date(日期),JavaScript内置对象,举例,65,JavaScript内置对象,5.用户自定义对象 在实际应用应用中,JavaScript提供的内置对象往往不能满足用户的需求,因此,常常需要建立用户自定义对象。对象(Object)是一组经过组织的数据,在JavaScript中的每一个对象都有两个相关的成员:属性(Property)和方法(Method)。建立自定义对象就是为对象定义:属性和方法。,66,JavaScript内置对象,5.用户自定义对象其步骤是:1)写一个构造函数来定义:对象类 a)为对象类定义 属性 b)为对象类定义 方法 先将方法的名称放到对象的构造函数中 写

28、一个函数来描述该对象方法的内容2)利用new创建:对象实例,67,对象类型:member属性:name sex方法:display(),68,1)定义对象类型function member(name,sex)this.name=name;this.sex=sex;this.display=display;,2)描述对象的方法 function display()var str=this.name+是+this.sex;document.write(+str);,69,3)创建对象实例 var papa=new member(杨宏文,男生);var mama=new member(黄雅玲,女生)

29、;papa.display();mama.display();,举例,70,JavaScript内置对象,作业题1、利用日期对象,对不同的进站时间,显示不同的提示信息。比如,上午六点到下午六点,显示“将有限的时间用在作最有意义的事”;其他时间显示“现在是休息时间”。(答案)2、检测用户输入的邮件格式是否正确。(答案)3、用户进入时,显示“欢迎您进入本网站!”;离开时,显示“谢谢您,欢迎下次再来!”。答案:,71,JavaScript对象及其层次关系,Window,Frame,Document,Location,History,Plugin,Anchor,Applet,Area,Form,Ima

30、ge,Link,Layer,CheckBox,Radio,Submit,Hidden,Passward,FileUpload,Text,Textarea,Select,Reset,Button,Option,72,1.功能:顶层对象,用来表示浏览器所打开的窗口。2.格式 指定窗口:窗口名.属性 窗口名.方法(参数群)打开当前窗口的窗口:opener.属性 opener.方法(参数群)框架中的顶级窗口:top.属性 top.方法(参数群)当前活动窗口:self.属性 self.方法(参数群)例如:win1.document.title=“广告窗口”self.close()opener.docum

31、ent.forms0.user.value=“张永”,窗口对象(WINDOW),73,3.属性name 窗口的名字。closed 判断窗口是否已经被关闭,返回布尔值。document 包含当前文档的信息,(该属性本身是对象)history 当前窗口最近浏览过的网页(该属性本身是对象)。location 窗口所显示文档的完整URL(该属性本身是对象)frames 窗口的框架对象数组,以数组索引值表示,(该属性本身也是一个对象)。length 窗口内的框架个数。opener 代表使用open打开当前窗口的脚本所在的窗口。self 代表当前窗口。top 代表当前框架的最顶层窗口。,窗口对象(WIND

32、OW),74,4.方法open(URL,窗口名称,窗口规格)打开一个新窗口URL:1,2,3窗口名称:name _top/_blank窗口规格:*P112 表4-4例:NewWin=open(,_blank,height=100,width=300);,注意:引用时不需声称 new,75,3.属性(规格参数)defaultStatus 缺省的状态栏信息。status 状态栏中的信息。scrollbars 浏览器的滚动条(包括水平和垂直滚动条)。toolbar 浏览器的工具栏。menubar 浏览器的菜单栏。locationbar 浏览器的地址栏。innerHeight 窗口内容区的高度(以像素

33、表示)。innerWidth 窗口内容区的宽度(以像素表示)。outerHeight 窗口边界的高度(以像素表示)。outerWidth 窗口边界的宽度(以像素表示)。pageXOffset 网页x-position的位置(以像素表示)。pageYOffset 网页y-position的位置(以像素表示)。,窗口对象(WINDOW),p112,76,window document.write(网络技术学习网);window.document.write(网络技术学习网);var NewWin=open(WINDOW21.htm,MyWindow,height=100,width=300);va

34、r NewWin=window.open(WINDOW21.htm,MyWindow,height=100,width=300);NewWin.document.write(Open Window Name is:+NewWin.name+);,open(URL,窗口名称,窗口规格),举例,77,4.方法open(URL,窗口名称,窗口规格)打开一个新窗口。close()关闭窗口。MoveBy(水平点数,垂直点数)MoveTo(x,y)将窗口移动至(x,y)坐标处,参数 取绝对值。ResizeBy(水平点数,垂直点数)调整窗口大小,参数 取相对值。负值为减小。ResizeTo(宽度,高度)se

35、tTimeout(,毫秒数)等待一段 指定的毫秒数时间,然后运行指令。clearTimeout(定时器对象)清除 setTimeout定义的 计时程序。,窗口对象(WINDOW),78,4.方法setInterval(,毫秒数)设置一个定时程序。clearInterval(定时器对象)清除 setInterval定义的计时器focus()将焦点移到此窗口。blur()把焦点从指定窗口移开。home()进入客户端在浏览器上设置的主页。stop()停止加载网页内容。back()返回历史记录的上一个网页。forward()加载历史记录的下一个网页。,窗口对象(WINDOW),79,4.方法alert

36、(字符串)传送警告信息对话框。confirm(字符串)打开一个Confirm对话框,用户可以选择 OK或Cancel,如果用户单击OK,该方法返回 true,单击Cancel返回false。prompt(“字符串”,默认值)打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回 到脚本。,窗口对象(WINDOW),80,5.事件 onFocus onBlur onError onLoad onUnload onDragDrop onMove onResize,窗口对象(WINDOW),81,6.举例例1:改变窗口的大小实例例2:打开窗口例3:页面下落效果例4:Prompt方法实例

37、例5:setInterval实例例6:setTimeout实例例7:WINDOW对象综合实例,窗口对象(WINDOW),82,单击“来者何人”,打开一200*100的窗口。打开网页时,自动打开一300*100的窗口。,83,1.功能 它为window对象的一个属性,用来存储客户端最近访问过的网页清单。2.格式history.属性history.方法(参数)3.属性length 存储在记录清单中的网页数目。current 当前的网页地址。next 下一个历史记录的网页地址。previous 上一个历史记录的网页地址。,历史对象(HISTORY),84,4.方法Back()回到客户端查看过的上一页

38、。Forward()回到客户端查看过的下一页。Go(整数或URL字符串)前往历史记录中的某个网页5.举例例:history对象实例,历史对象(HISTORY),继续,85,历史对象(HISTORY),history.back(),history.forward(),history.go(),86,1.功能 代表特定窗口的URL信息。一个完整的URL格式如下:protocol/host:port/path#hash?search protocol:通信协议 http host:主机名称 port:通信端口 path:文件路径 hash:定位锚点 search:查询信息,位置对象(LOCATION

39、),87,2.语法 location.属性 location.方法(参数)3.属性 hash URL中定位锚点名称。host URL中主机名部分。hostname URL中host:port部分。href 完整的URL字符串。pathname URL中path部分。port URL的端口port部分。protocol URL的通信协议。search 以问号(?)开始的URL中的一部分,用于 指定搜索信息。,位置对象(LOCATION),88,4.方法reload()重新加载(刷新)当前的网页。replace(网址)用特定的网页取代当前的网页。5.举例(用普通文字实现超链接)(用A标记字实现超链

40、接),位置对象(LOCATION),例1:用普通文字实现超链接的范例,89,document.title=自动打开网页范例;var sec=5;function countDown()if(sec 0)num.innerHTML=sec-;else location.href=“http:/”;,例2:自动打开网页范例,90,五秒钟后自动带你前往 中山大学网页 http:/5,例2:自动打开网页范例,91,每一个框架对象相当于窗口(WINDOW)对象,因此框架对象可以使用窗口对象的所有属性和方法。,框架对象(FRAME),1.框架组的结构,2.框架组的层次,92,3.框架的引用top.left

41、Frametop.upFrametop.downFrame或top.frames0top.frames1top.frames24.举例,框架对象(FRAME),93,文件对象(Document)代表当前的HTML对象,是由标记组构成的,JavaScript自动为每一个HTML文件建立一个document对象,用来显示HTML文件。,文档对象(DOCUMENT),94,1.语法 document.属性 document.方法2.属性 title 文档的标题()。links 文件中的所有链接,以数组索引值表示。linkColor 文档的链接的颜色,即标记中 的LINK属性。alinkColor 活

42、动链接的颜色(ALINK)。vlinkColor 指向已点击过的超链接文本颜色,即 标记的VLINK特性 bgColor 文档的背景颜色(BGCOLOR)。fgColor 文档中文本颜色(中的TEXT特性),文档对象(DOCUMENT),95,2.属性 forms 文件中的所有表单,以数组索引值表示。images 文档中所有image,以数组索引值表示。lastModified 文档最后的修改日期。anchors 文档中所有锚点,以数组索引值表示。cookie 存储于cookie.txt文件内的一段信息,它是该 文档对象的一个属性 URL 表示该文件的网址。,文档对象(DOCUMENT),96

43、,3.方法 write(“字符串”)将字符串或数值写到文件中。4.事件onClick、onDblClick、onKeyDown、onKeyPress、onKeyUp、onMouseOver、onMouseUp 5.举例例1:测试文件对象的颜色属性 例2:网页修改日期时间,文档对象(DOCUMENT),97,当文档中包含标记时,JavaScript自动建立相对应的锚点对象。这些对象可以用document的anchors属性,搭配数组的索引方式来进行访问控制。例如:第一个锚点对象:document.anchors 0 第二个锚点对象:document.anchors 1,锚点对象(ANCHORS)

44、,98,1.语法document.锚点名.属性document.锚点名.方法或document.anchors.属性 document.anchors.方法2.属性name 表示锚点的名称。,锚点对象(ANCHORS),99,无论是文字、图形或图像映射,只要是用来作为超级链接用的对象,JavaScript自动建立相对应的链接对象。这些对象可以用document的links属性,搭配数组的索引方式来进行访问控制。例如:第一个链接对象:document.links0 第二个链接对象:document.links1,链接对象(LINKS),100,1.语法document.链接名.属性 docume

45、nt.链接名.方法 或document.links.属性 document.links.方法2.属性hash 表示URL字符串中锚点的名称。host 表示主机域名或IP地址。hostname 表示URL当中的host与port的部分。href 完整的URL字符串。pathname 表示URL当中的目录路径(path)部分。,链接对象(LINKS),101,2.属性port 表示URL当中的通信端口(port)部分。protocol 表示URL当中的通信协议部分search 表示URL当中的查询字符串部分。target 代表目标的窗口,即HTML中的TARGET属性text 表示A标记中的文字。

46、Length 其返回值为当前文档中超级链接的数目3.事件onClick、onDblClick、onKeyDown、onKeyPress、onKeyUp、onMouseOver、onMouseUp、onMouseOut、onMouseDown4.举例,链接对象(LINKS),102,当文件中包含标记时,JavaScript自动建立相对应的图像对象。这些对象可以用document的images属性,搭配数组的索引方式来进行访问控制。例如:第一个图像对象:document.images 0 第二个图像对象:document.images 1,图像对象(IMAGES),103,2.属性 src 图像的

47、URL,SRC属性。border 图像的边框,标记的BORDER属性。width 图像的宽度,WIDTH属性。height 图像的高度,HEIGHT属性。hspace 图像水平空白,HSPACE属性。vspace 图像垂直空白,VSPACE属性。lowsrc 图像的第分辨率版本,LOWSRC属性。complete 表示浏览器是否完成了图像的加载,一个布尔值。3.事件:onAbort、onError、onLoad、onKeyDown、onKeyPress、onKeyUp,图像对象(IMAGES),104,表单对象(Form)提供一个让客户端输入文字或进行选择的功能,例如:单选按钮、复选框、选择列

48、表等。由标记组构成,JavaScript自动建立一个表单对象,并将用户端的信息送至服务器进行处理。表单对象是文件对象(document)的子对象,同时,它也包含许多子对象。,表单对象(FORM),105,1.表单对象的使用格式document.forms索引值.属性 document.forms索引值.方法(参数群)或document.表单名称.属性document.表单名称.方法(参数群)2.常用属性 name:表单名,相当于标记的name属性action:相当于标记的ACTION属性。method:输入窗体的数据传送到服务器上的方式,即(FORM)标记中的METHOD属性。,表单对象(FO

49、RM),106,2.常用属性 elements:表单中的所有控件,以数组索引值 表示。length:表单中的控件的个数。例:document.forms索引值.elements索引值.属性3.常用方法 submit()提交表单(与submit按钮的作用相同)。reset()重写表单(与使用reset按钮的作用相同)。,表单对象(FORM),107,2.常用属性 Text:单行文本。Password:密码对象。Checkbox:复选框。Radio:单选按钮。Submit:提交按钮。Reset:复位按钮。Button:按钮。Textarea:多行文本。Select:选择框。Option:选项对象。

50、注意:表单域属性同时也是对象,表单域对象(FORM),108,当JavaScript读到标记中的type属性值为text时,自动建立一个文本按钮对象,并将该对象放到表单对象的elements数组当中,让程序员可以通过一定的方法来控制这一对象。1.使用文本对象的格式document.forms索引值.elements索引值.属性document.forms索引值.elements索引值.方法(参数群)或document.表单名称.文本对象名称.属性document.表单名称.文本对象名称.方法(参数群),单行文本对象(text),109,2.常用属性name:text对象的名字defaultVa

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 建筑/施工/环境 > 项目建议


备案号:宁ICP备20000045号-2

经营许可证:宁B2-20210002

宁公网安备 64010402000987号