JS 简介

欢迎迈出成为软件工程师的第一步。JavaScript 不仅仅是一门语言，它是现代互联网的引擎。你看到的每一个交互按钮、实时地图和通知都是由你即将学到的知识驱动的。

Web 的三位一体

要精通 Web，你必须理解这三种核心技术是如何协同工作的。想象一座房子：

1. HTML (结构)

墙壁、门和梁。它定义了内容。没有它，就什么也看不到。

2. CSS (样式)

油漆、地毯和装饰。它定义了外观。没有它，网页会很难看。

3. JavaScript (逻辑)

电力、管道和智能家居系统。它定义了行为。它让房子"活"起来。

电脑如何理解你？

电脑只懂 0 和 1。JavaScript 充当翻译。你写出人类可读的英语（某种程度上），浏览器的"引擎"（如 Chrome 中的 V8）会立即将其编译成机器代码。这发生在毫秒之间。

查看赞助商以支持 JS Fruggal。

控制台：你的驾驶舱

专业开发者不靠猜，他们靠检查。console.log() 命令是你问电脑的方式："嘿，告诉我这个值现在是什么。"

自己试试： 在下面的代码块中，将引号内的文字改为你自己的名字，然后点击运行。

first-script.js

javascript

// 电脑将此打印到输出屏幕
console.log("你好，未来的工程师！"); 

// 它也可以立即进行数学运算
console.log(100 * 25);

交互式演示：融会贯通

下面是一个真实的游乐场。这不仅仅是模拟——这是正在你的浏览器中运行的真实代码。

你的挑战：
1. 点击 "JS" 标签。
2. 找到这一行 box.classList.toggle('dark');
3. 将 'dark' 改为 'circle'。
4. 点击预览中的按钮看看会发生什么！

<div class="container">
  <div class="box">
    <h2>交互式盒子</h2>
    <p>我只是一个 div。</p>
  </div>
  <button onclick="interact()">魔法按钮</button>
</div>

预览