JavaScript完善示例网页

通过结合JavaScript的功能，我们可以为网页增加更多动态性和交互性，让用户体验更加丰富和有趣。本教程主要展示如何用JavaScript语言为网页添加一些特性，例如图像切换器、个性化欢迎信息和用户名null。

一、添加图像切换器

首先，确保已经找到了另一张想要展示在页面上的图片，并将其尺寸调整为与第一张图片尽可能相同。然后将该图片保存在项目的 "images" 目录下，并将其重命名为 "firefox2.png"。

接着，打开 "main.js" 文件，用下面的JavaScript代码替换掉之前的 "hello world" 脚本：

let myImage = document.querySelector("img");
myImage.onclick = function () {
let mySrc = myImage.getAttribute("src");
if (mySrc === "images/firefox-icon.png") {
myImage.setAttribute("src", "images/firefox2.png");
} else {
myImage.setAttribute("src", "images/firefox-icon.png");
}
};

这段代码首先获取了页面中 <img> 元素的引用，并将其存储在变量 myImage 中。然后，将 myImage 变量的 onclick 事件与一个匿名函数绑定。每次单击图片时，该函数会执行以下操作：

1、获取图片的 src 属性值。

2、使用条件语句检查 src 的值是否等于原始图像的路径：

• 如果是，则将 src 的值改为第二张图片的路径，并在 <img> 中加载该图片；
• 如果不是（意味着它已经修改过）, 则将 src 的值重新设置为原始图片的路径，即原始状态。

保存所有文件，并用浏览器打开 "index.html"。现在，可以点击图片来切换它了！

二、添加个性化欢迎信息

下面来添加另一段代码，在用户初次进入站点时将网页的标题改成一段个性化欢迎信息（即在标题中添加用户的名字）。名字信息会由 Web Storage API 保存下来，即使用户关闭页面之后再重新打开，仍可得到之前的信息。还会添加一个选项，可以根据需要改变用户名字以更新欢迎信息。

1、打开 index.html，在 <script> 标签前添加以下代码，将在页面底部显示一个“切换用户”字样的按钮：

<button>切换用户</button>

2、将以下 JavaScript 代码原封不动添加到 main.js 文件底部，将获取新按钮和标题的引用，并保存至变量中：

let myButton = document.querySelector("button");
let myHeading = document.querySelector("h1");

3、然后添加以下函数来设置个性化欢迎信息。（函数需要在调用后生效，下文中提供了两种对该函数的调用方式）

function setUserName() {
let myName = prompt("请输入你的名字。");
localStorage.setItem("name", myName);
myHeading.textContent = "Mozilla 酷毙了，" + myName;
}

该函数首先调用了 prompt() 函数，与 alert() 类似会弹出一个对话框。但是这里需要用户输入数据，并在确定后将数据存储在 myName 变量里。接下来将调用 localStorage API，它可以将数据存储在浏览器中供后续获取。这里用 localStorage 的 setItem() 函数来创建一个'name' 数据项，并把 myName 变量复制给它。最后将 textContent 属性设置为一个欢迎字符串加上这个新设置的名字。

4、接下来，添加以下的 if ... else 块。我们可以称之为初始化代码，因为它在页面初次读取时进行构造工作：

if (!localStorage.getItem("name")) {
setUserName();
} else {
let storedName = localStorage.getItem("name");
myHeading.textContent = "Mozilla 酷毙了，" + storedName;
}

这里首次使用了取非运算符（逻辑非，用 ! 表示）来检测 'name' 数据是否存在。若不存在，调用 setUserName() 创建。若存在（即用户上次访问时设置过），调用 getItem() 获取保存的名字，像上文的 setUserName() 那样设置 textContent。

5、最后，为按钮设置 onclick 事件处理器。按钮按下时运行 setUserName() 函数。这样用户就可以通过按这个按钮来自由设置新名字了：

myButton.onclick = function () {
setUserName();
};

第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名。告诉你一个额外的福利，因为用户名是保存在 localStorage 里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在。

三、用户null

运行示例代码，弹出输入用户名的对话框，试着按下取消按钮。此时标题会显示为“Mozilla 酷毙了，null”。这是因为取消提示对话框后值将设置为 null，这是 JavaScript 中的一个特殊值，表示引用不存在。

也可以不输入任何名字直接按 确认，你的标题会显示为“Mozilla 酷毙了，”，原因么显而易见。要避免这些问题，应该更新 setUserName() 来检查用户是否输入了 null 或者空名字：

function setUserName() {
let myName = prompt("请输入你的名字。");
if (!myName) {
setUserName();
} else {
localStorage.setItem("name", myName);
myHeading.textContent = "Mozilla 酷毙了，" + myName;
}
}

如果 myName 没有值或值为 null，就再次从头运行setUserName()。如果有值（上面的表达式结果不为真），就把值存储到 localStorage 并且设置标题。

如果你按部就班完成本文的实践，那么最终可以得到以下页面：