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-文档对象模型)

1.1window 对象(表示浏览器窗口):

  1. 所有浏览器都支持 window 对象。它表示浏览器窗口。
  2. 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
  3. 全局变量是 window 对象的属性。
  4. 全局函数是 window 对象的方法。
  5. 甚至 HTML DOM 的 document 也是 window 对象的属性之一

1.2window 尺寸:

  查看window尺寸有三种方式适用于不同的情况:

1) w3c标准(适用于老版本ie之外的浏览器)

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度

2) 老版本的IE浏览器
 标准模式:
  document.documentElement.clientHeight)
  document.documentElement.clientWidth)

怪异模式(向后兼容)中:
  document.body.clientHeight
  document.body.clientWidth

(如何知道是何种模式?

console.log(document.compatMode)可以查看文档是以什么方式进行解析的
   CSS1Compat 标准模式
  BackCompat 怪异模式

)

function getScreen(){    //获取屏幕的可视宽高
if (window.innerWidth) { //如果window底下有这个属性,就用这个, w3c标准
return {
width : window.innerWidth,
height : window.innerHeight
}
}else{ //老版本IE
if(document.compatMode == "CSS1Compat"){ //标准模式
return {
width : document.documentElement.clientWidth,
height : document.documentElement.clientHeight
}
}else{ //怪异模式
return {
width : document.body.clientWidth,
height : document.body.clientHeight
}
}
}
}
console.log(getScreen())

1.3 其他 Window 方法

  •window.open() - 打开新窗口
  •window.close() - 关闭当前窗口
  •window.moveTo() - 移动当前窗口
  •window.resizeTo() - 调整当前窗口的尺寸

2.1 screen 对象(包含有关用户屏幕的信息)

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度
<script>

document.write("可用宽度:" + screen.availWidth);
document.write("可用高度:" + screen.availHeight); </script>

3.1 location对象(用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面)

     console.log(location.href)    //返回(当前页面的)整个 URL:
console.log(location.hash) //hash 哈希值,也叫锚点,比方说a链接中的
console.log(location.host) // host 设置或返回主机名和当前 URL 的端口号。
console.log(location.hostname) // hostname 设置或返回当前 URL 的主机名。
console.log(location.pathname) // pathname 设置或返回当前 URL 的路径部分。
console.log(location.port) // port 设置或返回当前 URL 的端口号。
console.log(location.protocol) // protocol 设置或返回当前 URL 的协议。
console.log(location.search) // search 参数(查询字符串) 设置或返回从问号 (?) 开始的 URL(查询部分)。     // location.href = "http://www.baidu.com"    //放到某一个事件中去触发

4.1 history对象(包含浏览器的历史记录)

  • history.back() - 与在浏览器点击后退按钮相同
  • history.forward() - 与在浏览器中点击按钮向前相同
<body>
<a href="http://www.baidu.com">去百度</a>
<button>后退</button>
<button>前进</button> <script>
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1]; btn1.onclick = function(){
history.back()
}
btn2.onclick = function(){
history.forward()
}
</script>
</body>

5.1 Navigator对象(记录了浏览器的一些信息的对象)

  1. appCodeName 返回浏览器的代码名。
  2. appMinorVersion 返回浏览器的次级版本。
  3. appName 返回浏览器的名称。
  4. appVersion 返回浏览器的平台和版本信息。
  5. browserLanguage 返回当前浏览器的语言。
  6. cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
  7. cpuClass 返回浏览器系统的 CPU 等级。
  8. onLine 返回指明系统是否处于脱机模式的布尔值。
  9. platform 返回运行浏览器的操作系统平台。
  10. systemLanguage 返回 OS 使用的默认语言。
  11. userAgent 返回由客户机发送服务器的 user-agent 头部的值。
  12. userLanguage 返回 OS 的自然语言设置。
<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>"; document.getElementById("example").innerHTML=txt; </script>

6.1 PopupAlert 对象

  警告框:

alert("文本")

  确认框:

confirm("文本")

  提示框:

prompt("文本","默认值")

7.1 Timing 对象

一次性定时器:

  setTimeout()未来的某时执行代码;

  clearTimeout()取消setTimeout();

