Your cart is currently empty!
What is JavaScript? (And Why It’s So Cool!)
Quick Recap from previous post
In our first post, we explored what a website really is — not just some magic thing on the internet, but a smart combo of:
- HTML → the structure (like the skeleton of a building)
- CSS → the style and decoration (paint, furniture)
- JavaScript → the behavior (lights turning on, buttons working)
We learned that a website lives on a server, and the browser (like Chrome) is what helps us visit and interact with it.
Where Are We Heading?
In this blog post, we’re slowly building our way to React — a powerful tool that helps us create smart, fast, and beautiful websites using JavaScript.
But before we learn React, we need to understand JavaScript itself — because React is built on JavaScript.
So now, let’s open the box and see what JavaScript can really do!
Goal
To understand what JavaScript is, what it does in a website, and how it makes pages come alive — using fun examples anyone (even kids) can grasp.
Analogy: HTML is the Body, JavaScript is the Brain
Imagine building a robot:
- You create a body with hands, legs, head → that’s HTML.
- You paint it cool colors and give it style → that’s CSS.
- But the robot just stands there until you add a brain — that’s JavaScript.
JavaScript tells the robot:
- “If someone says hello, wave back!”
- “If a button is pressed, open the door!”
What Exactly Is JavaScript?
JavaScript is a programming language used inside websites to:
- React when someone clicks a button
- Show or hide things
- Fetch live data from the internet
- Validate forms (e.g., is your email correct?)
- Build games, apps, and chatbots
It’s the language of interactivity.
Real-World Examples of JavaScript in Action
| Example | What Happens | Powered by JavaScript |
|---|
| Click “Like” on a post | The icon turns green | Yes |
| Submit a form | It shows “Thank you!” | Yes |
| Typing in a search bar | Suggestions appear | Yes |
| Moving through slides | Slides auto-rotate | Yes |
Without JavaScript, websites would be like paper posters — nice to look at, but can’t do anything.
Your First JavaScript Code (Try it Now!)
Open Chrome → right-click on any page → click Inspect → go to Console tab and type:
alert("Hello from JavaScript!");Hit Enter. Boom! A popup appears.
A Simple Interactive Page
Here’s what JavaScript looks like in a real page:
<!DOCTYPE html>
<html>
<body>
<h1 id="heading">Click the button</h1>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
document.getElementById("heading").innerText = "You clicked the button!";
}
</script>
</body>
</html>How to Try This on Your Computer
Follow these 3 simple steps:
- Copy the code above.
- Open Notepad (Windows) or TextEdit (Mac), paste it in.
- On Mac, use
TextEdit → Preferences → Format → Plain Text.
- On Mac, use
- Save the file as
index.html(make sure it’s.htmland not.txt). - Double-click the file to open it in your browser.
Now click the button — boom! You just built your first interactive webpage using JavaScript.
What happens:
Clicking the button changes the text — this is JavaScript in action.
Cheat Sheet
- JavaScript = Language that makes websites interactive
- Runs in your browser (like Chrome)
- Can update the page without reloading
- Helps React build dynamic, smart UI
- Works with HTML (structure) and CSS (style)
What’s Next?
In the next blog: “Why React? And Why JavaScript Alone Isn’t Enough”
We’ll see why React was invented, how it makes JavaScript easier, faster, and more powerful, and why it’s the most popular tool for building modern web apps.
Leave a Reply