JavaScript学习笔记（十一）：JS Browser BOM

1、JavaScript `Window` - 浏览器对象模型

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。

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

不存在浏览器对象模型（BOM）的官方标准。
现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。

1.2 `Window` 对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至（HTML DOM 的）document 对象也是 window 对象属性：

window.document.getElementById("header");

等同于：

document.getElementById("header");

1.3 窗口尺寸

两个属性可用用于确定浏览器窗口的尺寸。
这两个属性都以像素返回尺寸：

window.innerHeight - 浏览器窗口的内高度（以像素计）
window.innerWidth - 浏览器窗口的内宽度（以像素计）

浏览器窗口（浏览器视口）不包括工具栏和滚动条。
对于 Internet Explorer 8, 7, 6, 5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或

document.body.clientHeight
document.body.clientWidth

示例：该例显示浏览器窗口的高度和宽度：（不包括工具栏和滚动条）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="demo"></p>

    <script>
      var w =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;

      var h =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;

      var x = (document.getElementById("demo").innerHTML =
        "浏览器内窗宽度：" + w + "<br>高度：" + h);
    </script>
  </body>
</html>

1.4 其他窗口方法

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

2、JavaScript Window `Screen`

window.screen 对象包含用户屏幕的信息。

2.1 Window Screen

window.screen 对象不带 window 前缀也可以写：
属性：

screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth

2.2 Window Screen 宽度：`screen.width`

screen.width 属性返回以像素计的访问者屏幕宽度。

 document.getElementById("demo").innerHTML =
        "Screen Width:" + window.screen.width;

输出：Screen Width:1920

2.3 Window Screen 高度：`screen.height`

screen.height 属性返回以像素计的访问者屏幕的高度。

  document.getElementById("demo").innerHTML =
        "Screen Height:" + window.screen.height;

输出：Screen Height:1080

2.4 Window Screen 可用宽度：`screen.availWidth`

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。

 document.getElementById("demo").innerHTML =
        "Screen availwidth:" + window.screen.availWidth;

输出：Screen availwidth:1920

2.5 Window Screen 可用高度：`screen.availHeight`

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。

 document.getElementById("demo").innerHTML =
        "Screen availheight:" + window.screen.availHeight;

输出：Screen availheight:1040

2.6 Window Screen 色深：`screen.colorDepth`

screen.colorDepth 属性返回用于显示一种颜色的比特数。
所有现代计算机都使用 24 位或 32 位硬件的色彩分辨率：
24 bits =16,777,216 种不同的 “True Colors”
32 bits = 4,294,967,296 中不同的 “Deep Colors”
更老的计算机使用 14 位：65,536 种不同的 “High Colors” 分辨率。
异常古老的计算机，以及老式的手机使用 8 位：256 中不同的 “VGA colors”。

  document.getElementById("demo").innerHTML =
        "Screen Color Depth:" + window.screen.colorDepth;

输出：Screen Color Depth:24

2.7 Window Screen 像素深度：`screen.pixelDepth`

screen.pixelDepth 属性返回屏幕的像素深度。

    document.getElementById("demo").innerHTML =
        "Screen Pixel Depth:" + window.screen.pixelDepth;

输出：Screen Pixel Depth:24

3、JavaScript Window Location

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。
window.location 对象可不带 window 前缀书写。

一些例子：

window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档

3.1 当前页面的 URL:`Window Location Href`

 document.getElementById("demo").innerHTML = window.location.href;

输出：file:///E:/PC/Learn/html_01.html

更多内容：JavaScript Window Location

4、JavaScript Window History

window.history 对象包含浏览器历史。
JavaScript Window History

5、JavaScript Window Navigator

window.navigator 对象包含有关访问者的信息。
JavaScript Window Navigator

6、JavaScript 弹出框

JavaScript 有三种类型的弹出框：警告框、确认框和提示框。

6.1 警告框

如果要确保信息传递给用户，通常会使用警告框。
当警告框弹出时，用户将需要单击“确定”来继续。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="myDialog()">试一试</button>
    <script>
      function myDialog() {
        alert("这是一个警告框");
      }
    </script>
  </body>
</html>

6.2 确认框

如果您希望用户验证或接受某个东西，则通常使用“确认”框。
当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。
如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="demo"></p>
    <button onclick="myDialog()">试一试</button>
    <script>
      var text = "";
      function myDialog() {
        if (confirm("这是一个确认框")) {
          text = "确认";
        } else {
          text = "取消";
        }
        document.getElementById("demo").innerHTML = text;
      }
    </script>
  </body>
</html>

6.3 提示框

