第1节.概述
#JavaScript#JavaScript总是与浏览器和Html打交道,有一套专门用于操作浏览器相关对象的模型,称为浏览器对象模型,简称为BOM。主要用来对浏览器进行相关的操作,有了BOM,才使JavaScript可以控制浏览器的属性,例如:打开窗口、关闭窗口,弹出提示框等等。
JavaScript深入编程-从0基础到深入学习线上.NET培训课程淘宝¥18购买已下架虽然说现在没有对浏览器对象有一个正式的标准来规定,但是这些对象早已成为JavaScript开发者使用的标准,且大部分主流浏览器都支持。
第2节.常用方法和属性
在浏览器中,除了我们用户以可视化的方式操作浏览器之外,各大浏览器还提供了以对象模型的方式让开发者也能操作浏览器。如浏览器的“后退”功能,除了可以使用鼠标点击实现之外,还可以使用BOM实现。
对于学习JavaScript开发者来说,最常用的与浏览器交互的就是弹出警告框和确认框。
一、alert()方法:
使用window.alert()方法可以实现在编写JavaScript代码中,如果出现了一些验证错误,则可以弹出一个警告框,告诉用户哪里出错了,下一步该如何操作等。
当文本框的值是空时,则验证失败,如果不为空时,则验证成功。单击按钮后弹出的这个对话框就是警告框,属于浏览器的一部分。
使用警告框的JavaScript代码如下:
!DOCTYPEhtmlhtmlheadmetacharset=utf-8/title一都编程,每个知识就是一个案例。/titlescripttype=text/javascriptfunctionvalid(){varname=document.getElementById(txtName);if(name.value!=){window.alert(验证成功。);}else{window.alert(验证失败。);}}/script/headbodydivinputtype=textid=txtName/inputtype=buttonvalue=验证onclick=valid()//div/body/html
二、confirm()方法
浏览器对象模型中的confirm()方法是确认框,当确认框出现后,需要用户做一下选择,是“确认”还是“取消”,在没有选择之前,整个页面处于不可用状态,只有选择之后才可进行下一步操作。
confirm()方法会返回一个bool类型的值,当点击“确认”按钮后返回true,点击“取消”按钮返回false。
使用Window.confirm()的JavaScript代码如下:
!DOCTYPEhtmlhtmlheadmetacharset=utf-8/title/titlescripttype=text/javascriptvarb=confirm(是否确认?);if(b){document.write(您单击了确认按钮。);}else{document.write(您单击了取消按钮。);}/script/head/html
由于该代码是放在了head标记中,一运行此代码,就会弹出一个确认框:
这就是一个确认框,只有一行文本信息和2个按钮,现在点击一下“确认”按钮。
此时,单击过“确认”按钮后,给出一个正确的反馈,这样就实现了开发者与用户之间的沟通,用户选择后,在JavaScript代码中就会有不同的反馈,从而做出正确的操作。
三、全局变量和全局函数
在JavaScript中,能够对浏览器整体设置的属性称为全局属性。而可以实现整个浏览器的功能的称为全局方法。
在这里定义的变量x,就是全局变量,该变量将成为window对象的属性,也就是说会自动存放全局的属性当中。调用时,就像调用浏览器自带的全局属性一样使用,通过window对象,打上圆点后就会出现刚才定义的全局变量的名称,使用起来非常方便。
此时,定义的全局函数f1()成为了window对象的方法。该方法是全局的,在当前整个浏览器中都是可以使用的,全自动进入到全局列表中。
第3节.Window尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于浏览器的窗口尺寸,也是可以使用BOM操作的,这里说的Window尺寸,是不包含工具栏及滚动条的,只包含供查看、显示内容的区域,也称为工作区。
(1).Window.innerHeight:表示浏览器窗口工作区的高度。
(2).window.innerWidth:表示浏览器窗口工作区的宽度。
JavaScript操作浏览器窗口高度和宽度的代码如下:scripttype=text/javascriptdocument.write(浏览器工作区高度:+window.innerHeight);document.write(浏览器工作区宽度:+window.innerWidth);/script
第4节.其它window方法
(1).window.open():打开新窗口。
scripttype=text/javascriptfunctionopenWin(){window.open(HtmlPage1.html);}/script
(2).window.close():关闭当前窗口。
functioncloseWin(){window.close();}
(3).window.moveTo():移动窗口。
scripttype=text/javascriptvarw;functionopenWindow(){w=window.open(HtmlPage1.html,,width=,height=);}functionmoveWindow(){w.moveTo(,);}/script
moveTo()方法可把窗口的左上角移动到一个指定的坐标。
(4).window.resizeTo():调整窗口的尺寸。
scripttype=text/javascriptvarw;functionopenWindow(){w=window.open(HtmlPage1.html,,width=,height=);}functionmoveWindow(){w.moveTo(,);}functionresizeWindow(){w.resizeTo(,);}/script
resizeTo()把窗口大小调整为指定的宽度和高度。对于Window对象的属性和方法比较多,使用时,只需要在window下打点就能调出相关的属性和方法列表,在其中选择使用即可,使用方法都比较简单。
对于JavaScritp开发者来说,需要大家不断的去学习,不断的尝试,将尝试成功的结果记录下来,只有不停的研究和沉淀知识,才能在不久的未来,成为一名开发高手。