第三章：JavaScript引擎 · 行为之火-CSDN博客

本文链接：https://blog.csdn.net/weixin_51798265/article/details/147993452

【剧情展开：静止之城】

林昊步入第三重代码世界，这里建筑精美、布局完美，但整个城市寂静无声，没有任何互动：按钮无法点击、文字无法更新，甚至钟表也停滞不前。

“这是——死页。”
零号导师现身，神情凝重：“HTML 是骨，CSS 是形，而 JavaScript，才是这世界的魂。”

此时，一道高墙阻挡去路，上面浮现字样：

只有唤醒交互之火，方可打破静止枷锁。

JavaScript 初识 · 点燃行为之火

导师抛出一本古老代码卷轴，上写：JavaScript

🔧 引入方式

直接内嵌在页面中：

<script>
  alert('你好，世界');
</script>

外部引入：
```
<script src="main.js"></script>
```

“推荐使用外部 JS 文件，便于管理与维护。”

变量：数据的容器

林昊在终端敲下：

let name = "林昊";
const age = 16;
var school = "代码学院";

🔑关键字含义：

let: 可以重新赋值的变量
const: 常量，不可更改
var: 旧时代的变量声明方式，作用域不推荐

数据类型的九族封印

导师演示数据之力：

let a = 100; // 数字 Number
let b = "前端"; // 字符串 String
let c = true; // 布尔 Boolean
let d = null; // 空值
let e; // undefined
let f = [1, 2, 3]; // 数组 Array
let g = { name: "林昊", level: 1 }; // 对象 Object

“数据类型决定你能对它做什么操作——这将是构建逻辑的基石。”

函数：封印术与技能释放

✨ 函数声明：

function greet(name) {
  console.log("你好，" + name);
}
greet("林昊");

✨ 箭头函数（现代写法）：

const greet = (name) => {
  console.log(`你好，${name}`);
};

“函数是行为的单位，逻辑的魔法阵。你可以随时召唤它。”

事件绑定：与用户互动

林昊面对无响应按钮，尝试使用行为注入术：

🔘 HTML 按钮：

<button id="btn">点击我</button>
<p id="message"></p>

🔘 JavaScript 绑定事件：

document.getElementById("btn").addEventListener("click", function () {
  document.getElementById("message").textContent = "按钮被点击了！";
});

按钮亮起，周围景色开始变动，一丝交互气息涌现。

条件判断：选择之术

导师继续传授逻辑判断：

let score = 85;

if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

循环控制：批量释放法术

林昊想对一组卡片元素进行处理：

let cards = ["HTML", "CSS", "JavaScript"];

for (let i = 0; i < cards.length; i++) {
  console.log("正在学习：" + cards[i]);
}

“循环，是批量操作神器。善用它，你将事半功倍。”

行为引擎启动 · 解封页面

林昊编写了如下脚本 main.js：

document.addEventListener("DOMContentLoaded", () => {
  const btn = document.getElementById("btn");
  const output = document.getElementById("message");

  btn.addEventListener("click", () => {
    output.textContent = "你启动了行为之火！";
    btn.style.backgroundColor = "#4caf50";
    btn.textContent = "已激活";
  });
});