Article 3: Writing Your First JavaScript Program

Introduction

Now that our development environment is set up, it’s time to write and run our first JavaScript program outside the browser console. In this post, we’ll explore how JavaScript code works in a real project file and see the basics of outputting information using console.log.

Getting Started: Creating Your Project Folder and Files

Let’s start by organizing our code into files.

Step 1: Create a Project Folder

Open Visual Studio Code.
Create a new folder for your project, such as first-js-program.

Step 2: Create an HTML File

In VS Code, create a new file within this folder and name it index.html.
Add the following HTML code to index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First JavaScript Program</title>
</head>
<body>
    <h1>My First JavaScript Program</h1>
    <script src="script.js"></script>
</body>
</html>

This HTML file is a basic web page. Notice the line <script src="script.js"></script>. This tells the browser to look for a JavaScript file named script.js and execute it when the page loads.

Step 3: Create the JavaScript File

In the same folder, create a new file named script.js.
Open script.js, where we’ll write our first JavaScript code.

Writing Your First JavaScript Code

Step 4: Writing Code in `script.js`

In script.js, type the following code:

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

What’s Happening Here?

console.log is a built-in JavaScript function that outputs information to the browser’s console.
"Hello, World!" is a string (a piece of text) that we want to display.

Step 5: Open `index.html` in the Browser

To view your JavaScript code in action:

Open index.html in a web browser (right-click the file in VS Code and select Open with Default Browser).
Open the Console tab in your browser’s Developer Tools (F12 or Ctrl + Shift + I for most browsers).

You should see the output:

Hello, World!

This is the message we programmed in script.js, showing that our JavaScript is running successfully.

Breaking Down `console.log()`

The console.log() function is your go-to tool for displaying messages, testing values, and debugging code. You can use it to print any kind of information to the console, like numbers, text, and even calculations.

Examples:

Logging a Number:
```
console.log(100);
```

Output: 100

Logging Multiple Items:

console.log("The result is:", 100 + 50);

Output: The result is: 150

Logging Variables (We’ll learn about variables in the next post):
```
let name = "John";
console.log("Hello,", name);
```

Output: Hello, John

Common Errors and How to Fix Them

Check File Names: Ensure script.js and index.html are spelled correctly.
Using console.log Inside the Browser Console: If you test JavaScript in the browser console, remember that each line of code runs as soon as you press Enter. In script.js, however, the code runs automatically when the page loads.

Next Steps

Congratulations on writing your first JavaScript program in a real project! In the next post, we’ll dive into variables in JavaScript and how they help store and manipulate data in your code.

Stay tuned!

Pro Tip:

Experiment with different messages in console.log() to see how it works. Try logging numbers, calculations, or even short sentences. It’s a great way to get comfortable with basic coding concepts.

This post introduces the first JavaScript file setup, helping beginners see their code run in the browser, and it lays the groundwork for variables in the next lesson.

Follow me on LinkedIn- Ridoy hasan
visit my website- ridoyweb

Writing Your First JavaScript Program.