JavaScript alert() मेथड, जिसे Window.alert() के नाम से भी जाना जाता है, उपयोगकर्ता को एक अलर्ट डायलॉग बॉक्स प्रदर्शित करता है। यह एक वैकल्पिक मैसेज आर्गुमेंट स्वीकार करता है ताकि उपयोगकर्ता को OK बटन के साथ एक संदेश प्रदर्शित किया जा सके। alert() के सामान्य उपयोगों में उपयोगकर्ता को यह बताना शामिल है कि कोई एक्शन सफल रहा, या त्रुटियों को प्रदर्शित करना।
alert() मेथड एक डेवलपमेंट टूल के रूप में भी काम आता है। उदाहरण के लिए, फॉर्म सबमिशन को संभालने वाले फंक्शन के अंदर alert() रखना। आमतौर पर, event.preventDefault() कॉल होने के बाद alert() रखा जाता है।
समीक्षा के लिए, event.preventDefault() केवल सबमिट बटन क्लिक होने के बाद रीडायरेक्ट करने के डिफ़ॉल्ट व्यवहार को रद्द करता है। event.preventDefault() की आगे समीक्षा करने के लिए इस त्वरित ट्यूटोरियल को पढ़ें।
JavaScript alert() क्या है?
JavaScript alert() एक पॉप-अप डायलॉग बॉक्स प्रदर्शित करता है। एक वैकल्पिक संदेश जिसे स्ट्रिंग के रूप में पास किया जा सकता है, एक कस्टम संदेश प्रदर्शित करने के लिए। alert() के बारे में एक महत्वपूर्ण नोट यह है कि इसका उपयोग केवल उस संदेश को प्रदर्शित करने के लिए किया जाना चाहिए जिसके लिए OK पर क्लिक करके पुष्टि की आवश्यकता हो। किसी कार्रवाई की आवश्यकता वाले संदेश को alert() का उपयोग नहीं करना चाहिए।
alert() डायलॉग बॉक्स के कई उपयोग हैं। इसका उपयोग fetch() अनुरोध के संदर्भ में सफलता या त्रुटियों को प्रदर्शित करने के लिए किया जा सकता है। एक अन्य उपयोग फंक्शन में alert() प्रदर्शित करना है ताकि यह सुनिश्चित हो सके कि प्रोग्राम उचित रूप से प्रवाहित हो रहा है।
alert() JavaScript सिंटैक्स
alert() का सिंटैक्स संक्षिप्त और सीधा है। बस एक स्ट्रिंग के रूप में संदेश के साथ alert() को आमंत्रित करें:
alert('message')
यह एक डायलॉग बॉक्स प्रदर्शित करेगा जो 'message' कहेगा। इसे प्रदर्शित करने के लिए अपना कस्टम संदेश स्ट्रिंग के रूप में रखें।
संदेश वैकल्पिक है। यदि कोई संदेश शामिल नहीं है, तो OK बटन के साथ एक खाली डायलॉग बॉक्स दिखाई देता है।
alert()
JavaScript alert() उदाहरण
इस लेख के परिचय में, हमने alert() का उपयोग करने के लिए एक उपयोगकर्ता और एक डेवलपर परिदृश्य पर विचार किया। आइए अब देखते हैं कि प्रत्येक को कैसे लागू किया जाएगा। आइए डेवलपर पक्ष से शुरू करते हैं। हम फॉर्म सबमिशन को संभालने वाले फंक्शन के अंदर alert() रखेंगे।
हम यूजरनेम और पासवर्ड के साथ लॉग इन करने के लिए एक बुनियादी फॉर्म से शुरू करेंगे।
<form> <label>Name</label> <input type="text" name="name"> <label>Password</label> <input type="text" name="name"> <button type="submit"> Log In </button> </form>
जो रेंडर करता है:
अब आइए हमारे JavaScript फॉर्म के onSubmit प्रॉपर्टी को पास करने के लिए एक फंक्शन बनाते हैं।
const handleOnSubmit = (event) => { event.preventDefault(); alert("Logged In") }
फिर हम इस फंक्शन को हमारे फॉर्म में onSubmit प्रॉपर्टी में पास करते हैं।
<form onSubmit="handleOnSubmit(event)"> <label>Name</label> <input type="text" name="name"> <label>Password</label> <input type="text" name="name"> <button type="submit"> Log In </button> </form>
अब हम लॉगिन बटन पर क्लिक करके देख सकते हैं कि क्या हमने फंक्शन को फॉर्म से ठीक से जोड़ा है। बटन पर क्लिक करने के बाद हमें एक डायलॉग बॉक्स मिलता है जो इस तरह दिखता है:
बहुत बढ़िया! हम जानते हैं कि हमारा परिभाषित फंक्शन हमारे फॉर्म के साथ संचार कर रहा है। JavaScript alert() हमें हमारे प्रोग्राम के प्रवाह की जांच करने का एक सरल तरीका देता है।
हमारे अगले उदाहरण के लिए, आइए देखते हैं कि हम fetch() अनुरोध में सफलता और त्रुटि संदेशों को कैसे उजागर कर सकते हैं।
fetch('/current-cart/', { credentials: 'include', method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(resp => resp.json()) .then(cart => { if(cart.error){ alert(cart.error) }
इस उदाहरण में, हमारे पास एक ई-कॉमर्स ऐप में शॉपिंग कार्ट फेच अनुरोध है। हम यह देखने के लिए अनुरोध भेज रहे हैं कि क्या वर्तमान शॉपिंग कार्ट संग्रहीत की गई है। अनुरोध के अंत तक जाने पर, हमारे पास alert() है जो त्रुटियों को प्रदर्शित करेगा, यदि कोई हो।
चूंकि कोई सक्रिय शॉपिंग कार्ट नहीं है, हमें यह त्रुटि मिलती है:
यह उदाहरण उत्पादन की तुलना में डेवलपमेंट में अधिक उपयोगी है, लेकिन समान सिद्धांतों को फॉर्म पर वैलिडेशन के रूप में लागू किया जा सकता है।
return fetch('/login', { credentials: 'include', method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(creds) }) .then(resp => resp.json()) .then(response => { if (response.error) { alert(response.error) }
यहां, alert() लॉग-इन फॉर्म से जुड़े त्रुटि संदेशों को प्रदर्शित करेगा। यदि कोई उपयोगकर्ता फॉर्म भरे बिना लॉग-इन करने का प्रयास करता है, तो हमें ये त्रुटियां मिलती हैं:
यह alert() का उपयोग करके उपयोगकर्ता अनुभव को निर्देशित करने का एक उदाहरण है जो फॉर्म में वैलिडेशन त्रुटियों को उपयोगकर्ता को प्रदर्शित करता है।
हमने देखा है कि alert() का उपयोग डेवलपमेंट पक्ष और क्लाइंट पक्ष दोनों पर किया जा सकता है - जो उपयोगकर्ता देखता है। आइए एक पल के लिए पुनर्कथन करते हैं कि हमने क्या सीखा।
निष्कर्ष
JavaScript alert() एक सरल मेथड है जिसके कई व्यापक उपयोग हैं। यह स्ट्रिंग डेटा प्रकार के रूप में संदेश का एक वैकल्पिक आर्गुमेंट लेता है। यह संदेश और OK बटन के साथ एक डायलॉग बॉक्स प्रदर्शित करता है। याद रखें कि alert() केवल संदेश प्रदर्शित करने के लिए है और कोई कार्रवाई करने में सक्षम नहीं है।
हमारे उदाहरणों में, हमने देखा कि alert() का उपयोग डेवलपमेंट में फंक्शन और फॉर्म के संचार को ट्रैक करने के लिए कैसे किया जा सकता है। फिर, हमने देखा कि alert() फेच अनुरोध के डेवलपमेंट पक्ष में त्रुटि संदेशों को कैसे उजागर कर सकता है। हमारे अंतिम उदाहरण में, हमने देखा कि alert() का उपयोग फॉर्म में वैलिडेशन त्रुटियों को उपयोगकर्ता तक पहुंचाने के लिए कैसे किया जा सकता है।
अब तक, आपको alert() के सामान्य उपयोगों की समझ होनी चाहिए। इसे अपने अगले JavaScript प्रोजेक्ट में विभिन्न कार्यक्षमताओं का परीक्षण करने के तरीके के रूप में आज़माएं।
