🚀 JavaScript 基础教程

📌 什么是 JavaScript？

JavaScript 是一种广泛用于网页开发的脚本语言，可实现动态交互效果。它与 HTML、CSS 共同构建现代网页，是前端开发的核心技术之一。

📚 学习 JavaScript 的必备知识

1. 变量声明
   使用 let、const 或 var 定义变量，例如：

   let message = "Hello, World!";
   const PI = 3.14;
   

   💡 提示：const 适用于常量，let 用于可变变量。

2. 数据类型
   常见类型包括：

   • 原始类型：string、number、boolean、null、undefined
   • 引用类型：object、array、function
     📌 注意：JavaScript 是弱类型语言，变量类型会动态变化。

3. 运算符

   • 算术运算符：+、-、*、/
   • 比较运算符：==、===、>、<
   • 逻辑运算符：&&、||、!
     ✅ 练习：尝试用 === 判断变量类型。

4. 函数定义

   function greet(name) {
     return "Hello, " + name + "!";
   }
   

   🌐 扩展阅读：深入理解 JavaScript 函数

🔄 常用语法结构

• 条件语句

  if (age >= 18) {
    console.log("成年");
  } else {
    console.log("未成年");
  }
  

  😎 小技巧：使用三元运算符简化判断逻辑。

• 循环结构

  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
  

  📈 应用场景：遍历数组、重复执行任务。

📦 JavaScript 数据结构

类型	说明	示例
数组	有序数据集合	let fruits = ["苹果", "香蕉"]
对象	键值对存储	let person = { name: "张三", age: 25 }
Map	键值对集合（键可为任意类型）	let map = new Map(); map.set("key", "value")
Set	唯一值集合	let uniqueNumbers = new Set([1, 2, 3])

📌 实战小项目：计算器

1. 创建 HTML 输入框

   <input type="number" id="num1"> + <input type="number" id="num2"> = 
   <span id="result"></span>
   

2. 编写 JavaScript 逻辑

   document.getElementById("num1").addEventListener("input", calculate);
   document.getElementById("num2").addEventListener("input", calculate);
   function calculate() {
     let a = parseFloat(document.getElementById("num1").value);
     let b = parseFloat(document.getElementById("num2").value);
     document.getElementById("result").innerText = a + b;
   }
   

3. 效果：实时显示两个数字的和，感受动态交互的魅力！

📚 推荐学习路径

• 入门：JavaScript 基础语法
• 进阶：JavaScript 高级特性
• 实战：JavaScript 项目实战

📌 **提示**：多实践、多调试，代码能力会快速提升！