Javascript 简明教程

JavaScript - Hello World Program

Write "Hello World" Program in JavaScript

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

"Hello, World!" is often the first program, programmers write when learning a new programming language. JavaScript "Hello World" is a simple program, generally used to demonstrate the basic syntax of the language. This program will make use of different JavaScript methods to print "Hello World".

Using document.write()

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

In JavaScript, the simplest way to print "Hello World" is to use document.write() method. The document.write() method writes the content (a string of text) directly to the HTML document or web page. Let’s look at the following −

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

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

We should write the document.write() within the <script> and </script> tags. We can place the <script> inside the <head> or <body> section.

Example

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

Let’s try to write a JavaScript program that prints the "Hello World!" to the document or web page. In the below program, we placed the JavaScript code within the <head> section. You can try to put the JavaScript part inside the <body> section and execute the program.

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

Using alert() method

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

We can use the window alert() method to print "Hello Word" in a dialogue box.

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

The alert() is a window method that instruct the browser to display an alert box with the message. We can write alert without passing any message to it.

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

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

We can write alert() method as window.alert(). As window object is a global scope object, we can skip the "window" keyword.

Example

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

Let’s try an example showing "Hello World" in the alert box. Try to execute the program by putting the <script> part within the <body> section.

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

Using console.log()

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

The console.log() is a very convenient method to print the message to web Console. It is very useful to debug the JavaScript codes in the browsers. Let’s look at the simple application of the console.log() to print the "Hello World" to the web console.

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

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

We can use the console.log to print strings or JavaScript objects. Here in above code snippet, we have passed "Hello World" as a string argument to the console.log() method.

Example

我们尝试使用 HTML 编写一个完整的 JavaScript 程序。

Let’s try to write a complete JavaScript program with HTML.

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

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

It will produce the following message in the web console −

Hello World

Using innerHTML

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

The innerHTML property of an HTML element defines the HTML content of the element. We can use this property to display the Hello World message. By changing the innerHTML property of the element, we can display the message in HTML document or webpage.

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

To use innerHTML property of an element, we need to access that element first. We can use document.getElementById() method to access the element. Let’s look at a complete example.

Example

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

In the example below, we define a div element with id, "output". We access this element using the document.getElementById("output"). Then we change the innerHTML property and display our message, "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>