JavaScript学习（2）

已于 2023-08-06 13:56:25 修改
阅读量197 收藏 1
点赞数
分类专栏： javascript学习 文章标签： javascript 学习 开发语言
于 2023-08-06 13:54:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44632658/article/details/132129310
版权

JavaScript Window - 浏览器对象模型

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

Window 对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象也是 window 对象属性：

window.document.getElementById("header");
等同于：
document.getElementById("header");

两个属性可用用于确定浏览器窗口的尺寸。

这两个属性都以像素返回尺寸：

  • window.innerHeight - 浏览器窗口的内高度（以像素计）
  • window.innerWidth - 浏览器窗口的内宽度（以像素计）
<!DOCTYPE html>
<html>
<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");
x.innerHTML = "浏览器内窗宽度：" + w + "，高度：" + h + "。";
</script>

</body>
</html>
  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() -移动当前窗口
  • window.resizeTo() -重新调整当前窗口

JavaScript Window Screen

Window Screen

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

属性：

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

Window Screen 宽度

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

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"屏幕宽度是：" + screen.width;
</script>

</body>
</html>

Window Screen 高度

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

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"屏幕高度是：" + screen.height;
</script>

</body>
</html>

Window Screen 可用宽度

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

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"可用屏幕宽度是：" + screen.availWidth;
</script>

</body>
</html>

Window Screen 可用高度

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

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"可用屏幕高度是：" + screen.availHeight;
</script>

</body>
</html>

Window Screen 色深

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"。

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "屏幕色深是：" + screen.colorDepth;
</script>

</body>
</html>

Window Screen 像素深度

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

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "屏幕像素深度是：" + screen.pixelDepth;
</script>

</body>
</html>

JavaScript Window Location

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

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

Window Location Href

window.location.href 属性返回当前页面的 URL。

<!DOCTYPE html>
<html>
<body>

<h1>window.location 对象</h1>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"本页面的完整 URL 是：<br>" + window.location.href;
</script>

</body>
</html>

Window Location 主机名

window.location.hostname 属性返回（当前页面的）因特网主机的名称。 

<!DOCTYPE html>
<html>
<body>

<h1>window.location 对象</h1>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"页面主机名是：" + window.location.hostname;
</script>

</body>
</html>

Window Location 路径名

window.location.pathname 属性返回当前页面的路径名。

<!DOCTYPE html>
<html>
<body>

<h1>window.location 对象</h1>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"页面路径是：" + window.location.pathname;
</script>

</body>
</html>

Window Location 协议

window.location.protocol 属性返回页面的 web 协议。

<!DOCTYPE html>
<html>
<body>

<h1>window.location 对象</h1>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"页面协议是：" + window.location.protocol;
</script>

</body>
</html>

Window Location 端口

window.location.port 属性返回（当前页面的）互联网主机端口的编号。

<!DOCTYPE html>
<html>
<body>

<h1>window.location 对象</h1>

<p id="demo"></p>

<p><b>注释：</b>如果端口号是默认值（对于 http 为 80，对于 https 为 443），则大多数浏览器将显示 0 或不显示。</p>

<script>
document.getElementById("demo").innerHTML = 
"当前页面的 URL 端口号是：" + window.location.port;
</script>

</body>
</html>

Window Location Assign

window.location.assign() 方法加载新文档。

<!DOCTYPE html>
<html>
<body>

<h1>window.location 对象</h1>

<input type="button" value="加载新的文档" onclick="newDoc()">

<script>
function newDoc() {
  window.location.assign("http://www.w3school.com.cn")
}
</script>

</body>
</html>

JavaScript Window History

Window History

window.history 对象可不带 window 书写。

为了保护用户的隐私，JavaScript 访问此对象存在限制。

一些方法：

  • history.back() - 等同于在浏览器点击后退按钮
  • history.forward() - 等同于在浏览器中点击前进按钮

Window History Back

history.back() 方法加载历史列表中前一个 URL。

这等同于在浏览器中点击后退按钮。

<html>
<head>
<script>
function goBack() {
    window.history.back()
 }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

Window History Forward

history forward() 方法加载历史列表中下一个 URL。

这等同于在浏览器中点击前进按钮。

<html>
<head>
<script>
function goForward() {
    window.history.forward()
 }
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html

JavaScript Window Navigator

Window Navigator

window.navigator 对象可以不带 window 前缀来写。

一些例子：

  • navigator.appName
  • navigator.appCodeName
  • navigator.platform

浏览器 Cookie

cookieEnabled 属性返回 true，如果 cookie 已启用，否则返回 false：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "cookiesEnabled is " + navigator.cookieEnabled;
</script>

浏览器应用程序名称

