absolute_beginner

Your First JavaScript Program

Welcome to your first step into the world of JavaScript! If you’ve ever wondered how websites become interactive or wanted to create your own web apps,…

Published 2026-05-14Updated 2026-06-058 min read

Welcome to your first step into the world of JavaScript! If you’ve ever wondered how websites become interactive or wanted to create your own web apps, you’re in the right place. The best part? You don’t need any previous coding experience—just curiosity and a willingness to try something new. In this tutorial, you’ll write and run your very first JavaScript program, a simple but powerful milestone on your programming journey.

What Is JavaScript?

JavaScript is a programming language designed for the web. It brings websites to life by making them interactive and dynamic. Whenever you see a button that changes color when you hover, a form that checks your input, or a game you can play in your browser, JavaScript is working behind the scenes.

JavaScript basics are easy to pick up. It’s one of the most widely used languages for web development, and learning it opens doors to building websites, web apps, and even mobile apps in the future.

Quiz Question 1

Question: What is the main purpose of JavaScript on a web page?

A) To make web pages interactive and dynamic
B) To style web pages with colors and fonts
C) To store web pages on the internet

How JavaScript Runs in the Browser

You don’t need to install anything special to run JavaScript. All modern web browsers—like Chrome, Firefox, Edge, and Safari—come with a built-in JavaScript engine. This engine reads and executes JavaScript code right inside your browser.

How your browser finds and runs JavaScript code inside an HTML file—no extra installation needed.

JavaScript code can be added directly to web pages. When you open a page, your browser finds the JavaScript and runs it automatically. This means you can start learning and experimenting with JavaScript right away, without extra setup.

Common question:
Do I need to install JavaScript on my computer before I can use it?
Nope! Your browser already knows how to run JavaScript.

Setting Up: What You Need

Getting started is simple. Here’s what you’ll need:

A modern web browser: Chrome, Firefox, Edge, or Safari will all work.
A text editor: This is where you’ll write your code. You can use Notepad (Windows), TextEdit (Mac, in plain text mode), or a free code editor like Visual Studio Code or Sublime Text.
No extra programs required: Everything you need is already on your computer, or available for free.

Common question:
Can I use any browser to run my JavaScript code?
Yes! Any modern browser will work.

Writing Your First JavaScript Program

Let’s jump in and create your first JavaScript program. This classic example is often called “JavaScript hello world” because it displays a simple message.

The workflow for creating and running your first JavaScript program, from writing code to seeing the result in your browser.

Step 1: Open Your Text Editor

Open your favorite text editor and create a new, blank file.

Step 2: Write the Code

Copy and paste the following code into your file:

<!DOCTYPE html>
<html>
  <head>
    <title>My First JavaScript Program</title>
  </head>
  <body>
    <script>
      alert('Hello, world!');
    </script>
  </body>
</html>

Let’s break down what’s happening:

The <script> tag tells the browser that everything inside is JavaScript code.
The alert('Hello, world!'); line shows a popup message when the page loads.

Common question:
Why do I need to use the <script> tag?
The <script> tag tells the browser, “Hey, this is JavaScript code—please run it!”

Quiz Question 2

Question: Where should you place your JavaScript code in an HTML file for this tutorial?

A) Inside the <script> tag
B) Inside the <title> tag
C) Outside the HTML file

Common question:
Can I write JavaScript code outside of the <script> tag?
No, the browser only runs JavaScript code that’s inside <script> tags.

Step 3: Save the File

Save your file with a name like first-program.html. Make sure it ends with .html so your browser knows it’s a web page.

Common question:
What happens if I save my file without the .html extension?
Your browser might not recognize it as a web page, and your code might not run as expected.

Quiz Question 3

Question: What does the command alert('Hello, world!'); do when you open your HTML file in the browser?

A) Shows a popup message with 'Hello, world!'
B) Changes the background color
C) Saves the file automatically

Running Your Code in the Browser

Now it’s time to see your code in action!

Find your saved file (for example, first-program.html) on your computer.
Double-click the file. It should open in your default web browser.
See the result: You’ll see a popup box that says “Hello, world!”

Common question:
What should I do if nothing happens when I open my file in the browser?
Double-check that you saved the file with the .html extension and that you copied the code correctly. If you still have trouble, try opening the file in a different browser or checking for typos.

What Did Your Program Do?

When you opened your file, your browser read the HTML and found the JavaScript inside the <script> tag. The JavaScript command alert('Hello, world!'); told the browser to show a popup box with your message.

This is called “output”—it’s how your program communicates with you. In this case, the output is a simple message box.

Let’s look at the basics:

Syntax: Every JavaScript statement ends with a semicolon (;). This tells the browser where one command stops and the next starts.
Commands: The alert() command shows a popup. The text inside the parentheses and quotes is what appears in the box.

Common question:
Is it okay if I use single or double quotes inside alert()?
Yes! Both single ('Hello') and double ("Hello") quotes work, as long as they match.

Common question:
What does the semicolon at the end of the line do?
It marks the end of a statement. JavaScript often works without it, but using semicolons helps avoid errors.

Quiz Question 4

Question: What file extension should you use when saving your first JavaScript program to run in the browser?

A) .html
B) .js
C) .txt

Next Steps and Practice Ideas

Congratulations on running your first JavaScript program! Now, let’s build on what you’ve learned.

Here are some simple ways to practice:

Change the message: Try editing the text inside the alert() command. For example, alert('Welcome to my website!');
Add another alert: Add a second alert() line below the first. What happens?
Try different commands: Replace alert() with console.log('Hello!'); and open your browser’s developer console (press F12 or right-click and choose “Inspect,” then go to the Console tab) to see the message there.

Common question:
How can I see output from console.log()? Where does it appear?
It appears in your browser’s developer console—not as a popup or on the web page.

Quiz Question 5

Question: If you want to see output from console.log('Hello!');, where should you look in your browser?

A) In the browser's developer console
B) In a popup box
C) On the web page itself

Quick Review

Let’s recap what you’ve learned:

JavaScript makes web pages interactive and dynamic.
You can write JavaScript code inside <script> tags in an HTML file.
The alert() command shows a popup message.
Save your file with a .html extension to run it in your browser.
Use the browser’s developer console to see output from console.log().

Quiz Answer Key

Question 1

Correct answer: A) To make web pages interactive and dynamic

Explanation: JavaScript adds interactivity and dynamic features to web pages, unlike HTML (structure) or CSS (style).

Question 2

Correct answer: A) Inside the <script> tag

Explanation: JavaScript code goes inside the <script> tag so the browser knows to execute it.

Question 3

Correct answer: A) Shows a popup message with 'Hello, world!'

Explanation: The alert() command creates a popup box displaying the message you provide.

Question 4

Correct answer: A) .html

Explanation: Saving your file with the .html extension tells the browser to treat it as a web page.

Question 5

Correct answer: A) In the browser's developer console

Explanation: console.log() outputs messages to the developer console, not as popups or on the page.

You Did It!

You’ve just written and run your first JavaScript program—a big step toward becoming a web developer. Every expert started with this simple “hello world,” and now you have, too. Keep experimenting, have fun, and remember: learning to code is a journey. Each small step brings you closer to building amazing things on the web.

Ready for more? Explore, play, and keep learning. The world of JavaScript is waiting for you!