无限次定时器:

  setInterval( );
  clearInterval();

8.1 cookie (用来识别用户)

有关cookie的例子:

  名字 cookie:

  当访问者首次访问页面时,他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时,他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。

  密码 cookie:

  当访问者首次访问页面时,他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时,密码就会从 cookie 中取回。

  日期 cookie:

  当访问者首次访问你的网站时,当前的日期可存储于 cookie 中。当他们再次访问网站时,他们会收到类似这样的一条消息:"Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。

BOM—浏览器对象模型(Browser Object Model)的更多相关文章

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

    什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...

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

    什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...

  3. javascript快速入门13--BOM——浏览器对象模型(Browser Object Model)

    什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...

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

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

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

    本文内容     1.概述     2.windows与document     3.对话框     4.定时调用     5.URL解析与访问历史     6.浏览器和屏幕信息 ★概述     &q ...

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

    1.结构 BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是w ...

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

    JavaScript 实现是由 3 个部分组成:核心(ECMAScript),文档对象模型(DOM),浏览器对象模型(BOM) BOM(Browser Object Model) 浏览器对象模型BOM ...

  8. 有关BOM(Browser Object Model)的内容

    包括: BOM概述 BOM模型 Window对象(常用属性和方法,窗口的打开,窗口的关闭,模态对话框,定时器) Navigator对象(遍历navigator对象的所有属性,Navigator 对象集 ...

  9. BOM—Browser Object Model and DOM—Document Object Model

    浏览器对象模型的内涵是每个页面都是一个window对象,而dom是document为基准的模型,而document与wimdow.document指向相同,所以可以这么理解,bom模型的定义是包括do ...

随机推荐

  1. CSS文字的跑马灯特效

    上学时同学有个来电带跑马灯的手机,可把我羡慕坏了,可等我买的起手机时,跑马灯不流行了,甚伤萝卜心! 今天就用CSS做个文字的跑马灯特效,缅怀一下本萝卜逝去的青春! 道具:会敲代码的巧手.七窍玲珑心.会 ...

  2. C语言面试题分类->指针

    有关指针的经典面试题 C语言为何如此长寿并实用?C++为什么有那么多精彩?指针可以说是C/C++中的灵魂所在,虽然早期中pascal也有指针,但是和C/C++比起来不是一个级别的.今天为大家深入浅出的 ...

  3. PTA第三次作业

    ---恢复内容开始--- 题目 7-1 计算职工工资 1.设计思路 (1)第一步:观察题意了解各个参数与所需函数在题目中的意义: 第二步:设计算法编写函数,让函数的功能实现题目中所需的功能: 第三步: ...

  4. Android 混淆那些事儿

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/WmJyiA3fDNriw5qXuoA9MA 作者:l ...

  5. [Swift]LeetCode543. 二叉树的直径 | Diameter of Binary Tree

    Given a binary tree, you need to compute the length of the diameter of the tree. The diameter of a b ...

  6. [Swift]LeetCode846. 一手顺子 | Hand of Straights

    Alice has a hand of cards, given as an array of integers. Now she wants to rearrange the cards into ...

  7. Spring之AOP流程解析(ProxyFactory)

    本节我们从ProxyFactory开始分析.该类有几个比较重要的方法——addAdvice.addAdvisor.getProxy,其中最后一个方法是我们本节的重点.前两个方法都是向ProxyFact ...

  8. scala的break和continue

    scala 是没有 continue 的,但是包含 break,可以用 break 构造出 continue 的效果 这里用到了库: import scala.util.control.Breaks. ...

  9. 【Redis篇】Redis持久化方式AOF和RDB

    一.前述 持久化概念:将数据从掉电易失的内存存放到能够永久存储的设备上. Redis持久化方式RDB(Redis DB)   hdfs:    fsimageAOF(AppendOnlyFile)   ...

  10. 论Java访问权限控制的重要性

    人在什么面前最容易失去抵抗力? 美色,算是一个,比如说西施的贡献薄就是忍辱负重.以身报国.助越灭吴:金钱,算是另外一个,我们古人常说“钱乃身外之物,生不带来死不带去”,但我们又都知道“有钱能使鬼推磨” ...