appName 属性返回浏览器的应用程序名称

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "navigator.appName is " + navigator.appName;
</script>

浏览器应用程序代码名称

appCodeName 属性返回浏览器的应用程序代码名称：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "navigator.appCodeName is " + navigator.appCodeName;
</script>

浏览器引擎

product 属性返回浏览器引擎的产品名称：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "navigator.product is " + navigator.product;
</script>

浏览器版本

appVersion 属性返回有关浏览器的版本信息：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.appVersion;
</script>

JavaScript 弹出框

警告框

如果要确保信息传递给用户，通常会使用警告框。

当警告框弹出时，用户将需要单击“确定”来继续。

window.alert("sometext");

确认框

如果您希望用户验证或接受某个东西，则通常使用“确认”框。

当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。

如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。

var r = confirm("请按按钮");
if (r == true) {
    x = "您按了确认！";
} else {
    x = "您按了取消！";
}

提示框

如果您希望用户在进入页面前输入值，通常会使用提示框。

当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。

如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。

var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
    document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？";
}

折行

如需在弹出框中显示折行，请在反斜杠后面加一个字符 n。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript</h1>

<p>在警告框中换行。</p>

<button onclick="alert('Hello\nHow are you?')">试一试</button>

</body>
</html>

JavaScript Timing 事件

JavaScript 可以在时间间隔内执行。

这就是所谓的定时事件（ Timing Events）。

Timing 事件

window 对象允许以指定的时间间隔执行代码。

这些时间间隔称为定时事件。

通过 JavaScript 使用的有两个关键的方法：

setTimeout(function, milliseconds)

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

setInterval(function, milliseconds)

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

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

setTimeout() 方法

window.setTimeout(function, milliseconds);

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

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

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

<!DOCTYPE html>
<html>
<body>

<p>点击“试一试”。等待 3 秒钟，页面将提示“Hello”。</p>

<button onclick="setTimeout(myFunction, 3000);">试一试</button>

<script>
function myFunction() {
  alert('Hello');
}
</script>

</body>
</html>

如何停止执行？

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

window.clearTimeout(timeoutVariable)

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

clearTimeout() 使用从 setTimeout() 返回的变量：

<!DOCTYPE html>
<html>
<body>

<p>点击“试一试”。等 3 秒。该页面将提醒“Hello”。</p>

<p>单击“停止”以阻止第一个函数执行。</p>

<p>（在 3 秒钟之前，您必须单击“停止”。）</p>

<button onclick="myVar = setTimeout(myFunction, 3000)">试一试</button>

<button onclick="clearTimeout(myVar)">停止</button>

<script>
function myFunction() {
  alert("Hello");
}
</script>
</body>
</html>

setInterval() 方法

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

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

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

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

本例每秒执行一次函数 "myTimer"（就像数字手表）。

<!DOCTYPE html>
<html>
<body>

<p>此页面上的脚本启动这个时钟：</p>

<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>

如何停止执行？

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

window.clearInterval(timerVariable)

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

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

myVar = setInterval(function, milliseconds);
clearInterval(myVar);
<!DOCTYPE html>
<html>
<body>

<p>此页面上的脚本启动这个时钟：</p>

<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>

JavaScript Cookies

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

什么是 cookie？

Cookie 是在您的计算机上存储在小的文本文件中的数据。

当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。

Cookie 是为了解决“如何记住用户信息”而发明的：

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

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

username = Bill Gates

通过 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=/";

通过 JavaScript 读取 cookie

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

var x = document.cookie;

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

通过 JavaScript 改变 cookie

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

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

通过 JavaScript 删除 cookie

删除 cookie 非常简单。

删除 cookie 时不必指定 cookie 值：

直接把 expires 参数设置为过去的日期即可：

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

您应该定义 cookie 路径以确保删除正确的 cookie。

如果你不指定路径，一些浏览器不会让你删除 cookie。

Cookie 字符串

document.cookie 属性看起来像一个正常的文本字符串。但它不是。

即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。

如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样：

cookie1 = value; cookie2 = value;

avaScript Cookie 实例

在下面的示例中，我们将创建一个 cookie 来存储访问者的名称。

访客第一次到达网页时，会要求他填写姓名。然后将该名称存储在 cookie 中。

下次访客到达同一页时，他将收到一条欢迎消息。

例如，我们将创建 3 个JavaScript函数：

  1. 设置 cookie 值的函数
  2. 获取 cookie 值的函数
  3. 检查 cookie 值的函数

设置 cookie 的函数

首先，我们创建一个函数，将访问者的名字存储在 cookie 变量中：

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

获取 cookie 的函数

然后，我们创建一个函数返回指定 cookie 的值：

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 "";
}

蓝天巨人
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值