Your First JavaScript Program
Now that your environment is ready, it’s time to write your first real JavaScript program in a file—not just in the browser console. This chapter will help you understand how JavaScript executes your code inside an HTML page and how you can print results, show messages, and start building interactive pages.
This step is important because from here onward, you will write all your code in proper .js files, as a professional developer would.
Understanding How JavaScript Runs in a Webpage
JavaScript does not run alone.
It must connect to an HTML file via a <script> tag.
Example structure:
index.html ? contains HTML
script.js ? contains JavaScript
The browser loads the HTML first and then runs the JavaScript file linked inside it.
Creating Your First JavaScript Program
In your script.js file, write:
console.log("Welcome to the JavaScript Learning Series");
This line prints a message in the browser console.
Now open your index.html and make sure the script is linked:
<!DOCTYPE html>
<html>
<head>
<title>My First JS Program</title>
</head>
<body>
<h1>Hello, JavaScript World!</h1>
<script src="script.js"></script>
</body>
</html>
Viewing Output in the Browser Console
Follow these steps:
Open index.html in Chrome
Right-click ? Inspect
Click the Console tab
You will see:
Welcome to the JavaScript Learning Series
This confirms your first program is running successfully.
Using console.log for Practice
console.log() is one of the most important tools in JavaScript.
You will use it to:
Print values
Understand code flow
Debug errors
Test variables
Check your logic
Let’s try printing different types of values.
Example
console.log("JavaScript is fun");
console.log(2025);
console.log(10 + 20);
console.log("Result:", 50);
Output:
JavaScript is fun
2025
30
Result: 50
Showing Messages with alert()
JavaScript can also show popup messages using alert().
Add this in script.js:
alert("This is my first JavaScript alert!");
When you refresh the webpage, you will see a popup box.
This is useful when you want to inform the user about something.
Using document.write (Not Recommended for Projects)
document.write() writes directly on the webpage.
Example:
document.write("Hello! This text is written using JavaScript.");
Output on the webpage:
Hello! This text is written using JavaScript.
However, developers avoid using this in real projects because it overwrites the entire page.
We will use the DOM later for proper content updates.
Combining Multiple Statements
Let’s write something more meaningful:
let name = "Riya";
let course = "JavaScript";
console.log("Student:", name);
console.log("Course Enrolled:", course);
alert("Welcome " + name + "! Enjoy learning " + course);
Output in Console:
Student: Riya
Course Enrolled: JavaScript
Popup Output:
Welcome Riya! Enjoy learning JavaScript
This simple example shows how JavaScript can interact with both the console and the browser window.
Practice Task (Do It Yourself)
Try writing the following:
Print your name
Print your current course or degree
Print the sum of two numbers
Show a popup that welcomes you
Example output:
My name is Arjun
I am learning JavaScript
Sum is: 40
This small practice helps you get comfortable with writing and running basic code.
What You Will Learn Next
In the next chapter, we will learn:
How to write clean and readable code
Why formatting matters
How professionals write JavaScript
Common mistakes beginners make
This will help you build strong coding habits before learning deeper concepts like variables and data types.
