(一)、BOM:Browser Object Model

BOM
window
打开关闭窗口
窗口大小和窗口位置
****定时器

(一)、BOM:Browser Object Model
  浏览器对象模型:用来访问和操作浏览器窗口,使JS有能力与浏览器交互。
    专门操作浏览器窗口的API——没有标准,有兼容性问题
  浏览器对象模型的主要对象
  window:代表整个窗口是BOM的根对象
    2个角色:1、代替global称为全局作用域对象
          2、封装所有DOM API 和BOM API
    以下为window的子对象
    1、history:封装当前窗口打开后,成功访问过的历史URL记录
    2、navigator:封装浏览器配置信息
    3、document:封装当前正在加载的网页内容
    4、location:封装了当前窗口正在打开的URL地址
    5、screen:封装了屏幕的信息
    6、event:定义了网页中的事件机制

一、window

1、window对象:
  1、window对象概述
  2、窗口与对话框
    i、窗口的打开与关闭
    II、窗口大小与定位
    III、对话框
  3、定时器
    I、定时器
    II、周期性定时器
    III、一次性定时器

2、窗口与对话框
  1、打开和关闭窗口
    打开窗口:var pop=window.open("url","name",config);

    1、在当前窗口打开新的链接,允许后退
      html:<a href="url"
      js:/*window.*/open("url","_self")
    2、在新窗口打开新链接,禁止后退
      html:做不到
      js: location.replace(url) 将url替换而不能后退
    3、在新窗口打开新链接,可重复打开多个
      HTML:<a href="url" target="_blank"
      js:open("url"/*,"_blank")
    4、在新窗口打开新链接,只能打开一个
      html:<a href="url" target="aname"
      js:open("url","aname" )
    5、关闭窗口
      close() //关闭当前窗口
      self.close() //关闭当前窗口
      xxWindow.close() //关闭指定窗口

      每个窗口在内存中都有一个name属性,
    (自己不要起变量名name),
      name属性是内存中唯一标识一个窗口的名称
    浏览器规定:相同name的窗口只能打开一个(4)
    后打开的会替换前先打开的
    何时指定name:
    a元素的target属性中写的就是新窗口的name属性
    open()方法的第二个参数,就是新窗口的name属性
    name属性可自定义,也可以使用预定义值:_blank _self..

  2、窗口大小和窗口位置
    1、窗口大小
    获取当前窗口大小:
      完整窗口大小:window.outerWidth/outerHeight
      文档显示区大小:window.innerWidth/innerHeight
      显示器的完整分辨率:screen.height/width
      显示器除了任务栏的分辨率:screen.availHeight/Width
    设置窗口大小:
      1、在打开窗口时:
        var pop=window.open("url","name",config);
        其中:config="left=?top=?width=?height=?" 表示

        文档显示区 的大小。
          返回值:返回弹出窗口的window对象
          比如:pop->就是小窗口的window
      2、修改已打开的窗口大小
        .resizeTo(width,height): 修改到指定大小(完整窗口)
        .resizeBy(width增量,height增量):让窗口增大多少
        强调:只能修改在弹出时就已经修改大小的窗口,不能改默

        认全屏的当前窗口
    2、窗口定位
      获取窗口相对于屏幕左上角的位置:
        window.screenLfet/screenTop 左上角x坐标/y坐标
        window.screenX/screenY

        event.screenX/Y: 事件发生时,鼠标距离距离显示器左上角的坐标 (X,Y)
      修改已经打开的窗口的位置:
        moveTo(newX,NewY); 坐标
        moveBy(left的增量,top的增量)

   3、对话框
    window对象提供了三种对话框
    1、window.alert(msg) //弹出一个警告框
    2、window.prompt(msg,[value]) //弹出一个输入提示框
    3、window.confirm(msg) //弹出一个确认框

3、定时器****
  1、定时器
    1、定时器:让程序按指定时间间隔自动执行任务,多用于网页动态时钟、制作倒计时、

      跑马灯效果等。
    2、周期性定时器:以一定时间间隔执行代码,循环往复
    3、一次性定时器:在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行

  2、周期性定时器
    让程序按指定时间间隔反复自动执行一项任务
    何时:动画
    方法:3步
      1、任务函数: function task(){...}
      2、启动定时器:将任务函数放入定时器,并设定时间间隔
          timer=setInterval(task,ms) task即为执行任务,ms表示时间周

        期(单位ms)
      3、停止定时器:
        clearInterval(timer);timer=null;
        2种方式停止:
        1、手动停止:clearXXX(timer)
        2、自动停止:在任务函数中设定临界值,如果达到临界值,自动调用

            clearInterval(timer).

  3、一次性定时器
    让程序先等待一定时间间隔,在执行一次任务。执行后自动停止(一次性触发代码)。

    何时:延迟任务的执行
    方法:3步
      1、任务函数:function task(){....}
      2、启动定时器:timer=setTimeout(task,ms)
      3、停止: clearTimeout(timer)

    定时器的选择:只要反复执行,就用周期性定时器
    只要执行一次,就用一次性定时器
    定时器的原理****:
    定时器中的回调函数,必须在所有主程序执行完,也就是主程序最后一句话之后,
    才能执行

时间: 2024-10-03 21:54:15

(一)、BOM:Browser Object Model的相关文章

BOM(Browser Object Model) 浏览器对象模型

JavaScript 实现是由 3 个部分组成:核心(ECMAScript),文档对象模型(DOM),浏览器对象模型(BOM) BOM(Browser Object Model) 浏览器对象模型BOM定义了JavaScript进行操作浏览器的各个功能部件的接口,提供访问文档各个功能部件(如窗口本身.屏幕功能部件.框架.浏览历史记录等)的途径以及操作方法.BOM是JavaScript应用中唯一没有相关标准的部分, ,每种浏览器都有其特有的BOM扩展实现. BOM对象 描述Window JavaSc

BOM (Browser Object Model) 浏览器对象模型

l对象的角色,因此所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法; // PS:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的对象是否存在; var newValue = oldValue; // =>ReferenceError:oldValue is not defined; var newValue = window.oldValue; // =>undefined; 1.window对象的属性和方法window对象有一系列

浏览器对象模型(BOM,Browser Object Model)

本文内容 1.概述 2.windows与document 3.对话框 4.定时调用 5.URL解析与访问历史 6.浏览器和屏幕信息 ★概述 “浏览器对象模型(Browser Object Model,BOM)”是由浏览器实现的可供JavaScript程序调用的一组对象,通过它们,Web开发与设计者使用JavaScript代码可以完成与“控制”浏览器进程相关的许多工作. BOM由一系列相关的对象构成,其中Window对象使整个BOM的核心,其他对象和集合对象都是window对象的属性. BOM中定

javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)

什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C(WHATWG,WebHypertextApplicationTechnologyWorkingGroup--网页超文本应用程

BOM——浏览器对象模型(Browser Object Model)

什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C(WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程

BOM—浏览器对象模型(Browser Object Model)

 1,javascript   组成部分: 1.ECMAscript(核心标准):    定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM  : 浏览器对象模型(Browser Object Model) 2,BOM 的组成部分: 1.window对象 每一个子窗口对应的又是一个window对象 2. screen对象 3.location对象 4.history对象 5.Navigator对象 6.定时器 (两种) 7.弹框(三种) 8. document (DOM-文档

BOM —— 浏览器对象模型(Browser Object Model)

一.什么是 BOM BOM 是 Broswer Object Model 的缩写,中文为浏览器对象模型 BOM 提供了独立于内容而与浏览器窗口进行交互的对象 由于 BOM 主要用于管理窗口与窗口之间的通讯,因此其核心对象是 window BOM 缺乏标准,所以你会发现 MDN 上面搜寻不了,JavaScript语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C 二.一些大部分通用的API window对象——BOM核心 window.alert('提示信息') window.confi

BOM:Browser Object Model(浏览器对象模型)

1.window对象 2.navigator对象3. screen对象4.history对象5. location对象6. document对象 window对象1.属性 * pageXOffset:页面相对于视口的位置,x轴 * pageYOffset:页面相对于视口的位置,y轴 * screenX:浏览器相对于屏幕的坐标,x轴 * screenY:浏览器相对于屏幕的坐标,y轴 * innerWidth:文档显示区的宽 * innerHeight:文档显示区的高 * outerWidth:文档

javascript--BOM(browser object model)五大对象

浏览器对象模型: 作用:访问.控制.修改浏览器,与浏览器进行交互(打开新的窗口.回退历史记录.获取url) BOM与的DOM区别:JS通过BOM与浏览器进行交互.BOM的window对象包含了document对象,document对象是DOM的根节点. BOM五大对象: 1.window对象:window对象是全局对象,引用对象属性时可直接写属性,不用加上window window对象属性: innerheight 返回窗口文档显示区的高度 innerwidth 返回窗口文档显示区的宽度 pag