以下是一份适合初学者的JavaScript基础教程大纲，包含代码示例和核心概念讲解：

---

JavaScript 基础教程

一、基础语法

// 单行注释
/* 多行注释 */

// 输出到控制台
console.log("Hello World!");

// 变量声明（ES6+）
let name = "Alice";    // 可重新赋值
const PI = 3.14;       // 常量
var age = 25;          // 传统声明方式（建议使用let/const）

二、数据类型

// 基本类型
let str = "字符串";      // String
let num = 100;          // Number
let bool = true;        // Boolean
let empty = null;       // Null
let notDefined;         // Undefined
let sym = Symbol();     // Symbol (ES6)

// 引用类型
let obj = {             // Object
  name: "Bob",
  age: 30
};
let arr = [1, 2, 3];    // Array
function hello() {}     // Function

三、运算符

// 算术运算符
5 + 2   // 7
10 - 3  // 7
4 * 2   // 8
10 / 2  // 5
10 % 3  // 1 (取余)

// 比较运算符
5 == "5"   // true (值相等)
5 === 5    // true (值和类型都相等)
3 != "3"   // false
3 !== "3"  // true

// 逻辑运算符
true && false  // false (与)
true || false  // true  (或)
!true          // false (非)

四、流程控制

// 条件语句
let hour = 14;
if (hour < 12) {
  console.log("Good morning!");
} else if (hour < 18) {
  console.log("Good afternoon!"); // 执行这里
} else {
  console.log("Good evening!");
}

// 循环语句
for (let i = 0; i < 5; i++) {
  console.log(i); // 输出0-4
}

let j = 0;
while (j < 3) {
  console.log(j); // 输出0-2
  j++;
}

五、函数

// 函数声明
function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 5

// 函数表达式
const multiply = function(x, y) {
  return x * y;
};

// 箭头函数 (ES6+)
const square = n => n * n;
console.log(square(5)); // 25

六、对象与数组

// 对象操作
let person = {
  name: "Charlie",
  age: 28,
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};
person.greet(); // Hello, I'm Charlie

// 数组方法
let numbers = [1, 2, 3];
numbers.push(4);        // 添加元素
numbers.pop();          // 移除最后一个元素
numbers.forEach(n => console.log(n)); // 遍历

七、DOM操作基础

<button id="myBtn">Click me</button>
<p id="output"></p>

<script>
// 获取元素
const btn = document.getElementById("myBtn");
const output = document.querySelector("#output");

// 事件监听
btn.addEventListener("click", () => {
  output.textContent = "Button clicked!";
  output.style.color = "blue";
});
</script>

八、综合案例：简单计数器

<div>
  <button id="decrement">-</button>
  <span id="count">0</span>
  <button id="increment">+</button>
</div>

<script>
let count = 0;
const countDisplay = document.getElementById("count");

document.getElementById("increment").addEventListener("click", () => {
  count++;
  updateDisplay();
});

document.getElementById("decrement").addEventListener("click", () => {
  count--;
  updateDisplay();
});

function updateDisplay() {
  countDisplay.textContent = count;
  countDisplay.style.color = count >= 0 ? "green" : "red";
}
</script>

学习建议

1. 使用现代浏览器开发者工具（F12）进行调试
2. 推荐学习顺序：基础语法 → DOM操作 → ES6+新特性
3. 实践项目：待办清单、计算器、简单游戏
4. 后续可学习：异步编程、模块化、框架（React/Vue）

---

这份教程涵盖了JavaScript的核心基础概念，建议配合代码编辑器（如VSCode）进行实践练习。需要更深入的某个部分讲解可以随时告诉我！