JavaScript - Window 对象：浏览器交互的门户

你好，未来的 JavaScript 巫师们！今天，我们将踏上一段激动人心的旅程，探索 Window 对象的世界。作为你亲切的计算机老师，我将在这一迷人话题中为你导航。那么，拿起你的虚拟魔杖（键盘），让我们施展一些 JavaScript 的魔法！

JavaScript - Window Object

Window 对象是什么？

想象一下浏览器窗口是一个通往网络的神奇门户。Window 对象就像是这个门户的看门人，控制着你看到和与之交互的网页上的所有内容。它如此重要，以至于在 JavaScript 中常常被称为“全局对象”。

Window 对象作为全局对象

当你在编写网页的 JavaScript 代码时，Window 对象始终在那里，默默地注视着你的代码。它就像我们呼吸的空气一样 - 无处不在，即使我们并不总是注意到它。

让我们从一个简单的例子开始：

console.log("Hello, World!");

你知道吗，这实际上是以下代码的简写：

window.console.log("Hello, World!");

window 部分通常被省略，因为它被隐含了。酷吧？

Window 对象属性

现在，让我们探索一下我们 Window 对象的一些神奇属性。这些属性就像是我们浏览器城堡中的不同房间，每个房间都有自己的特殊用途。

1. window.innerWidth 和 window.innerHeight

这些属性告诉我们浏览器窗口的大小。让我们看看它们的作用：

console.log("窗口宽度: " + window.innerWidth);
console.log("窗口高度: " + window.innerHeight);

尝试调整你的浏览器窗口大小并再次运行这段代码。你会看到数字发生了变化！

2. window.location

这个属性就像是我们浏览器的 GPS。它告诉我们我们在网络上的位置，并让我们导航到新的地方。

console.log("当前 URL: " + window.location.href);
// 导航到新页面的代码：
// window.location.href = "https://www.example.com";

3. window.history

把这个想象成你的浏览器的日记，记录着你去过哪里。

console.log("历史中的页面数量: " + window.history.length);
// 返回上一页的代码：
// window.history.back();

下面是一个总结这些属性的表格：

属性	描述
innerWidth	浏览器窗口的宽度
innerHeight	浏览器窗口的高度
location	当前 URL 的信息
history	浏览器的历史

Window 对象方法

现在，让我们学习一些可以在 Window 对象上施展的魔法（方法）！

1. window.alert()

这个方法就像是对用户大喊“嘿，听着！”。它会创建一个带有消息的弹出框。

window.alert("欢迎来到 JavaScript！");

2. window.prompt()

这个方法就像向用户提一个问题。它会创建一个带有文本输入的弹出框。

let name = window.prompt("你叫什么名字？");
console.log("你好，" + name + "！");

3. window.setTimeout()

这个方法就像给代码设置一个定时器。它在指定的延迟后执行一个函数。

window.setTimeout(function() {
console.log("这条消息在3秒后出现！");
}, 3000);

4. window.setInterval()

这个方法就像设置一个周期性闹钟。它以指定的间隔重复执行一个函数。

let counter = 0;
window.setInterval(function() {
counter++;
console.log("这条消息每2秒出现一次。计数：" + counter);
}, 2000);

下面是一个总结这些方法的表格：

方法	描述
alert()	显示一个警告框
prompt()	显示一个用户输入对话框
setTimeout()	在指定延迟后执行一个函数
setInterval()	以指定间隔重复执行一个函数

一切皆有可能

现在我们已经学习了这些神奇的属性和方法，让我们用它们来创建一个简单的交互式网页：

<!DOCTYPE html>
<html>
<body>
<h1 id="greeting">欢迎！</h1>
<button onclick="startGame()">开始游戏</button>

<script>
function startGame() {
let name = window.prompt("冒险者，你叫什么名字？");
document.getElementById("greeting").innerHTML = "欢迎，" + name + "！";

let counter = 5;
let countdown = window.setInterval(function() {
if(counter > 0) {
window.alert(counter + " 秒后游戏开始！");
counter--;
} else {
window.clearInterval(countdown);
window.alert("游戏开始！");
}
}, 1000);
}
</script>
</body>
</html>

在这个例子中，我们创建了一个简单的“游戏”，它：

使用 prompt() 询问玩家的名字
使用 DOM 操作更新问候语
使用 setInterval() 创建倒计时
使用 alert() 通知玩家倒计时和游戏开始

就这样，年轻的 JavaScript 学徒们！我们已经探索了 Window 对象的魔法领域，从其属性到其方法。记住，熟能生巧，所以继续实验这些概念。在你意识到之前，你将像专业人士一样施展 JavaScript 的魔法！

下次见，快乐编码！

Credits: Image by storyset