कभी-कभी, कुछ विशाल और जटिल सीखने की यात्रा शुरू करने के लिए, आपको कुछ छोटा और सरल सीखने की ज़रूरत होती है। जावास्क्रिप्ट बहुत बड़ा और जटिल है, लेकिन आप छोटी और सरल चीजों को सीखकर इसमें कदम रख सकते हैं। यदि आप एक वेब डिजाइनर हैं, तो मुझे लगता है कि विशेष रूप से एक चीज है जो आप सीख सकते हैं जो कि बेहद सशक्त है।
यह वह चीज है जो मैं आपको सीखना चाहता हूं: जब आप किसी तत्व पर क्लिक करते हैं, तो कुछ तत्व पर एक वर्ग बदलें।
उबलते हुए पूरी तरह से आवश्यक है, कल्पना कीजिए कि हमारे पास एक बटन और एक div है:
Click Me I'm an element Div में कुछ आधार शैलियाँ हो सकती हैं और जब कुछ विशेष वर्ग हो तो इसकी कुछ शैलियाँ हो सकती हैं:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Astute CSS-Tricksters इसे चेकबॉक्स हैक के अवसर के रूप में पहचान सकते हैं, लेकिन आज हम जो काम कर रहे हैं, वह ऐसा नहीं है।
हम बटन पर एक "ईवेंट श्रोता" संलग्न करना चाहते हैं: हमारे मामले में, "सुनने" के लिए कोड का एक सा, घटनाओं पर क्लिक करें, और जब ऐसा होता है, तो अधिक कोड चलाएं।
आप जानते हैं कि CSS में हमें उन्हें स्टाइल करने के लिए तत्वों का चयन कैसे करना है? हमें अपने ईवेंट श्रोता को संलग्न करने के लिए जावास्क्रिप्ट में भी करने की आवश्यकता है। हम इस तरह से एक चर के रूप में, बटन को "संदर्भ" बनाएंगे:
var button = document.querySelector("button");अब जब हमारे पास बटन का संदर्भ है, तो हम उस ईवेंट श्रोता को संलग्न करेंगे:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));और हम एक क्लिक की स्थिति में क्या करना चाहते हैं? हमारे div में एक वर्ग का नाम जोड़ें! लेकिन जैसे हमें बटन के लिए एक संदर्भ की आवश्यकता होती है, उसके साथ काम करने के लिए, हमें div के लिए भी एक संदर्भ की आवश्यकता होगी। आइए उन दोनों को एक ही समय में करते हैं, यहां संपूर्ण बिट कोड है:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));यही पूरी बात है जो मैं आपको दिखाना चाहता था। कुछ सीएसएस के साथ उस "yay" वर्ग में जोड़ा गया, हम div में और बाहर फीका कर सकते हैं:
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन क्लिक समथिंग / चेंज क्लास देखें।
यह एक बात क्यों?
जब आप CSS और किसी भी तत्व की स्थिति को नियंत्रित करते हैं (यह किस वर्ग का नाम है) डिजाइन की संभावनाएं अनंत हैं। चीजों को छिपाना और प्रकट करना स्पष्ट शक्ति है, लेकिन यह वास्तव में कुछ भी हो सकता है।
समतल करना
याद रखें कि आप एक वर्ग नाम बदलने तक सीमित नहीं हैं। आप एक ही तत्व पर कई कक्षाएं बदल सकते हैं या कई तत्वों पर कक्षाएं बदल सकते हैं।
वर्गवादी संपत्ति में अधिक देखें। "टॉगल" एकमात्र विकल्प नहीं है।
एचटीएमएल और सीएसएस की तरह, जावास्क्रिप्ट में चीजों के लिए ब्राउज़र समर्थन के विभिन्न स्तर हैं। क्लासलिस्ट के लिए ब्राउज़र समर्थन में देखें और addEventListener जोड़ें। क्या आप अपनी परियोजना के समर्थन के उन स्तरों के साथ ठीक हैं? यदि नहीं, तो आप पॉलीफ़िल या jQuery में देख सकते हैं।
हमने "क्लिक" ईवेंट का उपयोग किया, लेकिन दूसरों के भार हैं। अन्य माउस ईवेंट, स्क्रॉलिंग, कीबोर्ड और बहुत कुछ। कई सौ।
जिस विधि का हमने चयन करने के लिए उपयोग किया वह थी document.querySelector। यह उपयोगी था क्योंकि यह हमारे साथ काम करने के लिए एक एकल तत्व देता है। साथ ही, आप जो चयनकर्ता देते हैं, वह सीएसएस चयनकर्ताओं की तरह ही होता है। document.querySelector("#overlay .modal > h2");एक वैध चयन होगा। यह चयन करने के लिए एकमात्र तरीका नहीं है, हालांकि, getElementById, querySelectorAll, getElementsByClassName और बहुत कुछ हैं।
यहाँ एक उदाहरण है जहाँ हम नेविगेशन आइटमों का एक गुच्छा चुनते हैं और एक ही बार में उन सभी के लिए एक क्लिक हैंडलर संलग्न करते हैं:
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा स्टफ पर पेन चेंज क्लासेस देखें।
यदि हमारे छोटे उदाहरण में जो जावास्क्रिप्ट हमने लिखा है, वह किसी भी कारण से लोड करने में विफल रहा, तो हमारे पास अभी भी एक बटन होगा जो "क्लिक मी" कहता है। लेकिन इसे क्लिक करने से बहुत कुछ नहीं होगा, यह होगा? शायद हम जावास्क्रिप्ट के साथ उस बटन को सम्मिलित कर सकते हैं, इसलिए बटन तब भी नहीं है जब तक कि हम यह नहीं जानते कि यह काम करेगा? अच्छा विचार है, एह? ;)