Introduction to JavaScript – Making Websites Interactive
The first 30 days of my #100DaysOfCode journey were all about building a strong frontend foundation.
I learned HTML to structure webpages and CSS to style them and create responsive layouts.
Today, I begin the next chapter—JavaScript.
If HTML is the skeleton of a webpage and CSS is its appearance, then JavaScript is what brings it to life by adding logic and interactivity.
Let's begin.
What is JavaScript?
JavaScript is a high-level, lightweight, interpreted programming language used to make websites interactive and dynamic.
It allows developers to:
Respond to user actions
Manipulate webpage content
Validate forms
Create animations
Fetch data from servers
Build complete web applications
Today, JavaScript is one of the most widely used programming languages in the world.
Why Do We Need JavaScript?
Imagine a webpage built only with HTML and CSS.
It looks beautiful, but nothing changes when a user interacts with it.
JavaScript makes websites interactive by enabling features like:
Login forms
Dark mode toggles
Image sliders
Dropdown menus
Live search
Shopping carts
Real-time notifications
Without JavaScript, websites would remain static.
The Three Pillars of Frontend Development
Modern frontend development is built on three core technologies:
🧱 HTML
Provides the structure and content.
🎨 CSS
Controls the appearance and layout.
⚡ JavaScript
Adds logic, behavior, and interactivity.
Together, these technologies power nearly every website on the internet.
A Brief History of JavaScript
JavaScript was created by Brendan Eich in 1995 while working at Netscape.
Interestingly, it was developed in just 10 days.
Over the years, JavaScript has evolved significantly and is now standardized under ECMAScript (ES).
Today, modern JavaScript includes powerful features introduced in versions like ES6, making development cleaner and more efficient.
Where Can JavaScript Run?
Originally, JavaScript only ran inside web browsers.
Today, it can also run outside the browser using Node.js, enabling developers to build servers, APIs, desktop applications, and command-line tools.
This means JavaScript is now used for both frontend and backend development.
Ways to Add JavaScript
Similar to CSS, JavaScript can be included in three ways.
1. Inline JavaScript
<button onclick="alert('Hello!')">
Click Me
</button>
Useful for simple examples but not recommended for large projects.
2. Internal JavaScript
<script>
console.log("Hello JavaScript");
</script>
Written inside the HTML file.
3. External JavaScript
<script src="script.js"></script>
This is the preferred approach for real-world projects because it keeps HTML and JavaScript separate.
Your First JavaScript Program
The most commonly used statement while learning JavaScript is:
console.log("Hello, World!");
console.log() prints output to the browser's developer console.
It's one of the most useful tools for debugging and understanding how your code works.
Browser Developer Tools
To see JavaScript in action:
Open your webpage.
Press F12 or Ctrl + Shift + I.
Go to the Console tab.
Write:
console.log("Learning JavaScript 🚀");
The message will appear in the console.
Best Practices
✔ Keep HTML, CSS, and JavaScript in separate files.
✔ Use meaningful variable names.
✔ Practice writing small programs every day.
✔ Use the browser console for debugging.
✔ Focus on understanding concepts rather than memorizing syntax.
My Biggest Takeaway
For the past month, I've been building websites that looked good.
Today, I took the first step toward building websites that can think, respond, and interact with users.
JavaScript opens the door to dynamic web development, and I'm excited to learn how logic and programming come together to create real-world applications.
This feels like the beginning of an entirely new chapter in my journey.