Imagine you're writing a note to leave for a colleague, you could scribble it directly on their desk, stick it on a notepad next to them, or mail it separately to arrive whenever it's convenient.
JavaScript can be placed in a page the same three ways: written inline directly on an element, written inside a script tag within the page itself, or kept in a completely separate file that the page links to.
On a real project like cookiescursor.com, where scripts control many pages, keeping JavaScript in separate external files is almost always the cleanest and most maintainable choice.
Inline JavaScript सीधे किसी HTML element के attribute के अंदर लिखी जाती है, जैसे onclick, और केवल तभी चलती है जब उस विशिष्ट element पर वह विशिष्ट event हो।
Note:
Inline JavaScript छोटे, एक-बार के demos के लिए ठीक है, पर असली applications में इससे बचना चाहिए और structure को behavior से अलग रखना चाहिए।
Warning:
Inline event handlers mix HTML and JavaScript together, making the code harder to read, reuse, and debug as a project grows.
Internal script tag JavaScript को HTML document के भीतर ही, <script></script> में लपेटकर रखता है, जिससे code अलग-अलग elements से अलग रहता है पर फिर भी उसी file में रहता है।
Note:
Internal scripts त्वरित prototypes या एक-page demos के लिए उपयोगी हैं जहाँ अलग file बनाना ग़ैरज़रूरी लगता है।
Warning:
Internal scripts cannot be reused across multiple pages the way an external file can, leading to duplicated code in larger sites.
उदाहरण: Internal Script Tag
javascript
<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 साझा कर सकते हैं।
Note:
External files को वर्णनात्मक नाम दीजिए, जैसे main.js या validation.js, ताकि पूरे project में उनका उद्देश्य एक नज़र में साफ़ हो।
Warning:
The browser cannot run an external script until it successfully downloads the file, a broken path silently means the script never runs.
उदाहरण: External JavaScript Files
javascript
<script src="main.js"></script>
Head बनाम Body में स्थान
head में रखी script तब चलती है जब browser ने अभी body को parse नहीं किया होता, जो त्रुटियाँ पैदा कर सकता है अगर वह उन elements तक पहुँचने की कोशिश करे जो अभी मौजूद नहीं हैं, जबकि बंद होने वाले body tag के ठीक पहले रखी script तब चलती है जब ऊपर का सारा HTML पहले ही load हो चुका होता है।
Note:
शुरुआती लोगों के लिए एक सरल नियम के तौर पर, अपना script tag </body> के ठीक पहले रखिए जब तक कि उसे पहले load करने का कोई विशेष कारण न हो।
Warning:
A script in the head that directly manipulates body elements without waiting for them will fail, since those elements are not yet part of the page.
उदाहरण: Head vs Body Placement
javascript
<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 को तैयार होते ही चला देता है।
Note:
उन scripts के लिए defer इस्तेमाल कीजिए जिन्हें पूरे page की संरचना मौजूद चाहिए, और स्वतंत्र scripts, जैसे analytics, के लिए async, जो दूसरी सामग्री पर निर्भर नहीं करतीं।
Warning:
Multiple async scripts can run in any order relative to each other, which can cause bugs if one script secretly depends on another.
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}