分类： JavaScript

JavaScript

JavaScript 是一种编程语言，用于为网页添加交互功能。

让我们进一步了解 JavaScript 的工作原理，以及如何在 WordPress 网站中使用它。

什么是 JavaScript？

JavaScript 是一种客户端脚本语言，这意味着它由浏览器解释执行。

要了解 JavaScript 能做什么的简单示例，让我们看看之前课程中的 HTML 页面，并添加一个按钮，该按钮使用 JavaScript 更改标题元素的颜色：

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
        <button>将标题颜色改为蓝色</button>
    </body>
    <script>
        const button = document.querySelector('button');
        const heading = document.querySelector('h1');

        button.addEventListener('click', () => {
            heading.style.color = 'blue';
        });
    </script>
</html>

在这个示例中：

  1. 文档中添加了一个按钮元素，文本为“将标题颜色改为蓝色”。
  2. 在 HTML 文档的底部，有一个新的 <script> 元素。这个元素用于向文档添加 JavaScript。
  3. 创建了一个名为 button 的变量，它通过使用 document.querySelector() 方法并传入按钮元素的 CSS 选择器（本例中为 button）来存储对按钮元素的引用。
  4. 创建了一个名为 heading 的变量，它通过使用 document.querySelector() 方法并传入标题元素的 CSS 选择器（本例中为 h1）来存储对标题元素的引用。
  5. 为按钮元素附加了一个事件监听器。这个事件监听器监听点击事件，当事件被触发（按钮被点击）时，它会将标题元素的颜色改为蓝色。

你会注意到 JavaScript 是在其他 HTML 元素之后添加到文档中的。这是因为 JavaScript 需要能够访问 HTML 元素才能正常工作。

由于浏览器从上到下读取 HTML 文档，将 JavaScript 放在文档底部可以确保在 JavaScript 运行之前，HTML 元素已经加载到浏览器中。

你还会注意到，如果刷新页面，标题会恢复为原始颜色。这是因为 JavaScript 只能在页面加载到浏览器后影响页面，但这些更改不会持久保存。

与 CSS 类似，也可以使用外部文件向文档添加 JavaScript。这是向文档添加 JavaScript 的首选方式。

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
        <button>将标题颜色改为蓝色</button>
    </body>
    <script src="script.js"></script>
</html>

然后，你可以将文档中 <script> 元素内的 JavaScript 移动到 script.js 文件中。

const button = document.querySelector('button');
const heading = document.querySelector('h1');

button.addEventListener('click', () => {
    heading.style.color = 'blue';
});

JavaScript 在 WordPress 网站的许多地方都有使用。JavaScript 最大的用途之一是在新的块编辑器中，它由一个名为 React 的 JavaScript 框架驱动。

WordPress 中还使用了许多外部 JavaScript 库，你可以在 WordPress 仪表盘中的“关于”页面底部找到这些库的列表。

此外，与 CSS 一样，WordPress 允许你灵活地将自定义 JavaScript 或外部 JavaScript 库添加到你的插件和主题中。

其他资源

有关 JavaScript 的更多信息，你可以访问以下在线资源：

  • MDN 上的 JavaScript
  • freeCodeCamp JavaScript 算法和数据结构认证