JavaScript को HTML में कहाँ लिखा जाता है?
JavaScript code को HTML document में अलग-अलग तरीकों से लिखा जा सकता है। इसका मतलब यह है कि JavaScript को हम HTML file के अंदर ही add करते हैं ताकि browser उस code को पढ़ सके और execute कर सके। सही जगह पर JavaScript लिखना बहुत जरूरी होता है, क्योंकि इससे page का behavior और performance प्रभावित होती है।
JavaScript को मुख्य रूप से तीन तरीकों से HTML में जोड़ा जाता है।
JavaScript को <script> Tag के अंदर लिखना
JavaScript हमेशा <script> tag के अंदर लिखा जाता है। Browser को <script> tag देखकर पता चलता है कि इसके अंदर JavaScript code है और इसे execute करना है।
<script> tag को HTML document के <head> या <body> section में लिखा जा सकता है।
JavaScript को <head> Section में लिखना
जब JavaScript code को <head> section में लिखा जाता है, तो यह code page load होने से पहले browser द्वारा read किया जाता है।
Example
<!DOCTYPE html>
<html>
<head>
<script>
function showMessage() {
alert("Hello JavaScript");
}
</script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
इस code में JavaScript function <head> section के अंदर लिखा गया है।
यह function showMessage() एक alert box दिखाता है जिसमें text “Hello JavaScript” लिखा होता है।
यह code इसलिए use किया गया है ताकि function पहले से load हो जाए और जब user button पर click करे, तब function तुरंत call हो सके।
इस code का result यह होगा कि जैसे ही user “Click Me” button पर click करेगा, screen पर एक popup alert दिखाई देगा।
JavaScript को <body> Section में लिखना
JavaScript को <body> section में लिखना सबसे common और recommended तरीका माना जाता है। ऐसा इसलिए क्योंकि पहले HTML content load हो जाता है और उसके बाद JavaScript execute होती है।
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Example</h2>
<button onclick="showMessage()">Click Me</button>
<script>
function showMessage() {
alert("JavaScript Body Section से Run हो रही है");
}
</script>
</body>
</html>
इस example में JavaScript code <body> section के end में लिखा गया है।
यह function button click होने पर alert message दिखाता है।
यह तरीका इसलिए use किया जाता है क्योंकि इससे page का content पहले दिखाई देता है और JavaScript की वजह से page slow नहीं होता।
इस code का output यह होगा कि page load होने के बाद button दिखाई देगा और button पर click करते ही alert popup खुलेगा।
External JavaScript File का उपयोग
JavaScript को HTML file के अंदर लिखने के बजाय अलग .js file में भी लिखा जा सकता है। इसे External JavaScript कहा जाता है।
External JavaScript का use इसलिए किया जाता है क्योंकि इससे code clean रहता है, reuse किया जा सकता है और maintain करना आसान होता है।
External JavaScript File कैसे बनाते हैं
सबसे पहले एक नई file बनाते हैं, जैसे script.js।
Example (script.js)
function showMessage() {
alert("External JavaScript File से Message");
}
इस file में एक simple JavaScript function लिखा गया है जो alert box दिखाता है।
अब इस file को HTML document से link किया जाता है।
Example (HTML File)
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript Example</h2>
<button onclick="showMessage()">Click Me</button>
<script src="script.js"></script>
</body>
</html>
यहाँ <script src="script.js"></script> का मतलब है कि HTML file external JavaScript file को load कर रही है।
इस code का result यह होगा कि button click करने पर alert message external file से execute होगा।
External JavaScript का फायदा
External JavaScript से code बार-बार reuse किया जा सकता है।
HTML और JavaScript अलग-अलग रहने से file readable रहती है।
Large projects में code manage करना आसान होता है।
Website की performance बेहतर होती है।
एक HTML File में Multiple JavaScript Files
एक HTML file में एक से ज्यादा JavaScript files भी attach की जा सकती हैं।
Example
<script src="file1.js"></script>
<script src="file2.js"></script>
Browser इन files को उसी order में load और execute करता है जिस order में वे लिखी होती हैं।
JavaScript को Inline लिखना
JavaScript को directly HTML element के अंदर भी लिखा जा सकता है, इसे Inline JavaScript कहते हैं।
Example
<button onclick="alert('Hello Inline JavaScript')">Click Me</button>
इस code में JavaScript सीधे onclick attribute के अंदर लिखी गई है।
यह code button click होते ही alert message दिखाता है।
Inline JavaScript beginners के लिए समझना आसान होता है, लेकिन बड़े projects में इसका use avoid किया जाता है क्योंकि code messy हो जाता है।
JavaScript लिखने की सही Practice
छोटे examples के लिए inline या internal JavaScript ठीक होती है।
Large websites और applications के लिए external JavaScript सबसे best practice मानी जाती है।
JavaScript code को <body> section के end में लिखना performance के लिए अच्छा होता है।
JavaScript Where To का सार
JavaScript को <script> tag के अंदर लिखा जाता है।
इसे <head>, <body> या external file में रखा जा सकता है।
External JavaScript professional development के लिए सबसे ज्यादा use की जाती है।
इस chapter को समझने के बाद आपको clear हो जाना चाहिए कि JavaScript code को HTML में कहाँ और कैसे लिखा जाता है।