如何编写你的第一个JavaScript程序

来自菜鸟教程
跳转至:导航、​搜索

介绍

“你好,世界!” 程序是计算机编程中的经典且历史悠久的传统。 对于初学者来说,这是一个简短而完整的第一个程序,它是确保您的环境配置正确的好方法。

本教程将引导您使用 JavaScript 创建这个程序。 但是,为了让程序更有趣,我们将修改传统的“Hello, World!” 程序,以便它询问用户他们的姓名。 然后我们将在问候语中使用该名称。 完成本教程后,您将拥有一个交互式的“Hello, World!” 程序。

先决条件

您可以使用 Web 浏览器中的 JavaScript 开发人员控制台来完成本教程。 在开始本教程之前,您应该熟悉使用此工具。 要了解更多信息,您可以阅读我们的教程“如何使用 JavaScript 开发者控制台”。

创建“你好,世界!” 程序

写下“你好,世界!” 程序,首先打开您喜欢的 Web 浏览器的 JavaScript 控制台。

我们可以通过两种主要方式来创建“Hello, World!” 用 JavaScript 编写程序,使用 alert() 方法和 console.log() 方法。

使用 alert()

我们编写这个程序的第一种方法是使用 alert() 方法,它会在当前窗口上显示一个带有指定消息的警告框(在这种情况下,它将是“Hello, World!”)和一个 OK 按钮,允许用户关闭警报。

在该方法中,我们将传递 string 数据类型作为参数。 该字符串将设置为值 Hello, World!,以便将该值打印到警报框。

写出第一个风格的“Hello, World!” 程序,我们将把字符串放在 alert() 方法的括号内。 我们将以 分号 结束我们的 JavaScript 语句。

alert("Hello, World!");

在您的 JavaScript 行之后按 ENTER 键后,您应该会在浏览器中看到以下警报弹出:

控制台还将打印计算表达式的结果,当表达式没有显式返回某些内容时,它将读取为 undefined

弹出警报可能很繁琐,继续点击退出,所以让我们通过 console.log() 将其记录到控制台来了解如何创建相同的程序。

使用 console.log()

我们可以使用 console.log() 方法将相同的字符串打印到 JavaScript 控制台,但这次除外。 使用此选项类似于在计算机的终端环境中使用编程语言。

正如我们对 alert() 所做的那样,我们将 "Hello, World!" 字符串传递给 console.log() 方法,放在括号之间。 我们将以分号结束我们的语句,这是典型的 JavaScript 语法约定。

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

一旦我们按下 ENTERHello, World! 消息将被打印到控制台:

OutputHello, World!

在下一节中,我们将讨论如何使该程序对用户更具交互性。

提示输入

每次我们运行现有的“Hello, World!” 程序,它产生相同的输出。 让我们提示运行我们程序的人输入他们的姓名。 然后我们可以使用该名称来自定义输出。

对于我们上面使用的每个 JavaScript 方法,我们可以从一行提示输入开始。 我们将使用 JavaScript 的 prompt() 方法,并将字符串 "What is your name?" 传递给它以询问用户他们的姓名。 然后,用户输入的输入将存储在 变量 name 中。 我们将用分号结束我们的表达式。

let name = prompt("What is your name?");

当你按下 ENTER 运行这行代码时,你会收到一个弹窗提示:

在您的网络浏览器窗口上弹出的对话框包括一个供用户输入的文本字段。 用户在文本字段中输入值后,必须单击 OK 才能存储该值。 用户还可以通过单击 Cancel 按钮来阻止记录值。

只有在程序上下文中有意义时才使用 JavaScript prompt() 方法很重要,因为过度使用它会使用户变得乏味。

此时,输入您希望程序问候的名称。 对于此示例,我们将使用名称 Sammy

现在我们已经收集了用户名的值,我们可以继续使用该值来问候用户。

alert() 问候用户

如上所述,alert() 方法在浏览器窗口上创建一个弹出框。 我们可以使用这种方法通过使用变量 name 来问候用户。

我们将使用 字符串连接 来写一句“Hello!”的问候语。 直接针对用户。 因此,让我们将 Hello 的字符串与 name 变量连接起来:

"Hello, " + name + "!"

我们将两个字符串 "Hello, ""!"name 变量组合在一起。 现在,我们可以将此表达式传递给 alert() 方法。

alert("Hello, " + name + "!");

一旦我们在这里按下 ENTER,我们将在屏幕上收到以下对话框:

在这种情况下,用户的名字是 Sammy,所以输出打招呼了 Sammy。

现在让我们重写它,以便将输出打印到控制台。

console.log() 问候用户

正如我们在上一节中看到的,console.log() 方法将输出打印到控制台,就像 print() 函数可以在 Python 中将输出打印到终端。

我们将使用与 alert() 方法相同的连接字符串,该方法将字符串 "Hello, ""!"name 变量组合在一起:

"Hello, " + name + "!"

整个表达式将放在 console.log() 方法的括号内,以便我们将收到一个问候作为输出。

console.log("Hello, " + name + "!");

对于名为 Sammy 的用户,控制台上的输出将如下所示:

OutputHello, Sammy!

您现在有一个 JavaScript 程序,它接收用户的输入并将其打印回屏幕。

结论

现在您知道如何编写经典的“Hello, World!”了。 程序,以及提示用户输入并将其显示为输出,您可以进一步扩展您的程序。 例如,询问用户最喜欢的颜色,并让程序说他们最喜欢的颜色是红色。 您甚至可以尝试使用相同的技术来创建一个 Mad Lib 程序。