🟨 Days 1–7 – JavaScript की नींव · दिन 01
दिन 1: JavaScript क्या है? आपका पहला Program
⏱ 70 min📶 Beginner🎯 100% self-study
दिन 1 / 30
✅ आज आप सीखेंगे
- Web page पर (और उसके बाहर) JavaScript क्या करता है
- JS कहाँ चलता है: browser, Node.js, mobile apps
- <script src defer> से JS जोड़ना
- console.log और DevTools Console
- आपका पहला interactive button
🏢 असली दुनिया में
Sharma Sweets की website अब सुंदर दिखती है (CSS course) पर अभी भी brochure जैसी है: “Add to cart” button कुछ नहीं करता, order form total नहीं जोड़ सकता और theme नहीं बदलती। HTML ढाँचा है, CSS रूप – JavaScript व्यवहार है। 30 दिनों में आप site को चलती हुई online shop बनाएँगे।
HTML, CSS और JavaScript
🧱
HTML = ढाँचाHeadings, buttons, forms – page की संज्ञाएँ।🎨
CSS = रूपColours, layout, animation – विशेषण।⚡
JavaScript = व्यवहारClicks, गणनाएँ, servers से data – क्रियाएँ।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>| JS कहाँ चलता है | किसलिए | उदाहरण |
|---|---|---|
| Browser | Interactive websites | Carts, forms, maps, chat widgets |
| Node.js (server) | APIs, back-ends, scripts | Payment webhooks, Discord bots |
| Mobile / desktop | React Native, Electron से apps | VS Code ख़ुद JS/TypeScript में लिखा है |
| Frameworks | React, Next.js, Vue, Angular | ज़्यादातर Indian startup front-ends |
आपका पहला 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
💡 Console कहाँ है?
कोई भी website खोलें, F12 (या Ctrl+Shift+J) दबाएँ और Console tab पर click करें। console.log("Hi") लिखकर Enter दबाएँ। इस page का हर program code के नीचे OUTPUT box में अपना असली output भी दिखाता है (OUTPUT box)।
Page में JavaScript जोड़ना
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>
| तरीक़ा | कब |
|---|---|
| head में <script src="js/main.js" defer> ⭐ | हर असली project – साथ-साथ download, HTML तैयार होने के बाद चलता है |
| body के अंत में <script> … </script> | छोटे demos (हमारे examples) |
| onclick="…" attribute | बचें – HTML और JS मिल जाते हैं, संभालना मुश्किल |
| type="module" | आधुनिक import/export (Day 21) – अपने-आप deferred |
⚠️ “Cannot read properties of null”
Beginners की सबसे आम error: script button बनने से पहले चल गई, तो querySelector ने null लौटाया। defer से ठीक करें (या script body के अंत में रखें)।
Statements, comments और 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
असली mini-task: त्योहार की बधाई
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 CSS selector से element ढूँढता है
- 2addEventListener किसी घटना (click) का इंतज़ार करता है
- 3अंदर का function हर बार उस घटना पर चलता है
- 4.value लिखा हुआ पढ़ता है; .textContent page पर text लिखता है
🏅 आज के Job Skills
✔ HTML और CSS में JavaScript क्या जोड़ता है, समझाना✔ defer के साथ script जोड़ना✔ console.log से values print करना और Console इस्तेमाल करना✔ Button से page बदलना
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: तीन lines में अपना नाम, शहर और 1500 + 250 का नतीजा print करें।
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: “Show offer” button बनाएँ जो एक paragraph में “Free delivery above ₹1,500” लिखे।
Solution देखें
Task 3: codingeasily.in पर Console खोलें और document.title लिखें। क्या print होता है?
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. JavaScript मुख्य रूप से ज़िम्मेदार है…
HTML = ढाँचा, CSS = रूप।
2. main.js जोड़ने का सबसे अच्छा तरीक़ा?
defer HTML का इंतज़ार करता है।
3. console.log('2' + '3') print करता है…
Strings जुड़ती हैं।
4. क्या JavaScript case-sensitive है?
name ≠ Name।
5. querySelector ने null लौटाया – संभावित कारण?
defer लें।
Interview corner
💼 Interview Corner
Script tag पर defer और async में क्या फ़र्क?
दोनों HTML parsing रोके बिना download होते हैं। defer document parse होने के बाद क्रम से चलाता है (app code के लिए आदर्श); async हर script download होते ही किसी भी क्रम में चलाता है (analytics जैसी स्वतंत्र scripts के लिए)।
क्या JavaScript और Java एक ही हैं?
नहीं। ये असंबंधित भाषाएँ हैं; नाम 1995 का marketing फ़ैसला था। JavaScript dynamically typed है, browsers और Node.js में चलता है; Java statically typed है और JVM bytecode में compile होता है।
सारांश
- JavaScript HTML और CSS में व्यवहार जोड़ता है।
- <script src defer> से external files जोड़ें।
- console.log values print करता है; F12 → Console।
- querySelector + addEventListener + textContent = पहली interactivity।
➡️ आगे
Day 2: variables (let, const), data types और template literals – sweet-shop का bill बनाएँ।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
क्या कुछ install करना होगा?
नहीं – हर browser JavaScript चलाता है। अपने computer की files के लिए VS Code + Live Server; Node.js (मुफ़्त) से browser के बाहर JS चलती है।
क्या इसकी जगह TypeScript सीखूँ?
पहले JavaScript। TypeScript = JavaScript + types – JS अच्छे से आ जाए तो जोड़ना आसान।
