2.4 第一个 JavaScript 程序：输出、变量、交互

了解了运行环境和开发工具之后，现在让我们动手写出第一个 JavaScript 程序。这里的重点不是展示“Hello World”就结束，而是通过几个最基础的操作，让你立刻感受到 JavaScript 如何与页面、用户产生联系。

2.4.1 在浏览器控制台中输出信息

打开浏览器（以 Chrome 为例），按 F12 打开开发者工具，切换到 Console（控制台） 面板。在闪烁的光标旁输入以下代码，然后按回车：

console.log("Hello, JavaScript!");

你会立刻看到控制台打印出了一行文字 Hello, JavaScript!。console.log() 是开发阶段最常用、最直接的输出方法，用于查看变量值、调试逻辑、追踪代码执行流程。它不会对页面外观产生任何影响，仅仅在开发者工具中留下记录。

小技巧： 你还可以用 console.error() 输出红色错误信息，用 console.table() 以表格形式展示数组或对象，方便调试。

2.4.2 使用变量存储和复用数据

变量就像一个有名字的盒子，你可以把数据放进去，需要时再取出来。JavaScript 声明变量有三种方式：var、let 和 const。在实际开发中，现代规范推荐优先使用 let 和 const。

// let 用于值可能会改变的变量
let message = "你好，这是变量练习";
console.log(message);

message = "变量的值已经变了";
console.log(message);

// const 用于值不会改变的变量（常量）
const birthYear = 1995;
console.log("出生年份：" + birthYear);

// birthYear = 2000;  // 这行会报错，const 声明后不能重新赋值

变量是程序的最小记忆单元。你可以在声明时直接赋值（初始化），也可以先声明后赋值。变量名区分大小写，通常使用驼峰命名法（如 userName）。

2.4.3 与用户进行基本交互

除了在控制台里自言自语，JavaScript 还可以通过浏览器内置的对话框直接与用户对话。最常用的有三个函数：

alert()：弹出一个信息提示框，只有一个“确定”按钮。
prompt()：弹出一个输入框，用户可输入文本，点击确定后返回输入的内容（字符串类型），取消则返回 null。
confirm()：弹出一个确认框，有“确定”和“取消”按钮，分别返回 true 和 false。

// 1. 弹出提示框
alert("欢迎来到 JavaScript 的世界！");

// 2. 获取用户输入
let userName = prompt("请输入你的名字：");
console.log("用户输入的名字是：" + userName);

// 3. 根据用户选择执行不同逻辑
let isConfirmed = confirm("你确定要学习 JavaScript 吗？");
if (isConfirmed) {
    console.log("太棒了，让我们一起深入探索！");
} else {
    console.log("没关系，也许以后会有兴趣。");
}

注意：在真实的网站开发中，alert()、prompt() 和 confirm() 只能用于简单的教学或调试，因为它们样式固定、会阻塞整个页面（不关闭对话框，用户无法操作页面其他部分）。实际产品中会用自定义弹窗组件代替。

2.4.4 将 JavaScript 代码嵌入 HTML 页面

前面我们都是直接在控制台中一行行输入代码，但如果想构建一个完整的网页，就需要把 JavaScript 代码放在 HTML 文件中。将以下内容保存为一个 .html 文件（如 index.html），然后用浏览器打开：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>第一个 JavaScript 程序</title>
</head>
<body>
    <h1>JavaScript 交互演示</h1>
    <button onclick="sayHello()">点击我问好</button>

    <script>
        // 定义函数
        function sayHello() {
            let name = prompt("你叫什么名字？");
            if (name) {
                alert("你好，" + name + "！欢迎来到 JavaScript 的世界。");
            } else {
                alert("你没有输入名字哦");
            }
        }
    </script>
</body>
</html>

这个页面同时演示了两个关键点：

内联脚本：<script> 标签内的 JavaScript 代码会在页面加载时执行。函数 sayHello 被定义但不会立即运行，它处于“待命”状态。
事件绑定：按钮的 onclick 属性将用户点击动作与函数关联起来。点击按钮 → 执行 sayHello → 弹出输入框 → 弹出问候对话框。这就是事件驱动编程最简单的例子。

2.4.5 动手练习：你的第一个可交互程序

现在你可以稍微变通一下，尝试完成以下任务，巩固所学：

修改上面的 HTML 文件，让页面首次加载时就弹出一个 alert，显示当前日期和时间（提示：new Date() 可以得到当前时间）。
使用 prompt 获取用户年龄，用 console.log 在控制台输出“你已经 X 岁了”。
猜数字游戏雏形：定义一个数字常量 const secret = 7;，用 prompt 获取用户猜测，用 if 判断猜的大了、小了还是对了，并用 alert 给出提示。

这些练习不需要完全正确，重点在于让你“感觉”到 JavaScript 确实可以响应输入、做出判断、输出结果。真正的编程，就是从这样一次次“输入-处理-输出”的闭环中逐渐生长起来的。