जावास्क्रिप्ट ऑनक्लिक:एक चरण-दर-चरण मार्गदर्शिका

जब कोई उपयोगकर्ता किसी बटन या किसी अन्य वेब तत्व पर क्लिक करता है तो JavaScript ऑनक्लिक ईवेंट एक फ़ंक्शन निष्पादित करता है। इस पद्धति का उपयोग HTML दस्तावेज़ और जावास्क्रिप्ट दस्तावेज़ में इनलाइन दोनों में किया जाता है।

जब आप जावास्क्रिप्ट में कोडिंग कर रहे होते हैं, तो जब कोई उपयोगकर्ता वेब पेज के साथ इंटरैक्ट करता है तो कोड चलाना आम बात है। उदाहरण के लिए, आप चाहते हैं कि जब कोई उपयोगकर्ता बटन दबाता है तो कुछ हो। लेकिन आप जावास्क्रिप्ट में इस कार्यक्षमता को कैसे लागू करते हैं?

यहीं पर "ऑनक्लिक ()" घटना उपयोगी हो सकती है। ऑनक्लिक ईवेंट सबसे अधिक उपयोग किए जाने वाले ईवेंट प्रकारों में से एक है। जब कोई उपयोगकर्ता आपके वेब पेज पर किसी बटन या किसी अन्य तत्व पर क्लिक करता है तो ऑनक्लिक आपको कोड चलाने की अनुमति देता है।

इस संक्षिप्त मार्गदर्शिका में, हम यह बताने जा रहे हैं कि ऑनक्लिक फ़ंक्शन कैसे काम करता है। हम इस बात पर चर्चा करेंगे कि आप किसी वेबसाइट को इंटरैक्टिव बनाने के लिए अपने कोड में ऑनक्लिक का उपयोग कैसे कर सकते हैं।

ईवेंट पुनश्चर्या

ऑनक्लिक एक प्रकार की जावास्क्रिप्ट घटना है। ईवेंट ब्राउज़र में होने वाली क्रियाएं हैं जो या तो उपयोगकर्ता या ब्राउज़र द्वारा ही शुरू की जा सकती हैं। कोई उपयोगकर्ता एक बटन क्लिक करता है, एक फॉर्म जमा करता है, या अपने कीबोर्ड पर एक कुंजी दबाता है, ये सभी घटनाओं के उदाहरण हैं। इस ट्यूटोरियल में, हम पहले वाले पर ध्यान देंगे:एक उपयोगकर्ता एक तत्व पर क्लिक कर रहा है।

घटनाओं का उपयोग करके, डेवलपर्स एक वेब पेज को इंटरैक्टिव बना सकते हैं। जब उपयोगकर्ता किसी बटन पर क्लिक करता है तो आप फ़ॉर्म को दृश्यमान बना सकते हैं, या किसी उपयोगकर्ता द्वारा फ़ॉर्म सबमिट करते समय उसे एक संदेश प्रदर्शित कर सकते हैं।

ईवेंट के दो मुख्य घटक हैं:ईवेंट हैंडलर और ईवेंट श्रोता।

जब आप किसी बटन पर क्लिक करते हैं, कोई कुंजी दबाते हैं, या किसी तत्व पर होवर करते हैं, तो एक ईवेंट चलाया जाता है। ईवेंट हैंडलर वह कोड है जो आपके ईवेंट के प्रारंभ होने पर चलता है। उदाहरण के लिए, जब आप किसी बटन पर क्लिक करते हैं, तो ईवेंट हैंडलर चलेगा।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

ईवेंट श्रोता एक तत्व का हिस्सा है - एक बटन की तरह - जो "सुनता है" और तब तक प्रतीक्षा करता है जब तक आप इसके साथ बातचीत नहीं करते। फिर, श्रोता ईवेंट हैंडलर को निष्पादित करता है।

जावास्क्रिप्ट ऑनक्लिक

जब आप किसी बटन या किसी अन्य वेब तत्व पर क्लिक करते हैं तो जावास्क्रिप्ट ऑनक्लिक ईवेंट एक फ़ंक्शन निष्पादित करता है। उदाहरण के लिए, जब आप किसी बटन पर घड़ी लगाते हैं तो एक ऑनक्लिक घटना एक डायलॉग बॉक्स को ट्रिगर कर सकती है।

HTML में ऑनक्लिक विधि का सिंटैक्स यहां दिया गया है:

&lt;button onclick="codetorun"&gt;Click me&lt;/button&gt;

जब यह HTML बटन क्लिक किया जाता है, तो "codetorun" JavaScript फ़ंक्शन निष्पादित हो जाएगा। हम एक div की तरह अन्य तत्वों के साथ ऑनक्लिक का उपयोग कर सकते हैं। ऑनक्लिक बटनों के लिए विशिष्ट नहीं है।

आप सादे जावास्क्रिप्ट में ऑनक्लिक का भी उपयोग कर सकते हैं। जावास्क्रिप्ट ऑनक्लिक विधि का एक उदाहरण यहां दिया गया है:

var item = document.getElementById("button");
item.onclick = function() {
	codetoexecute...
}

हम अपने वेब पेज से किसी तत्व को पुनः प्राप्त करने के लिए जावास्क्रिप्ट getElementById विधि का उपयोग करते हैं। जब हम आईडी "बटन" वाले तत्व पर क्लिक करते हैं तो हमारा ऑनक्लिक फ़ंक्शन निष्पादित हो जाएगा।

बटन ऑनक्लिक JavaScript उदाहरण

मान लें कि आप किसी वेब पेज पर p एलिमेंट या पैराग्राफ पर क्लिक करने के बाद कुछ टेक्स्ट बदलना चाहते हैं। हम वेबसाइट पर इस सुविधा को लागू करने के लिए ऑनक्लिक विशेषता का उपयोग कर सकते हैं। आइए एक बटन और कुछ टेक्स्ट वाले HTML पेज से शुरुआत करें। हम एक JavaScript फ़ाइल भी बनाएंगे जिसमें हमारा ईवेंट कोड होगा।

index.html

<!DOCTYPE html>
<html>

<head>
	<title>onclick example</title>
</head>
<!-- Main body of code -->
<body>
	<button>Click here.</button>

	<p>This text will change when you click the button.</p>
</body>

<!-- Reference our JavaScript event code -->
<script src=”js/onclick.js”></script>

</html>

यह एक बुनियादी वेब पेज का एक उदाहरण है, लेकिन यह अभी तक इंटरैक्टिव नहीं है। जब यह वेब पेज चलता है, तो हमें एक बटन और कुछ टेक्स्ट दिखाई देगा, लेकिन जब हम अपने बटन पर क्लिक करेंगे तो कुछ नहीं होगा। ऐसा इसलिए है क्योंकि हमने अभी तक ऑनक्लिक स्क्रिप्ट फ़ंक्शन को लागू नहीं किया है।

अब जब हमारा वेब पेज तैयार हो गया है, तो हम अपना ऑनक्लिक इवेंट बनाना शुरू कर सकते हैं। हमें सबसे पहले अपने बटन पर ऑनक्लिक () ईवेंट श्रोता को जोड़ना होगा। जब उपयोगकर्ता बटन पर क्लिक करेगा तो यह घटना सुनेगी।

index.html

...
<body>
	<button onclick=”changeParagraph()”>Click here.</button>

	<p>This text will change when you click the button.</p>
</body>
…

आइए हमारी "onclick.js" फ़ाइल बनाएं, जो हमारे चेंजपैराग्राफ () ईवेंट के लिए कोड रखेगी। यह घटना हमारे पैराग्राफ ("पी" तत्व) के टेक्स्ट को किसी और चीज़ से बदल देगी।

onclick.js

const changeParagraph = () => {
	const paragraph = document.querySelector(“p”);
	paragraph.textContent = “This text has changed because you clicked the button.”
}

हमने एक जावास्क्रिप्ट फ़ंक्शन को परिभाषित किया है जिसे चेंजपैराग्राफ कहा जाता है। हम अपने पृष्ठ पर एक अनुच्छेद का चयन करने के लिए जावास्क्रिप्ट क्वेरी चयनकर्ता विधि का उपयोग करते हैं। जब हम पहली बार पेज लोड करते हैं, तो हम अपना बटन और टेक्स्ट देखेंगे जो कहता है, "जब आप बटन पर क्लिक करेंगे तो यह टेक्स्ट बदल जाएगा।"

बटन पर क्लिक करने के बाद, हमारा वेब पेज बदल जाता है और हमारा नया टेक्स्ट दिखाता है:

जावास्क्रिप्ट ऑनक्लिक:एक चरण-दर-चरण मार्गदर्शिका

सारांश

कुल मिलाकर, onclick() एक प्रकार का JavaScript ईवेंट है जो आपको वेब पेज पर किसी तत्व पर क्लिक करने पर कुछ कोड चलाने की अनुमति देता है।

इतना ही! ऊपर दिए गए कोड का उपयोग करके, हमने सफलतापूर्वक एक वेबपेज बनाया है जो एक बटन दबाने पर कोड चलाएगा। जबकि ऊपर दिया गया हमारा कोड केवल टेक्स्ट बदलता है, आप इसे जितना चाहें उतना जटिल या सरल बना सकते हैं।

यदि आप चाहते हैं कि उपयोगकर्ता बटन पर क्लिक करने पर सतर्क हो जाए, तो आप जावास्क्रिप्ट में अलर्ट () फ़ंक्शन का उपयोग कर सकते हैं। अगर आप अपने कोड में “if” स्टेटमेंट जोड़ना चाहते हैं, तो आप ऐसा भी कर सकते हैं।

अधिक जावास्क्रिप्ट सीखने के संसाधनों के लिए, हमारी जावास्क्रिप्ट कैसे सीखें मार्गदर्शिका देखें।