编辑“︁JavaScript第一个程序”︁（章节）

= JavaScript第一个程序 =

== 介绍 ==  
JavaScript是一种广泛应用于网页开发的脚本语言，用于为网页添加交互性和动态功能。在学习JavaScript时，编写第一个程序是一个重要的里程碑。本节将引导初学者完成第一个JavaScript程序的编写、运行和理解，同时为高级用户提供更深层次的细节。

== 编写第一个JavaScript程序 ==  
JavaScript可以在HTML文件中嵌入，也可以通过外部脚本文件引入。以下是两种常见的方法：

=== 方法1：内联脚本 ===  
在HTML文件中，使用`<script>`标签直接编写JavaScript代码：

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>第一个JavaScript程序</title>
</head>
<body>
    <h1>欢迎学习JavaScript！</h1>
    <script>
        // 这是JavaScript代码
        console.log("Hello, World!");
        alert("这是你的第一个JavaScript程序！");
    </script>
</body>
</html>
</syntaxhighlight>

'''输出：'''  
1. 在浏览器的控制台中会显示`Hello, World!`。  
2. 网页会弹出一个对话框，显示“这是你的第一个JavaScript程序！”。  

'''解释：'''  
- `console.log()`用于在浏览器的控制台输出信息，常用于调试。  
- `alert()`用于显示一个弹窗对话框。  

=== 方法2：外部脚本 ===  
将JavaScript代码保存为外部文件（例如`script.js`），然后在HTML中引用：

'''script.js文件内容：'''  
<syntaxhighlight lang="javascript">
// 外部JavaScript文件
function greet() {
    console.log("Hello from an external file!");
    alert("外部脚本已加载！");
}
greet();
</syntaxhighlight>

'''HTML文件内容：'''  
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>外部JavaScript示例</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>外部JavaScript示例</h1>
</body>
</html>
</syntaxhighlight>

'''输出：'''  
1. 控制台输出`Hello from an external file!`。  
2. 网页弹窗显示“外部脚本已加载！”。  

== 运行JavaScript程序 ==  
JavaScript可以在以下环境中运行：  
1. '''浏览器'''：通过HTML文件加载脚本。  
2. '''Node.js'''：直接在终端运行JavaScript文件（例如`node script.js`）。  

=== 浏览器中的运行步骤 ===  
1. 创建一个HTML文件并嵌入JavaScript代码。  
2. 用浏览器打开该文件。  
3. 按`F12`打开开发者工具，查看控制台输出。  

=== Node.js中的运行步骤 ===  
<syntaxhighlight lang="bash">
# 安装Node.js后，在终端运行：
node script.js
</syntaxhighlight>

'''输出：'''  
终端会显示`Hello from an external file!`（假设`script.js`包含上述代码）。  

== 实际应用场景 ==  
JavaScript的第一个程序通常用于验证开发环境是否配置正确，同时也是学习以下内容的基础：  
- 变量声明  
- 函数定义  
- 事件处理  

=== 案例：用户交互 ===  
以下是一个简单的用户交互示例，结合HTML按钮触发JavaScript函数：  

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>用户交互示例</title>
    <script>
        function showMessage() {
            const name = prompt("请输入你的名字：");
            alert(`你好, ${name}！欢迎学习JavaScript。`);
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">点击这里</button>
</body>
</html>
</syntaxhighlight>

'''输出：'''  
1. 点击按钮后，弹窗提示输入名字。  
2. 输入名字后，显示欢迎消息。  

== 进阶概念 ==  
对于高级用户，以下内容可能值得关注：  
1. '''严格模式'''：在脚本开头添加`"use strict";`以启用严格语法检查。  
2. '''模块化'''：使用`import`和`export`将代码拆分为多个文件。  
3. '''异步编程'''：如`Promise`和`async/await`。  

=== 严格模式示例 ===  
<syntaxhighlight lang="javascript">
"use strict";
function test() {
    undeclaredVar = 10; // 在严格模式下会报错
}
test();
</syntaxhighlight>

== 总结 ==  
编写第一个JavaScript程序是学习该语言的重要一步。通过本节内容，你已了解：  
- 如何在HTML中嵌入JavaScript代码。  
- 如何通过外部文件加载脚本。  
- 如何运行和调试JavaScript程序。  
- 实际应用中的简单交互示例。  

接下来，你可以继续学习变量、数据类型和函数等基础概念。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript基础]]