लोड हो रहा है...

HTML में JavaScript

पहले accessibility संरचना से पृष्ठ उपयोगी बनाती थी। JavaScript उसी HTML पर व्यवहार जोड़ता है: क्लिक, टेक्स्ट अपडेट, सर्वर। यह पाठ HTML पक्ष पर रहता है: पृष्ठ <script> से स्क्रिप्ट कैसे लोड करता है — पूरा JS भाषा कोर्स नहीं।

स्क्रिप्ट लोड क्यों मायने रखता है

ब्राउज़र पहले HTML पेंट करते हैं। स्क्रिप्ट देरी कर सकती है, गलत पथ पर चुपचाप फेल हो सकती है, या वह सामग्री छिपा सकती है जो मार्कअप में होनी चाहिए। <script> कहाँ, कब src, क्या HTML में — यह पृष्ठ ईमानदार रखता है। पिछली accessibility आदतें लागू रहती हैं।

सीधा उत्तर

1) छोटे टुकड़े के लिए <script>…</script> या बाहरी के लिए <script src="app.js"></script>। 2) लॉजिक बढ़े तो बाहरी .js। 3) कई body के अंत के पास रखते हैं। 4) अर्थपूर्ण टेक्स्ट/नियंत्रण HTML में। 5) आधुनिक ऐप्स type="module" ले सकते हैं। 6) यह कोर्स केवल एम्बेडिंग।

📊 Script wiring beginners use

Choice	What it does	Beginner tip
Inline script	Code sits between script tags	Fine for tiny demos; hard to reuse
External src	Loads a .js file from a path	Prefer as projects grow
End of body	Script runs after markup above it	Content can paint sooner
Behavior on HTML	JS finds elements by id/selectors	Elements must exist in the page
Content in HTML	Text and controls stay in markup	Page still makes sense if JS fails
Modules later	type=module for modern apps	Skip until you study JS deeply

असली बटन के साथ इनलाइन स्क्रिप्ट

छोटा पृष्ठ: id वाला असली <button>, फिर क्लिक सुनकर टेक्स्ट बदलने वाला <script>। मार्कअप accessible रहता है; स्क्रिप्ट केवल व्यवहार जोड़ती है।

Inline button click

html

<button id="hi" type="button">Say hi</button>
<script>
document.getElementById("hi").addEventListener("click", function () {
document.getElementById("hi").textContent = "Hello!";
});
</script>

इनलाइन डेमो पढ़ना

बटन असली HTML है — बिना JS भी उपयोगी
id स्क्रिप्ट को स्थिर हुक देता है
script ब्लॉक में कुछ इनलाइन JS पंक्तियाँ
addEventListener व्यवहार जोड़ता है, बटन नहीं बदलता
स्क्रिप्ट न चले तो «Say hi» रहता है
पिछला पाठ संरचना; यहाँ व्यवहार जोड़ना

src के साथ बाहरी स्क्रिप्ट

वही विचार अलग फ़ाइल में बेहतर स्केल करता है। HTML केवल पथ घोषित करता है; लॉजिक app.js में। पथ आपके फ़ोल्डर से मेल खाना चाहिए।

External script src

html

<button id="hi" type="button">Say hi</button>
<script src="app.js"></script>

बाहरी पैटर्न पढ़ना

src फ़ाइल लाकर चलाता है
HTML छोटा; व्यवहार साझा .js में
गलत पथ = लोड नहीं — Network जाँचें
स्क्रिप्ट बटन के बाद या तत्व का इंतज़ार
विशाल इनलाइन ब्लॉक से बेहतर
आगे HTML पाठ; गहरा JS अलग कोर्स

व्यवहार कैसे लोड करें

बहुत छोटा डेमो: नियंत्रण के पास इनलाइन ठीक
पुन: उपयोग/विकास: app.js और src
महत्वपूर्ण टेक्स्ट/नेव: पहले HTML, फिर JS
टूटा महसूस: पहले src पथ जाँचें
Accessibility: button/a/label रखें — क्लिक div नहीं
पूरी भाषा: लूप/फ्रेमवर्क JS कोर्स में

अभ्यास — HTML स्क्रिप्ट लोड करता है

इनलाइन डेमो कॉपी करें; क्लिक से बदलाव देखें।
लिसनर app.js में ले जाएँ, src लगाएँ, जाँचें।
पथ तोड़ें (wrong.js); बटन «Say hi» रहे।
स्क्रिप्ट हटाएँ; HTML अभी भी समझ आए।
नया id वाला दूसरा बटन और लिसनर।
वाक्य: HTML सामग्री और संरचना का मालिक; script वैकल्पिक व्यवहार लोड करता है।
अगला पाठ: छोटा HTML सारांश।

आसान गलतियाँ

महत्वपूर्ण वाक्य केवल JavaScript में
src में टाइपो या गलत फ़ोल्डर
विशाल इनलाइन स्क्रिप्ट
तत्व मौजूद होने से पहले स्क्रिप्ट चलाना
accessible बटन को क्लिक div से बदलना
इसे पूरा JS पाठ्यक्रम मानना
accessibility आदतें भूलना

सारांश

script HTML पृष्ठ में JavaScript लोड करता है
छोटे डेमो के लिए इनलाइन; बढ़ने पर बाहरी .js के लिए src
स्क्रिप्ट ऐसे रखें कि सामग्री दिखे और उपयोगी रहे
असली सामग्री और accessible नियंत्रण HTML में रखें
Accessibility संरचना थी; यह पाठ व्यवहार वायरिंग है
अगला: अब तक के पथ का छोटा HTML सारांश

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी