让网站“活”起来 —— JavaScript 交互初体验

前言

目前为止，我们的网站已经很漂亮了，但它还是一个“静态”网站。就像一幅画，可以看，但不能互动。这一章，我们将学习第三门核心技术——JavaScript (简称JS)，它能让我们的网站“活”起来，响应用户的操作，赋予网站“灵魂”。

如果说HTML是骨架，CSS是皮肉，那么JavaScript就是控制行动的“神经系统”。它可以监听用户的点击、滚动、输入等行为，并执行相应的代码来改变页面内容、样式，或者与服务器通信。

别担心，我们从一个最简单的例子开始，让你感受一下JS的魔力。

第一步：创建我们的“魔法脚本”

和CSS类似，我们通常会把JavaScript代码放在一个单独的文件里，以保持整洁。请在你的项目文件夹里创建一个新文件，名为 script.js。

第二步：在HTML中引入脚本

接下来，打开 index.html 文件。引入JavaScript的最佳位置，通常是在 </body> 标签的正上方。这样做是为了确保在执行JS代码之前，页面的所有HTML元素（骨架）都已经完全加载完毕，避免JS找不到它想操作的元素而出错。

在 index.html 的 </footer> 下方，</body> 上方，添加下面这行代码：

    ...
    </footer>

    <script src="script.js"></script>
</body>
</html>

保存 index.html。这行代码告诉浏览器：“去加载并执行那个名为 script.js 的魔法脚本吧！”

第三步：编写第一个交互魔法

现在，打开我们刚创建的空白文件 script.js，把下面的代码复制进去：

// 等待整个页面都加载完成后再执行我们的代码
// 这是一个好习惯，可以防止很多不必要的错误
document.addEventListener('DOMContentLoaded', function() {

    // 找到所有“了解更多”的链接
    // querySelectorAll 会返回一个包含所有匹配元素的列表
    const readMoreLinks = document.querySelectorAll('article a');

    // 遍历这个列表，为每一个链接都添加一个点击事件监听器
    readMoreLinks.forEach(function(link) {
      
        // 当链接被点击时，执行下面的函数
        link.addEventListener('click', function(event) {
          
            // event.preventDefault() 会阻止链接的默认跳转行为
            // 因为我们的链接 href="#"，点击后页面会跳到顶部，我们不希望这样
            event.preventDefault(); 

            // 弹出一个有趣的提示框！
            alert('你发现了一个彩蛋！我们将在这里展开更精彩的内容。');
        });
    });

});

代码解析：

document.addEventListener('DOMContentLoaded', function() { ... });: 这是一个“事件监听器”。它会一直等到整个HTML文档被完全加载和解析完毕之后，才执行花括号 {} 里的代码。这是一个非常重要的最佳实践。
document.querySelectorAll('article a'): document 代表整个HTML页面。querySelectorAll 是一个强大的查找工具，它会根据你提供的CSS选择器（这里是 article a，即所有 article 标签下的 a 标签）找到页面上所有匹配的元素，并把它们打包成一个列表。
readMoreLinks.forEach(function(link) { ... });: 我们拿到“了解更多”按钮的列表后，使用 forEach 来遍历（一个一个地处理）列表中的每一个链接（我们把它临时命名为 link）。
link.addEventListener('click', function(event) { ... });: 这是核心！我们为每一个 link 添加了另一个“事件监听器”，这次监听的是 click（点击）事件。当用户点击这个链接时，就会触发并执行花括号里的代码。
event.preventDefault();: 阻止链接的默认行为。如果不加这句，点击后页面会因为 href="#" 而跳动一下。
alert('...');: 这是JavaScript内置的一个最简单的函数，作用就是弹出一个浏览器自带的提示框。

见证奇迹！

现在，保存好你的 script.js 文件。回到浏览器，刷新 index.html 页面。试着去点击一下“诗词歌赋”或“琴棋书画”下面的“了解更多”按钮。

看到了吗？一个提示框弹了出来！

这就是交互！你告诉了浏览器：“当这个按钮被点击时，就做这件事。” 浏览器忠实地执行了你的命令。

课后作业

尝试修改 alert() 里的文字，换成一句你自己的话。
思考一下，我们能不能不弹出提示框，而是点击按钮后，改变按钮自己的文字呢？（这是一个挑战题，需要你搜索 element.textContent 的用法）

恭喜你，已经成功踏入了JavaScript的世界！虽然只是一个简单的 alert，但你已经掌握了前端开发中最重要的“交互”思想。从这里开始，网页开发的无限可能性正在向你展开！

前言