परिचय
<पी> यह आलेख आपकी HTML फ़ाइलों में जावास्क्रिप्ट जोड़ने का एक व्यापक अवलोकन प्रदान करेगा, जिसमें तीन मुख्य तरीकों का विवरण दिया जाएगा:<head> में स्क्रिप्ट को इनलाइन रखना। , <body> में इनलाइन , और बाहरी .js से लिंक करना फ़ाइलें. केवल 'कैसे' से परे, यह लेख महत्वपूर्ण 'क्यों' पर प्रकाश डालेगा, जिसमें प्रत्येक दृष्टिकोण के महत्वपूर्ण प्रदर्शन निहितार्थों को समझाया जाएगा, जिसमें रेंडर-ब्लॉकिंग, ब्राउज़र कैशिंग और डेफ़र और एसिंक जैसी आधुनिक विशेषताओं का उपयोग शामिल है। <पी> सिद्धांत और व्यवहार को जोड़ने के लिए, ट्यूटोरियल में व्यावहारिक, वास्तविक दुनिया के उदाहरण शामिल हैं जैसे डार्क मोड टॉगल बनाना और वेब फॉर्म को मान्य करना। अंत में, यह आपको ब्राउज़र के डेवलपर कंसोल का उपयोग करके सामान्य शुरुआती त्रुटियों को हल करने में मदद करने के लिए स्वच्छ, रखरखाव योग्य कोड और एक समस्या निवारण मार्गदर्शिका लिखने के लिए आवश्यक सर्वोत्तम प्रथाओं से लैस करेगा, ताकि यह सुनिश्चित हो सके कि आप अपनी वेब विकास परियोजनाओं को आत्मविश्वास के साथ शुरू कर सकें। <पी> क्या आपको जावास्क्रिप्ट प्रोजेक्ट को शीघ्रता से तैनात करने की आवश्यकता है? DigitalOcean ऐप प्लेटफ़ॉर्म देखें और मिनटों में GitHub से सीधे JS प्रोजेक्ट तैनात करें। मुख्य बातें
- जावास्क्रिप्ट जोड़ने के लिए सबसे अच्छा अभ्यास बाहरी
.js का उपयोग करना है बेहतर संगठन, रखरखाव और पुन:प्रयोज्यता के लिए फ़ाइल।
- प्लेसिंग
<script> <head> में टैग यह प्रदर्शन के लिए सबसे खराब है क्योंकि यह रेंडर-ब्लॉकिंग है, जिससे उपयोगकर्ताओं को एक खाली पृष्ठ देखने के लिए मजबूर होना पड़ता है।
defer का उपयोग करना इष्टतम प्रदर्शन के लिए बाहरी स्क्रिप्ट पर विशेषता अनुशंसित आधुनिक दृष्टिकोण है।- बाहरी जावास्क्रिप्ट फ़ाइलें ब्राउज़र कैशिंग के माध्यम से महत्वपूर्ण प्रदर्शन को बढ़ावा देती हैं, जो इनलाइन स्क्रिप्ट नहीं करती हैं।
- एक एकल
.js फ़ाइल को कई पेजों से जोड़ा जा सकता है, जिससे अपडेट और रखरखाव अधिक कुशल हो जाता है।
- सामान्य जावास्क्रिप्ट त्रुटियों के निवारण के लिए डेवलपर कंसोल (F12) सबसे महत्वपूर्ण उपकरण है।
विधि 1:<head> में इनलाइन स्क्रिप्ट कैसे जोड़ें
<पी> आप समर्पित HTML टैग <script> का उपयोग करके HTML दस्तावेज़ में जावास्क्रिप्ट कोड जोड़ सकते हैं जो जावास्क्रिप्ट कोड के चारों ओर लपेटता है। <script> टैग को <head> में रखा जा सकता है आपके HTML के अनुभाग में या <body> में अनुभाग, इस पर निर्भर करता है कि आप जावास्क्रिप्ट को कब लोड करना चाहते हैं। <पी> आम तौर पर, जावास्क्रिप्ट कोड दस्तावेज़ <head> के अंदर जा सकता है इसे आपके HTML दस्तावेज़ की मुख्य सामग्री से बाहर और अंदर रखने के लिए अनुभाग। <पी> आइए Today's Date के ब्राउज़र शीर्षक के साथ निम्नलिखित मूल HTML दस्तावेज़ पर विचार करें : <पी> <!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
</body>
</html>
<पी> एक अलर्ट बनाने वाली स्क्रिप्ट जोड़ने के लिए, हम एक <script> जोड़ सकते हैं टैग और <title> के नीचे हमारा जावास्क्रिप्ट कोड टैग, जैसा कि नीचे दिखाया गया है: <पी> <!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<script>
let d = new Date();
alert("Today's date is " + d);
</script>
</head>
<body>
</body>
</html>
<पी> यहां स्क्रिप्ट रखने से ब्राउज़र को <body> में सामग्री प्रस्तुत करना शुरू करने से पहले जावास्क्रिप्ट को पार्स करने और निष्पादित करने का संकेत मिलता है। पेज का. <पी> यह दृष्टिकोण उन स्क्रिप्ट्स के लिए सबसे उपयुक्त है जिन्हें पृष्ठ पर तत्वों के साथ सीधे बातचीत करने की आवश्यकता नहीं है। जब <head> में एक स्क्रिप्ट चलता है, ब्राउज़र ने अभी तक डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) नहीं बनाया है <body> के लिए . इसका मतलब यह है कि कोई भी HTML तत्व जैसे शीर्षक, पैराग्राफ या डिव अभी तक मौजूद नहीं हैं। परिणामस्वरूप, कोड जो इन तत्वों को खोजने या संशोधित करने का प्रयास करता है (उदाहरण के लिए, document.getElementById() का उपयोग करके) ) विफल हो जाएगा. इसलिए यह विधि बाद में उपयोग के लिए फ़ंक्शंस और वेरिएबल्स सेट करने, या तृतीय-पक्ष एनालिटिक्स स्क्रिप्ट को शामिल करने के लिए आदर्श है, जिन्हें जल्द से जल्द लोड करने की आवश्यकता होती है। <पी> एक बार जब आप पेज लोड कर लेंगे, तो आपको इस जैसा एक अलर्ट प्राप्त होगा: <पी> 
विधि 2:<body> में इनलाइन स्क्रिप्ट कैसे जोड़ें
<पी> <script> टैग को <body> में भी रखा जा सकता है अनुभाग. जब कोई स्क्रिप्ट यहां रखी जाती है, तो HTML पार्सर स्क्रिप्ट को ठीक उसी बिंदु पर निष्पादित करने के लिए अपना काम रोक देगा जहां वह दस्तावेज़ में दिखाई देती है। यह किसी भी जावास्क्रिप्ट कोड के लिए आवश्यक विधि है जिसके लिए HTML तत्व को तुरंत ढूंढना और संशोधित करना आवश्यक है। <पी> एक सामान्य सर्वोत्तम अभ्यास स्क्रिप्ट को समापन </body> से ठीक पहले रखना है टैग. यह प्लेसमेंट सुनिश्चित करता है कि पृष्ठ पर सभी HTML तत्वों को पार्स किया गया है और स्क्रिप्ट चलने से पहले DOM में उपलब्ध हैं। यह अनुमानित पृष्ठ प्रदर्शन में भी सुधार करता है, क्योंकि ब्राउज़र पहले सभी दृश्यमान पाठ और छवियों को प्रस्तुत कर सकता है, जिससे उपयोगकर्ता संभावित समय लेने वाली जावास्क्रिप्ट निष्पादित होने से पहले पृष्ठ सामग्री देख सकता है। यह सामग्री को जावास्क्रिप्ट निष्पादन द्वारा अवरुद्ध किए बिना प्रदर्शित करने की अनुमति देता है। <पी> आइए तारीख को सीधे HTML बॉडी में लिखने के लिए इस विधि का उपयोग करें। <पी> <!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
<script>
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
</script>
</body>
</html>
<पी> वेब ब्राउज़र के माध्यम से लोड किए गए उपरोक्त HTML दस्तावेज़ का आउटपुट निम्नलिखित के समान दिखाई देगा: <पी> 
<पी> जो स्क्रिप्ट छोटी हैं या जो केवल एक पेज पर चलती हैं, वे HTML फ़ाइल के भीतर ठीक काम कर सकती हैं, लेकिन बड़ी स्क्रिप्ट या स्क्रिप्ट के लिए जो कई पेजों पर उपयोग की जाएंगी, यह बहुत प्रभावी समाधान नहीं है क्योंकि इसमें शामिल करना बोझिल हो सकता है या पढ़ना और समझना मुश्किल हो सकता है। अगले भाग में, हम आपके HTML दस्तावेज़ में एक अलग JavaScript फ़ाइल को संभालने के तरीके के बारे में जानेंगे। विधि 3:एक अलग जावास्क्रिप्ट फ़ाइल के साथ कैसे काम करें
<पी> बड़ी स्क्रिप्ट या कोड के लिए जिन्हें कई पृष्ठों में उपयोग करने की आवश्यकता होती है, सबसे प्रभावी और पेशेवर समाधान जावास्क्रिप्ट को .js के साथ एक अलग फ़ाइल में रखना है। विस्तार. फिर आप <script> का उपयोग करके इस बाहरी फ़ाइल को अपने HTML से लिंक कर सकते हैं src के साथ टैग करें (स्रोत) विशेषता. <पी> इस दृष्टिकोण के लाभ महत्वपूर्ण हैं: - चिंताओं का पृथक्करण :यह आपके HTML को संरचना के लिए, CSS को स्टाइल के लिए, और JavaScript को इंटरैक्टिविटी के लिए अलग-अलग फ़ाइलों में रखता है। यह आपके प्रोजेक्ट को साफ़, अधिक व्यवस्थित और डीबग करना आसान बनाता है।
- पुनः प्रयोज्यता और रखरखाव :एक एकल स्क्रिप्ट फ़ाइल, जैसे
main-navigation.js , आपकी वेबसाइट के हर पेज से लिंक किया जा सकता है। यदि आपको नेविगेशन लॉजिक को अपडेट करने की आवश्यकता है, तो आपको केवल उस एक फ़ाइल को संपादित करना होगा।
- ब्राउज़र कैशिंग :जब कोई उपयोगकर्ता पहली बार आपकी साइट पर जाता है, तो उनका ब्राउज़र .js फ़ाइल डाउनलोड करता है। बाद की यात्राओं पर या उसी फ़ाइल का उपयोग करने वाले अन्य पृष्ठों पर नेविगेट करते समय, ब्राउज़र इसे दोबारा डाउनलोड करने के बजाय इसकी संग्रहीत (कैश्ड) प्रतिलिपि का उपयोग करेगा। इससे लोडिंग समय में काफी सुधार होता है।
<पी> यह प्रदर्शित करने के लिए कि जावास्क्रिप्ट दस्तावेज़ को HTML दस्तावेज़ से कैसे जोड़ा जाए, आइए एक छोटा वेब प्रोजेक्ट बनाएं। इसमें script.js शामिल होगा js/ में निर्देशिका, style.css css/ में निर्देशिका, और एक मुख्य index.html प्रोजेक्ट के मूल में. project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html
<पी> आइए अपने जावास्क्रिप्ट कोड को स्थानांतरित करें जो दिनांक को <h1> के रूप में दिखाएगा script.js पर हेडर फ़ाइल: <पी> स्क्रिप्ट.जेएस let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
<पी> इसके बाद, आइए style.css को भी संपादित करें <h1> में पृष्ठभूमि रंग और शैली जोड़कर फ़ाइल करें हेडर: <पी> style.css body {
background-color: #0080ff;
}
h1 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
<पी> अंत में, हम अपने index.html से स्क्रिप्ट और स्टाइलशीट दोनों का संदर्भ ले सकते हैं फ़ाइल. हम <link> का उपयोग करते हैं <head> में टैग करें सीएसएस और <script> के लिए src के साथ टैग करें <body> में विशेषता जावास्क्रिप्ट के लिए। <पी> <!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/script.js"></script>
</body>
</html>
<पी> अब, जावास्क्रिप्ट और सीएसएस के साथ, हमारा प्रोजेक्ट बहुत अधिक व्यवस्थित है। जब हम index.html लोड करते हैं वेब ब्राउज़र में पृष्ठ, हमें वर्तमान दिनांक के साथ एक स्टाइल वाला पृष्ठ देखना चाहिए जो निम्नलिखित जैसा दिखता है: <पी> 
<पी> अब जब हमने जावास्क्रिप्ट को एक फ़ाइल में रख दिया है, तो हम इसे अतिरिक्त वेब पेजों से उसी तरह से कॉल कर सकते हैं और उन सभी को एक ही स्थान पर अपडेट कर सकते हैं। यह विधि आपके वेब प्रोजेक्ट्स में जावास्क्रिप्ट को प्रबंधित करने का सबसे व्यवस्थित और स्केलेबल तरीका प्रदान करती है। बाहरी स्क्रिप्ट कैसे लोड होती हैं, इस पर और अधिक नियंत्रण के लिए, आप async का उपयोग कर सकते हैं और defer <script> पर विशेषताएँ टैग. वास्तविक दुनिया के कुछ उदाहरण क्या हैं?
<पी> आइए हमने अब तक जो सीखा है उसके आधार पर कुछ वास्तविक दुनिया के उदाहरण देखें। 1. सरल डार्क मोड टॉगल
<पी> लगभग हर आधुनिक वेबसाइट या ऐप एक डार्क मोड प्रदान करता है। इसे सीएसएस क्लास को जावास्क्रिप्ट के साथ टॉगल करके प्राप्त किया जा सकता है। <पी> एचटीएमएल: <!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dark Mode</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<button id="theme-toggle">Toggle Dark Mode</button>
<h1 id="title">DigitalOcean</h1>
<p>This is some example text on the page.</p>
<script src="js/script.js"></script>
</body>
</html>
<पी> सीएसएस: /* This class will be added or removed by JavaScript */
.dark-mode {
background-color: #222;
color: #eee;
}
<पी> जावास्क्रिप्ट: const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
});
<पी> जावास्क्रिप्ट सबसे पहले अपनी आईडी का उपयोग करके बटन ढूंढता है। इसके बाद यह एक इवेंट श्रोता को जोड़ता है जो एक क्लिक की प्रतीक्षा करता है। जब बटन क्लिक किया जाता है, तो classList.toggle('dark-mode') आदेश चलता है. यदि <body> तत्व में .dark-mode नहीं है क्लास, जावास्क्रिप्ट इसे जोड़ता है। यदि यह पहले से ही है, तो जावास्क्रिप्ट इसे हटा देता है। ब्राउज़र उस वर्ग से संबद्ध सीएसएस शैलियों को तुरंत लागू करता है। 2. मूल प्रपत्र सत्यापन
<पी> वेबसाइटों को यह सुनिश्चित करना होगा कि उपयोगकर्ता फ़ॉर्म सबमिट करने से पहले सही ढंग से भरें। जावास्क्रिप्ट बिना पृष्ठ पुनः लोड किए तुरंत इसकी जांच कर सकता है। <पी> एचटीएमएल: <!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Validator</title>
</head>
<body>
<form id="contact-form">
<label for="email">Email:</label>
<input type="text" id="email" placeholder="you@example.com">
<button type="submit">Subscribe</button>
<p id="error-message" style="color: red;"></p>
</form>
<script src="js/script.js"></script>
</body>
</html>
<पी> जावास्क्रिप्ट: const contactForm = document.getElementById('contact-form');
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');
contactForm.addEventListener('submit', function(event) {
if (!emailInput.value.includes('@')) {
event.preventDefault();
errorMessage.textContent = 'Please enter a valid email address.';
} else {
errorMessage.textContent = '';
}
});
<पी> स्क्रिप्ट submit को सुनती है प्रपत्र पर घटना. जब आप "Subscribe" पर क्लिक करते हैं बटन, फ़ंक्शन चलता है। यह पहले जाँचता है कि ईमेल इनपुट के अंदर के टेक्स्ट में @ शामिल है या नहीं प्रतीक. - यदि ऐसा नहीं होता है, तो
event.preventDefault() फ़ॉर्म के डिफ़ॉल्ट सबमिशन व्यवहार को रोकता है। इसके बाद यह उपयोगकर्ता को एक उपयोगी त्रुटि संदेश प्रदर्शित करता है।
- यदि ऐसा होता है, तो स्क्रिप्ट कुछ नहीं करती है, और फ़ॉर्म हमेशा की तरह सबमिट हो जाता है।
प्रत्येक विधि के लिए प्रदर्शन संबंधी विचार क्या हैं?
<पी> आइए चर्चा की गई प्रत्येक जावास्क्रिप्ट लोडिंग विधि के लिए मुख्य प्रदर्शन संबंधी विचारों पर चर्चा करें: इनलाइन स्क्रिप्ट <head> में
- <पी> प्राथमिक मुद्दा: रेंडर-ब्लॉकिंग <पी>
<head> में एक स्क्रिप्ट डालना प्रदर्शन पर सबसे अधिक नकारात्मक प्रभाव पड़ता है। ब्राउज़र को पृष्ठ के <body> के किसी भी हिस्से को प्रस्तुत करने के लिए आगे बढ़ने से पहले जावास्क्रिप्ट को डाउनलोड, पार्स और निष्पादित करना होगा। . यदि आपकी स्क्रिप्ट बड़ी है या धीमी गति से चलती है, तो उपयोगकर्ता स्क्रिप्ट समाप्त होने तक एक खाली सफेद पृष्ठ को देखता रहेगा। इससे फर्स्ट कंटेंटफुल पेंट (FCP) का समय बढ़ जाता है , एक महत्वपूर्ण उपयोगकर्ता अनुभव मीट्रिक।
- <पी> कैशिंग: कोई नहीं <पी> इनलाइन स्क्रिप्ट HTML दस्तावेज़ का ही हिस्सा हैं। उन्हें ब्राउज़र द्वारा अलग से कैश नहीं किया जा सकता. जब भी कोई उपयोगकर्ता पृष्ठ पर जाता है, तो स्क्रिप्ट को पुनः डाउनलोड किया जाता है और शेष HTML के साथ पुनः पार्स किया जाता है।
<पी> यह तरीका आम तौर पर प्रदर्शन के लिए सबसे खराब है और इससे बचना चाहिए जब तक कि स्क्रिप्ट बेहद छोटी न हो और किसी भी चीज़ से पहले चलनी चाहिए। इनलाइन स्क्रिप्ट <body> में
- <पी> प्राथमिक मुद्दा: आंशिक रेंडर-अवरुद्ध <पी> यह विधि
<head> में स्क्रिप्ट रखने की तुलना में एक बड़ा सुधार है . ब्राउज़र HTML को तब तक पार्स और रेंडर करता है जब तक उसे <script> का सामना नहीं करना पड़ता टैग. उस समय, यह स्क्रिप्ट को निष्पादित करने के लिए रेंडर करना बंद कर देता है। स्क्रिप्ट को <body> के बिल्कुल अंत में रखकर (</body> से ठीक पहले टैग), आप संपूर्ण दृश्य पृष्ठ को पहले प्रस्तुत करने की अनुमति देते हैं।
- <पी> कैशिंग: कोई नहीं <पी> बिल्कुल
<head> में स्क्रिप्ट की तरह , <body> में इनलाइन स्क्रिप्ट HTML का हिस्सा हैं और इन्हें स्वतंत्र रूप से कैश नहीं किया जा सकता।
<पी> गति की धारणा को बेहतर बनाने के लिए मुख्य भाग के अंत में एक स्क्रिप्ट रखना एक अच्छी रणनीति है क्योंकि सामग्री तुरंत दिखाई देती है। हालाँकि, यह अभी भी पेज को पूरी तरह से इंटरैक्टिव बनने में देरी कर सकता है। बाहरी जावास्क्रिप्ट फ़ाइल
<पी> यह विधि मुख्य रूप से दो कारकों के कारण सबसे अधिक लचीलापन और सर्वोत्तम प्रदर्शन प्रदान करती है:ब्राउज़र कैशिंग और विशेष लोडिंग विशेषताएँ। - <पी> प्राथमिक लाभ: कैशिंग और एसिंक्रोनस लोडिंग
- <पी> कैशिंग :यह सबसे बड़ी प्रदर्शन जीत है। एक बाहरी
.js फ़ाइल पहली विज़िट पर एक बार डाउनलोड की जाती है। समान स्क्रिप्ट का उपयोग करने वाले सभी बाद के पृष्ठों के लिए, ब्राउज़र फ़ाइल को अपने स्थानीय कैश से लोड करेगा, जिससे नेटवर्क विलंब समाप्त हो जाएगा और साइट काफी तेज़ हो जाएगी।
- <पी>
defer और async गुण: बाहरी स्क्रिप्ट दो शक्तिशाली विशेषताओं के उपयोग को अनलॉक करती हैं। - <पी>
<script defer src="..."></script> :यह ब्राउज़र को पृष्ठभूमि में स्क्रिप्ट डाउनलोड करने के लिए कहता है जबकि वह HTML को पार्स करना जारी रखता है। संपूर्ण दस्तावेज़ को पार्स करने के बाद ही स्क्रिप्ट निष्पादित की जाती है। यह अनुशंसित आधुनिक दृष्टिकोण है क्योंकि यह गैर-अवरुद्ध है और गारंटी देता है कि स्क्रिप्ट HTML में दिखाई देने वाले क्रम में चलती है।
- <पी>
<script async src="..."></script> :यह रेंडरिंग को अवरुद्ध किए बिना पृष्ठभूमि में स्क्रिप्ट को भी डाउनलोड करता है। हालाँकि, यह डाउनलोडिंग समाप्त होते ही स्क्रिप्ट को निष्पादित कर देगा, जो किसी भी समय हो सकता है और रेंडरिंग में बाधा उत्पन्न कर सकता है। यह स्वतंत्र, तृतीय-पक्ष स्क्रिप्ट (जैसे विज्ञापन या विश्लेषण) के लिए सर्वोत्तम है जहां निष्पादन आदेश कोई मायने नहीं रखता।
<पी> defer से जुड़ी एक बाहरी फ़ाइल का उपयोग करना सर्वोत्तम प्रदर्शन के लिए विशेषता सर्वोत्तम अभ्यास है। यह शक्तिशाली ब्राउज़र कैशिंग के साथ नॉन-ब्लॉकिंग लोडिंग के लाभों को जोड़ता है। कुछ सर्वोत्तम प्रथाएं क्या हैं?
<पी> आपकी HTML फ़ाइलों में जावास्क्रिप्ट के साथ काम करने के लिए यहां कुछ आवश्यक सर्वोत्तम अभ्यास और समस्या निवारण युक्तियाँ दी गई हैं। - जावास्क्रिप्ट को बाहरी फ़ाइलों में रखें :हमेशा
.js से लिंक करना पसंद करें फ़ाइल (<script src="..."></script> ) जावास्क्रिप्ट को सीधे अपने HTML में लिखने के बजाय। यह आपके कोड को व्यवस्थित रखता है, बनाए रखना आसान बनाता है, और ब्राउज़र को तेज़ लोडिंग के लिए फ़ाइल को कैश करने की अनुमति देता है।
- स्क्रिप्ट को
<body> के अंत में लोड करें defer के साथ :सर्वोत्तम उपयोगकर्ता अनुभव के लिए, अपना <script> रखें समापन </body> से ठीक पहले टैग टैग करें और defer जोड़ें विशेषता. यह सुनिश्चित करता है कि आपके पृष्ठ की सामग्री जावास्क्रिप्ट द्वारा अवरुद्ध किए बिना शीघ्रता से लोड और प्रदर्शित हो।
- पढ़ने योग्य कोड लिखें :अपने वेरिएबल्स और फ़ंक्शंस के लिए स्पष्ट, वर्णनात्मक नामों का उपयोग करें (उदाहरण के लिए,
calculateTotalPrice calc के बजाय ). टिप्पणियाँ // का प्रयोग करें यह समझाने के लिए कि आपने कोड का एक टुकड़ा क्यों लिखा, न कि यह क्या करता है।
- खुद को दोबारा न दोहराएं (DRY) :यदि आप स्वयं को कई स्थानों पर कोड की एक ही पंक्ति लिखते हुए पाते हैं, तो उस कोड को एक फ़ंक्शन में लपेटें। फिर जब भी आपको आवश्यकता हो आप उस फ़ंक्शन को कॉल कर सकते हैं, जिससे आपका कोड छोटा हो जाएगा और अपडेट करना आसान हो जाएगा।
कुछ सामान्य समस्याएं क्या हैं और उनका निवारण कैसे करें?
<पी> जब आपकी स्क्रिप्ट काम न करे तो घबराएं नहीं! ब्राउज़र के डेवलपर टूल आपके सबसे अच्छे मित्र हैं। F12 दबाएँ (या पृष्ठ पर राइट-क्लिक करें और "निरीक्षण करें" चुनें ) और “कंसोल” पर क्लिक करें टैब. अधिकांश त्रुटियाँ यहाँ लाल रंग में दिखाई देंगी। - <पी> त्रुटि:"शून्य के गुणों को नहीं पढ़ा जा सकता" या "परिभाषित नहीं है"
- अर्थ :आपके जावास्क्रिप्ट ने एक HTML तत्व तक पहुंचने का प्रयास किया जो अभी तक लोड नहीं हुआ था।
- समाधान :इसका मतलब लगभग हमेशा आपका
<script> होता है टैग <head> में है या <body> में बहुत ऊपर है . अपनी स्क्रिप्ट को <body> के नीचे ले जाएँ और defer विशेषता जोड़ें।
- <पी> त्रुटि:"अनकॉट सिंटैक्सत्रुटि"
- अर्थ :आपके कोड में कोई त्रुटि है।
- समाधान :कंसोल आमतौर पर आपको एक लाइन नंबर देता है। लुप्त कोष्ठक
() के लिए उस पंक्ति को ध्यान से देखें , घुंघराले ब्रेसिज़ {} , उद्धरण "" , या अन्य टाइपो.
- <पी> समस्या:स्क्रिप्ट नहीं चलती, कंसोल में कोई त्रुटि नहीं।
- अर्थ :आपकी HTML फ़ाइल शायद आपका
.js नहीं ढूंढ पा रही है फ़ाइल.
- समाधान :“नेटवर्क” की जाँच करें डेवलपर टूल्स में टैब। यदि आप अपनी स्क्रिप्ट फ़ाइल को 404 त्रुटि के साथ सूचीबद्ध देखते हैं, तो आपका फ़ाइल पथ
src में है विशेषता ग़लत है. अपनी वर्तनी और फ़ोल्डर संरचना की दोबारा जांच करें (उदाहरण के लिए, <script src="js/script.js"></script>)। ).
- <पी> समस्या:कोड चलता है लेकिन वह नहीं करता जो मैं अपेक्षा करता हूं।
अक्सर पूछे जाने वाले प्रश्न (एफएक्यू)
1. मेरी HTML फ़ाइल में जावास्क्रिप्ट जोड़ने का सबसे अच्छा तरीका क्या है?
<पी> सबसे अच्छा तरीका बाहरी .js से लिंक करना है defer के साथ फ़ाइल करें विशेषता, स्क्रिप्ट टैग को समापन </body> से ठीक पहले रखना टैग (उदा., <script src="path/to/script.js" defer></script> ). 2. क्या मुझे जावास्क्रिप्ट को सिर या शरीर में रखना चाहिए?
<पी> आपको लगभग हमेशा अपनी JavaScript <script> डालनी चाहिए <body> के बिल्कुल अंत में टैग अनुभाग, समापन </body> से ठीक पहले टैग. <पी> <head> में स्क्रिप्ट रखना पेज को रेंडर होने से रोकता है, जिसका अर्थ है कि आपके उपयोगकर्ताओं को स्क्रिप्ट पूरी तरह से डाउनलोड और निष्पादित होने तक एक खाली सफेद पेज दिखाई देगा। जब आप स्क्रिप्ट को <body> के अंत में रखते हैं , ब्राउज़र पहले संपूर्ण HTML और CSS को रेंडर कर सकता है, जिससे उपयोगकर्ता आपकी सामग्री को बहुत तेज़ी से देख पाते हैं। 3. क्या मैं एक HTML फ़ाइल में एकाधिक स्क्रिप्ट टैग जोड़ सकता हूँ?
<पी> हां, आप अधिक से अधिक <script> शामिल कर सकते हैं एक ही HTML फ़ाइल में आपकी आवश्यकतानुसार टैग। ब्राउज़र उन्हें दस्तावेज़ में दिखाई देने वाले क्रम में डाउनलोड और निष्पादित करेगा। <पी> इसका उपयोग आमतौर पर आपकी कस्टम स्क्रिप्ट से पहले तृतीय-पक्ष लाइब्रेरी को लोड करने के लिए किया जाता है जो उन पर निर्भर होती हैं। <body>
<script src="library.js"></script>
<script src="my-app.js"></script>
</body>
4. async के बीच मुख्य अंतर क्या है और defer ?
<पी> दोनों विशेषताएँ पेज को रेंडर होने से रोके बिना स्क्रिप्ट लोड करती हैं। मुख्य अंतर यह है कि defer गारंटी देता है कि स्क्रिप्ट उसी क्रम में निष्पादित होंगी जिस क्रम में वे दस्तावेज़ के पूरी तरह से पार्स होने के बाद दिखाई देंगी, जबकि async स्क्रिप्ट को डाउनलोड होते ही निष्पादित करता है, जो किसी भी क्रम में हो सकता है। 5. मैं उस जावास्क्रिप्ट को कैसे डीबग करूं जो काम नहीं कर रही है?
<पी> ब्राउज़र खोलें डेवलपर टूल्स (F12), कंसोल की जाँच करें त्रुटि संदेशों के लिए टैब, नेटवर्क का उपयोग करें फ़ाइल लोडिंग को सत्यापित करने के लिए टैब, और console.log() जोड़ें परिवर्तनीय मानों का पता लगाने के लिए कथन। निष्कर्ष
<पी> इस ट्यूटोरियल में, आपने HTML में JavaScript जोड़ने की तीन मुख्य विधियाँ सीखीं:<head> में इनलाइन , <body> में इनलाइन , और एक बाहरी .js से लिंक करना फ़ाइल. आपने रेंडर-ब्लॉकिंग, ब्राउज़र कैशिंग और defer सहित प्रदर्शन निहितार्थों का भी पता लगाया और async विशेषताएँ, वास्तविक दुनिया के उदाहरणों और डेवलपर कंसोल का उपयोग करके एक समस्या निवारण मार्गदर्शिका के साथ। <पी> अब आप अपने उपयोग के मामले के लिए सही जावास्क्रिप्ट लोडिंग रणनीति चुन सकते हैं, बाहरी फ़ाइलों का उपयोग करके साफ और रखरखाव योग्य कोड लिख सकते हैं, और ब्राउज़र डेवलपर टूल का उपयोग करके सामान्य त्रुटियों को डीबग कर सकते हैं। बाहरी .js का उपयोग करना defer के साथ फ़ाइल करें अधिकांश उत्पादन वेब परियोजनाओं के लिए विशेषता अनुशंसित दृष्टिकोण है। <पी> अपने जावास्क्रिप्ट कौशल का निर्माण जारी रखने के लिए, निम्नलिखित ट्यूटोरियल देखें: - जावास्क्रिप्ट डेवलपर कंसोल का उपयोग कैसे करें
- जावास्क्रिप्ट में टिप्पणियाँ कैसे लिखें
- जावास्क्रिप्ट में सिंटैक्स और कोड संरचना को समझना
- जावास्क्रिप्ट में वेरिएबल्स, स्कोप और होइस्टिंग को समझना
<पी> 
यह कार्य क्रिएटिव कॉमन्स एट्रिब्यूशन-नॉन-कमर्शियल- के तहत लाइसेंस प्राप्त है शेयरअलाइक 4.0 अंतर्राष्ट्रीय लाइसेंस।