如果您希望用户在进入页面前输入值，通常会使用提示框。
当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="demo"></p>
    <button onclick="myDialog()">试一试</button>
    <script>
      function myDialog() {
        var text = "";
        var personDialog = prompt("请输入您的名字：", "文阿花");
        if (personDialog == null || personDialog == "") {
          text = "用户取消输入";
        } else {
          text = "你好，" + personDialog + "！今天过得好吗？";
        }
        document.getElementById("demo").innerHTML = text;
      }
    </script>
  </body>
</html>

在这里插入图片描述

7、JavaScript Timing 事件

JavaScript 可以在时间间隔内执行。这就是所谓的定时事件（ Timing Events）。

7.1 Timing 事件

window 对象允许以指定的时间间隔执行代码。这些时间间隔称为定时事件。
通过 JavaScript 使用的有两个关键的方法：

setTimeout(function, milliseconds)

在等待指定的毫秒数后执行函数。

setInterval(function, milliseconds)

等同于 setTimeout()，但持续重复执行该函数。

setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。

7.1.1 setTimeout() 方法（`单次执行`）

语法：

window.setTimeout(function, milliseconds);

window.setTimeout() 方法可以不带 window 前缀来编写。

第一个参数是要执行的函数。

第二个参数指示执行之前的毫秒数。

示例：单击按钮。等待 3 秒，然后页面会提示 “Hello”：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="demo"></p>
    <button onclick="setTimeout(myClick,3000)">试一试</button>
    <script>
      function myClick() {
        document.getElementById("demo").innerHTML = "Hello";
      }
    </script>
  </body>
</html>

7.1.2 如何停止执行？

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。
语法：

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不带 window 前缀来写。
clearTimeout() 使用从 setTimeout() 返回的变量：

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

示例：类似上例，但是添加了“停止”按钮：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="demo"></p>
    <button onclick="myVar=setTimeout(myClick,3000)">试一试</button>
    <button onclick="clearTimeout(myVar)">停止</button>
    <script>
      function myClick() {
        document.getElementById("demo").innerHTML = "Hello";
      }
    </script>
  </body>
</html>

7.1.3 setInterval() 方法（`重复执行`）

setInterval() 方法在每个给定的时间间隔重复给定的函数。
语法：

window.setInterval(function, milliseconds);

window.setInterval() 方法可以不带 window 前缀来写。

第一个参数是要执行的函数。

第二个参数每个执行之间的时间间隔的长度。

示例：本例每秒执行一次函数 “myTimer”（就像数字手表）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="demo"></p>
    <script>
      var myVar = setInterval(myTimer, 1000);
      function myTimer() {
        var d = new Date();
        document.getElementById("demo").innerHTML = d.toLocaleTimeString();
      }
    </script>
  </body>
</html>

7.1.4 如何停止执行？

clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。
语法：

window.clearInterval(timerVariable)

window.clearInterval() 方法可以不带 window 前缀来写。

clearInterval() 方法使用从 setInterval() 返回的变量：

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

示例：类似上例，但是我们添加了一个“停止时间”按钮：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="demo"></p>
    <button onclick="clearInterval(myVar)">停止</button>
    <script>
      var myVar = setInterval(myTimer, 1000);
      function myTimer() {
        var d = new Date();
        document.getElementById("demo").innerHTML = d.toLocaleTimeString();
      }
    </script>
  </body>
</html>

8、JavaScript Cookies

Cookie 让您在网页中存储用户信息。

8.1 什么是 cookie？

Cookie 是在您的计算机上存储在小的文本文件中的数据。
当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。
Cookie 是为了解决“如何记住用户信息”而发明的：

①、当用户访问网页时，他的名字可以存储在 cookie 中。
②、下次用户访问该页面时，cookie 会“记住”他的名字。

Cookie 保存在名称值对中，如：

username = Bill Gates

当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。
如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。

8.2 通过 JavaScript 创建 cookie

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。
通过 JavaScript，可以这样创建 cookie：

document.cookie = "username=Bill Gates";

您还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页：

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

8.3 通过 JavaScript 读取 cookie

通过 JavaScript，可以这样读取 cookie：

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

8.4 通过 JavaScript 改变 cookie

通过使用 JavaScript，你可以像你创建 cookie 一样改变它，旧 cookie 被覆盖：

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

8.5 通过 JavaScript 删除 cookie

删除 cookie 非常简单。
删除 cookie 时不必指定 cookie 值：
直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

您应该定义 cookie 路径以确保删除正确的 cookie。
如果你不指定路径，一些浏览器不会让你删除 cookie。

8.6 Cookie 字符串

document.cookie 属性看起来像一个正常的文本字符串。但它不是。
即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。
如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样：

cookie1 = value; cookie2 = value;

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  var user=getCookie("username");
  if (user != "") {
    alert("再次欢迎您，" + user);
  } else {
     user = prompt("请输入姓名：","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>