JavaScript Hello World Example

In this tutorial, let us learn how to build a simple hello world example using JavaScript. You can write your first JavaScript code either using any text editor or using any of the online code editors like Jsfidle. In this tutorial, let us look at both the options

Editors & Tools

JavaScript is very easy to setup. You don’t need any special tools or code editors to write JavaScript Code. For Learning Javascript, all you need is a text editor & browser. You can make use of notepad in windows or Vim in Linux. Two of the most popular text editors are Sublime Text and VSCode.

You can also make use of online code editors like JSfiddle & Codepen.io , Stackblitz, JSBin, etc to learn and test your JavaScript Code.

JavaScript Hello World Example

There are two ways you can include JavaScript. You can write it directly inside an HTML Page or Include it as a separate external file.

First, let us see how to write it directly inside an HTML Page.

Open your favorite editor and copy the following code. Save the files as index.html.

The above is a simple HTML page. We have included the JavaScript code inside the Script tag.

Open the index.html in your favorite browser. You should see the following in the browser.

JavaScript Hello World Example

Script Tag

We Use the Script tag to insert JavaScript into an HTML page. It is a regular HTML Tag.

When a browser sees a Script tag, it knows that it is a Javascript code and hence passes it over to the JavaScript virtual machine to interpret and run it.

Document Write

The following is the actual JavaScript code. It writes the “Hello World” in the browser.

The document.write method is part of the Document API, which allows us to manipulate the web page loaded in the browser. The write() method writes a string of text to a document.

Note that using the document.write is not a good practice to follow.

Hello World using Alert

Another way to display a Hello World message is using the alert method. This method displays a dialog box with a message, which you pass as an argument to it. You can click on the OK button to close the alert window.

The alert method is part of the window API

JavaScript Hello World Example Using Alert method

Writing to Console

Another very useful method is console.log, which writes the message in the console window. In the following window To View the console window in chrome

Javascript Hello World Example Using Console.log method

Using External JavaScript Files

Instead of including the JavaScript code in the HTML file, you can create an external JavaScript and include that file in the HTML file.

First create a new file helloworld.js and save it in the same folder as our index.html file.

In our HTML Instead of the JavaScript code, we specify the path to our JavaScript file using the src attribute of the script tag.

The index.html is shown below.

JavaScript Online Editors

You can also use the JavaScript online editors to test your JavaScript Code. You can any one of the JSfiddle & Codepen.io , Stackblitz, JSBin

Here is the link to the Hello World Example in Jsfiddle.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top