Your First JavaScript Program

JavaScript for Beginners

2.1 Hello World in JavaScript

The classic first step in learning any programming language is creating a program that displays the message "Hello, World!" JavaScript makes this easy and fun.

Using the Browser Console

You can run JavaScript directly in your browser’s console without creating any files. To open the console:

In Chrome or Firefox, press F12 or right-click anywhere on the page and select Inspect, then click the Console tab.

Once open, type the following code and press Enter:

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

This command tells the browser to print "Hello, World!" in the console. You should see the message appear immediately.

Using <script> in an HTML Page

To embed JavaScript in an HTML page, you use the <script> tag. Here is a simple example:

<!DOCTYPE html>
<html>
<head>
  <title>Hello World Example</title>
</head>
<body>
  <script>
    console.log("Hello, World!");
    alert("Hello, World!");
  </script>
</body>
</html>

Click to Try it

Save this code as hello.html and open it in your browser. The message "Hello, World!" will be logged to the console, and an alert popup will appear on the screen.

This simple example demonstrates how JavaScript can output messages both invisibly (console) and visibly (alert), helping you get started with writing and running your own code.

2.2 Using `<script>` in HTML

JavaScript code is added to an HTML document using the <script> tag. This tag tells the browser to execute the JavaScript either directly within the HTML file (inline) or by loading an external JavaScript file.

Inline JavaScript

You can write JavaScript code directly inside the <script> tag in your HTML file. For example:

<!DOCTYPE html>
<html>
<head>
  <title>Inline Script Example</title>
  <script>
    console.log("This is inline JavaScript in the head.");
  </script>
</head>
<body>
  <h1>Hello from Inline JavaScript!</h1>
  <script>
    alert("Hello from inline JavaScript in the body!");
  </script>
</body>
</html>

Click to Try it

In this example, there are two inline scripts: one inside the <head> and one inside the <body>. Both run when the browser parses their location in the HTML.

External JavaScript Files

For larger scripts or to keep your HTML clean, JavaScript code is often stored in separate .js files and linked using the src attribute:

<!DOCTYPE html>
<html>
<head>
  <title>External Script Example</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Using External JavaScript</h1>
</body>
</html>

The file script.js might contain:

console.log("This is code from an external file.");
alert("External script loaded!");

Where to Place the <script> Tag

In the <head>: Scripts here load before the page content. This can delay the page rendering, especially if the script is large or slow to load.
Before the closing </body> tag: Placing scripts here lets the browser load and display the HTML content first, improving page load speed and user experience. This is the preferred practice for most scripts that manipulate page content.

In summary, you can include JavaScript inline within your HTML or link to external files. Placement of the <script> tag affects how and when your JavaScript runs during page loading.

2.3 Running JavaScript in the Browser Console

The browser console is a powerful tool that lets you write and run JavaScript code instantly without needing to create any files. It’s perfect for experimenting, testing snippets, and debugging.

Opening the Developer Console

Here’s how to open the console in popular browsers:

Google Chrome: Press Ctrl + Shift + J (Windows/Linux) or Cmd + Option + J (Mac). Alternatively, right-click anywhere on the page and select Inspect, then click the Console tab.
Mozilla Firefox: Press Ctrl + Shift + K (Windows/Linux) or Cmd + Option + K (Mac). Or right-click and choose Inspect Element, then select Console.
Microsoft Edge: Press Ctrl + Shift + J (Windows) or Cmd + Option + J (Mac). Right-click and choose Inspect, then go to the Console tab.

Using the Console

Once the console is open, you’ll see a prompt where you can type JavaScript code. Press Enter to run your code and see the results immediately.

Try these examples:

2 + 3

This will output 5—simple math in action!

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

This prints the message in the console log.

"JavaScript".toUpperCase()

This converts the string to uppercase and shows "JAVASCRIPT".

The console is an excellent way to practice JavaScript commands quickly and see how they work. It also helps you debug errors by showing messages and letting you inspect variables on live web pages. Get comfortable with it—it’s one of the best tools for learning and developing in JavaScript!

2.4 Commenting Your Code

Comments are lines in your JavaScript code that the browser ignores when running the program. They are used to explain what the code does, making it easier to understand for yourself and others who read your code later.

There are two types of comments in JavaScript:

Single-line comments start with // and continue until the end of the line. Use these for short explanations:

// This logs a greeting message to the console
console.log("Hello, World!");

Multi-line comments begin with /* and end with */. They can span several lines, making them useful for longer notes or temporarily disabling blocks of code:

/*
 This function adds two numbers
 and returns the result.
*/
function add(a, b) {
  return a + b;
}

Why Comments Matter

Comments help make your code more readable and maintainable. When you revisit your code after days or share it with others, comments explain your logic and purpose, saving time and reducing errors. For beginners, writing comments encourages thinking clearly about what each part of the code does.

Good Commenting Practices

Keep comments clear and concise.
Avoid obvious comments that repeat what the code does.
Use comments to explain why you wrote the code, not just what it does.

Example:

// Calculate area of a circle using radius
const radius = 5;
const area = Math.PI * radius * radius; // πr² formula
console.log(area);

By practicing commenting, your code becomes easier to understand and debug!