Writing Your First JavaScript Program.
Ridoy Hasan
Posted on November 6, 2024
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.logis 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.htmlin 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 (
F12orCtrl + Shift + Ifor 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.jsandindex.htmlare spelled correctly. -
Using
console.logInside the Browser Console: If you test JavaScript in the browser console, remember that each line of code runs as soon as you press Enter. Inscript.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
Posted on November 6, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
