diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts index 799c163..a0797cf 100644 --- a/docs/.vuepress/notes.ts +++ b/docs/.vuepress/notes.ts @@ -152,6 +152,7 @@ const web = defineNoteConfig({ { text: "Web 前端基础讲解", link: "/programming/web/basic-syntax/html-css-js/" }, { text: "HTML 常用标签与属性", link: "/programming/web/basic-syntax/html-tags-attributes/" }, { text: "HTML 列表与语义布局", link: "/programming/web/basic-syntax/html-lists-and-semantic-layout/" }, + { text: "JavaScript 基础知识", link: "/programming/web/basic-syntax/javascript-basics/" }, ], }, ] diff --git a/docs/notes/programming/web/basic-syntax/javascript-basics.md b/docs/notes/programming/web/basic-syntax/javascript-basics.md new file mode 100644 index 0000000..72b585e --- /dev/null +++ b/docs/notes/programming/web/basic-syntax/javascript-basics.md @@ -0,0 +1,597 @@ +--- +title: JavaScript 基础知识 +createTime: 2025/11/2 21:30:00 +permalink: /programming/web/basic-syntax/javascript-basics/ +--- + +## JavaScript 是什么？ + +JavaScript 是一种广泛用于网页开发的脚本语言，它使网页能够实现交互式功能。与 HTML（负责结构）和 CSS（负责样式）不同，JavaScript 专注于**行为**，可以让网页变得动态和响应式。 + + +## 第一个 JavaScript 程序 + +JavaScript 代码可以直接写在 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 = "加粗的新标题"; +``` + +### 修改元素样式 + +```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 + + + + + 简易计算器 + + + +
+

简易计算器

+ + + + +
结果将显示在这里
+
+ + + + +``` +@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 的强大功能和灵活性！ \ No newline at end of file