Javascript 简明教程

JavaScript - Hello World Program

Write "Hello World" Program in JavaScript

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

Using document.write()

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

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

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

Example

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

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

Using alert() method

我们可以使用窗口 alert() 方法在对话框中打印 “Hello Word”。

alert() 是一个窗口方法，指示浏览器显示带有消息的警告框。我们可以编写 alert 而不向其传递任何消息。

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

我们可以将 alert() 方法写为 window.alert()。由于窗口对象是一个全局作用域对象，我们可以跳过 “window” 关键字。

Example

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

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

Using console.log()

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

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

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

Example

我们尝试使用 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

Using innerHTML

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

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

Example

在下面的示例中，我们使用 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>