JavaScript 用法学习笔记
1. 基本语法
JavaScript 是一种高级编程语言，常用于网站交互、动态效果、表单验证等方面。
1.1 变量声明
变量可以用 var 或 const 定义。其中，var 定义的变量可以被重新赋值，而 const 定义的变量不可修改。
javascriptCopy Codevar x = 10; // 定义变量 x 并赋值为 10
const y = 20; // 定义常量 y 并赋值为 20
1.2 数据类型
JavaScript 有多种数据类型，包括数字、字符串、布尔值等。
javascriptCopy Codevar num = 10; // 数字类型
var str = "Hello"; // 字符串类型
var isTrue = true; // 布尔值类型
1.3 条件语句
条件语句用于根据不同的条件执行不同的操作。其中，if...else 语句和 switch 语句最为常用。
javascriptCopy Codeif (num > 0) {
console.log("num 大于 0");
} else if (num < 0) {
console.log("num 小于 0");
} else {
console.log("num 等于 0");
}
switch (color) {
case "red":
console.log("红色");
break;
case "green":
console.log("绿色");
break;
default:
console.log("其他颜色");
}
1.4 循环语句
循环语句用于重复执行一段代码。其中，for 循环和 while 循环最为常用。
javascriptCopy Codefor (var i = 0; i < 10; i++) {
console.log(i);
}
var j = 0;
while (j < 10) {
console.log(j);
j++;
}
2. DOM 操作
DOM（Document Object Model）是指页面的文档对象模型，可以通过 JavaScript 来操作页面上的元素。
2.1 获取元素
可以通过 getElementById、getElementsByClassName、getElementsByTagName 等方法获取元素。
javascriptCopy Codevar elemById = document.getElementById("myId");
var elemsByClass = document.getElementsByClassName("myClass");
var elemsByTag = document.getElementsByTagName("div");
2.2 修改元素属性
可以通过 setAttribute、getAttribute、innerHTML 等方法修改元素的属性。
javascriptCopy CodeelemById.setAttribute("class", "newClass");
var myAttr = elemById.getAttribute("class");
elemById.innerHTML = "新内容";
2.3 添加事件监听器
可以通过 addEventListener 方法为元素添加事件监听器。
javascriptCopy CodeelemById.addEventListener("click", function() {
console.log("单击了该元素");
});
3. AJAX 请求
AJAX（Asynchronous JavaScript And XML）是指使用 JavaScript 进行异步通信的技术，可以在不刷新整个页面的情况下更新部分页面内容。
3.1 发送请求
可以通过 XMLHttpRequest 或 fetch 方法发送 AJAX 请求。
javascriptCopy Codevar xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com", true);
xhr.send();
fetch("http://example.com")
.then(response => response.json())
.then(data => console.log(data));
3.2 处理响应
可以通过设置 onreadystatechange 或使用 fetch 方法的 Promise 处理响应结果。
javascriptCopy Codexhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
fetch("http://example.com")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));
实例
以下是一个简单的示例，演示了如何根据按钮单击事件修改页面上的文本内容：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>JavaScript 示例</title>
</head>
<body>
<h1 id="myHeading">Hello</h1>
<button id="myBtn">点击我</button>
<script>
var btn = document.getElementById("myBtn");
var heading = document.getElementById("myHeading");
btn.addEventListener("click", function() {
heading.innerHTML = "你好";
});
</script>
</body>
</html>
以上就是 JavaScript 的基本用法，包括语法、DOM 操作和 AJAX 请求。希望这些笔记对您的学习有所帮助。