JavaScript 是一种广泛应用于网页开发的编程语言。通过使用 JavaScript API，你可以让网页变得更加动态和交互式。以下是 JavaScript API 教程的一些基础内容。

基础概念

  1. 事件监听：JavaScript 允许你为网页元素添加事件监听器，以便在特定事件发生时执行代码。

    • 例如，你可以为按钮添加点击事件监听器，当按钮被点击时执行某个函数。

  2. DOM 操作：DOM（文档对象模型）是 JavaScript 操作网页内容的基础。你可以使用 DOM API 来修改网页的结构、样式和内容。

    • 例如，你可以使用 document.getElementById() 来获取页面上的元素，并对其进行修改。

  3. Ajax：Ajax 是一种允许网页与服务器进行异步通信的技术，而无需重新加载整个页面。

    • 例如，你可以使用 XMLHttpRequest 或 fetch API 来发送请求并接收响应。

实践案例

1. 点击按钮显示消息

以下是一个简单的示例，展示了如何使用 JavaScript 来实现点击按钮显示消息的功能。

<button id="myButton">点击我</button>
<p id="myText"></p>

<script>
document.getElementById("myButton").addEventListener("click", function() {
  document.getElementById("myText").innerHTML = "按钮被点击了！";
});
</script>

2. 获取并显示网页内容

以下示例展示了如何使用 fetch API 获取网页内容并显示在页面上。

<button id="fetchButton">获取内容</button>
<div id="content"></div>

<script>
document.getElementById("fetchButton").addEventListener("click", function() {
  fetch('/en/docs/Web/API/JavaScript-APIs-Tutorial')
    .then(response => response.text())
    .then(data => {
      document.getElementById("content").innerHTML = data;
    });
});
</script>

扩展阅读

想了解更多关于 JavaScript API 的内容？请阅读以下文章：

JavaScript 图标