JavaScript中的浏览器对象.ppt

1、1,JavaScript中的浏览器对象,2,通用浏览器对象,浏览器是用于显示 HTML 文档内容的应用程序 浏览器还公开了一些可在脚本中访问和使用的对象。,3,文档对象模型,最低公用标准的文档对象层次,4,Window 对象,Window 对象表示浏览器的窗口，可用于检索有关窗口状态的信息。 属性 document event history location name screen 方法 alert blur close focus navigate open,window.open(),参数设置 含义 toolbarYes/no 建立或不建立标准工具条 locationYes/no 建立或

2、不建立位置输入字段 directionsYes/no 建立或不建立标准目录按钮 statusYes/no 建立或不建立状态条 menubarYes/no 建立或不建立菜单条 scrollbar Yes/no 建立或不建立滚动条 revisable Yes/no 能否改变窗口大小 width yes/no 确定窗口的宽度 Height yes/no 确定窗口的高度,5,6,window.showModalDialog,window.showModalDialog-弹出模式对话框 var handle = window.showModalDialog(url, ,objects, feathers

3、); 关闭子窗口：window.close(); 从子窗体传参数给父窗体： window.returnValue = string; 获取打开当前showModalDialog对话框的窗口 window.opener,7,showModalDialog,dialogHeight ：对话框高度，不小于px， 中dialogHeight 和 dialogWidth 默认的单位是em， 而中是px，为方便其见， 在定义modal方式的对话框时，用px做单位。 dialogWidth：对话框宽度。 dialogLeft：距离桌面左的距离。 dialogTop：离桌面上的距离。 Center:yes |

4、 no | 1 | 0 ：窗口是否居中，默认yes，但仍可以指定高度和宽度。 help: yes | no | 1 | 0 ：是否显示帮助按钮，默认yes。 resizable: yes | no | 1 | 0 ：是否可被改变大小。默认no。 status: yes | no | 1 | 0 IE5+：是否显示状态栏。默认为yes Modeless 或noModal。 scroll: yes | no | 1 | 0 | on | off ：指明对话框是否显示滚动条。默认为yes。 还有几个属性是用在HTA中的，在一般的网页中一般不使用。 dialogHide: yes | no | 1 |

5、 0 | on | off ：在打印或者打印预览时对话框是否隐藏。 默认为no。 edge: sunken | raised ：指明对话框的边框样式。默认为raised。 unadorned: yes | no | 1 | 0 | on | off ：默认为no。,8,window.showModalDialog,Objects参数 在弹出窗口中使用 window.dialogArguments 对象（即主窗口传递过来的 window 对象集），即可以获得或者设置主窗口的值。 Ex: var dialogArg = window.dialogArguments; if(dialogArg.le

6、ngth 1) for(i = 0; i ,9,Document 对象,Document 对象表示给定浏览器窗口中的 HTML 文档，用于检索有关该文档的信息。 属性 alinkColor bgColor body fgColor linkColor location title URL vlinkColor 方法 clear close open write writeln,10,History对象,此对象提供客户最近访问过的 URL 列表。 方法 back forward go,11,Location 对象,此对象包含有关当前 URL 的信息，它提供了重新加载窗口的当前 URL 的方法。

7、属性 hash host hostname href 方法 assign reload replace,12,事件对象概念,事件可以由用户生成，也可以由系统生成 每个事件都有与之相关联的Event对象 Event 对象提供下列信息： 事件类型 事件发生时光标的位置 Event 对象可以用作事件处理程序的一部分,13,事件的生命周期,事件的生命周期通常包含下列阶段： 与发生的事件相关联的用户操作或条件 立即更新 Event 对象以反映事件的状态 触发事件 调用相关联的事件处理程序 事件处理程序执行其操作并返回,14,JavaScript事件,onClick -单击事件 onChange - 值改

8、变事件 onFocus - 获取焦点 onBlur - 失去焦点 onMouseOver-鼠标移动 onMouseOut -鼠标离开 onLoad -加载事件 onSubmit -提交事件 onMouseDown - 鼠标按下 onMouseUp-鼠标弹起,15,onClick事件示例, 请输入表达式： 结果： ,16,onChange事件示例, function checkNum(num) if (num = ) alert(请输入一个数字值); return false; if (isNaN (num) alert(请输入一个数字值); return false; else alert (

9、谢谢！); 请输入一个数字： ,17,onFocus/onBlur事件示例, ,18,onMouseOver/onMouseOut事件示例, var num =0; function showLink(num) if (num=1) document.forms0.elements0.value= 您选择了baidu; if (num=2) document.forms0.elements0.value = 您选择了163; if (num=3) document.forms0.elements0.value = 您选择了sina; baidu 163 sina ,19,onLoad事件示例,

10、 您好 function hello() alert(您好); ,20,onMouseDown/onMouseUp事件示例, ,21,onResize事件示例, window.onresize= notify; function notify() alert(窗口大小调整完毕！); 请调整窗口的大小。 ,22,处理事件,为响应事件而执行的JavaScript代码段称为事件处理程序 事件处理程序分为： HTML 标记事件处理程序 以属性的形式出现的事件处理程序 object.eventhandler = function;,23,HTML 标记事件处理程序示例, 我的主页 ,24,以属性的形式出现的事件处理程序示例, 我的主页 ,25,JavaScript-获取事件信息,JavaScript中： window.event或event对象获取事件信息 调用其keyCode获取按键的键位号 event.keyCode - 返回对应键位的值 event.shiftKey - 如果触动了shift键则返回true event.ctrlKey - 如果触动了ctrl键则返回true event.altKey - 如果触动了alt键则返回true 可以进行一些键位的屏蔽,26,JavaScript调用正则表达式,正则表达式与JavaScript