597 lines
13 KiB
Markdown
597 lines
13 KiB
Markdown
---
|
||
title: JavaScript 基础知识
|
||
createTime: 2025/11/2 21:30:00
|
||
permalink: /programming/web/basic-syntax/javascript-basics/
|
||
---
|
||
|
||
## JavaScript 是什么？
|
||
|
||
JavaScript 是一种广泛用于网页开发的脚本语言，它使网页能够实现交互式功能。与 HTML（负责结构）和 CSS（负责样式）不同，JavaScript 专注于**行为**，可以让网页变得动态和响应式。
|
||
|
||
|
||
## 第一个 JavaScript 程序
|
||
|
||
JavaScript 代码可以直接写在 HTML 文件中，通常放在 `<body>` 标签的底部，使用 `<script>` 标签包裹。
|
||
|
||
```html title="index.html"
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>我的第一个 JavaScript 程序</title>
|
||
</head>
|
||
<body>
|
||
<h1>你好，世界！</h1>
|
||
|
||
<script>
|
||
// 这是注释，不会被执行
|
||
console.log('Hello, JavaScript!'); // 在控制台输出文本
|
||
alert('欢迎学习 JavaScript！'); // 弹出提示框
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
**提示**：你可以在浏览器中按下 F12 打开开发者工具，然后切换到 "Console" 标签查看 `console.log()` 的输出。
|
||
|
||
`console.log()` 是 JavaScript 中最常用、最重要的调试工具，可以说是每个开发者的"最佳朋友"！
|
||
|
||
### 基本输出 ###
|
||
|
||
```javascript
|
||
// 输出字符串
|
||
console.log("Hello World!");
|
||
|
||
// 输出变量
|
||
const name = "小明";
|
||
console.log(name);
|
||
|
||
// 输出多个值
|
||
const age = 18;
|
||
const isStudent = true;
|
||
console.log("学生信息:", name, age, isStudent);
|
||
```
|
||
|
||
### 输出不同类型的数据 ###
|
||
|
||
```javascript
|
||
// 各种数据类型
|
||
console.log("字符串:", "Hello");
|
||
console.log("数字:", 42);
|
||
console.log("布尔值:", true);
|
||
console.log("数组:", [1, 2, 3]);
|
||
console.log("对象:", {name: "李华", age: 20});
|
||
console.log("函数:", function() {});
|
||
console.log("undefined:", undefined);
|
||
console.log("null:", null);
|
||
```
|
||
|
||
### 字符串插值 ###
|
||
|
||
```javascript
|
||
const userName = "张三";
|
||
const userAge = 25;
|
||
const score = 95.5;
|
||
|
||
// 传统方式
|
||
console.log("用户 " + userName + " 年龄 " + userAge + " 分数 " + score);
|
||
|
||
// 模板字符串（推荐）
|
||
console.log(`用户 ${userName} 年龄 ${userAge} 分数 ${score}`);
|
||
|
||
// 带表达式的插值
|
||
console.log(`${userName} 是 ${userAge >= 18 ? "成年人" : "未成年人"}`);
|
||
```
|
||
|
||
### 格式化输出 ###
|
||
|
||
```javascript
|
||
const product = {
|
||
name: "笔记本电脑",
|
||
price: 5999,
|
||
brand: "Dell",
|
||
inStock: true
|
||
};
|
||
|
||
// %s - 字符串
|
||
console.log("产品名称: %s", product.name);
|
||
|
||
// %d - 数字
|
||
console.log("价格: %d 元", product.price);
|
||
|
||
// %f - 浮点数
|
||
console.log("折扣价: %f", product.price * 0.9);
|
||
|
||
// %o - 对象
|
||
console.log("完整产品信息: %o", product);
|
||
|
||
// %c - CSS样式
|
||
console.log("%c重要信息!", "color: red; font-size: 20px; font-weight: bold;");
|
||
```
|
||
|
||
## JavaScript 变量
|
||
|
||
变量是用来存储信息的容器。在 JavaScript 中，我们使用 `let`、`const` 或 `var` 关键字来声明变量。
|
||
|
||
### 变量声明方式
|
||
|
||
```javascript
|
||
// 使用 let 声明可变变量
|
||
let name = "小明";
|
||
name = "小红"; // 可以修改
|
||
|
||
// 使用 const 声明常量（不可变）
|
||
const PI = 3.14159;
|
||
// PI = 3.14; // 错误！常量不能修改
|
||
|
||
// 使用 var 声明变量（旧方式，现在推荐使用 let 和 const）
|
||
var age = 25;
|
||
```
|
||
|
||
**注意**：
|
||
- 使用 `let` 声明的变量可以重新赋值
|
||
- 使用 `const` 声明的变量不能重新赋值（常量）
|
||
- 尽量避免使用 `var`，因为它有一些奇怪的作用域规则
|
||
|
||
|
||
## 数据类型
|
||
|
||
JavaScript 有几种基本数据类型：
|
||
|
||
### 1. 字符串（String）
|
||
|
||
用于表示文本，可以使用单引号或双引号。
|
||
|
||
```javascript
|
||
const greeting = "你好";
|
||
const name = 'JavaScript';
|
||
const message = `${greeting}, ${name}!`; // 使用模板字符串（ES6 特性）
|
||
console.log(message); // 输出：你好, JavaScript!
|
||
```
|
||
|
||
### 2. 数字（Number）
|
||
|
||
用于表示数值。
|
||
|
||
```javascript
|
||
const age = 25;
|
||
const price = 99.99;
|
||
const PI = 3.14159;
|
||
```
|
||
|
||
### 3. 布尔值（Boolean）
|
||
|
||
用于表示真或假，只有两个值：`true` 和 `false`。
|
||
|
||
```javascript
|
||
const isStudent = true;
|
||
const hasGraduated = false;
|
||
```
|
||
|
||
### 4. 数组（Array）
|
||
|
||
用于存储多个值的集合。
|
||
|
||
```javascript
|
||
const fruits = ["苹果", "香蕉", "橙子"];
|
||
console.log(fruits[0]); // 输出：苹果（数组索引从0开始）
|
||
|
||
// 添加元素
|
||
fruits.push("葡萄");
|
||
console.log(fruits); // 输出：["苹果", "香蕉", "橙子", "葡萄"]
|
||
```
|
||
|
||
### 5. 对象（Object）
|
||
|
||
用于存储键值对集合。
|
||
|
||
```javascript
|
||
const person = {
|
||
name: "小明",
|
||
age: 25,
|
||
isStudent: true,
|
||
greet: function() {
|
||
console.log(`你好，我是${this.name}！`);
|
||
}
|
||
};
|
||
|
||
console.log(person.name); // 输出：小明
|
||
person.greet(); // 输出：你好，我是小明！
|
||
```
|
||
|
||
## 运算符
|
||
|
||
### 算术运算符
|
||
|
||
```javascript
|
||
const a = 10;
|
||
const b = 5;
|
||
|
||
console.log(a + b); // 15 加法
|
||
console.log(a - b); // 5 减法
|
||
console.log(a * b); // 50 乘法
|
||
console.log(a / b); // 2 除法
|
||
console.log(a % b); // 0 取余
|
||
console.log(a ** b); // 100000 幂运算（ES6）
|
||
```
|
||
|
||
### 赋值运算符
|
||
|
||
```javascript
|
||
const x = 10;
|
||
|
||
x += 5; // 等同于 x = x + 5
|
||
console.log(x); // 15
|
||
|
||
x -= 3; // 等同于 x = x - 3
|
||
console.log(x); // 12
|
||
```
|
||
|
||
### 比较运算符
|
||
|
||
```javascript
|
||
const a = 10;
|
||
const b = 5;
|
||
|
||
console.log(a > b); // true
|
||
console.log(a < b); // false
|
||
console.log(a >= b); // true
|
||
console.log(a <= b); // false
|
||
console.log(a === b); // false（严格相等，比较值和类型）
|
||
console.log(a == b); // false（宽松相等，只比较值）
|
||
console.log(a !== b); // true（严格不相等）
|
||
```
|
||
|
||
## 条件语句
|
||
|
||
### if 语句
|
||
|
||
```javascript
|
||
const age = 18;
|
||
|
||
if (age >= 18) {
|
||
console.log("你已经成年了！");
|
||
} else if (age >= 13) {
|
||
console.log("你是青少年。");
|
||
} else {
|
||
console.log("你还是个孩子。");
|
||
}
|
||
```
|
||
|
||
|
||
## 循环
|
||
|
||
### for 循环
|
||
|
||
```javascript
|
||
// 打印1到5
|
||
for (const i = 1; i <= 5; i++) {
|
||
console.log(i);
|
||
}
|
||
|
||
// 遍历数组
|
||
const fruits = ["苹果", "香蕉", "橙子"];
|
||
for (const i = 0; i < fruits.length; i++) {
|
||
console.log(fruits[i]);
|
||
}
|
||
|
||
// 使用 for...of 遍历（ES6）
|
||
for (const fruit of fruits) {
|
||
console.log(fruit);
|
||
}
|
||
```
|
||
|
||
### while 循环
|
||
|
||
```javascript
|
||
const count = 1;
|
||
while (count <= 5) {
|
||
console.log(count);
|
||
count++;
|
||
}
|
||
```
|
||
|
||
## 函数
|
||
|
||
函数是可重用的代码块，用于执行特定任务。
|
||
|
||
### 函数声明
|
||
|
||
```javascript
|
||
function greet(name) {
|
||
return `你好，${name}！`;
|
||
}
|
||
|
||
const message = greet("小明");
|
||
console.log(message); // 输出：你好，小明！
|
||
```
|
||
|
||
### 箭头函数（ES6）
|
||
|
||
```javascript
|
||
const sum = (a, b) => {
|
||
return a + b;
|
||
};
|
||
|
||
// 简化写法（当只有一行返回语句时）
|
||
const multiply = (a, b) => a * b;
|
||
|
||
console.log(sum(3, 4)); // 7
|
||
console.log(multiply(3, 4)); // 12
|
||
```
|
||
|
||
## DOM 操作
|
||
|
||
DOM（文档对象模型）是 HTML 和 XML 文档的编程接口。JavaScript 可以通过 DOM 来操作网页元素。
|
||
|
||
### 选择元素
|
||
|
||
```javascript
|
||
// 通过 id 选择元素
|
||
const title = document.getElementById("title");
|
||
|
||
// 通过 class 选择元素（返回元素集合）
|
||
const items = document.getElementsByClassName("item");
|
||
|
||
// 通过标签名选择元素
|
||
const paragraphs = document.getElementsByTagName("p");
|
||
|
||
// 通过 CSS 选择器选择元素（ES5+）
|
||
const header = document.querySelector("header"); // 选择第一个匹配的元素
|
||
const allLinks = document.querySelectorAll("a"); // 选择所有匹配的元素
|
||
```
|
||
|
||
### 修改元素内容
|
||
|
||
```javascript
|
||
// 修改文本内容
|
||
const title = document.getElementById("title");
|
||
title.textContent = "新标题";
|
||
|
||
// 修改 HTML 内容
|
||
title.innerHTML = "<strong>加粗的新标题</strong>";
|
||
```
|
||
|
||
### 修改元素样式
|
||
|
||
```javascript
|
||
const element = document.getElementById("box");
|
||
element.style.color = "red";
|
||
element.style.fontSize = "20px";
|
||
element.style.backgroundColor = "#f0f0f0";
|
||
```
|
||
|
||
### 添加事件监听器
|
||
|
||
```javascript
|
||
const button = document.getElementById("myButton");
|
||
|
||
button.addEventListener("click", function() {
|
||
console.log("按钮被点击了！");
|
||
alert("你好，欢迎使用！");
|
||
});
|
||
```
|
||
|
||
## 小案例：交互式计算器
|
||
|
||
下面是一个简单的交互式计算器示例，演示如何结合 HTML、CSS 和 JavaScript。
|
||
|
||
::: code-tabs
|
||
@tab index.html
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>简易计算器</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="calculator">
|
||
<h2>简易计算器</h2>
|
||
<input type="number" id="num1" placeholder="输入第一个数字">
|
||
<select id="operation">
|
||
<option value="add">+</option>
|
||
<option value="subtract">-</option>
|
||
<option value="multiply">×</option>
|
||
<option value="divide">÷</option>
|
||
</select>
|
||
<input type="number" id="num2" placeholder="输入第二个数字">
|
||
<button id="calculate">计算</button>
|
||
<div id="result">结果将显示在这里</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|
||
```
|
||
@tab style.css
|
||
```css
|
||
.calculator {
|
||
max-width: 300px;
|
||
margin: 2rem auto;
|
||
padding: 1.5rem;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
font-family: system-ui;
|
||
}
|
||
|
||
input, select, button {
|
||
margin: 0.5rem 0;
|
||
padding: 0.5rem;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
button {
|
||
background: #007bff;
|
||
color: white;
|
||
border: none;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
button:hover {
|
||
background: #0056b3;
|
||
}
|
||
|
||
#result {
|
||
margin-top: 1rem;
|
||
padding: 1rem;
|
||
background: #f8f9fa;
|
||
border-radius: 4px;
|
||
}
|
||
```
|
||
@tab script.js
|
||
```javascript
|
||
// 获取DOM元素
|
||
const num1Input = document.getElementById('num1');
|
||
const num2Input = document.getElementById('num2');
|
||
const operationSelect = document.getElementById('operation');
|
||
const calculateButton = document.getElementById('calculate');
|
||
const resultDiv = document.getElementById('result');
|
||
|
||
// 添加点击事件监听器
|
||
calculateButton.addEventListener('click', function() {
|
||
// 获取输入值
|
||
const num1 = parseFloat(num1Input.value);
|
||
const num2 = parseFloat(num2Input.value);
|
||
const operation = operationSelect.value;
|
||
const result;
|
||
|
||
// 检查输入是否有效
|
||
if (isNaN(num1) || isNaN(num2)) {
|
||
resultDiv.textContent = '请输入有效的数字！';
|
||
return;
|
||
}
|
||
|
||
// 执行计算
|
||
switch (operation) {
|
||
case 'add':
|
||
result = num1 + num2;
|
||
break;
|
||
case 'subtract':
|
||
result = num1 - num2;
|
||
break;
|
||
case 'multiply':
|
||
result = num1 * num2;
|
||
break;
|
||
case 'divide':
|
||
// 检查除数是否为0
|
||
if (num2 === 0) {
|
||
resultDiv.textContent = '除数不能为0！';
|
||
return;
|
||
}
|
||
result = num1 / num2;
|
||
break;
|
||
}
|
||
|
||
// 显示结果
|
||
resultDiv.textContent = `计算结果：${result}`;
|
||
});
|
||
```
|
||
:::
|
||
|
||
## JavaScript 的异步编程
|
||
|
||
JavaScript 是单线程的，但它可以通过异步编程模型来处理耗时操作，如网络请求、定时器等。
|
||
|
||
### setTimeout 和 setInterval
|
||
|
||
```javascript
|
||
// setTimeout - 延迟执行一次
|
||
setTimeout(function() {
|
||
console.log('2秒后执行');
|
||
}, 2000);
|
||
|
||
// setInterval - 定期重复执行
|
||
const count = 0;
|
||
const timer = setInterval(function() {
|
||
count++;
|
||
console.log(`执行第 ${count} 次`);
|
||
|
||
if (count >= 5) {
|
||
clearInterval(timer); // 清除定时器
|
||
console.log('定时器已停止');
|
||
}
|
||
}, 1000);
|
||
```
|
||
|
||
### Promise（ES6）
|
||
|
||
Promise 是异步编程的一种解决方案，用于处理异步操作。
|
||
|
||
```javascript
|
||
// 创建一个Promise
|
||
const fetchData = new Promise((resolve, reject) => {
|
||
// 模拟网络请求
|
||
setTimeout(() => {
|
||
const success = true;
|
||
if (success) {
|
||
resolve('数据获取成功');
|
||
} else {
|
||
reject('数据获取失败');
|
||
}
|
||
}, 2000);
|
||
});
|
||
|
||
// 使用Promise
|
||
fetchData
|
||
.then(data => {
|
||
console.log(data);
|
||
})
|
||
.catch(error => {
|
||
console.error(error);
|
||
});
|
||
```
|
||
|
||
## 常见错误和调试技巧
|
||
|
||
### 常见错误
|
||
|
||
1. **语法错误**：代码不符合 JavaScript 语法规则
|
||
2. **引用错误**：使用了未定义的变量或函数
|
||
3. **类型错误**：对错误类型的值进行操作
|
||
4. **范围错误**：数值超出有效范围
|
||
|
||
### 调试技巧
|
||
|
||
1. **使用 console.log()**：在控制台输出变量值或执行流程
|
||
2. **使用断点**：在浏览器开发者工具中设置断点，逐步执行代码
|
||
3. **检查错误信息**：仔细阅读错误提示，找出问题所在
|
||
4. **检查变量类型**：使用 `typeof` 操作符检查变量类型
|
||
|
||
```javascript
|
||
console.log(typeof "hello"); // "string"
|
||
console.log(typeof 42); // "number"
|
||
console.log(typeof true); // "boolean"
|
||
console.log(typeof {}); // "object"
|
||
console.log(typeof []); // "object"（数组也是对象的一种）
|
||
```
|
||
|
||
## 实践练习
|
||
|
||
### 练习1：创建一个简单的待办事项列表
|
||
|
||
使用 HTML、CSS 和 JavaScript 创建一个待办事项列表，包含添加、删除和标记完成功能。
|
||
|
||
提示：
|
||
- 使用数组存储待办事项
|
||
- 使用 DOM 操作动态更新列表
|
||
- 为按钮添加事件监听器
|
||
|
||
### 练习2：实现一个数字猜谜游戏
|
||
|
||
计算机随机生成一个1到100之间的数字，玩家通过输入框猜测，程序提示"猜大了"或"猜小了"，直到猜对为止。
|
||
|
||
提示：
|
||
- 使用 `Math.random()` 生成随机数
|
||
- 使用条件语句判断猜测结果
|
||
- 记录并显示猜测次数
|
||
|
||
## 总结
|
||
|
||
JavaScript 是现代 web 开发的核心技术之一，它可以让网页变得动态和交互。通过学习变量、数据类型、运算符、条件语句、循环、函数和 DOM 操作等基础知识，你已经迈出了学习 JavaScript 的第一步。
|
||
|
||
继续练习和探索，你会发现 JavaScript 的强大功能和灵活性！ |