简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  How to Print \"Hello, World!\" in JavaScript

How to Print \"Hello, World!\" in JavaScript

DDD
DDDOriginal
2024-09-18 11:54:02464browse

Welcome to another installment of our JavaScript journey! In this blog post, we'll cover one of the most fundamental tasks in programming: printing "Hello, World!" to the screen. This simple exercise is a great way to get started with JavaScript and understand the basics of how the language works. Let's dive in!

Printing "Hello, World!" in JavaScript

Printing "Hello, World!" is a classic example used to introduce new programming languages. In JavaScript, you can achieve this in several ways, depending on the environment you're working in. We'll cover the most common methods: using the browser console and displaying the message on a web page.

Method 1: Using the Browser Console

The browser console is a powerful tool for testing and debugging JavaScript code. You can access the console in most modern web browsers by pressing F12 or Ctrl Shift I (Windows/Linux) or Cmd Opt I (Mac).

Steps:

  1. Open your web browser and press F12 or Ctrl Shift I (Windows/Linux) or Cmd Opt I (Mac) to open the developer tools.
  2. Navigate to the "Console" tab.
  3. Type the following JavaScript code and press Enter: 
console.log("Hello, World!");

Explanation:

  • console.log() is a built-in JavaScript function that outputs a message to the browser console.
  • The string "Hello, World!" is the message you want to display.

Method 2: Displaying on a Web Page

If you want to display "Hello, World!" on a web page, you'll need to write some HTML and JavaScript code. Here's how you can do it:

Steps:

  1. Create a new HTML file (e.g., index.html).
  2. Open the file in a text editor and add the following code: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, World!</title>
</head>
<body>
    <h1 id="message"></h1>

    <script>
        document.getElementById("message").innerText = "Hello, World!";
    </script>
</body>
</html>

Explanation:

  • The  declaration defines the document type and version of HTML.
  • The  element is the root element of the HTML document.
  • The  element contains meta-information about the document, such as the character set and title.
  • The  element contains the content of the web page.
  • The 

     element with the id attribute message is where the "Hello, World!" message will be displayed.

  • The