JS कहाँ लिखें
In this page:
<script>
// inline JavaScript
</script>
<script src="file.js"></script>Inline JavaScript
Inline JavaScript सीधे किसी HTML element के attribute के अंदर लिखी जाती है, जैसे onclick, और केवल तभी चलती है जब उस विशिष्ट element पर वह विशिष्ट event हो।
उदाहरण: Inline JavaScript
<button onclick="console.log('Button clicked')">Click Me</button>Internal Script Tag
Internal script tag JavaScript को HTML document के भीतर ही, <script></script> में लपेटकर रखता है, जिससे code अलग-अलग elements से अलग रहता है पर फिर भी उसी file में रहता है।
उदाहरण: Internal Script Tag
<script>
// Print "Running from an internal script tag." to the console
console.log("Running from an internal script tag.");
</script>External JavaScript Files
External file सारी JavaScript को अपनी अलग .js file में रखती है, जो script tag के src attribute से HTML page से जुड़ती है, जिससे HTML साफ़ रहता है और कई pages ठीक वही code साझा कर सकते हैं।
उदाहरण: External JavaScript Files
<script src="main.js"></script>Head बनाम Body में स्थान
head में रखी script तब चलती है जब browser ने अभी body को parse नहीं किया होता, जो त्रुटियाँ पैदा कर सकता है अगर वह उन elements तक पहुँचने की कोशिश करे जो अभी मौजूद नहीं हैं, जबकि बंद होने वाले body tag के ठीक पहले रखी script तब चलती है जब ऊपर का सारा HTML पहले ही load हो चुका होता है।
उदाहरण: Head vs Body Placement
<head>
<script>
console.log(document.body); // null - body not parsed yet
</script>
</head>
<body>
<p>Content</p>
</body>defer और async Attributes
defer browser को बताता है कि script को background में download करे और पूरे page के parse होने के बाद ही, क्रम से चलाए, जबकि async background में download करता है और parsing के क्रम की परवाह किए बिना script को तैयार होते ही चला देता है।
उदाहरण: The defer and async Attributes
<script src="main.js" defer></script>
<script src="analytics.js" async></script>- HTML elements पर बड़ी मात्रा में JavaScript inline लिखना, जो page बढ़ने के साथ पढ़ना और maintain करना बहुत मुश्किल बन जाता है।
- script tag को deferred किए बिना उन elements से पहले रखना जिन्हें उसे access करना है, जिससे errors होती हैं क्योंकि वे elements अभी मौजूद नहीं होते।
- external JavaScript file को link करते समय src attribute को सही relative या absolute path की तरफ point करना भूल जाना।
- JavaScript किसी element पर inline, किसी internal <script> tag के अंदर, या किसी external linked file में रह सकती है।
- असली projects के लिए external files सबसे maintainable approach हैं, क्योंकि same file को कई pages पर reuse किया जा सकता है।
- defer और async attributes control करते हैं कि कोई external script page parsing के relative असल में कब execute होता है।
तीनों placement methods, inline, internal, और external scripts, साथ ही defer और async attributes, हर modern browser द्वारा supported हैं।
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: