JavaScript कहाँ लिखें
आप जानते हैं कि JavaScript व्यवहार जोड़ता है। अगला सवाल व्यावहारिक है: कोड कहाँ रखें ताकि ब्राउज़र उसे ढूँढे, और जो तत्व बदलना है वह पहले से मौजूद हो?
HTML पेज में JavaScript कहाँ रखना चाहिए?
JavaScript को <script> तत्व में रखें — टैगों के बीच इनलाइन, या .js फ़ाइल की ओर src वाला बाहरी स्क्रिप्ट। शुरुआती रोज़मर्रा के काम में जो पेज छूता है, स्क्रिप्ट </body> से ठीक पहले रखें ताकि ऊपर का HTML तैयार हो। कोड बढ़े तो बाहरी फ़ाइल में ले जाएँ और वही body-के-अंत की आदत रखें (बाद में defer भी देखेंगे)।
तीन जगहें एक नज़र में
📊 JavaScript कहाँ रह सकता है
| विकल्प | कहाँ बैठता है | शुरुआती के लिए सबसे अच्छा उपयोग |
|---|---|---|
| head में इनलाइन | <head> के अंदर <script> |
बहुत छोटा सेटअप; तत्व अभी न हों तो जोखिम |
| body के अंत में इनलाइन | </body> से ठीक पहले <script> |
शीर्षक/पाठ बदलने वाले छोटे डेमो के लिए डिफ़ॉल्ट |
बाहरी .js फ़ाइल |
<script src="app.js"> (अक्सर body के अंत) |
जब लॉजिक बढ़े या फ़ाइल साझा करनी हो |
head में स्क्रिप्ट (जानें, सावधानी से इस्तेमाल करें)
head की स्क्रिप्ट जल्दी चलती है, जब ब्राउज़र अभी दस्तावेज़ पढ़ रहा होता है। इससे दिखने वाला कंटेंट देर से आ सकता है। अगर कोड तुरंत getElementById से तत्व ढूँढे और वह नीचे हो, तो अभी मौजूद नहीं होता — null या त्रुटि।
<!DOCTYPE html>
<html>
<head>
<title>Where To — Head</title>
<script>
console.log("Head script ran early");
</script>
</head>
<body>
<h1>Content comes after the head script</h1>
</body>
</html>
head स्क्रिप्ट कब ठीक है
- संदेश लॉग करना या ऐसा सरल मान जो DOM न चाहे
- आधुनिक गुणों वाली लाइब्रेरी लोड करना (बाद में
defer/async) - इस कोर्स के «यह पैराग्राफ बदलो» डेमो के लिए डिफ़ॉल्ट नहीं
body के अंत में स्क्रिप्ट (शुरुआती डिफ़ॉल्ट)
पहले वह मार्कअप रखें जो विज़िटर को चाहिए। फिर स्क्रिप्ट चलाएँ। स्क्रिप्ट से ऊपर id वाले तत्व निर्देश चलने पर दस्तावेज़ में पहले से होते हैं।
<!DOCTYPE html>
<html>
<head>
<title>Where To — Body End</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<p>HTML arrives first; then the script updates the heading.</p>
<script>
document.getElementById("title").textContent =
"Ready — script ran at the end of body";
</script>
</body>
</html>
यह आदत क्यों मदद करती है
- शीर्षक और पैराग्राफ स्क्रिप्ट खत्म होने से पहले दिख सकते हैं
getElementById("title")असली नोड ढूँढता है- भाषा सीखते समय छोटे डेमो एक फ़ाइल में रहते हैं
- बाद में वही निर्देश बाहरी फ़ाइल में ले जाते हैं बिना विचार बदले
बाहरी JavaScript फ़ाइल (प्रोजेक्ट डिफ़ॉल्ट)
संरचना HTML में रखें और लॉजिक app.js में। src से फ़ाइल बताएँ। पथ HTML के सापेक्ष होते हैं जब तक आप फ़ोल्डर न दें।
<!DOCTYPE html>
<html>
<head>
<title>Where To — External</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<script src="app.js"></script>
</body>
</html>
document.getElementById("title").textContent =
"Loaded from app.js";
बढ़ने पर बाहरी क्यों जीतता है
- एक
.jsकई पेजों की सेवा कर सकता है - संपादक अपनी फ़ाइल में JavaScript को साफ़ रंग देता है
- मार्कअप में विशाल
<script>ब्लॉक बचते हैं - गलत
srcपथ पेज पर चुपचाप फेल होता है — कुछ न चले तो Console और Network देखें
क्रम मायने रखता है
ब्राउज़र ऊपर से नीचे पढ़ता है। पार्सर स्क्रिप्ट तक पहुँचे तो वह चलती है (बाद में उन्नत गुणों को छोड़कर)। अगर पहली पंक्ति को #title चाहिए तो वह तत्व HTML में स्क्रिप्ट के ऊपर होना चाहिए, या दस्तावेज़ पूरा होने का इंतज़ार करें। body के अंत में रखना यही क्रम पाने का सरल तरीका है।
खुद आज़माएँ
- body-के-अंत वाले उदाहरण से
where.htmlबनाएँ। खोलें और देखें शीर्षक अपडेट होता है। textContentवाली स्ट्रिंग बदलें, सहेजें, रिफ़्रेश करें।- बाहरी उदाहरण के JavaScript से
app.jsबनाएँ।where.htmlमें</body>से पहले सिर्फ<script src="app.js"></script>रखें। - अस्थायी रूप से
app.jsका नाम बदलें याsrcपथ तोड़ें, रिफ़्रेश करें और Console देखें — फिर पथ ठीक करें। - वैकल्पिक: वही स्क्रिप्ट बिना
deferके head में ले जाएँ और देखेंgetElementByIdफेल हो सकता है; फिर body के अंत पर लौटाएँ।
आम गलतियाँ
- DOM अपडेट करने वाली स्क्रिप्ट head में रखना ताकि
getElementByIdतत्व से पहले चले - गलत वर्तनी या गलत फ़ोल्डर वाला
<script src="app.js">— पेज ठीक दिखे पर कुछ न चले - हर HTML में सैकड़ों पंक्तियाँ इनलाइन रखना बजाय एक साझा
.jsके - इस सत्र को CSS वायरिंग से मिलाना: स्टाइल
<link>/<style>से; व्यवहार<script>से
सार
- JavaScript
<script>में रहता है — इनलाइन या.jsपरsrcसे - जब कोड पेज तत्व छूए, body का अंत शुरुआती-अनुकूल डिफ़ॉल्ट है
- head स्क्रिप्ट जल्दी चलती हैं; लोडिंग गुण जाने बिना वहाँ DOM अपडेट न करें
- डेमो बढ़ें तो बाहरी फ़ाइलें प्रोजेक्ट डिफ़ॉल्ट हैं
- स्क्रिप्ट क्रम दस्तावेज़ क्रम का पालन करता है जब तक बाद में उन्नत विकल्प न आएँ
- काम करने वाले इनलाइन डेमो को HTML +
app.jsमें बाँटकर अभ्यास करें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी