JavaScript中的浏览器对象

1JavaScript中的浏览器对象2通用浏览器对象浏览器是用于显示HTML文档内容的应用程序浏览器还公开了一些可在脚本中访问和使用的对象。IE浏览器对象Netscape浏览器对象3文档对象模型最低公用标准的文档对象层次windowframeselftopparentdocumenthistorylocationlinkformanchortextselectradiobuttonresettextareacheckboxoptionsubmit4Window对象Window对象表示浏览器的窗口，可用于检索有关窗口状态的信息。属性–document–event–history–location–name–screen方法–alert–blur–close–focus–navigate–openwindow.open()参数设置含义toolbarYes/no建立或不建立标准工具条locationYes/no建立或不建立位置输入字段directionsYes/no建立或不建立标准目录按钮statusYes/no建立或不建立状态条menubarYes/no建立或不建立菜单条scrollbarYes/no建立或不建立滚动条revisableYes/no能否改变窗口大小widthyes/no确定窗口的宽度Heightyes/no确定窗口的高度56window.showModalDialogwindow.showModalDialog----弹出模式对话框–varhandle=window.showModalDialog(url,[,objects],feathers);–关闭子窗口：window.close();–从子窗体传参数给父窗体：window.returnValue=string;–获取打开当前showModalDialog对话框的窗口window.opener7showModalDialogdialogHeight：对话框高度，不小于１００px，ＩＥ４中dialogHeight和dialogWidth默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。dialogWidth：对话框宽度。dialogLeft：距离桌面左的距离。dialogTop：离桌面上的距离。Center:{yes|no|1|0}：窗口是否居中，默认yes，但仍可以指定高度和宽度。help:{yes|no|1|0}：是否显示帮助按钮，默认yes。resizable:{yes|no|1|0}［ＩＥ５＋］：是否可被改变大小。默认no。status:{yes|no|1|0}［IE5+］：是否显示状态栏。默认为yes[Modeless]或no[Modal]。scroll:{yes|no|1|0|on|off}：指明对话框是否显示滚动条。默认为yes。还有几个属性是用在HTA中的，在一般的网页中一般不使用。dialogHide:{yes|no|1|0|on|off}：在打印或者打印预览时对话框是否隐藏。默认为no。edge:{sunken|raised}：指明对话框的边框样式。默认为raised。unadorned:{yes|no|1|0|on|off}：默认为no。8window.showModalDialogObjects参数–在弹出窗口中使用window.dialogArguments对象（即主窗口传递过来的window对象集），即可以获得或者设置主窗口的值。Ex:–vardialogArg=window.dialogArguments;if(dialogArg.length1){for(i=0;idialogArg.length;i++){alert(dialog===+dialogArg[i]);}}else{alert(dialogArg);}–防止打开新窗口（如提交表单）：basetarget=_self9Document对象Document对象表示给定浏览器窗口中的HTML文档，用于检索有关该文档的信息。属性–alinkColor–bgColor–body–fgColor–linkColor–location–title–URL–vlinkColor方法–clear–close–open–write–writeln10History对象此对象提供客户最近访问过的URL列表。方法–back–forward–go11Location对象此对象包含有关当前URL的信息，它提供了重新加载窗口的当前URL的方法。属性–hash–host–hostname–href方法–assign–reload–replace12事件对象概念事件可以由用户生成，也可以由系统生成每个事件都有与之相关联的Event对象Event对象提供下列信息：–事件类型–事件发生时光标的位置Event对象可以用作事件处理程序的一部分13事件的生命周期事件的生命周期通常包含下列阶段：–与发生的事件相关联的用户操作或条件–立即更新Event对象以反映事件的状态–触发事件–调用相关联的事件处理程序–事件处理程序执行其操作并返回14JavaScript事件onClick---单击事件onChange---值改变事件onFocus---获取焦点onBlur---失去焦点onMouseOver---鼠标移动onMouseOut---鼠标离开onLoad---加载事件onSubmit---提交事件onMouseDown---鼠标按下onMouseUp---鼠标弹起15onClick事件示例HTMLHEADSCRIPTLANGUAGE=JavaScript!--functioncompute(form){if(confirm(“确定吗?”))form.result.value=eval(form.expr.value);elsealert(请重试。);}//--/SCRIPT/HEADBODYFORM请输入表达式：INPUTTYPE=textNAME=exprSIZE=15BRINPUTTYPE=buttonVALUE=计算ONCLICK=compute(this.form)BR结果：INPUTTYPE=textNAME=resultSIZE=15BR/FORM/BODY/HTML16onChange事件示例HTMLHEADSCRIPTLANGUAGE=JavaScriptfunctioncheckNum(num){if(num==){alert(请输入一个数字值);returnfalse;}if(isNaN(num)){alert(请输入一个数字值);returnfalse;}elsealert(谢谢！);}/SCRIPT/HEADBODYbgColor=whiteFORM请输入一个数字：INPUTtype=textsize=5onChange=checkNum(this.value)/FORM/BODY/HTML17onFocus/onBlur事件示例HTMLBODYBGCOLOR=lavenderFORMINPUTtype=textname=text1onblur=(document.bgColor='aqua')onfocus=(document.bgColor='dimgray')/FORM/BODY/HTML18onMouseOver/onMouseOut事件示例htmlheadscriptlanguage=javascriptvarnum=0;functionshowLink(num){if(num==1){document.forms[0].elements[0].value=您选择了baidu;}if(num==2){document.forms[0].elements[0].value=您选择了163;}if(num==3){document.forms[0].elements[0].value=您选择了sina;}}/script/headbodyforminputtype=textsize=60/formahref=#onMouseOver=showLink(1)baidu/abrahref=#onMouseOver=showLink(2)163/abrahref=#onMouseOver=showLink(3)sina/abr/body/html19onLoad事件示例HTMLHEADTITLE您好/TITLESCRIPTLANGUAGE=JavaScriptfunctionhello(){alert(您好);}/SCRIPT/HEADBODYonLoad=hello()/BODY/HTML20onMouseDown/onMouseUp事件示例HTMLBODYBGCOLOR=lavenderFORMINPUTtype=buttonname=text1value=改变颜色onmousedown=(document.bgColor='aqua')onmouseup=(document.bgColor='limegreen')/FORM/BODY/HTML21onResize事件示例htmlheadscriptlanguage=JavaScriptwindow.onresize=notify;functionnotify(){alert(窗口大小调整完毕！);}/script/headbody请调整窗口的大小。/body/html22处理事件为响应事件而执行的JavaScript代码段称为事件处理程序事件处理程序分为：–HTML标记事件处理程序TAGeventhandler=JavaScriptCode–以属性的形式出现的事件处理程序object.eventhandler=function;23HTML标记事件处理程序示例HTMLHEADTITLE我的主页/TITLESCRIPTLANGUAGE=JavaScript!--functiongreeting(){alert(欢迎您来做客);}--/SCRIPT/HEADBODYonLoad=greeting()/BODY/HTML24以属性的形式出现的事件处理程序示例HTMLHEADTITLE我的主页/TITLESCRIPTLANGUAGE=JavaScript!--functiongreeting(){alert(欢迎您来做客);}window.onload=greeting;//--/SCRIPT/HEAD/HTML25JavaScript---获取事件信息JavaScript中：window.event或event对象获取事件信息调用其keyCode获取按键的键位号event.keyCode----返回对应键位的值event.shiftKey----如果触动了shift键则返回trueevent.ctrlKey----如果触动了ctrl键则返回trueevent.altKey----如果触动了alt键则返回true可以进行一些键位的屏蔽26JavaScript调用正则表达式正则表达式与JavaScript一起使用主要是用来验证选项的输入内容–object.value.search(‘表达式’);–Ex:验证某电话号码的正确输入–/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(