1. 基础语法：
变量和数据类型：
// 定义变量
var x = 5;
let y = 10;
const PI = 3.14;
// 数据类型
let name = "John"; // 字符串
let age = 25; // 数字
let isStudent = true; // 布尔值
let fruits = ['apple', 'banana', 'orange']; // 数组
let person = { firstName: 'John', lastName: 'Doe' }; // 对象
条件语句：
let hour = 15;
if (hour < 12) {
console.log("Good morning!");
} else if (hour < 18) {
console.log("Good afternoon!");
} else {
console.log("Good evening!");
}
循环语句：
// for 循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
// while 循环
let counter = 0;
while (counter < 5) {
console.log(counter);
counter++;
}
2. 函数：
// 定义函数
function add(a, b) {
return a + b;
}
// 调用函数
let result = add(3, 7);
console.log(result); // 输出：10
3. DOM 操作：
JavaScript 通过 DOM（文档对象模型）来操作 HTML 元素。
<!DOCTYPE html>
<html>
<body>
<button id="myButton" onclick="changeText()">Click me</button>
<script>
function changeText() {
document.getElementById("myButton").innerHTML = "Hello, JavaScript!";
}
</script>
</body>
</html>
4. 事件处理：
<!DOCTYPE html>
<html>
<body>
<button onclick="displayAlert()">Click me</button>
<script>
function displayAlert() {
alert("Button Clicked!");
}
</script>
</body>
</html>
5. AJAX 请求：
// 使用 XMLHttpRequest 发送 GET 请求
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
xhr.open("GET", "https://api.example.com/data", true);
xhr.send();
6. 使用第三方库：
使用第三方库（如 jQuery 或 Axios）可以简化 DOM 操作和 AJAX 请求。
使用 jQuery：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myButton">Click me</button>
<script>
$(document).ready(function(){
$("#myButton").click(function(){
alert("Button Clicked!");
});
});
</script>
</body>
</html>
这只是 JavaScript 的基础，JavaScript 在 Web 开发中有很多方面可以探索，包括 ES6+ 特性、前端框架（如 React、Vue、Angular）等。深入学习 JavaScript 可以为你的前端开发提供更多的能力。
转载请注明出处：http://www.pingtaimeng.com/article/detail/3502/JavaScript