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>

我们应该将 document.write() 函数写在 <script> 和 </script> 标签内。我们可以将 <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 Word"。

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>