JavaScript Introduction – Complete Beginner Guide
Welcome to your first step into web development! This JavaScript Introduction tutorial is written for absolute beginners — no prior programming experience needed. By the end, you will understand what JavaScript is, why it matters, and you will write your very first line of JavaScript code.
JavaScript Introduction: Why Learn JavaScript?
JavaScript is a programming language that runs inside your web browser. While HTML builds the structure of a webpage and CSS makes it look good, JavaScript makes a webpage interactive. Every button click, dropdown menu, image slider, or form validation you see on a website — that’s JavaScript working behind the scenes.
This JavaScript Introduction is the first step of our complete JavaScript series, where you will go from zero to writing real projects.
Why Learn JavaScript?
- It runs in every browser — no extra software needed
- It’s the only language browsers understand natively for interactivity
- It’s used on both frontend (React, Vue) and backend (Node.js)
- High demand in the job market for freelancers and full-time developers
Where Does JavaScript Code Go?
There are two common ways to add JavaScript to a webpage. Let’s look at both with real code.
1. Internal JavaScript (inside HTML file)
<!DOCTYPE html>
<html>
<head>
<title>My First JavaScript Page</title>
</head>
<body>
<h1>Hello Students!</h1>
<script>
alert("Welcome to JavaScript!");
</script>
</body>
</html>Save this as an .html file and open it in your browser. A popup box will appear saying “Welcome to JavaScript!” — that’s your first working JavaScript code.
2. External JavaScript (separate .js file)
In real projects, JavaScript is kept in its own file. This keeps your code organized and reusable.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My First JavaScript Page</title>
</head>
<body>
<h1>Hello Students!</h1>
<script src="script.js"></script>
</body>
</html>// script.js
alert("Welcome to JavaScript!");
console.log("Script file loaded successfully");Notice the <script> tag is placed just before the closing </body> tag. This ensures your HTML loads first, then JavaScript runs — a best practice you’ll use in every project.
Understanding console.log()
As a beginner, console.log() will become your best friend. It prints messages to the browser’s Console (open it with F12 or right-click → Inspect → Console tab), which is where developers check if their code is working correctly.
console.log("This is my JavaScript Introduction");
console.log(5 + 10);
console.log("Learning is fun!");Try typing this code yourself and check the Console tab in your browser to see the output.
Your First Real Practice
Let’s combine everything you’ve learned in this JavaScript Introduction tutorial into one small script:
<script>
console.log("Starting JavaScript Introduction practice");
let studentName = "Ali";
alert("Hello " + studentName + ", welcome to JavaScript!");
console.log("Practice completed");
</script>Copy this into an HTML file, open it in your browser, and watch what happens. Don’t worry if let studentName looks new — we’ll cover variables in full detail in the next tutorial.
Quick Recap
- JavaScript makes webpages interactive
- It can be written inside HTML (internal) or in a separate .js file (external)
- console.log() helps you see output while learning and debugging
- The script tag is usually placed before the closing body tag
This completes your JavaScript Introduction. You now understand what JavaScript is and how to run your first script — that’s a solid foundation to build on.
Practice Exercise
Create an HTML file and write a JavaScript script that:
- Displays an alert box with your own name
- Prints “I am learning JavaScript” in the console
- Prints the result of 20 + 30 in the console
Bonus Challenge
Create an external .js file, link it to your HTML page, and display three different console.log() messages introducing yourself (name, city, and what you want to build with JavaScript).
What’s Next?
In the next tutorial, we’ll cover JavaScript Variables (var, let, const) — the building blocks you’ll use in every script from here on.
Want to explore more? Check out our complete JavaScript Tutorial Series or read the official MDN JavaScript documentation for deeper reference.
