HTML <script> . का उपयोग करना सीखें तत्व।
एचटीएमएल <script> आपके दस्तावेज़ में जावास्क्रिप्ट कोड जोड़ने के लिए तत्व का उपयोग किया जाता है।
<script> . के साथ आप जावास्क्रिप्ट को दो अलग-अलग तरीकों से जोड़ सकते हैं:
- आप सीधे अपने दस्तावेज़ में जावास्क्रिप्ट कोड इनलाइन एम्बेड कर सकते हैं।
- या बाहरी JavaScript फ़ाइल आयात/लोड करें (
.js)।
तो यह जावास्क्रिप्ट को आंतरिक रूप से बनाम बाहरी रूप से लोड करने की बात है।
आइए दोनों विकल्पों पर एक नज़र डालें।
इनलाइन JavaScript
अपने जावास्क्रिप्ट कोड को इनलाइन एम्बेड करने के लिए, आप स्क्रिप्ट टैग खोलने और बंद करने को परिभाषित करते हैं, और जेएस कोड को अंदर रखते हैं:
<script>
// Add your JavaScript code here
</script>
<script> तत्पश्चात तत्व को या तो आपके दस्तावेज़ के <head> . के अंदर रखा जा सकता है तत्व:
<!DOCTYPE html>
<html>
<head>
<script>
// Add your JavaScript code here
</script>
</head>
<body>
...
</body>
</html>
या <head> . के बाहर तत्व, समापन से ठीक पहले </body> तत्व टैग:
<!DOCTYPE html>
<html>
<head></head>
<body>
...
<script>
// Add your JavaScript code here
</script>
</body>
</html>
तो <head> . में JavaScript डालने में क्या अंतर है? बनाम <body> ?
अंतर प्रदर्शन का है और यह एक बड़ा . हो सकता है अंतर।
डिफ़ॉल्ट रूप से, HTML दस्तावेज़ और उनके तत्व ऊपर से नीचे तक पार्स (पढ़ें) और प्रस्तुत किए जाते हैं। जब आप <head> . में JavaScript कोड लोड और रन करते हैं , बाकी . का प्रतिपादन आपके पृष्ठ तत्वों (आपकी दृश्यमान सामग्री) को तब तक अवरुद्ध कर दिया जाता है जब तक कि स्क्रिप्ट को पार्स नहीं किया जाता है और उसका कोड चल रहा होता है।
आपके द्वारा निष्पादित किए जा रहे कोड के आकार और प्रकार के आधार पर JavaScript फ़ाइल को निष्पादित करने में कुछ मिलीसेकंड (ms), या कई सेकंड लग सकते हैं। इसलिए यह आपके पृष्ठ के उपयोगकर्ता के लिए इंटरैक्टिव (उपयोग योग्य) बनने से पहले के समय में देरी कर सकता है।
नीचे अपना जावास्क्रिप्ट कोड डालकर (</body> . के ठीक पहले ), JavaScript कोड बाद . तक लोड और निष्पादित नहीं होगा आपकी सभी पृष्ठ सामग्री प्रदान की जाती है और उपयोगकर्ता को दिखाई देती है। यह अवरुद्ध से बचा जाता है पृष्ठ सामग्री और इसलिए उपयोगकर्ता जल्द ही वेब पेज के साथ बातचीत कर सकता है।
ठीक है, अब आप जानते हैं कि इनलाइन जावास्क्रिप्ट कोड को कैसे एम्बेड करना है और इसे सबसे अच्छे तरीके से कैसे करना है।
अब आइए देखें कि बाहरी जावास्क्रिप्ट कोड आयात करना, और यह आंतरिक (इनलाइन) जावास्क्रिप्ट से कैसे भिन्न है।
बाहरी JavaScript फ़ाइल आयात करें
बाहरी JavaScript कोड लोड करने के लिए, आपको इसे .js . वाली फ़ाइल के माध्यम से आयात करना होगा विस्तार। उदा. main.js ।
यह इस तरह काम करता है:
<script src="main.js"></script>
और इनलाइन जावास्क्रिप्ट की तरह ही, आप इसे या तो अपने <head> . के अंदर रख सकते हैं तत्व:
<!DOCTYPE html>
<html>
<head>
<script src="main.js"></script>
</head>
<body>
...
</body>
</html>
या क्लोजिंग बॉडी एलिमेंट टैग से ठीक पहले </body> :
<!DOCTYPE html>
<html>
<head></head>
<body>
...
<script src="main.js"></script>
</body>
</html>defer विशेषता
आधुनिक Javascript के साथ, और भी अधिक प्रदर्शन करने वाला है अपनी बाहरी स्क्रिप्ट को अपने पृष्ठ के निचले भाग पर लोड करने के बजाय चलाने का तरीका।
हम defer . का उपयोग कर सकते हैं <script> . पर विशेषता तत्व:
<script defer src="main.js"></script>
और फिर इसे अपने <head> . के अंदर डाल दें तत्व:
<!DOCTYPE html>
<html>
<head>
<script defer src="main.js"></script>
</head>
<body>
...
</body>
</html>
इसके साथ defer दृष्टिकोण, आपका जावास्क्रिप्ट कोड लोड हो गया है (निष्पादित नहीं) जबकि आपका HTML कोड पार्स हो रहा है, लेकिन यह बाद . तक निष्पादित नहीं होता है HTML का विश्लेषण किया जाता है।
अगर आपकी बाहरी स्क्रिप्ट सबसे नीचे है (</body> . के ठीक पहले ), ऐसा होता है:
- सबसे पहले, HTML कोड पार्स करता है
- फिर HTML रेंडर करता है
- फिर जावास्क्रिप्ट कोड लोड हो जाता है
- तब जावास्क्रिप्ट कोड निष्पादित होता है
defer . के साथ हम लोड कर रहे हैं जावास्क्रिप्ट कोड जबकि HTML पार्स कर रहा है (समानांतर में), इसलिए जैसे ही आपका HTML किया जाता है, जावास्क्रिप्ट कोड पहले ही लोड हो चुका है और निष्पादित करने के लिए तैयार है।
यह बेहतर क्यों है? जरूरी नहीं कि यह हमेशा बेहतर हो। लेकिन कई वेबसाइटें तुरंत काम करने के लिए जावास्क्रिप्ट पर भरोसा करती हैं, जैसे ही पेज इंटरेक्टिव (उपयोगकर्ता के लिए प्रयोग करने योग्य) बन जाता है - और यह दृष्टिकोण आपकी साइट को बातचीत के लिए बहुत तेजी से तैयार कर सकता है।
यह ठीक है अगर आप इसे पूरी तरह से नहीं समझते हैं defer अवधारणा अभी, आप एक बार इसके साथ कुछ व्यावहारिक अनुभव प्राप्त करेंगे।
सबसे महत्वपूर्ण बात यह जानना है कि यह आम तौर पर है आपकी वेबसाइट पर JavaScript कोड चलाने का सबसे प्रभावशाली तरीका है।
जानना अच्छा है:
- आप केवल
deferका उपयोग कर सकते हैं बाहरी JavaScript फ़ाइलों पर विशेषता — इनलाइन JavaScript कोड पर नहीं. - बाहरी स्क्रिप्ट आयात करते समय, आपको सापेक्ष स्रोत पथ निर्दिष्ट करने की आवश्यकता होती है, इसलिए यदि आपका JavaScript
main.jsफ़ाइलjscalled नामक फ़ोल्डर में है , अपनी रूट प्रोजेक्ट निर्देशिका के अंदर, आप इसे इस तरह आयात करते हैंsrc="/js/main.js" - आपको कभी-कभी
<script>दिखाई देगाtype. का उपयोग करके ऐसे तत्व जिनका भाषा पहचानकर्ता है विशेषता<script type="text/javascript">HTML5 (नवीनतम संस्करण) में अब आपको ऐसा करने की आवश्यकता नहीं है, क्योंकि यह पहले से ही डिफ़ॉल्ट रूप से सेट है।