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>

列印頁面