JavaScript 第一个程序

欢迎来到JavaScript的世界！在这篇教程中，我们将一起创建和运行你的第一个JavaScript程序。通过这个简单的入门教程，你将了解JavaScript的基本结构、如何显示输出，以及如何在浏览器中运行代码。

JavaScript 简介

JavaScript是一种轻量级的、解释型的编程语言，最初被设计用来为网页添加交互性。现在，它已经成为世界上使用最广泛的编程语言之一，不仅可以在浏览器中运行，还可以在服务器端和其他各种环境中使用。

备注

JavaScript与Java没有直接关系，尽管它们的名字听起来相似。JavaScript的名字是早期营销策略的产物，因为当时Java很流行。

准备开发环境

开始编写JavaScript最简单的方式是使用浏览器。你只需要：

一个文本编辑器（如记事本、Visual Studio Code、Sublime Text等）
一个现代网页浏览器（如Chrome、Firefox、Edge等）

创建第一个JavaScript程序

让我们创建一个经典的"Hello, World!"程序：

步骤1：创建HTML文件

首先，我们需要创建一个HTML文件来包含我们的JavaScript代码：

html
<!DOCTYPE html>
<html>
<head>
    <title>我的第一个JavaScript程序</title>
</head>
<body>
    <h1>Hello, JavaScript!</h1>
    
    <script>
        // 这里将写我们的JavaScript代码
    </script>
</body>
</html>

步骤2：添加JavaScript代码

在<script>标签中添加以下代码：

javascript
// 在控制台输出消息
console.log("Hello, World!");

// 显示一个警告框
alert("欢迎学习JavaScript!");

// 在页面中写入内容
document.write("<p>这是我的第一个JavaScript程序</p>");

步骤3：运行程序

将HTML文件保存为first-javascript.html，然后在浏览器中打开它。你会看到：

一个显示"欢迎学习JavaScript!"的弹窗
页面上显示"这是我的第一个JavaScript程序"
如果你打开浏览器的开发者工具（通常按F12），在控制台(Console)选项卡中可以看到"Hello, World!"消息

JavaScript 输出方式详解

在上面的例子中，我们使用了三种不同的方式来输出信息：

1. `console.log()`

javascript
console.log("Hello, World!");

这种方法将消息输出到浏览器的控制台，主要用于调试目的。用户通常看不到这些消息，除非他们打开了开发者工具。

2. `alert()`

javascript
alert("欢迎学习JavaScript!");

这会显示一个弹出对话框，包含指定的消息和一个"确定"按钮。这是一种向用户显示重要信息的简单方式。

3. `document.write()`

javascript
document.write("<p>这是我的第一个JavaScript程序</p>");

这种方法直接向HTML页面写入内容。需要注意的是，如果在页面加载完成后使用document.write()，它会覆盖整个页面内容。

JavaScript 在HTML中的位置

JavaScript可以放在HTML文档的不同位置：

内部JavaScript

就像我们的例子一样，直接在HTML文件中使用<script>标签：

html
<script>
    console.log("这是内部JavaScript");
</script>

外部JavaScript

对于更大的项目，最佳实践是将JavaScript代码放在单独的文件中：

html
<script src="myscript.js"></script>

然后在myscript.js文件中编写JavaScript代码：

javascript
console.log("这是外部JavaScript文件");
alert("从外部文件加载的代码");

提示

使用外部JavaScript文件有几个好处：

分离HTML和JavaScript代码
提高代码的可维护性
浏览器可以缓存JavaScript文件，提高加载速度

实际案例：交互式问候

让我们创建一个稍微复杂一点的例子，用户可以输入自己的名字，然后收到个性化的问候：

html
<!DOCTYPE html>
<html>
<head>
    <title>交互式JavaScript程序</title>
</head>
<body>
    <h1>JavaScript交互实例</h1>
    
    <script>
        // 提示用户输入名字
        let userName = prompt("请输入你的名字：");
        
        // 根据用户是否输入名字，显示不同的问候语
        if (userName) {
            document.write("<h2>你好，" + userName + "！欢迎学习JavaScript！</h2>");
        } else {
            document.write("<h2>你好，访客！欢迎学习JavaScript！</h2>");
        }
        
        // 在控制台显示当前时间
        let currentTime = new Date();
        console.log("当前时间是：" + currentTime);
    </script>
</body>
</html>

这个例子展示了：

使用prompt()函数获取用户输入
使用条件语句（if-else）实现简单的逻辑
使用Date()对象获取当前时间
使用字符串连接操作符（+）组合文本

JavaScript 语法基础

通过这个简单的程序，我们已经接触到了一些JavaScript的基本语法：

注释：使用//添加单行注释
javascript
```
// 这是一个单行注释
```
变量声明：使用let关键字声明变量
javascript
```
let userName = "小明";
```
函数调用：使用函数名加括号调用函数
javascript
```
alert("Hello");
console.log("Hello");
```

条件语句：使用if-else进行条件判断

javascript
if (条件) {
    // 如果条件为真，执行这里的代码
} else {
    // 如果条件为假，执行这里的代码
}

JavaScript 执行顺序

JavaScript代码是从上到下按顺序执行的。例如：

javascript
console.log("第一行");
console.log("第二行");
console.log("第三行");

这段代码会在控制台依次输出：

第一行
第二行
第三行

总结

恭喜你！你已经成功创建并运行了你的第一个JavaScript程序。我们学习了：

JavaScript的基本介绍
如何在HTML中嵌入JavaScript代码
JavaScript的三种主要输出方式：console.log()、alert()和document.write()
如何使用内部和外部JavaScript
如何创建一个简单的交互式程序
JavaScript的基本语法元素

练习

为了巩固所学知识，尝试以下练习：

修改"Hello, World!"程序，让它同时在控制台和页面上显示当前日期。
创建一个程序，提示用户输入两个数字，然后显示它们的和。
尝试将JavaScript代码移到外部文件中，并确保它仍然正常工作。
创建一个程序，根据当前时间向用户显示不同的问候语（例如早上好、下午好、晚上好）。

进一步学习

随着你继续学习JavaScript，以下资源可能对你有所帮助：

MDN Web Docs的JavaScript指南
在线JavaScript编辑器如CodePen或JSFiddle
JavaScript交互式学习平台如freeCodeCamp

在下一课中，我们将探索JavaScript的数据类型和变量。继续加油！

JavaScript 简介​

准备开发环境​

创建第一个JavaScript程序​

步骤1：创建HTML文件​

步骤2：添加JavaScript代码​

步骤3：运行程序​

JavaScript 输出方式详解​

1. console.log()​

2. alert()​

3. document.write()​

JavaScript 在HTML中的位置​

内部JavaScript​

外部JavaScript​

实际案例：交互式问候​

JavaScript 语法基础​

JavaScript 执行顺序​

总结​

练习​

进一步学习​