简易计算器

--- 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); // 输出：你好，小明！ ``` 格式如下 ```javascript function 函数名(参数1, 参数2, ...参数N) { // 函数体：要执行的代码 return 返回值; // 可选 } ``` ### 箭头函数（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 的强大功能和灵活性！