JavaScript - Hello World 程序

编写 JavaScript 的“Hello World”程序

“Hello, World!” 通常是程序员学习新的编程语言时编写的第一个程序。JavaScript 的“Hello World”是一个简单的程序，通常用于演示该语言的基本语法。本程序将使用不同的 JavaScript 方法来打印“Hello World”。

使用 document.write()

在 JavaScript 中，打印“Hello World”最简单的方法是使用 **document.write()** 方法。document.write() 方法将内容（一段文本字符串）直接写入 HTML 文档或网页。让我们来看下面的例子：

<script>
   document.write("Hello World) 
</script>

我们应该在 <script> 和 </script> 标签内编写 document.write()。我们可以将 <script> 放置在 <head> 或 <body> 部分。

示例

让我们尝试编写一个 JavaScript 程序，将“Hello World!” 打印到文档或网页。在下面的程序中，我们将 JavaScript 代码放在 <head> 部分。您可以尝试将 JavaScript 部分放在 <body> 部分并执行程序。

<html>
<head>
   <script>
      document.write("Hello World");
   </script>
</head>
<body>
</body>
<html>

使用 alert() 方法

我们可以使用 window **alert()** 方法在对话框中打印“Hello World”。

alert() 是一个 window 方法，它指示浏览器显示带有消息的警示框。我们可以不传递任何消息就编写 alert。

<script>
   alert("Hello World")
</script>

我们可以将 alert() 方法写成 window.alert()。由于 window 对象是全局作用域对象，因此我们可以省略“window”关键字。

示例

让我们尝试一个在警示框中显示“Hello World”的示例。尝试将 <script> 部分放在 <body> 部分内执行程序。

<html>
<head>
   <script>
      alert("Hello World");
   </script>
</head>
<body>
</body>
<html>

使用 console.log()

**console.log()** 是一个非常方便的方法，可以将消息打印到 Web 控制台。它对于调试浏览器中的 JavaScript 代码非常有用。让我们来看一下 console.log() 的简单应用，将“Hello World”打印到 **Web 控制台**。

<script>
   Console.log("Hello World")
</script>

我们可以使用 console.log 打印字符串或 JavaScript 对象。在上面的代码片段中，我们将“Hello World”作为字符串参数传递给 console.log() 方法。

示例

让我们尝试编写一个包含 HTML 的完整 JavaScript 程序。

<html>
<head>
   <script>
      console.log("Hello World");
   </script>
</head>
<body>
   <p> Please open the console before clicking "Edit & Run" button </p>
</body>
<html>

它将在 Web 控制台中生成以下消息：

Hello World

使用 innerHTML

HTML 元素的 **innerHTML** 属性定义了该元素的 HTML 内容。我们可以使用此属性来显示 Hello World 消息。通过更改元素的 **innerHTML** 属性，我们可以在 HTML 文档或网页中显示消息。

要使用元素的 innerHTML 属性，我们首先需要访问该元素。我们可以使用 document.getElementById() 方法来访问元素。让我们来看一个完整的示例。

示例

在下面的示例中，我们定义了一个 id 为“output”的 div 元素。我们使用 document.getElementById("output") 访问此元素。然后我们更改 innerHTML 属性并显示我们的消息“Hello World”。

<html>
<head>
   <title>Using innerHTML property</title>
</head>
<body>
   <div id = "output"> </div>
   <script>
      document.getElementById("output").innerHTML = "Hello World";
   </script>
</body>
<html>

打印页面