परिचय
JavaScript कोड को HTML में <script> और </script> टैग के बीच डाला जाता है। आप <script> टैग को अपने वेब पेज पर कहीं भी रख सकते हैं, लेकिन आमतौर पर इसे <head> टैग के अंदर रखने की सलाह दी जाती है।
<script> टैग कैसे काम करता है
<script> टैग ब्राउज़र को निर्देश देता है कि इन टैग के बीच के सभी टेक्स्ट को स्क्रिप्ट के रूप में व्याख्या करना शुरू करे।
महत्वपूर्ण एट्रिब्यूट्स
- Language - यह एट्रिब्यूट बताता है कि आप किस स्क्रिप्टिंग भाषा का उपयोग कर रहे हैं। आमतौर पर इसका मान JavaScript होता है। हालांकि HTML के हालिया संस्करणों (और XHTML, इसके उत्तराधिकारी) में इस एट्रिब्यूट का उपयोग बंद कर दिया गया है।
- Type - यह एट्रिब्यूट अब स्क्रिप्टिंग भाषा को इंगित करने के लिए अनुशंसित है और इसका मान
"text/javascript"पर सेट होना चाहिए।
उदाहरण: "Hello World" प्रिंट करना
आइए एक सरल उदाहरण देखते हैं जो "Hello World" प्रिंट करता है। हमने एक वैकल्पिक HTML टिप्पणी जोड़ी है जो हमारे JavaScript कोड को घेरती है। यह उन ब्राउज़रों से हमारे कोड को बचाने के लिए है जो JavaScript का समर्थन नहीं करते। टिप्पणी "//-->" के साथ समाप्त होती है। यहां "//" JavaScript में एक टिप्पणी को दर्शाता है, इसलिए हम इसे HTML टिप्पणी के अंत को JavaScript कोड के टुकड़े के रूप में पढ़ने से रोकने के लिए जोड़ते हैं। इसके बाद, हम document.write फ़ंक्शन को कॉल करते हैं जो हमारे HTML दस्तावेज़ में एक स्ट्रिंग लिखता है।
यह फ़ंक्शन टेक्स्ट, HTML, या दोनों को लिखने के लिए उपयोग किया जा सकता है। निम्नलिखित कोड देखें:
कोड उदाहरण
<html> <body> <script language="javascript" type="text/javascript"> <!-- document.write("Hello World!") //--> </script> </body> </html>
आउटपुट
Hello World!
आधुनिक सर्वोत्तम अभ्यास
- स्क्रिप्ट को <body> के अंत में रखें - इससे पेज तेजी से लोड होता है क्योंकि HTML कंटेंट पहले रेंडर होता है
deferएट्रिब्यूट का उपयोग करें -<script src="script.js" defer></script>से स्क्रिप्ट HTML पार्स होने के बाद चलती हैasyncएट्रिब्यूट का उपयोग करें -<script src="script.js" async></script>से स्क्रिप्ट असिंक्रोनसली लोड होती हैtype="text/javascript"अब वैकल्पिक है क्योंकि यह डिफ़ॉल्ट है- HTML कमेंट रैपर (
<!-- -->) अब आवश्यक नहीं हैं
सारांश
| प्लेसमेंट | उपयोग का मामला |
|---|---|
| <head> में | छोटे स्क्रिप्ट्स, लाइब्रेरी लोड करना, defer के साथ |
| <body> के अंत में | अधिकांश स्क्रिप्ट्स के लिए सर्वोत्तम (अनुशंसित) |
| इंलाइन (आवश्यकतानुसार) | छोटे इवेंट हैंडलर्स, इंलाइन कॉन्फ़िगरेशन |