ठीक है हम वापस आ जाएगा।
जावास्क्रिप्ट को शुरूआत में वापस मैंने उल्लेख जावास्क्रिप्ट सीखने के लिए महत्वपूर्ण कारणों में से एक यह है कि हम इसका इस्तेमाल कर सकते हमारे पृष्ठों सहभागी बनाने के लिए।
ऐसा नहीं है जब एक उपयोगकर्ता में एक बटन या प्रकार कुछ पर क्लिक करता है या तीर कुंजी या जो कुछ भी वे कर मारता है कि हम कैसे कोड चल सकता है।
हम कुछ इसी कोड उस समय में एक भी बिंदु पर मार डाला है सिर्फ सही पेज की शुरुआत में क्रियान्वित नहीं हो सकता है।
तो यह है कि हम डोम घटनाओं के बारे में बात करने के लिए की जरूरत है।
तो इस वीडियो को Dom घटनाओं के लिए एक परिचय होगा।
धारणा उन्हें भी वाक्य रचना की स्थापना और उसके बाद के लिए प्रक्रिया।
तो जैसा कि मैंने उल्लेख घटनाओं हर जगह हैं।
जब आप वेब पेज के साथ अलग-अलग चीजें हैं जो हो आप एक बटन आपको एक लिंक पर जाएँ कर सकते हैं और कुछ पॉप हो सकता है जैसी चीजों पर क्लिक कर सकते हैं बातचीत के बारे में सोचो।
तुम खींचें और कुछ पन्नों पर तत्वों छोड़ सकते हैं।
आप कोड है कि उपयोगकर्ता डबल क्लिक से चलाता है या वास्तव में इस वेब पेज के कुछ उदाहरण दिया है करने के लिए चाहते हो सकता है।
इस स्लाइड डॉट कॉम एक वेब साइट है और मैं बाएँ और दाएँ तीर कुंजी मार रहा हूँ स्लाइड बदलने के लिए।
तो कुछ कोड चलाया जा रहा है, जब मैं बाएँ तीर कुंजी या सही तीर कुंजी या जब मैं यहाँ पर क्लिक करें।
यही कारण है कि यह भी एक घटना है और यह कुछ कर रही है यह कुछ कोड है कि वर्तमान स्लाइड बदल रहा है चल रहा है।
तो बात है की घटनाओं सभी जगह पर हैं और वे वास्तव में रोमांचक रहे हैं।
क्योंकि अब हम अपने वेब पृष्ठों इंटरैक्टिव हम हेरफेर सामान है कि हम पाठ बदलते बदलते रंग के बारे में सीख रहा हूँ और फिर हम वास्तव में है कि जब विशेष रूप से कुछ होता है क्या कर सकते हैं ले जा सकते हैं कर सकते हैं यह सिखाने के लिए मेरी पसंदीदा विषयों में से एक है।
तो यह वास्तव में छात्रावास जोड़ तोड़ की संभावित बातें बताता है।
यह है कि हम कैसे खेल बनाने के लिए कि यह कैसे हम फार्म टिक टीएसी को पैर की अंगुली हम एक बहुत अच्छा रंग बीनने खेल बनाने के लिए जा रहे हैं validators कर दूँगा है जा रहे हैं और इन सभी घटनाओं की वजह से उपजी है।
तो तरीका है कि इन घटनाओं का काम है कि हम वास्तव में विशिष्ट तत्वों के लिए उन्हें देते हैं तो हम पहले बटन या दूसरे एच -1 या इनपुट जहां एक प्रकार पाठ के बराबर है और इस तरह एक तत्व का चयन करें तो हम पाते हैं कि करने के लिए एक घटना श्रोता देते है चयनित तत्व।
तो एक उदाहरण के रूप में हम एक बटन पर एक क्लिक के लिए सुन सकता है हम और एक H1 हम एक पाठ इनपुट में कुंजी प्रेस घटना के लिए सुन सकता है पर एक मंडराना घटना के लिए सुन सकता है हम उन घटनाओं के बीच मतभेदों के बारे में अधिक बात करेंगे।
वहाँ की घटनाओं जावास्क्रिप्ट में लेकिन क्या महत्वपूर्ण है कि हम एक घटना है कि एक दिया तत्व पर सुनी जा रहा है के लिए किया है के इतने भिन्न प्रकार के होते है।
तो जैसे पहले जब मैं के बारे में चुनें बात करेंगे और फिर हेरफेर है कि अभी भी लागू होता है।
हम कुछ और फिर हेरफेर ऐसा होता है कि हमें बात यह है कि हम चयनित करने के लिए एक घटना श्रोता जोड़ने का चयन करने की जरूरत है।
इसमें विशेष रूप से एक तरीका है कि हम सब समय कौन सा ऐड घटना श्रोता कहा जाता है का उपयोग करने के लिए जा रहे हैं।
घटना श्रोता पर तो क्या हम एक बार उपयोग हम पहली बार बटन या इनपुट प्रकार है क्योंकि पासवर्ड की तरह एक तत्व का चयन और हम तब चयनित हम उस पर घटना श्रोता जोड़ने फोन और हम दो तर्क देने के लिए कुछ है है।
पहले एक घटना के प्रकार है कि हम के लिए सुनने के लिए चाहते हैं।
और दूसरा तर्क कोड है कि हम चलाने के लिए जब कि आयोजन होता चाहते है।
यहाँ तो एक उदाहरण है।
मैं वास्तव में कोई फर्क नहीं पड़ता है जहाँ बटन है या कि यह कैसे या कुछ भी बस किसी भी बटन लग रहा है एक पृष्ठ पर पहले बटन का चयन कर रहा हूँ।
और फिर मैं घटना श्रोता क्लिक पर बटन को बुला रहा हूँ और फिर दूसरा तर्क एक समारोह में कहा कि यहां के लिए सभी तरह से चला जाता है।
और इस कोड को सही दूर नहीं चला है।
यह याद रखें एक कॉलबैक कहा जाता है।
इस कोड को तुरंत नहीं चला है।
यह केवल एक बार इस घटना को आग चलाने है।
तो एक बार आप बटन जावास्क्रिप्ट चला जाता है इसे वापस कॉल में पर क्लिक करें।
इस समारोह का कहना है कि अरे यह चमक और यहाँ वापस आना तैयार की आप पर अमल जाने के लिए अपने क्षण है।
और फिर उस कोड चलाया जाता है और हम सलाह दी हो किसी बटन को क्लिक करें लॉग ऑन नहीं है।
इसलिए इस समारोह में चलेंगे जब भी एक बटन विशिष्ट बटन है कि हम चयनित के रूप में क्लिक के साथ पर चलाने के लिए जल्दी है।
तो यहाँ एक और उदाहरण है।
इस मामले में मैं मार्क अप यहाँ एक बटन और एक पैरा है और मैं उन दोनों Kery चयनकर्ता के साथ चुना जाता है और मैं उन दोनों चर को बचाने के लिए और उसके बाद हम सब करना है कि इतनी बटन घटना श्रोता क्लिक करें और फिर जोड़ने करता एक क्लिक श्रोता जोड़ने दूसरा तर्क है कि कॉलबैक समारोह है।
और हम जब भी उस बटन क्लिक किया जाता है किसी बटन को क्लिक होने की पैराग्राफ पाठ्य सामग्री बदल गया है क्या करने जा रहे हैं और जब मैं उस बटन यह परिवर्तन से कोई भी मेरे क्लिक किया जाता है क्लिक करें कि आप देख सकते हैं और किसी के लिए बटन क्लिक किया है।
तो अब मैं हमारे Dom डेमो पृष्ठ की यहीं इस एच 1 बनाकर शुरू करते हैं का उपयोग कर एक त्वरित प्रदर्शन करने जा रहा हूँ।
रंग बदलने के लिए जब कोई उपयोगकर्ता इस पर क्लिक करता है।
तो यह है कि हम एच -1 का चयन करके हमेशा शुरू करने की जरूरत है।
इसलिए हम वहाँ विकल्पों में से एक गुच्छा है।
मैं सिर्फ queery चयनकर्ता दस्तावेज का उपयोग करने के लिए कि क्वेरी चयनकर्ता एच -1 यकीन है कि हम यह है बनाने जा रहा हूँ।
ठीक है।
तो हम बस एच-1 के बारे में है कि घटना श्रोता जोड़ें।
वहाँ दो तर्क है याद रखें।
पहले एक घटना है कि हम के लिए सुन रहे है।
और हम कुछ अधिक समय बिताना अलग घटनाओं के बारे में विभिन्न विकल्पों में बात कर रहा हूँ।
अभी के लिए हम बस क्लिक कर रहे हैं और एक दूसरे के कोड हम जब उपयोगकर्ता क्लिक चलाने के लिए चाहते हैं।
तो समारोह और सिर्फ सच में सरल शुरू करते हैं और सिर्फ क्लिक जब उपयोगकर्ता एक अलर्ट नहीं है।
तो हम एक चेतावनी हर एक को सिर्फ इस तरह से क्लिक किया था करूँगा।
और अब दर्ज मारा।
कुछ भी ठीक दूर बदलता है।
लेकिन अब अगर मैं एक पर क्लिक करें तो मैं इस बंद करेंगे।
अगर मैं पृष्ठ पर कहीं भी क्लिक करें।
एच -1 कुछ भी नहीं है एक तरफ से होता है।
जैसे ही मैं एच-1 क्लिक करें, जैसे कि यह मुझसे कहता है कि एच -1 सही था।
इसलिए यह महत्वपूर्ण है।
यह केवल एच -1 पर लागू होता है लेकिन इसका मतलब यह नहीं है कि मैं यहाँ पर जा सकते हैं और क्योंकि याद क्लिक करें, तो मैं निरीक्षण इस एच 1 स्क्रीन भर में सभी तरह से चला जाता है।
इसलिए ध्यान रखें कि इस मामले में हमारे लिए ठीक है में रखने के लिए सिर्फ कुछ के लिए, लेकिन यह कभी कभी पॉप अप जहां चीजें कुछ अलग सा तुलना में आप उन्हें करना चाहते हो सकता व्यवहार करेंगे और आप CSSA शायद चरण एक छोटा करने के लिए उन्हें इस्तेमाल करने की जरूरत है या आप बदलना आपके श्रोता वैसे भी।
तो बजाय सिर्फ चेताने की तुलना के कुछ और कर की कोशिश करते हैं।
और अगर मैं सिर्फ हिट अप एक ऐड घटना श्रोता क्लिक तीर और मैं यहाँ में कोड बदलने के लिए और मैं जैसे एच -1 कि शैली पृष्ठभूमि के बराबर होती है कुछ करना है और नारंगी नारंगी रंग की पृष्ठभूमि करते हैं और मैं हिट दर्ज करें।
फिर कुछ भी सही दूर बदलता है, लेकिन जब मैं क्या पहली बात यह है कि क्या होता है होता है पर ध्यान देना क्लिक करें कि यह अभी भी एक चेतावनी है कि एच -1 क्लिक किया गया था में कहते है।
और फिर जब मैं करीब है कि यह तो नारंगी होना करने के लिए बदल जाता है।
तो नैतिक यहाँ हम एक दिया तत्व पर एक से अधिक श्रोता हो सकता है।
जब हम पर क्लिक करें कि एच -1 पहले श्रोता कि हम जोड़ा एक क्लिक के लिए सुन रहा था और यह एक चेतावनी भाग गया और फिर हम एक और श्रोता बाद में वह भी एक क्लिक के लिए बात सुनी जोड़ा है, लेकिन यह पृष्ठभूमि का रंग बदल गया।
तो जब मैं उन दोनों को चलाने के लिए क्लिक करें।
अपने पाठ्यक्रम आप देखते हैं कि क्योंकि यह पहले से ही नारंगी था न की नारंगी के लिए बदल दिया है, लेकिन आप मुझ पर भरोसा करना होगा और हमेशा thats अब ऐसा करने के लिए अगर मैं फिर से क्लिक कर मैं सतर्क और मिल जा रहा है।
यह और अधिक से अधिक और अधिक से अधिक करने के लिए इसे नारंगी बदलता रहता है।
ठीक है मैं मैं ताज़ा और उस का सब से छुटकारा पाने के लिए जा रहा हूँ।
मैं भी उल करने के लिए एक श्रोता जोड़कर एक त्वरित प्रदर्शन करना चाहते हैं।
तो एक दस्तावेज़ डंप क्वेरी चयनकर्ता उल करते हैं और याद है हम सिर्फ एक उल की बजाय तीन सहयोगी है की सुविधा देता है।
तो मैं तुम्हें दिखाने के लिए क्या होता है जब हम इस तरह से एक मूल तत्व पर यह निर्धारित किया जा रहा हूँ।
खैर और मैं सिर्फ यह यहाँ क्या करने जा रहा एक चर का उपयोग करने के लिए नहीं जा रहा हूँ।
अटल श्रोता।
क्लिक करें।
तो यह है कि पहले तर्क है।
दूसरा एक समारोह में कहा कि हम सिर्फ इस तरह से चलाने के लिए चाहते हैं।
और मैं शुरू करने के लिए जा रहा हूँ।
बस एक क्लिक के सांत्वना है कि अच्छी तरह से था लॉग ऑन करते हैं और आप क्या जानते हैं।
यही कारण है कि निष्क्रिय आवाज है।
बुरा विचार।
चलो करे।
आप उल बहुत बेहतर क्लिक किया।
ठीक।
तो चलो सांत्वना खुला रखने करते हैं और उल पर क्लिक करते हैं।
लेकिन हम तेल पर कैसे क्लिक करेंगे।
क्योंकि यह अच्छी तरह से अंदर तीन सहयोगी दलों है।
उल यहीं इस पूरी बात है।
इसलिए किसी भी जल्दी कोई फर्क नहीं पड़ता जो सहयोगी मैं सिर्फ अच्छी तरह से कहीं पर हूँ।
आप संख्या बढ़ाने देख सकते हैं।
अच्छी तरह से किसी भी जल्दी यह इस सांत्वना डॉट लॉग निष्पादित करने के लिए जा रहा है।
तो चलो एक बार और ताज़ा करते हैं और इस बार हम कहते हैं कि मैं सहयोगी खुद को बदलने के लिए चाहते हैं।
जब मैं एक व्यक्ति के सहयोगी मैं ऐसा करने के लिए कुछ करना चाहते हैं पर क्लिक करें।
वहाँ है कि करने के कुछ तरीके हैं।
और हम बस सरलतम एक है जो एक को सिर के रूप में प्रत्येक सहयोगी करने के लिए एक श्रोता संलग्न है के साथ शुरू करने जा रहे हैं।
क्या हम अंत में कर रही हो जाएगा उल करने के लिए एक श्रोता संलग्न है और फिर उस श्रोता के अंदर है।
हम जो विशेष रूप से झूठ अंदर उल एक Lessner के साथ सभी पर क्लिक किया गया था पता लगाने के लिए जा रहे हैं।
हर झूठ बोलने के लिए तो हम मित्र राष्ट्रों का चयन करके शुरू करने की जरूरत अभी के लिए, हालांकि हम जा रहे हैं एक अलग श्रोता जोड़ा है ताकि हमारे सहयोगियों के बराबर होती है दस्तावेज़ queery चयनकर्ता डॉट सभी सहयोगी यकीन है कि हम उन सब को है बनाता है।
ठीक है फिर हम पाश के लिए एक करने की ज़रूरत है।
तो वर के लिए मैं शून्य के बराबर होती है।
याद रखें कि मैंने कहा है कि हम सभी इस समय कर रही होगी।
इसलिए मुझे लगता है कि सहयोगी दलों लंबाई मैं प्लस प्लस बस ऐसे ही से कम है।
और फिर यहाँ के अंदर हम वास्तव में प्रत्येक व्यक्ति के सहयोगी को एक श्रोता जोड़ने के लिए जा रहे हैं।
तो यह है कि इस तरह दिखता है।
Elyse मैं इतना है कि हमें सिर्फ इतना है कि जैसे विशिष्ट सहयोगी और घटना श्रोता क्लिक समारोह देता है और यह एक छोटा सा किया।
और फिर कोड कि हम चाहते हैं चलाने के लिए।
की सहयोगी है कि ऊपर क्लिक किया गया था के रंग बदलते हैं और चलो बस बैंगनी होना करने के लिए इसे बदल सकते हैं।
इसलिए हम कुछ अलग अलग विकल्प हैं।
मैं क्या करने की जरूरत है कि सहयोगी पर क्लिक किया गया था का उल्लेख है।
इसलिए मैं इस सहयोगी दलों मैं कर सकता है, हालांकि यह है कि वास्तव में एक महान समाधान नहीं है वहाँ वहाँ है, क्योंकि है कि कर का एक बहुत आसान तरीका इस कीवर्ड का उपयोग करने के लिए है।
तो एक श्रोता की कुंजी शब्द के अंदर इस आइटम उस पर क्लिक किया गया था या आइटम उस पर hovered था या आइटम को संदर्भित करता है कि कुंजी प्रेस में हुई जहाँ भी तत्व यह सही है जो कुछ भी जो कुछ भी वहाँ चयनित घटना पर पहले चला जाता है यह क्या है को संदर्भित करता है।
इसलिए मैं इस डॉट शैली है कि रंग बैंगनी बराबर लिख सकते हैं।
और वास्तव में है कि अधिक स्पष्ट कुछ है।
यह एक छोटा सा फ़ॉन्ट है।
तो चलो गुलाबी बस ऐसे ही करते हैं।
मैं हिट दर्ज करें।
कुछ भी नहीं तुरंत होता है, लेकिन अगर मैं एक सहयोगी पर क्लिक करें जैसा कि आप देख सकते हैं कि यह गुलाबी होने के लिए बदल जाता है।
और अगर मैं क्लिक करके रखें आप गुलाबी करने के लिए बस नहीं बता सकता बदलते रहते हैं।
इसलिए इस पद्धति को व्यक्तिगत रूप से उन के माध्यम से पाशन चीजों की एक गुच्छा का चयन और उनमें से प्रत्येक के लिए एक घटना श्रोता जोड़ने के यहां सच में बहुत आम है।
हम इसे अगले कुछ परियोजनाओं है कि हम बनाने में हर समय देखने के लिए जा रहे हैं।
आखिरी बात मैं यहाँ उल्लेख करेंगे तो आप हमेशा एक गुमनाम समारोह की तरह हम यहाँ था कि तुम कहाँ कोष्ठकों के साथ समारोह के बारे में है और आप इसे एक नाम देना नहीं है का उपयोग करने की जरूरत नहीं है कि है।
तुम ऐसा करने की जरूरत नहीं है।
आप एक नामित समारोह अलग तरह मैं यहाँ था घोषणा कर सकते हैं।
समारोह में बदलने पाठ और उसके बाद हम सभी को करना है कि बटन का कहना है कि घटना श्रोता जोड़ने या क्लिक करें और फिर हम यह पाठ को बदल देना है।
सूचना है कि हम कोष्ठकों बाद में की जरूरत नहीं है, क्योंकि मैं समारोह के तुरंत अमल होगा जो कि हम क्या नहीं करना चाहता।
तो हम सिर्फ इस समारोह में हम इस त्वरित श्रोता के लिए मूल रूप से सामग्री से गुजर रहे हैं के मूल्य समारोह मैं जब उपयोगकर्ता इस बटन पर क्लिक करता है आप चलाना चाहते हैं गुजर रहा है और यहाँ कह रहे हैं।
लेकिन यह सिर्फ अभी तक नहीं चला है।
तो इन दो वास्तव में एक ही काम करेंगे।
यह प्राथमिकता का सिर्फ एक मामला है।
अधिकांश भाग के लिए कुछ मतभेद है कि हम बाद में मुठभेड़ हो सकता है कर रहे हैं।
मैं ज्यादा इस का उपयोग करना पसंद करेंगे।
केवल समय था जब मैं एक गुमनाम समारोह का उपयोग नहीं होता है, तो मैं घड़ी श्रोता के बाहर कहीं और फिर उस कोड का उपयोग करने की जरूरत है।
तो अगर मैं इसे अपने आप को व्यक्तिगत रूप से चलाने के लिए करना चाहता था या मैं एक और जल्दी श्रोता के बजाय इसे चलाने के बजाय इस समारोह duplicating से मैं इसे एक नाम देना होगा और फिर बस का नाम जहां मैं इसे दो बार का उपयोग नकल करना चाहता था।
ठीक है तो आगे आप जल्दी Wisner की और बातें हम पिछले कुछ वीडियो में सीखा है की कुछ का उपयोग कर कुछ जल्दी अभ्यास करने का मौका पाने के लिए जा रहे हैं।