




免费预览已结束,剩余89页可下载查看
下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
javascript(二),杨 涛,浏览器对象简介,浏览器对象的分层结构,window 对象表示一个浏览器窗口或一个框架。在客户端 javascript 中,window 对象是全局对象,所有的表达式都在当前的环境中计算。也就是说,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来使用。例如,可以只写 document,而不必写 window.document。 同样,可以把当前窗口对象的方法当作函数来使用,如只写 alert(),而不必写 window.alert(). 除了上面列出的属性和方法,window 对象还实现了核心 javascript 所定义的所有全局属性和方法。 window 对象的 window 属性和 self属性引用的都是它自己。当你想明确地引用当前窗口,而不仅仅是隐式地引用它时,可以使用这两个属性。除了这两个属性之外,parent 属性、top 属性以及 frame 数组都引用了与当前 window 对象相关的其他 window 对象。,window 对象简介,window 对象表示浏览器中打开的窗口。 如果文档包含框架(frame 或 iframe 标签),浏览器会为 html 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。,window 对象集合frames,frames,window 对象常用属性,window 对象常用方法,open(”打开窗口的url”,”窗口名”,”窗口特征”) 窗口的特征如下,可以任意组合: height: 窗口高度; width: 窗口宽度; top: 窗口距离屏幕上方的象素值; left:窗口距离屏幕左侧的象素值; toolbar: 是否显示工具栏,yes为显示; menubar,scrollbars 表示菜单栏和滚动栏。 resizable: 是否允许改变窗口大小,yes或1为允许 location: 是否显示地址栏,yes或1为允许 status:是否显示状态栏内的信息,yes或1为允许;,window 对象open方法,我们需要预先制作好广告页面,假设为adv.htm,打开广告窗口的语句如下 : open(“adv.htm”, “”, “toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=650, height=150”);,window 对象open方法, function openwindow( ) open(“adv.htm“, “, “toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=650, height=150“); 看看和我一起打开的广告窗口 ,使用 open 方法 打开广告新窗口,添加页面加载事件,window 对象open方法,示例,open,document 对象,集合,document集合,document 对象,属性,document属性,document 对象,方法,document方法,document 对象, 无标题文档 function change(color) document.bgcolor=color ; 移过来我变色给你看看! 变红色| 变蓝色| 变黄色 ,利用document对象的bgcolor属性改变背景色,添加鼠标悬停事件,document对象,history对象属性, alert(history.length); ,返回结果为数字:类似1等,history对象方法,back ( ) 方法相当于后退按钮 forward ( ) 方法相当于前进按钮 go (1)代表前进1页,等价于forward( )方法; go(-1) 代表后退1页,等价于back( )方法;,location对象,属性,方法,location对象,history 对象和location 对象,history和location对象,history 和location 对象, function jump ( ) location.href=document.myform.menu1.value; . -请选择季节景色- 春天美景 夏天一色 ,根据用户的选择, 修改跳转的网址,添加选项改变事件,navigator 对象,navigator对象描述: navigator 对象包含有关浏览器的信息。 navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。 虽然这个对象的名称显而易见的是 netscape 的 navigator 浏览器,但其他实现了 javascript 的浏览器也支持这个对象。 navigator 对象的实例是唯一的,可以用 window 对象的 navigator 属性来引用它。,navigator 对象,集合,navigator 对象包含有关浏览器的信息。 navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。 虽然这个对象的名称显而易见的是 netscape 的 navigator 浏览器,但其他实现了 javascript 的浏览器也支持这个对象。 navigator 对象的实例是唯一的,可以用 window 对象的 navigator 属性来引用它。,navigator 对象,属性,navigator 对象,属性,navigator 对象,方法,screen 对象,screen 对象描述 每个 window 对象的 screen 属性都引用一个 screen 对象。screen 对象中存放着有关显示浏览器屏幕的信息。javascript 程序将利用这些信息来优化它们的输出,以达到用户的显示要求。例如,一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像,它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外,javascript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。,screen 对象,事件句柄、事件、事件函数,事件句柄: 事件句柄(又称事件处理函数),是指事件发生时要进行的操作。每一个事件均对应一个事件句柄,在程序执行时,将相应的函数或语句指定给事件句柄,则在该事件发生时,浏览器便执行指定的函数或语句,从而实现网页内容与用户操作的交互。当浏览器检测到某事件发生时,便查找该事件对应的事件句柄有没有被赋值,如果有,则执行该事件句柄 1.被当作标签的属性 如: 2.可以看作给这个标签加上一个监听器 3.事件句柄以on开头,后面单词首字母大写,事件 1.好比j2se的事件 2.一个事件句柄对应一个事件 如:onclickclick 当一个事件源发出一个click事件的时候,onclick这个事件句柄就会作出相应的响应 事件全都小写,事件句柄、事件、事件函数,事件函数 指事件响应方法,事件句柄、事件、事件函数,event 对象,event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用,函数不会在事件发生前被执行!,javascript 事件(event事件句柄) 一,javascript 事件(event事件句柄) 二, function myfun1( ) if (document.myform.card.value=“请注意格式:10xxxxxx“) document.myform.card.value=“ ; function myfun2( ) var a=document.myform.card.value; if (a.substr(0,2)!=“10“ | isnan(a) alert(“格式错误,请重新输入“) ; document.myform.card.focus(); ,onfocus和onblur 事件-1,文本框获得鼠标焦点时(onfocus)调用的函数: 清空卡号文本框,文本框失去鼠标焦点时(onblur)调用的函数: 判断格式是否正确,focus( )方法 再次获得焦点,即鼠标 光标回到卡号文本框, 卡号: 密码: ,onfocus和onblur 事件-2,表单元素样式,添加事件处理,onmouseover和onmousedown事件, 图片切换 低价转让哈士奇弟弟 移过来看看俺啊 ,添加事件处理 : 切换图片,onmouseover=“src=dog2.jpg“ 表示本图片的图片名称替换为dog2.jpg。 请注意: 由于外面两端已有双引号,为区别起见,dog2.jpg改用为单引号括起来。,mouseover和mousedown事件,event属性(鼠标/键盘属性),标准event属性,标准event方法,event常用属性和方法.html,为一个事件注册监听函数的方法,传统的方法(只能注册一个监听函数): object.onclick = function( ) ; 下面两种方法能注册多个监听函数 ie中的方法: object.attachevent(“nameofevent”,fnhandler); 注意:nameofevent事件需加on 如:onclick dom中的方法(火孤): object.addeventlistener(“nameofevent”,fnhandler,bcapture); 注意:nameofevent事件不需加on 如:click,事件对象的获取,ie中,事件对象是window对象的属性event,事件处理函数可以按如下方式访问事件对象: text3.onclick = function () var oevent = window.event ; dom标准中,event对象是作为唯一的参数传递给事件处理函数; text3.onclick = function () var oevent=arguments0 ; text3.onclick = function (oevent) alert(oevent) ; ,事件对象的属性和方法,问题:ie和dom标准不太一样! 两者相似的地方: 1、获取事件的类型 var stype=oevent.type ; 2、在键盘事件发射时,获取按键代码(keydown/keyup事件) ie: var ikeycode = oevent.keycode ; dom: var icharcode = oevent.charcode ; 3、获取事件源 ie:var otarget = oevent.srcelement ; dom:var otarget = oevent.target ;,事件对象的属性和方法,4、获取客户端坐标 在鼠标相关的事件中,可以用clientx和clienty属性获取鼠标指针在客户端的位置 var iclientx = oevent.clientx ; var iclienty = oevent.clienty ;,anchor对象,anchor 对象表示 html 超链接。 在 html 文档中 标签每出现一次,就会创建 anchor 对象。 锚可用于创建指向另一个文档的链接(通过 href 属性),或者创建文档内的书签(通过 name 属性)。 您可以通过搜索 document 对象中的 anchors 数组来访问锚,或者使用 document.getelementbyid()。,anchor对象方法,anchor对象方法,事件处理程序和表单元素简介,当事件发生时,将执行与之相关的 javascript 代码,当发生特定事件时,事件处理程序指定要执行哪些 javascript 代码,事件处理程序和表单元素简介 2-2,当用户单击“注册”按钮时,将弹出一条消息。, function button_click() alert(“请向本网站注册); ,form 对象,form 对象代表一个 html 表单。 在 html 文档中 每出现一次,form 对象就会被创建。每个form对象内部都含有elements 集合,集合,form 对象标准属性,form 对象方法,命令按钮对象,命令按钮对象是网页中最常用的元素之一,“按钮 - 事件处理程序,onsubmit事件处理代码: 如果函数返回true,则向远程服务器提交表单; 如果函数返回false,则取消提交。,提交表单,在form中的onsubmit事件经常被用来在提交数据之前进行检查,如果return fasle则不提交数据给服务器了。 如果是在button中使用onclick=“this.form.submit()”则提交数据,但是不会出发onsubmit事件,文本框对象 事件处理程序,文本框对象,card,price,number,tot,myform,文本框对象 - onchange 事件处理程序, function cleartext( ) if (document.myform.card.value=“输入您的会员帐号“) document.myform.card.value=“ ; function check( ) var a=document.myform.card.value; if (a.substr(0,2)!=“10“ | isnan(a) alert(“格式错误,请重新输入“) ; document.myform.card.focus( ); document.myform.card.select( ); function compute( ) var price= document.myform.price.value; var number= document.myform.number.value ; document.myform.tot.value= price*number; ,onfocus事件调用的函数cleartext()清空帐号文本框中的内容,onblur事件调用的函数check()检查输入的帐号是否是“10”打头,并且是数字,onchange事件调用的函数compute( )用来计算总价,下拉列表框, -请选择开户帐号的城市- 北京市 上海市 重庆市 天津市 四川省 山东省 湖北省 ,下拉列表框-事件和属性,options0,options1,selectedindex属性: 表示被选中的索引号:3,value属性:被选中选项的值,复选框对象,当用户需要在选项列表中选择多项时,可以使用复选框对象 要创建复选框对象,请使用 标签,请选择您的爱好 电影 电影,复选框 - 事件处理程序,复选框 - 事件处理程序,checkbox1,checkbox2,checkbox3,设置复选框的值,checkbox4,myform,复选框 - 事件处理程序, function buy( ) var s=“; if (document.myform.checkbox1.checked=true) /如果被选中 s=s+document.myform.checkbox1.value+“n”; /累计选中的商品 if (document.myform.checkbox2.checked=true) s=s+document.myform.checkbox2.value+“n“; if (document.myform.checkbox3.checked=true) s=s+document.myform.checkbox3.value+“n“; if (document.myform.checkbox4.checked=true) s=s+document.myform.checkbox4.value+“n“; / if(confirm(“您定购了以下物品,确定吗?:n“+s)=true) document.write(“您定购了以下物品:“+s+“); ,单击”成交“按钮调用的函数: 检查每个复选框的选中情况,累计用户选中的商品,是为了原样显示字符串中的换行”n”格式, “ onclick=“buy( )“ ,复选框 - 事件处理程序, function buy( ) var s=“; for (var i=0;i“+s+“); /其他代码略 /其他代码略,2.使用数组和for循环大大简化代码,1.修改每个复选框的名称都为mybox,使这4个复选框构成一个数组mybox,单选按钮对象,当用户只需要从选项列表中选择一个选项时,可以使用单选按钮对象 要创建单选按钮对象,请使用 标签,男 女,单选按钮 - 事件和属性,单选按钮-事件处理程序,为了保证单选,两个单选按钮的名称都为myradio,组成了myradio数组,单选按钮事件处理程序, function buy( ) var s=“; for (var i=0;i“+s+“); else if (confirm(“您准备卖出下物品,确定吗?:n“+s)=true) document.write(“您卖出了以下物品:“+s+“); ,根据用户是买家还是卖家,弹出不同的确认信息框,判断是否选中第一个单选按钮(买家),表单验证 2-1,javascript 最常见的用法之一就是验证表单 对于检查用户输入是否存在错误和是否疏漏了必选项,javascript 是一种十分便捷的方法,表单验证 2-2, function validate( ) var f=document.reg_form; if(f.uname.value=“) alert(“请输入姓名“); f.uname.focus(); return false; if (f.gender0.checked=false ,检查姓名,检查性别,检查密码,表单验证 2-2,q=f.email.value.indexof(“); if (q=-1) alert(“请输入有效的电子邮件地址“); f.email.focus(); return false; if (f.age.value 99 | isnan(f.age.value) alert(“请输入有效的年龄!“); f.age.focus(); return false; ,检查邮件地址,检查年龄,html dom对象,javascript使用两种对象模型:bom和dom; bom(browser object model,浏览器对象模型); bom模型通常通过window对象去访问,也许该模型被称为窗口对象模型更合适 html dom (document object model, 文档对象模型) 是w3c的一个标准 html dom为html定义了一系列标准的对象, 以及访问和操作html文档的标准方法 所有的html元素以及它们的文本和属性都可以通过dom访问. 元素的内容可以被修改或删除, 新的元素可以被创建. html dom是平台和语言无关的, 因此它可以被任何的程序设计语言使用, 如: java, javascript, 和 vbscript.,html文档,实例的家谱树,dom中的document,javascript中大部分的dom处理过程都是从document开始。,dom example,节点,每个独立的元素、容器或文本块被称为一个节点。当一个容器包含另一个容器时,对应的节点之间有父子关系;dom中定义了6中节点,所有支持w3c dom的浏览器都实现了前三种节点。,重要的方法,getelementbyid() getelementsbytagname() getattribute() setattribute(),最重要的几个方法,文档对象的属性,dom示例1.html,document.all,html文档在载入时每个元素都被标注成一个节点,并被分配了一个编号,可以使用document.all数组进行访问; 非标准的dom方法,ie中支持,dom示例2.html,dom中的节点处理方法,dom示例4.html,dom示例5.html,table 对象,table 对象代表一个 html 表格。 在 html 文档中 标签每出现一次,一个 table 对象就会被创建。,集合,table 对象属性,table 对象方法,操纵css的属性,dom/styleexample.htm,dom操纵css的属性,getpropertyvalue(propertyname):返回css特性propertyname的字符串 item(index):返回在给定索引index处的css的特性的名称。 removeproperty(propertyname):从css中删除propertyname的定义 setproperty(propertyname,value,priority):设置css特性,dom/styleexample2.htm,dom/tooltipexample.htm,可折叠区域,要点: css的display默认为block,但把它设置为none,则元素从页面流中移除。,collapsiblesectionexample.htm,java,php,java,php,ruby,页舌练习,innertext和innerhtml,使用dom在中插入文本,变成new text for div odiv.appendchild(document.createtextnode(“new text for div”) ; 使用innertext,则: odiv.innertext = “new text for div” ; 问题? 使用dom在中插入html代码,变成helloworld,innertextexample.htm,var ostring = document.createelement(“strong”) ; ostring.appendchild(document.createtextnode(“hello”) ; var oem = document.createelement(“em”) ; oem.appendchild(document.createte
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 阜阳界首市教师招聘考试真题2024
- 扁鹊考试题及答案
- 考试题及答案数学
- 切线考试题及答案
- 系统解剖学模拟练习题(含参考答案)
- 眼科基础知识模考试题与参考答案
- 高级养老护理员理论测试试题含答案
- 中学数学教学设计与案例分析知到智慧树答案
- 2025版三方公司环保设备更新借款合同
- 2025独家销售合同:智能家居系统区域独家代理协议
- 2025数字量化混凝土配合比设计标准
- 2025年四川省事业单位考试公共基础知识真题及答案解析
- 毒蛇咬伤病人院前急救要点
- 无痛胃镜检查护理配合
- 广东能源海洋渔业有限公司招聘笔试题库2025
- 《AHA2023心肺复苏与心血管急救指南》解读 2
- 高血压病与消化系统疾病的综合防治
- (零诊)成都市2023级(2026届)高三高中毕业班摸底测试语文试卷(含答案)
- 海鲜活动促销活动方案
- 管线施工协调管理方案及措施
- 电力系统风险评估模型-洞察阐释
评论
0/150
提交评论