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