JavaScript - Os At Nb

1. 基本交互：改变HTML内容

可以使用JavaScript来动态地改变网页的内容。例如，你可以根据用户的点击或输入来改变页面上某个元素（如<p>、<div>等）的文本。

<!DOCTYPE html>  
<html>  
<body>  
  
<p id="demo">JavaScript 能改变 HTML 内容。</p>  
  
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">点击我</button>  
  
</body>  
</html>

2. 事件处理

JavaScript 使你有能力对用户的各种操作（如点击、鼠标移动、键盘输入等）进行响应。你可以通过为HTML元素添加事件监听器来实现这一点。

document.getElementById("myBtn").addEventListener("click", function() {  
  alert("按钮被点击了！");  
});

3. DOM操作

DOM（文档对象模型）是HTML和XML文档的编程接口。JavaScript可以用来创建、修改和删除DOM元素，从而改变网页的结构和内容。

// 创建一个新的 <p> 元素  
var para = document.createElement("p");  
  
// 创建一个文本节点  
var txt = document.createTextNode("这是一个新段落。");  
  
// 将文本节点添加到 <p> 元素中  
para.appendChild(txt);  
  
// 将 <p> 元素添加到 <body> 元素中  
document.body.appendChild(para);

4. 表单验证

JavaScript 还可以用来验证表单输入，确保用户提交的数据是有效的。

<form name="myForm" onsubmit="return validateForm()" method="post">  
  用户名: <input type="text" name="username">  
  <input type="submit" value="提交">  
</form>  
  
<script>  
function validateForm() {  
  var x = document.forms["myForm"]["username"].value;  
  if (x == "") {  
    alert("用户名不能为空");  
    return false;  
  }  
}  
</script>

5. 异步编程

JavaScript 支持异步编程，这意味着你可以在不中断程序其他部分执行的情况下执行耗时的操作（如网络请求）。async/await 是现代JavaScript中处理异步操作的一种简洁方式。

async function fetchData() {  
  try {  
    let response = await fetch('https://api.example.com/data');  
    let data = await response.json();  
    console.log(data);  
  } catch (error) {  
    console.error('Error:', error);  
  }  
}  
  
fetchData();