现在你已经具备了一些 JavaScript 基础，下面来为示例网页添加一些更酷的特性。

这里将用新的 DOM API 为网页添加另一张图片，并用 JavaScript 使图片在点击时进行切换。

1. 首先，找到另一张你想要在你的页面上展示的图片，且尺寸与第一张图片尽可能相同。

2. 将这张图片储存在你的images目录下。

3. 将图片重命名为'firefox2.png'（去掉引号）。

4. 打开 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');
       }}

5. 保存所有文件并用浏览器打开 index.html 。点击图片可以发现它能够切换了！

这里首先把 <img> 元素的引用存放在 myImage 变量里。然后将这个变量的 onclick 事件与一个匿名函数绑定。每次点击图片时：

1. 获取这张图片的 src 属性值。

2. 用一个条件句来判断 src 的值是否等于原始图像的路径:

1. 如果是，则将 src 的值改为第二张图片的路径，并在 <img> 内加载该图片。

2. 如果不是（意味着它已经修改过）, 则把 src 的值重新设置为原始图片的路径，即原始状态。

下面来添加另一段代码，在用户初次进入站点时将网页的标题改成一段个性化欢迎信息（即在标题中添加用户的名字）。名字信息会由 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 里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在:)

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

也可以不输入任何名字直接按 确认，你的标题会显示为“Mozilla 酷毙了，”，原因么显而易见。

要避免这些问题，应该更新 setUserName() 来检查用户是否输入了 null 或者空名字：

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

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