If you’re ready to take your first steps into the realm of web development, there’s no better way to start than by writing your very first ‘JavaScript Hello World Code’ program.

In this article, we’ll guide you through the process of creating the timeless “Hello, World!” program using JavaScript.

Table of Contents

There are multiple ways to write the “Hello World” program in JavaScript, which are as follows:

  • Display the ‘Hello World’ program through the browser console
  • Show the “hello world” inside the alert popup box.
  • Display the “hello world” within the HTML DOM element.

Let’s delve into each one in depth

Setting Up Your Workspace

You only need a text editor and a web browser to begin. Open your preferred text editor—whether it’s Visual Studio Code, Sublime Text, or another—and create a new file. Give it a name like helloWorld.html to indicate it’s an HTML file.

Start writing your code according to the structure you need, whether it is embedded in JavaScript or in an external file.

In this example, we will use embedded JavaScript code within HTML.

<!-- helloWorld.html -->
<!DOCTYPE html>
<html>
  <head>
      
      <title>Hello World Program</title>
      
  </head>
  <body>
      
      <h1>Welcome to JavaScript Hello World program</h1> 
      
      <!-- The embedded JavaScript code would be here -->
      <script type="text/javascript">
        // => Your JavaScript Here
      </script>
      
  </body>
</html>

So, according to the above HTML structure, we will write our JavaScript code inside the <script> tag.

Printing ‘Hello, World!’ Program in the ‘Browser Console’

This simple program uses the console.log() function to output the text “Hello, World!” to the browser’s console. 

<!-- helloWorld.html -->
<!DOCTYPE html>
<html>
  <head>
      
      <title>Hello World Program</title>
      
  </head>
  <body>
      
      <h1>Welcome to JavaScript Hello World program</h1> 
      
      <!-- The embedded JavaScript code would be here -->
      <script type="text/javascript">
        console.log('Hello, World!');
      </script>
      
  </body>
</html>

You can open the browser console by right-clicking on a web page, selecting “Inspect,” and then navigating to the “Console” tab. When you run this code, the output should display the message in the console.

Printing 'Hello, World!' Program in the Browser Console

Let’s print the same text with alert pop-up box.

Displaying the Message Using the Alert Function in JavaScript

In JavaScript, the alert() function is commonly used to provide simple notifications or messages to the user. In this specific case, the program likely contains a line of code like this:

alert('Hello, World!');

So, the final code would be as follows:

<!-- helloWorld.html -->
<!DOCTYPE html>
<html>
  <head>
      
      <title>Hello World Program</title>
      
  </head>
  <body>
      
      <h1>Welcome to JavaScript Hello World program</h1> 
      
      <!-- The embedded JavaScript code would be here -->
      <script type="text/javascript">
        alert('Hello, World!');
      </script>
      
  </body>
</html>

When this code is executed, it triggers a pop-up alert in the user’s web browser, displaying the text “Hello, World!” in a dialog box.

Displaying 'Hello, World!' Using the Alert Function in JavaScript

Anyway, let’s move on to the next section to understand document.write

Show a Text on the Web Page using document.write

<script type="text/javascript">
    document.write('Hello, World!');
</script>

The <script> tag contains JavaScript code that uses document.write to directly write the text “Hello, World!” to the HTML document.

Wrapping Up

The provided code snippets showcase different methods to display a simple program, which contains “Hello, World!” message using JavaScript in a web environment. The first example employs the console.log() function to print the message to the browser’s console, providing a simple and common way to output information during development.

The second example introduces the use of the alert() function, triggering a pop-up alert on the user’s browser and displaying the “Hello, World!” message in a dialog box. This method is often used to create simple notifications for the user.

Finally, the third example utilizes the document.write method to directly write the “Hello, World!” text to the HTML document. While this approach is straightforward, it is worth noting that document.write has some considerations and may not be the best choice for more complex applications.