JavaScript是一种高级、解释型的编程语言,广泛应用于网页开发,它赋予网页动态、交互性和丰富的用户体验。 1. JavaScript的基础 JavaScript是一门直译式语言,即代码不需要经过编译过程,可以直接在浏览器上运行。它主要用于网页的前端开发,但也可以应用于服务器端,称为Node.js。
2. 在HTML中使用JavaScript 通过<script>标签将JavaScript代码嵌入到HTML页面中。
htmlCopy code
<!DOCTYPE html>
<html>
<head>
<title>JavaScript笔记</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
// 这里是您的JavaScript代码
</script>
</body>
</html>
3. 变量和数据类型 在JavaScript中,可以使用var、let或const声明变量。常用的数据类型包括字符串、数字、布尔值、数组和对象。
javascriptCopy code
// 声明变量并赋值
let name = "John";
const age = 30;
var isStudent = true;
// 数组和对象
let numbers = [1, 2, 3, 4, 5];
let person = { name: "Alice", age: 25 };
4. 控制结构 JavaScript支持条件语句和循环语句,可以控制程序的流程。
javascriptCopy code
// 条件语句
if (age < 18) {
console.log("未成年");
} else {
console.log("成年人");
}
// 循环语句
for (let i = 0; i < 5; i++) {
console.log("循环次数:" + i);
}
5. 函数 函数是一组可重复使用的代码块,可以带有参数和返回值。
javascriptCopy code
// 定义函数
function greet(name) {
return "Hello, " + name + "!";
}
// 调用函数
let message = greet("Alice");
console.log(message); // 输出:Hello, Alice!
6. 事件处理 JavaScript使网页变得生动有趣,可以通过事件处理来响应用户的交互。
htmlCopy code
<button onclick="alert('按钮被点击')">点击我</button>
7. DOM操作 DOM(文档对象模型)是网页的编程接口,通过JavaScript可以操作HTML元素和样式。
htmlCopy code
<p id="demo">这是一个段落</p>
<script>
// 获取元素并修改内容
let paragraph = document.getElementById("demo");
paragraph.innerHTML = "修改后的内容";
</script>
8. 异步编程 JavaScript是单线程执行的,但通过异步编程可以处理耗时的操作,如网络请求和文件读取。
javascriptCopy code
// 使用Promise处理异步任务
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("数据加载成功");
}, 2000);
});
}
fetchData().then(data => {
console.log(data); // 输出:数据加载成功
});
9. 错误处理 在编程中,错误是常见的。JavaScript提供try...catch块来捕获和处理异常。
javascriptCopy code
try {
// 可能会引发错误的代码
let result = 10 / 0;
} catch (error) {
console.log("出现错误:" + error.message);
}
10. 闭包 闭包是指函数可以访问并操作其词法作用域外的变量。
javascriptCopy code
function outer() {
let count = 0;
function inner() {
count++;
console.log("计数:" + count);
}
return inner;
}
let counter = outer();
counter(); // 输出:计数:1
counter(); // 输出:计数:2