Chapter 02 of 31

First JavaScript Program

On this page

Now that we know what JavaScript is, it's time to write our first JavaScript program. Don't worry—our first program is going to be very simple.

The goal here is just to understand how to write JavaScript code and how to run it.

Writing Your First JavaScript Code

Let's start with the classic first program:

console.log("Hello, World!");

That's it! 🎉 You just wrote your first JavaScript program.

The console.log() function is used to display information in the browser's console.

The output will be:

Hello, World!

Understanding the Code

Let's break it down:

console.log("Hello, World!");

  • console refers to the browser's console.

  • log() is a method used to print information.

  • "Hello, World!" is the text we want to display.

  • ; marks the end of the statement. Although semicolons are often optional in JavaScript, using them is a good habit.

Running JavaScript in the Browser

One of the easiest ways to run JavaScript is through your browser.

Open a browser such as Chrome, right-click on any webpage, and select Inspect.

Then open the Console tab.

You can type:

console.log("Hello, World!");

and press Enter.

You should see:

Hello, World!

This is a great way to experiment with small pieces of JavaScript.

Writing JavaScript Inside HTML

Usually, JavaScript is used together with HTML.

We can write JavaScript inside the <script> tag:

<!DOCTYPE html>
<html>
<head>
    <title>My First JavaScript Program</title>
</head>
<body>

    <h1>My First JavaScript Program</h1>

    <script>
        console.log("Hello, World!");
    </script>

</body>
</html>

Here, the HTML creates the webpage, while the JavaScript inside <script> runs when the page is loaded.

Displaying Something on the Webpage

JavaScript can also change what appears on the webpage.

For example:

<!DOCTYPE html>
<html>
<body>

    <h1 id="message"></h1>

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

</body>
</html>

Here, JavaScript finds the <h1> element and puts "Hello, World!" inside it.

So instead of printing the message only in the console, we can actually display it on the webpage.

Using an External JavaScript File

For bigger projects, we normally don't put all our JavaScript directly inside HTML. Instead, we create a separate JavaScript file.

For example, create a file called:

script.js

Inside it, write:

console.log("Hello from JavaScript!");

Then connect it to your HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>

    <h1>My Website</h1>

    <script src="script.js"></script>

</body>
</html>

The src attribute tells the browser where to find the JavaScript file.

This approach keeps HTML and JavaScript separate, making the project easier to manage.

A Small Practical Example

Let's create a simple program that displays a welcome message.

<!DOCTYPE html>
<html>
<body>

    <h1 id="welcome"></h1>

    <script>
        let name = "John";

        document.getElementById("welcome").textContent =
            "Welcome, " + name + "!";
    </script>

</body>
</html>

The output on the webpage will be:

Welcome, John!

Don't worry if let or document.getElementById() looks unfamiliar. We'll learn these concepts properly in the upcoming topics.

Conclusion

Our first JavaScript program was very simple:

console.log("Hello, World!");

But this small line introduces an important idea: JavaScript code is executed by the JavaScript engine, and it can produce output or interact with a webpage.

As we move forward, we'll start learning the building blocks of JavaScript, beginning with variables and how we can use them to store information.

PreviousIntroduction to JavaScriptNextJavaScript Variables