🟨 Days 1–7 – JavaScript Fundamentals · Day 01
Day 1: What is JavaScript? Your First Program
⏱ 70 min📶 Beginner🎯 100% self-study
Day 1 / 30
✅ Today you will learn
- What JavaScript does on a web page (and beyond)
- Where JS runs: browser, Node.js, mobile apps
- Adding JS with <script src defer>
- console.log and the DevTools Console
- Your first interactive button
🏢 In the real world
The Sharma Sweets website now looks beautiful (CSS course) but it is still a brochure: the “Add to cart” button does nothing, the order form cannot calculate a total and the theme cannot be switched. HTML is the structure, CSS the look – JavaScript is the behaviour. Over 30 days you will turn the site into a working online shop.
HTML, CSS and JavaScript
🧱
HTML = structureHeadings, buttons, forms – the nouns of a page.🎨
CSS = presentationColours, layout, animation – the adjectives.⚡
JavaScript = behaviourClicks, calculations, data from servers – the verbs.HTML + JavaScript
<button id="add">Add Kaju Katli to cart</button>
<p id="msg">Cart is empty.</p>
<script>
let count = 0;
document.querySelector('#add').addEventListener('click', function () {
count = count + 1;
document.querySelector('#msg').textContent = 'Cart: ' + count + ' box(es) of Kaju Katli';
});
</script>| Where JS runs | Used for | Example |
|---|---|---|
| Browser | Interactive websites | Carts, forms, maps, chat widgets |
| Node.js (server) | APIs, back-ends, scripts | Payment webhooks, Discord bots |
| Mobile / desktop | Apps with React Native, Electron | VS Code itself is written in JS/TypeScript |
| Frameworks | React, Next.js, Vue, Angular | Most Indian startup front-ends |
Your first program: console.log
JavaScript
console.log('Namaste, JavaScript!');
console.log('Kaju katli price per kg:', 900);
console.log(2 + 3);
console.log('2' + '3'); // text joins, it does not add!Namaste, JavaScript!
Kaju katli price per kg: 900
5
23
💡 Where is the console?
Open any website, press F12 (or Ctrl+Shift+J) and click the Console tab. Type console.log("Hi") and press Enter. Every program on this page also shows its real output in the OUTPUT box under the code.
Adding JavaScript to a page
HTML – the professional way
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sharma Sweets</title> <link rel="stylesheet" href="css/style.css"> <script src="js/main.js" defer></script> <!-- ⭐ external file + defer --> </head> <body> <button id="add">Add to cart</button> </body> </html>
| Method | When |
|---|---|
| <script src="js/main.js" defer> in head ⭐ | Every real project – downloads in parallel, runs after the HTML is ready |
| <script> … </script> at the end of body | Small demos (our examples) |
| onclick="…" attribute | Avoid – mixes HTML and JS, hard to maintain |
| type="module" | Modern import/export (Day 21) – deferred automatically |
⚠️ “Cannot read properties of null”
The most common beginner error: the script ran before the button existed, so querySelector returned null. Fix it with defer (or put the script at the end of body).
Statements, comments and case
JavaScript
// A single-line comment – ignored by JavaScript /* A multi-line comment useful for explaining a block */ let shop = 'Sharma Sweets'; // a statement ends with ; let Shop = 'Another shop'; // JS is case-sensitive: shop ≠ Shop console.log(shop); console.log(Shop); console.log(typeof shop);
Sharma Sweets
Another shop
string
Real mini-task: a festival greeting
HTML + JavaScript
<input id="name" placeholder="Your name" aria-label="Your name">
<button id="greet">Greet me</button>
<h3 id="out"></h3>
<script>
document.querySelector('#greet').addEventListener('click', function () {
const name = document.querySelector('#name').value || 'friend';
document.querySelector('#out').textContent = 'Happy Diwali, ' + name + '! 🪔 Get 10% off today.';
});
</script>- 1querySelector finds an element using a CSS selector
- 2addEventListener waits for something to happen (a click)
- 3The function inside runs every time it happens
- 4.value reads what was typed; .textContent writes text to the page
🏅 Job skills unlocked today
✔ Explain what JavaScript adds to HTML and CSS✔ Link a script with defer✔ Print values with console.log and use the Console✔ Make a button change the page
Practice tasks
🏋️ Practice – do it yourself
Task 1: Print your name, your city and the result of 1500 + 250 on three lines.
Show solution
JavaScript
console.log('Name: Aarav Mehta');
console.log('City: Jaipur');
console.log('Total bill:', 1500 + 250);Name: Aarav Mehta
City: Jaipur
Total bill: 1750
Task 2: Make a button “Show offer” that writes “Free delivery above ₹1,500” into a paragraph.
Show solution
Task 3: Open the Console on codingeasily.in and type document.title. What does it print?
Quick quiz
🧠 Quick Quiz – test yourself
1. JavaScript is mainly responsible for…
HTML = structure, CSS = look.
2. Best way to include main.js?
defer waits for the HTML.
3. console.log('2' + '3') prints…
Strings join.
4. Is JavaScript case-sensitive?
name ≠ Name.
5. querySelector returned null – likely cause?
Use defer.
Interview corner
💼 Interview Corner
What is the difference between defer and async on a script tag?
Both download without blocking HTML parsing. defer runs scripts in order after the document is parsed (ideal for app code); async runs each script as soon as it downloads, in any order (ideal for independent scripts like analytics).
Is JavaScript the same as Java?
No. They are unrelated languages; the name was a 1995 marketing decision. JavaScript is dynamically typed, runs in browsers and Node.js; Java is statically typed and compiled to JVM bytecode.
Summary
- JavaScript adds behaviour to HTML and CSS.
- Link external files with <script src defer>.
- console.log prints values; F12 → Console.
- querySelector + addEventListener + textContent = first interactivity.
➡️ Next
Day 2: variables (let, const), data types and template literals – build a sweet-shop bill.
Frequently Asked Questions
Do I need to install anything?
No – every browser runs JavaScript. For files on your computer use VS Code + Live Server; Node.js (free) lets you run JS outside the browser.
Should I learn TypeScript instead?
Learn JavaScript first. TypeScript is JavaScript plus types – easy to add once you know JS well.
