javascript代码示例
当提到JavaScript代码示例时，具体的示例可以涵盖多个方面，包括基本语法、DOM操作、事件处理、Ajax请求等。
1. 基本语法
javascript// 输出文本到控制台
console.log("Hello, World!");
// 变量和数据类型
let number = 42;
let string = "Hello, JavaScript!";
let boolean = true;
// 条件语句
if (number > 0) {
console.log("Number is positive");
} else if (number < 0) {
console.log("Number is negative");
} else {
console.log("Number is zero");
}
// 循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
// 函数
function add(a, b) {
return a + b;
}
let result = add(3, 5);
console.log("Sum:", result);
2. DOM 操作
html<!-- HTML结构 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 示例</title>
</head>
<body>
<div id="myDiv">Hello, DOM!</div>
<script>
// JavaScript代码
// 获取元素并修改内容
let myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "Hello, Updated DOM!";
</script>
</body>
</html>
3. 事件处理
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件处理示例</title>
</head>
<body>
<button id="myButton">点击我</button>
<script>
// 添加事件监听器
let myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
alert("按钮被点击了！");
});
</script>
</body>
</html>
4. Ajax 请求
javascript// 使用 XMLHttpRequest 发起简单的 Ajax 请求
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let data = JSON.parse(xhr.responseText);
console.log("Ajax Response:", data);
}
};
xhr.send();
这些示例覆盖了JavaScript的一些基本方面，包括语法、DOM操作、事件处理和简单的Ajax请求。在实际应用中，JavaScript的用途非常广泛，可以用于前端开发、后端开发、移动应用开发等领域。
5. Promise 异步操作
javascript// 使用 Promise 处理异步操作
function asyncOperation() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true; // 模拟异步操作成功
if (success) {
resolve("Operation successful!");
} else {
reject("Operation failed!");
}
}, 2000); // 模拟异步操作需要2秒钟
});
}
asyncOperation()
.then(result => {
console.log(result);
})
.catch(error => {
console.error(error);
});
6. ES6+ 特性 - 箭头函数和解构赋值
javascript// 使用箭头函数和解构赋值
const addNumbers = (a, b) => a + b;
console.log(addNumbers(2, 3)); // 输出 5
const person = { name: "John", age: 25 };
const { name, age } = person;
console.log(`Name: ${name}, Age: ${age}`);
7. 使用 Fetch API 进行网络请求
javascript// 使用 Fetch API 发起网络请求
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log("Fetch API Response:", data))
.catch(error => console.error("Fetch API Error:", error));
8. 使用 LocalStorage 存储数据
javascript// 使用 LocalStorage 存储数据
localStorage.setItem('username', 'john_doe');
const savedUsername = localStorage.getItem('username');
console.log('Saved Username:', savedUsername);
这些示例扩展了JavaScript的一些功能，包括Promise、ES6+语法特性、Fetch API、以及本地存储。请根据你的需求选择适当的示例以供参考。JavaScript是一门非常灵活且功能强大的语言，支持多种编程范式和开发场景。
