[Powered by Google Translate] [संगोष्ठी: jQuery] [विपुल शेखावत, हार्वर्ड विश्वविद्यालय] [यह CS50 है.] [CS50.TV] आप घर पर साथ पीछा कर रहे हैं, तो आप वास्तव में ऑनलाइन मेरा स्लाइड्स का उपयोग कर सकते हैं इस लिंक पर जाकर. यह bit.ly. पर, TjjRWj है तुम भी तो बस सीधे यूआरएल के लिए जा सकते हैं जो मेरे नाम है जो cloud.cs50.net / ~ vshekhawat है, और jquery. मैं अत्यधिक है कि आप घर पर देख रहे हैं तो आप के साथ पालन करने के लिए प्रोत्साहित करते हैं, आप यहाँ कर रहे हैं, तो भी यह एक बहुत इंटरैक्टिव प्रस्तुति है. 

आज तो, मैं jQuery के बारे में बात करने जा रहा हूँ, और पहला सवाल है jQuery के क्या है? इस साल, मैं तुम लोगों जावास्क्रिप्ट शामिल नहीं किया है पता हम पिछले कुछ वर्षों में किया है के रूप में ज्यादा विस्तार के रूप में. जावास्क्रिप्ट, सब से पहले, बस एक क्लाइंट साइड भाषा है आप प्रत्येक उपयोगकर्ता की मशीन पर स्क्रिप्ट और कोड को चलाने के लिए उपयोग करते हैं. तो तुम लोगों के लिए वेब पृष्ठों को प्रदान करता है कि एक सर्वर लेकिन अगर आप अपने मशीन पर सामान करना चाहते हो सकता है अपने सर्वर हर 30 सेकंड या ऐसा कुछ करने के लिए अनुरोध भेजने के लिए अपने मशीन पूछना. आप जावास्क्रिप्ट का उपयोग कर ऐसा कर सकते हैं. JQuery का सिर्फ जावास्क्रिप्ट के शीर्ष पर अधिक सुविधा प्रदान करता है कि आप के लिए अतिरिक्त सामान है. आप शीर्ष पर सामग्री को देखो, कि आप क्या कर रहे हैं कि सामान में से कुछ का वर्णन करता है. तो कुल मिलाकर, यह जनवरी 2006 में बनाया गया था. यह पहली बार अगस्त 2005 में की गई थी. यह एक दो साल के लिए किया गया है, और यह वास्तव में नए वेब 2.0 आंदोलन का हिस्सा है इंटरनेट का है कि इतना चमकदार बना दिया है. यह सबसे व्यापक रूप से इस्तेमाल जावास्क्रिप्ट पुस्तकालय है. दस लाख 19.6 ओवर वेबसाइटों का उपयोग कर रहे हैं, और उपयोग भी बढ़ रही है builtwith.com के अनुसार, जो, जाहिर है, पिछले वर्ष की तुलना में, बस लगातार काफी रैखिक बढ़ती जा रही है. शीर्ष 10 लाख साइटों के अलावा, वहाँ अब भी है - उनमें से 40% के आसपास वर्तमान में यह प्रयोग कर रहे हैं. फेसबुक पर इसे इस्तेमाल करता है, अन्य वेबसाइटों के बहुत सारे वर्तमान में इसका इस्तेमाल करते हैं. यदि आप चाहें तो आप अपने दम पर उन आंकड़ों को देख सकते हैं. यह एक नींव और 13 बोर्ड के सदस्य हैं और क्योंकि आप, यह कानूनी बता सकता है एक नियमित आधार पर इस पर काम करने वाले 20 लोगों की एक टीम के साथ. इसलिए यह बहुत व्यापक रूप से प्रयोग किया जाता है, यह एक org. यूआरएल है यह कल्पना है, यह अन्य सामान के लिए स्पिन नापसंद है, तो यह एक बड़ी बात नहीं है. 

तुम यह क्यों इस्तेमाल करना चाहिए? JQuery के बहुत हल्के है. यही कारण है कि यह एक बड़ी फ़ाइल नहीं है इसका मतलब है. आप डाउनलोड कर सकते हैं minified फ़ाइल, जो सभी सफेद स्थान और टिप्पणियों के बिना है, और यह केवल 32 केबी है. तो यह सिर्फ अपने वेब पेज पर टॉस करने के लिए आसान है और अभी यह प्रयोग शुरू करने के लिए. यह भी बहुत कुशलता से लिखा है, तो यह एक बहुत नहीं ले करता है - आप इसका इस्तेमाल बहुत जब यह अपनी वेबसाइट को धीमा नहीं करता है. यह आप पहले से अव्यावहारिक थे कि चीजों को लागू करने की सुविधा देता है. कार्यक्षमता के कुछ पहलू हैं, एनिमेशन बनाने की तरह, जो सामान्य रूप से करने के लिए बहुत, बहुत मुश्किल होगा. लेकिन jQuery में वे वास्तव में बहुत सरल हैं. और ऐसा करने के लिए परेशान कर रहे हैं कि कुछ बातें हैं, जावास्क्रिप्ट में संभव, एक पोस्ट अनुरोध भेजने की तरह, लेकिन एक सर्वर से एक अनुरोध भेजने के लिए, यदि आप लिखना है कोड में से पांच या छह या सात लाइनों. अब आप सिर्फ एक समारोह कॉल में, कोड की एक लाइन में कर सकते हैं. यही कारण है कि वास्तव में आप क्या कर रहे हैं कि बहुत सारी चीज़ें आसान बनाता है. और सब शांत बच्चों को यह प्रयोग कर रहे हैं. कि करके, मेरा मतलब है. मेरा अंतिम परियोजना में पिछले वर्ष, जो, news.whrb.org है रेडियो स्टेशन के लिए है, जो मैं इस ब्लॉग बनाया जो सभी हम किया है कि पता चलता है और उनके लिए एमपी 3 फ़ाइलों को होस्ट करता है. आप पिछले शो के माध्यम से ब्राउज़ कर सकते हैं और यह सब jQuery का उपयोग किया है. आप बता सकते हैं क्योंकि इन सभी एनिमेशन का, अनिवार्य रूप से. तुम तो अगर - आप एक नया पद बना रहे हैं, आप इन छोटी slideDowns देखो, कि सभी सर्वर का उपयोग कर चुका है. और यह फीका - इतना सामान की तरह सभी, jQuery का उपयोग किया जाता है और आप लगातार साइट नेविगेट करने के लिए पृष्ठ पुनः लोड करने के लिए नहीं है. सर्वर का उपयोग कर बनाया है कि एक और अच्छी बात यह है कि इस प्रस्तुति है. मैं, scrolldeck नामक इस खुले स्रोत बात कर रहा हूँ जो किसी jQuery के शीर्ष पर लिखा है. आप वास्तव में स्रोत पर देखो, तो आप देख सकते हैं कि वे यह डॉलर के हस्ताक्षर का उपयोग कर रहे हैं, डॉलर के संकेत एक समारोह एक jQuery समारोह है कि सूचित करने के लिए jQuery में उपयोग किया जाता है. इसलिए वे jQuery के शीर्ष पर एक आवरण परिभाषित कर रहे हैं कि तुम इस तरह एक प्रस्तुति बनाने के लिए अनुमति देता है और तुम, यहाँ वे मूल jQuery का फ़ाइल सहित रहे हैं देख सकते हैं जो jQuery का उपयोग करना चाहते हैं तो आप शामिल करना होगा क्या है अपनी खुद की वेबसाइट में. 

उस पर मार्मिक, कैसे आप इसे स्थापित करते हैं? तुम बस फ़ाइल jQuery.com और डाउनलोड करने के लिए जा सकते हैं एक वेब निर्देशिका में जोड़ सकते हैं और यह भी शामिल है. तो सिर्फ शीर्ष पर, अपने HTML फ़ाइल के सिर टैग में अपने मुख्य HTML फ़ाइल की, सिर्फ कोड की है कि लाइन है आप उपयोग कर रहे हैं jQuery के जो संस्करण के लिए सही संस्करण के साथ. आप jQuery.com पर जाकर इसे डाउनलोड कर सकते हैं ", डाउनलोड jQuery के" क्लिक करें और आपको यह मिल गया है. बस. और वास्तव में, हम यह कैसा लग रहा है पर एक नज़र ले जा सकते हैं. आप यहाँ डाउनलोड पर क्लिक करते हैं, jQuery के इस है. यह आप के लिए सभी जादू सामान है कि सिर्फ एक बड़ा जावास्क्रिप्ट फ़ाइल है. इस सब पर पठनीय नहीं है जो minified संस्करण है. तुम भी पठनीय है, जो विकास के संस्करण पर देख सकते हैं लेकिन अभी भी बहुत, बहुत लंबा. यह वहाँ में सामान का एक बहुत कुछ है. तुम भी इसके बारे में गूगल की मेजबानी संस्करण के लिए लिंक कर सकते हैं. तो यह है कि आप बस इसे प्रदान करने के लिए गूगल पर भरोसा करने की अनुमति देंगे. वे हर समय उपलब्ध इसके बारे में हर संस्करण प्रदान करते हैं. तो आप शायद यह आप के लिए होस्ट करने के लिए गूगल पर भरोसा कर सकते हैं. या फिर आप jQuery के स्वयं के नवीनतम संस्करण के लिए लिंक कर सकते हैं. वे हमेशा नवीनतम संस्करण के लिए अद्यतन किया गया है कि एक यूआरएल है. , यह jquery-नवीनतम है, और उस के साथ एक समस्या है जो है कि अगर अद्यतन jQuery और पिछले कार्यक्षमता के कुछ वे, retrograded या पदावनत हो जाता था यह नहीं हो सकता है - यह अब समर्थित नहीं करने के लिए शुरू हो सकता है. आप, संस्करण 1.8.2 का उपयोग कर एक वेबसाइट लिखना तो अगर समय संस्करण 2.7 बाहर आता है आप ने लिखा कार्यों में से कुछ काम नहीं करते. तो यह 32 केबी फाइल सिर्फ डाउनलोड करने के लिए बेहतर है अपने वेब पेज पर डाल दिया, और यह हमेशा के लिए काम करेंगे. 

मुझे आगे जाना है और jQuery के वास्तविक कार्यक्षमता के बारे में बात शुरू करने के लिए जा रहा हूँ. पहली बात यह है कि चयनकर्ताओं है. यह jQuery के शुरू में प्रदान करने के लिए नियोजित किया गया था क्या है. और आप को देखने के लिए प्रलेखन पर क्लिक कर सकते हैं मैं को कवर करने जा रहा हूँ चयनकर्ताओं के लिए विस्तृत दस्तावेज. चयनकर्ताओं के पीछे विचार यह है कि आप एक पृष्ठ पर HTML तत्वों का चयन कर सकते हैं. एक पेज पर तत्वों आईडी और वर्गों और उन्हें अन्य की पहचान पहलुओं है. वहाँ भी - अलग आदेशों में they're. वे एक दूसरे के अंदर नेस्ट रहे हैं समय से कुछ. JQuery आप पेज से तत्वों को पुनः प्राप्त है कि सरल प्रश्नों का निर्माण करने की अनुमति देता है. तो फिर तुम jQuery के कार्यों का उपयोग कर इन तत्वों में हेरफेर कर सकते हैं हम बाद में मिल जाएगा हेरफेर अनुभाग जो है. आप एचटीएमएल, सीएसएस बदल, बदल सकते हैं आप भी चेतन और कुछ घटनाओं पर सक्रिय कार्यों को जोड़ सकते हैं. कुछ क्लिक किया है तो, उदाहरण के लिए, यदि आप ऐसा करने के लिए कुछ करना चाहते हैं आप jQuery के रूप में अच्छी तरह से उपयोग कर ऐसा कर सकते हैं. और तत्वों का चयन करने के तरीकों की एक बड़ी संख्या है. उनमें से अधिकांश, मैं इस्तेमाल कभी नहीं किया है, लेकिन बुनियादी वाले हैं जो बहुत महत्वपूर्ण हैं. तत्व चयनकर्ता, उदाहरण के लिए, यदि आप कुछ भी बस का चयन कर रहे हैं कि एक div है - मैं वास्तव में इस स्लाइड प्रस्तुति के लिए खुला कोड है. तो, उदाहरण के लिए, यहाँ पहली स्लाइड है. यहाँ हम एक div है. हम वास्तव पृष्ठ पर सभी divs का चयन करते हैं, यह सिर्फ हमें इस फाइल में मौजूद सभी divs की एक सरणी देता हूँ. आईडी चयनकर्ता आप किसी दिए गए आईडी के साथ कुछ का चयन की सुविधा देता है. यह, उदाहरण के लिए, इस बात आईडी "क्या" है तो अगर और हम # क्या बजाय कुछ आईडी के साथ ऐसा किया, यह सिर्फ एक ही तत्व है और उस पृष्ठ के उस तत्व है कि एक सरणी वापस कर देगा. हम भी होने से चयनकर्ताओं को इस तरह से गठजोड़ कर सकते हैं केवल divs हैं कि आईडी के साथ चीजों का चयन करें. हाँ तो. केवल कि आईडी कि divs का चयन करें. वर्ग के लिए आप सिर्फ एक बिंदु का उपयोग करें, यह सीएसएस के रूप में एक ही बात है. वंश का भी काम करता है, आप कुछ वर्ग है, इसलिए यदि उदाहरण के लिए, तो - और यह कि यह भीतर तत्वों नेस्ट किया गया है वहाँ कुछ वर्ग है और यह एक पृष्ठ पर लिंक करने के लिए एक लंगर टैग है, आप लिंक को पुनः प्राप्त करने के लिए इस वाक्य रचना का उपयोग कर सकते हैं. तुम भी एक साथ कई चीजों का चयन कर सकते हैं, बस अल्पविराम से अलग करें, आप चाहें तो किसी भी चयनकर्ता का उपयोग करें, और आप एक ही सरणी में एक ही बार में उन सभी का चयन करेंगे. और फिर भी चयनकर्ता नहीं है, इसलिए आप सभी divs का चयन कर सकते हैं कुछ विशिष्ट वर्ग नहीं है कि. और कहा कि अभी इस चयन कैसे काम करता है के लिए एक परिचय प्राप्त करने के लिए एक उपयोगी तरीका है. मैं एक दूसरे में कुछ ठोस उदाहरण दिखाता हूँ. 

उन्नत चयनकर्ताओं हैं - ये सिर्फ कुछ उदाहरण हैं. वहाँ इन के दर्जनों रहे हैं, लेकिन आप सभी छवि टैग का चयन करना चाहते हैं कुछ तत्व के भीतर, तो आप सिर्फ कार्य करें: छवि. तुम, उदाहरण के लिए, भले ही तत्वों का चयन करना चाहते हैं उनमें से 20 तो नहीं हुई हैं, आप, 0, 2, 4, 6 और इतने पर चयन करना चाहते हैं भी, या आप भी कर सकते हैं: आप कर अजीब. इन छद्म चयनकर्ताओं कर रहे हैं, जो वे वास्तव में गणना का मतलब है कि हर दूसरे तत्व के बजाय सिर्फ जा रहा है और उनमें से सभी का चयन करने से. आप भी कर सकते हैं - प्रत्येक तत्व भी विशिष्ट गुण हो सकता है. तो, उदाहरण के लिए, कक्षा = केंद्र भी एक गुण है. इस लंगर टैग के लिए, उत्तरी अमरीका, हाइपरटेक्स्ट संदर्भ, यह भी एक गुण है. यह वास्तव में सामान्य है - तो आप एक विशेष पृष्ठ या बस के लिए लिंक है कि कुछ का चयन कर सकते हैं. क्या आप चाहते हैं कि किसी विशेषता के साथ कुछ भी चुन सकते हैं. और फिर, भी, गुण होता है. तुम, उदाहरण के लिए, सभी इनपुट तत्वों का चयन करना चाहता था कि, उन के नाम के रूप में शब्द "पास" है एक पृष्ठ एक इनपुट पाठ ब्लॉक है अगर कि आप का चयन कर सकता है एक तरह से होगा कि "पासवर्ड," कहा जाता है. और कई और अधिक कर रहे हैं. तुम आगे बढ़ो और प्रलेखन पर देख सकते हैं और यह कैसे काम करता है के विशिष्ट उदाहरण देखें. 

अगली बात डोम हेरफेर है. हम तत्वों का चयन करने के बाद, हम वास्तव में उन लोगों के साथ सामान करना चाहते हैं जाएगा. अब तक हम सभी को उस पर ध्यान दिया है, लेकिन यह नहीं है कि आप प्रलेखन को देखो, हम क्या कर सकते हैं कि वास्तव में एक बहुत कुछ है. इस बिंदु पर, हम इस प्रस्तुति पर तत्वों का चयन करने के लिए जा रहे हैं और उन्हें सर्वर का उपयोग कर हेरफेर. इस सर्वर का उपयोग कर कार्यान्वित किया जाता है, क्योंकि हम jQuery पुस्तकालय का उपयोग किया है और हम इस कोड के भीतर उन कार्यों का उपयोग कर सकते हैं. आप के बारे में पता नहीं हो सकता कि एक उपयोगी चीज कंसोल है. और गूगल क्रोम मैं उपयोग कर रहा हूँ क्या है. आप ऑल्ट आदेश जम्मू दबा सकते हैं या वैकल्पिक नियंत्रण जम्मू कंसोल खोलने के लिए. Firefox में मैं यह कमांड पारी कश्मीर या नियंत्रण बदलाव के बारे में सोच सफारी में आप कुछ सेटिंग्स बदल जाना है. वहाँ आप यह करना चाहते हैं, तो एक कड़ी है, लेकिन मैं क्रोम या फ़ायरफ़ॉक्स रही सलाह देते हैं. तो चलो कंसोल को खोलने चलो, यह यहाँ नीचे है. यह आप मूल रूप से कुछ भी तुम चाहते बस के लिए अनुमति देता है. तो आप सिर्फ एक चर नामक एक्स बनाने में टाइप कर सकते हैं एक्स = 5, एक्स 2 में क्या देखते हैं. आप सीएस की तरह कुछ कर भी सकते हैं + चलो देखते हैं, एक्स CS50 होगा कि + 45,. तुम बस कुछ ठेठ जावास्क्रिप्ट चीजें कर सकते हैं. लेकिन आप भी यहाँ में jQuery कर सकते हैं. 

तो यहाँ यह पहला पहलू को देखो. हम एक स्ट्रिंग है जो एचटीएमएल, कहा जाता है एक चर बनाने के लिए जा रहे हैं. यह कुछ नया पाठ कहा जाता है कि, उस में एक पैरा टैग है. इसलिए हम इस HTML है, यह अनुच्छेद टैग में, कुछ नया पाठ है. अब हम वास्तव में पृष्ठ में जोड़ना चाहते हैं. मैं इस अनुच्छेद के लिए HTML, यहाँ इस शीर्षक, संलग्न आईडी है कि ताकि यह निर्धारित किया है. हम तो संलग्न आईडी का चयन करें और यदि यह करने के लिए संलग्न मैं अभी बनाया एचटीएमएल चर, यह सही है कि इस अनुच्छेद टैग के बाद, अंत में है कि एचटीएमएल बढ़ जाएगा. हम ऐसा इसलिए यदि - हम इस अनुच्छेद चयनित और हम, मैं सिर्फ जोड़ा एचटीएमएल चर के साथ संलग्न समारोह बुलाया है यह पेज पर वहीं कि नया पाठ जोड़ देगा. हम यह भी है कि यह उस तत्व की शुरुआत में, पहले जाना होगा, जिसका मतलब है prepend कर सकते हैं. तो शुरुआत है और बाद में कुछ नए पाठ है. मुझे आगे जाना है और मैं अभी किया है इस सामान से छुटकारा पाने के लिए ताज़ा कर सकते हैं. लेकिन यह है कि आप पहले जोड़ें का उपयोग कर सकते हैं का एक उदाहरण है और तरीकों संलग्न पृष्ठ पर सामग्री में हेरफेर करने के लिए, कुछ HTML जोड़ना. 

आप भी कक्षाओं में बदल सकते हैं. पीछे इस शैली फ़ाइल में, मैं जीत वर्ग के लिए इस बनाया है उस पाठ रंग लाल, कुछ पृष्ठभूमि रंग, और एक पाठ छाया है. यह भयंकर लग रहा है, लेकिन मैं वास्तव में यह कर सकते हैं - इस पैरा वर्ग आईडी से मेल खाती है. तो मैं जीत के लिए वर्ग जोड़ सकते हैं. मैं कंसोल में इस पर अमल कर सकते हैं और कि उस वर्ग जोड़ देगा, और अब यह भयंकर लग रहा है, के रूप में की उम्मीद है. सीएसएस स्वतः वर्गों है कि आप के लिए लागू किया जाता है - एक वर्ग के लिए सीएसएस अगर वहाँ है, यह अपने आप लागू हो जाता है आप एक तत्व के वर्ग बदलते हैं. तो हम बस हटायें वर्ग का उपयोग कर निकाल सकते हैं. आप लाल या डाला जैसे कुछ पूर्वनिर्धारित कक्षाएं, तो अगर और फिर आप तत्वों को उन पर लागू करना चाहते आप हर समय स्टाइल सभी सीएसएस क्या करने की जरूरत नहीं है. आप सिर्फ एक तत्व को वर्ग जोड़ सकते हैं, और तब यह स्वतः ही हो जाएगा - यह स्वचालित रूप से उस वर्ग के लिए उपयुक्त लग जाएगा. हम यह भी चीजों को दूर कर सकते हैं, तो मैं सभी divs का चयन करने के लिए जा रहा हूँ पृष्ठ पर और उन्हें हटा दें. उस तरह देखने के लिए क्या हो रहा है? यह कुछ भी नहीं लग रहा है, इसलिए छोड़ दिया कुछ भी नहीं है वास्तव में नहीं है. मेरी प्रस्तुति चला गया है. मैं, सौभाग्य, ताज़ा और इसे वापस ला सकता है यह सिर्फ एक बार चल रहा है, क्योंकि आप पूरी तरह से पृष्ठ से एक तत्व को नष्ट करना चाहते हैं, लेकिन लगता है कि, को दूर करने का एक उदाहरण है. 

तुम भी ऊपर लिख सकते हैं, और मैं पन्ने पर सभी पैरा टैग का चयन करने के लिए जा रहा हूँ और उन्हें अंदर जाने के लिए और वे उन में जो कुछ भी पाठ की जगह साथ सिर्फ शब्द "परीक्षण." यदि आप ऐसा करते हैं, तो आप इस परीक्षण के साथ पृष्ठ पर हर पैरा की जगह लेंगे. हां. वे सब परीक्षण के साथ बदल रहे हैं. तो उस पाठ पहुँचने और यह overwriting का एक उदाहरण है. आप यह भी जानकारी प्राप्त कर सकते हैं, और इस इनपुट बक्से के लिए वास्तव में अच्छा है. आप लोगों में सामान टाइप कर रहे हैं कि एक इनपुट बॉक्स है, तो लोगों को यह में सामान टाइप कर रहे हैं, यहाँ हम इनपुट, पाठ का एक प्रकार के साथ किसी भी इनपुट टैग का चयन करें. इस मामले में, पूरी प्रस्तुति में केवल एक इनपुट बॉक्स, वहाँ तो हम सिर्फ पहले एक का चयन करेंगे, और फिर हम उस पर वैल समारोह कॉल. कि, मान देता है, और एक इनपुट बॉक्स के लिए मूल्य इसके अंदर होने के लिए जो कुछ भी होता है बस. हम ऐसा करते हैं तो, यह सिर्फ स्ट्रिंग सामान देता है. हम और अधिक सामान लिखने के बाद फिर से इसे कहते हैं, यह और अधिक सामान में बदल जाता है. यही है, की जांच फिर एक इनपुट बॉक्स के तत्वों का उपयोग करने के लिए एक शानदार तरीका है, और यह एक मान्य ईमेल पता है, इस उदाहरण के लिए, एक मान्य दिनांक है. लोग इसे टाइप कर रहे हैं के रूप में तुम बस, तुरन्त सामान प्राप्त कर सकते हैं और फिर, यह वैध है या नहीं यह जांच एक सर्वर के लिए इसे वापस भेजने के लिए, तुम इसके साथ चाहते हैं कुछ भी करते हैं. और कहा कि आप उन बक्से के अंदर है क्या का उपयोग कैसे करना है. 

तुम भी बजाय जोड़ने की तो, सीएसएस सीधे संशोधित कर सकते हैं कुछ पूर्वनिर्धारित गुण है कि एक वर्ग, तुम सिर्फ तुम कुछ भी करना चाहते हैं जो कुछ सीएसएस जोड़ सकते हैं. पूरी प्रस्तुति है जो तो चलो चुनिंदा शरीर,, और रंग पाठ है क्या रंग को परिभाषित करता है कि संपत्ति है. हम लाल करने के लिए इसे बदलने के लिए, पृष्ठ में सभी पाठ लाल को बंद हो जाएगा. हम पृष्ठभूमि रंग नीले रंग की तरह कुछ कर सकते हैं वहाँ हम चले, यह सुंदर है. यदि आप इस के साथ चाहते हैं कुछ भी कर सकते हैं. सीएसएस संपत्ति का उपयोग करना, आप वास्तव में कुछ भी किसी भी समय लग रहा है कि कैसे संशोधित कर सकता है. अगली बात यह प्रभाव है. प्रभाव, मूल रूप से सीएसएस संशोधित रूप में एक ही बात कर रहे हैं लेकिन वे वास्तव में इसे करने के लिए कुछ अतिरिक्त एनीमेशन प्रदान करते हैं. तो बजाय सिर्फ रंग दिखा या छुपा कुछ या बदलने का, आप वास्तव में यह एनिमेटेड बना सकते हैं. आप इसके लिए व्यापक प्रलेखन पर एक नज़र रखना चाहते हैं, तो यहाँ प्रलेखन है. लेकिन मैं मुख्य लोगों को कवर करने के लिए जा रहा हूँ. शो और छिपाने के गुण होते हैं. आईडी वास्तव में इस पूरे बॉक्स से मेल खाती दिखाएं / छुपाएं, मैं इसे छिपाने अगर ऐसा है, तो यह सिर्फ गायब हो जाएगा. मैं इसे वापस आ बनाना चाहते हैं और मैं इसे फिर से दिखा सकते हैं. और यह वापस आ गया है. यह वास्तव में, गायब नहीं था मैं वास्तव में पृष्ठ से इसे दूर नहीं किया, मैं सिर्फ छुपा के लिए दृश्यता की सीएसएस गुण सेट ताकि आप इसे अब और नहीं देख सकता. वहाँ भी स्लाइड ऊपर और नीचे स्लाइड है, आप इस प्रभाव के लिए अनुमति देता है. यह गायब करने के लिए स्लाइड, और यह गायब हो जाता है के बाद आप इसे वापस आ बनाने के लिए इसे नीचे स्लाइड कर सकते हैं. और अब यह वापस आ गया है. फीका आईडी इस बॉक्स से मेल खाती है - जो इस फीका प्रभाव, भी है. मैं इसे बाहर हो पाती है, तो यह धीरे धीरे गायब हो जाएगा. मैं भी उस में फीका कर सकते हैं, और यह वापस आ जाएगा. तुम भी फीका समारोह के लिए विशिष्ट है, जो करने के लिए फीका कर सकता है. आप इसे आप चाहते हैं कि किसी भी विशिष्ट अस्पष्टता को फीका हो सकता है. आप .5 यह धीरे धीरे फीका तो, अगर यह आधे दिखाई बन जाऊँगा. मैं यह .1 के लिए जाना कर सकते हैं, और वापस करने के लिए 1 फिर यह पूरी तरह से दिखाई बनाने के लिए. वह सिर्फ तुम क्या कर सकते हैं कि एक और एनीमेशन है. 

टॉगल प्रभाव भी होते हैं. इसलिए मैं इस बॉक्स से मेल खाती है जो टॉगल आईडी, का चयन करने के लिए जा रहा हूँ और कि div पर आप टॉगल कॉल कर सकते हैं, यह दिख रहा है कि अगर यह अदृश्य हो जाएगा, यह अदृश्य है अगर यह फिर से दिखाई हो जाएगा. तो मैं सिर्फ दो बार इस टॉगल समारोह में कहा जाता है, पहले एक था छिपाने के रूप में एक ही बात, दूसरे फोन एक शो के रूप में एक ही बात थी. और तुम भी, एक फीका टॉगल के साथ ऐसा कर सकते हैं जो यह वास्तव में fades के अलावा एक ही बात करता है. और स्लाइड के साथ एक ही बात टॉगल. जंजीर प्रभाव के रूप में अच्छी तरह से कर रहे हैं, जिसका मतलब है आप एक तत्व का चयन करें और अभी इस पर एनीमेशन तरीकों का एक गुच्छा कहते हैं, आप इसे बाहर फीका करने के लिए चाहता था, तो स्लाइड नीचे, और फिर छिपाने के लिए और उसके बाद में फीका, यह एक पंक्ति में उन्हें क्या करना होगा. तो गायब हो गया, वापस आया था - किसी कारण के लिए, छिपाने नहीं हुआ. के लिए इसे बाहर की कोशिश करते हैं. हाँ, तो इसे बाहर फीका और फिर इसे दूर गिरावट. और वहाँ बहुत अधिक हैं. आप चेतन समारोह का उपयोग कर सकते हैं अपनी खुद की एनिमेशन बनाने के लिए, जो, काफी जटिल है लेकिन यह अनंत तानाना साथ प्रदान करता है. क्या आप चाहते हैं एनीमेशन के किसी भी प्रकार कर सकते हैं. तुम भी एक समय में कई एनिमेशन कतार के लिए कतार का उपयोग कर सकते हैं. तो, आप पृष्ठ के पार उड़ान भरने के लिए कुछ करना चाहते हैं तो नीचे बाईं ओर शीर्ष सही से स्लाइड, तो आप ऐसा कर सकते हैं और सिर्फ एक दूसरे के बाद जा रहे कार्यों का एक गुच्छा है. 

हम इस बारे में बात करने जा रहे हैं अगले बात की घटनाओं है. घटनाक्रम आप की अनुमति - अब तक, हम सिर्फ सांत्वना में बातें लिखकर दिया गया है और कि, ऐसा करने के लिए एक ही रास्ता है लेकिन एक वास्तविक पृष्ठ पर, आप करने के लिए सक्षम होने के लिए नहीं जा रहे हैं कंसोल में उपयोगकर्ता प्रकार की बातें करते हैं. आप चीजों को स्वचालित रूप से कुछ करना चाहते हैं. उस के लिए, आप कुछ निश्चित घटना घटित होने पर सक्रिय घटनाओं का उपयोग करने की आवश्यकता है. आप पूरी जानकारी के लिए दस्तावेज की जांच कर सकते हैं. तो चलो देखते हैं. हम बॉक्स को छुपाने या दिखाने के लिए चाहते हैं मैं अभी तक इसे लागू नहीं किया है, लेकिन अभी इस बटन को कुछ भी नहीं है. मैं वास्तविक HTML पृष्ठ पर जाने के लिए जा रहा हूँ. यहाँ स्लाइड है. स्लाइड के लिए एक div है. यह स्लाइड का वर्ग है. पाठ है. अब, इस बॉक्स और बॉक्स बटन है. कैसे हम वास्तव में यह गायब करना चाहते हैं? सबसे पहले, का पिटारा आईडी गायब बनाता है एक समारोह लिखने. इस funtion के लिए वाक्यविन्यास है, बस यह hideTheBox कहते हैं. उठाए जाने की कोई बहस नहीं कर रहे हैं, क्योंकि यह किसी भी तर्क नहीं ले करता है. हम बॉक्स आईडी का चयन कर सकते हैं. चयन सर्वर का उपयोग कर तो, हम, बॉक्स आईडी का चयन कर सकते हैं और फिर बस गायब करना. चलो यह बाहर फीका कर. हम वास्तविक कंसोल में इस समारोह में भाग गया हम इस समारोह को परिभाषित कर सकता है, हम hideTheBox कॉल कर सकते हैं, और यह काम करता है. लेकिन हम बटन वास्तव में दबाया जाता है तो यह तो होना चाहते हैं. ऐसा करने के लिए, हम एक घटना का उपयोग किया है. कुछ विशिष्ट बटन या कुछ कार्रवाई हो रहा है के लिए एक घटना से बाइंड करने के लिए, हम घटना को ट्रिगर किया जाएगा कि तत्व का चयन किया है - या कि खेद है, घटना को ट्रिगर किया जाएगा. 

सब से पहले तो, चलो बॉक्स बटन आईडी का चयन करें क्योंकि वह उस बटन के लिए, अब बटन है, और, हम इसे क्लिक किया है जब एक एनीमेशन बनाना चाहते हैं. तो इस पर क्लिक समारोह है. यह आप इसे करने के लिए एक समारोह बाध्य करने के लिए अनुमति देता है. इस समारोह में एक तर्क के रूप में एक समारोह लेता है हम hideTheBox समारोह में पारित कर सकते हैं और इस बटन क्लिक किया जाता है, जब भी उस समारोह स्वतः क्रियान्वित करेगा. तो यह है, हम इस बचाने के लिए, अगर मैं ताज़ा करेंगे काम करेंगे और - एक दूसरा, मैं माफी चाहता हूँ. मुझे वास्तव में इस जल्दी ठीक करने दें. ठीक है. हम वहाँ जाते हैं. हम बटन क्लिक करते हैं तो अब बॉक्स गायब है. हम भी, सिर्फ fadeToggle लिए इसे बदल सकते हैं बॉक्स को छुपाने या दिखाने के लिए सिर्फ इसे बदलने, हम ताज़ा और अगर यह भी बहुत काम करेंगे. हम इसे छिपा कर सकते हैं, हम भी यह दिखा सकते हैं, और कहा कि काम करने के लिए जारी रहेगा. हम क्या कर सकते हैं एक और बात है, हम वास्तव में इस hideTheBox समारोह को परिभाषित करने की जरूरत नहीं है हम क्लिक समारोह में बुलाने से पहले. तो बजाय समारोह को परिभाषित करने और hideTheBox बुलाने की, हम केवल इस बात को क्लिक किया जाता है तो यह कॉल करने के लिए जा रहे हैं. इसलिए हम इसे यहाँ में गुमनाम रूप से परिभाषित कर सकते हैं जो जावास्क्रिप्ट है कि एक विशेषता है. आप एक समारोह को परिभाषित कर सकते हैं, आम तौर पर, हम समारोह hideTheBox कहेंगे तर्क के साथ, लेकिन इसके बजाय, हम सिर्फ तर्क में कोई कार्य करते हैं कह सकते हैं , समारोह को परिभाषित करने के लिए घुंघराले ब्रेस शुरू कि धनु धनुकोष्ठक बंद, और फिर बस, यहाँ में समारोह को परिभाषित पहली कोष्ठक और अंतिम कोष्ठक के भीतर उस पर क्लिक समारोह के तर्कों के अनुरूप हैं. हम इस समारोह में गुजर रहे हैं तो, हम यहीं कोड की इस पंक्ति कॉपी कर सकते हैं, और है कि सटीक एक ही बात करेंगे. और अब हम इस यादृच्छिक fadeTheBox समारोह नहीं है कि कोई स्पष्ट कारण के लिए चारों ओर बैठा है. समारोह गुमनाम रूप से परिभाषित किया गया था, यह एक नाम नहीं है. हम बॉक्स बटन पर क्लिक करते हैं तो यह केवल अमल करेंगे. इतना ताज़ा एक बार फिर, एक बार, और आप यह अभी भी काम करता है देख सकते हैं. और कहा कि आप घटनाओं बनाने के लिए है. 

हम प्रयोग कर सकते हैं कि अलग अलग घटनाओं की एक बहुत हैं. मैं अभी कैसे ये काम आप को दिखाने के लिए कंसोल का उपयोग करने के लिए वापस स्विच करने के लिए जा रहा हूँ. इनमें से प्रत्येक के लिए आईडी प्रत्येक बॉक्स के अनुरूप हैं. इस बॉक्स को क्लिक आईडी है तो, यह एक कुंजी आईडी है, और यह एक माउस आईडी है. , बजाय हर बार इसे बाहर टाइपिंग, एक और बात इस कार्रवाई समारोह है कि वहाँ है मैं वास्तव में आगे चला गया और यहां इस कार्रवाई समारोह नीचे परिभाषित किया. यह hideTheBox समारोह के रूप में एक ही बात करता है. यह इस बॉक्स और fades इसे बाहर या अंदर fades यह या तो हो जाता है हम यहाँ इसका इस्तेमाल करने में सक्षम हैं और यही कारण है. हम इस पर क्लिक आईडी पर क्लिक करें तो, अगर हम बॉक्स गायब हो जाते हैं या फिर से प्रकट करना चाहते हैं. यह हम पिछले स्लाइड में था कि बटन के रूप में एक ही बात है. हम कहते हैं कि अब के बाद, हम इस पर क्लिक कर सकते हैं और बॉक्स गायब हो जाएगा तो फिर उस पर क्लिक करें और बॉक्स से बाहर निकलना होगा. यह बहुत आसान है. डबल क्लिक करें, एक ही बात करता है सिवाय इसके कि यह एक डबल क्लिक करें की आवश्यकता है. आप एक बार उस पर क्लिक करें और फिर उस पर क्लिक करते हैं तो कुछ नहीं, कुछ नहीं होगा लेकिन आप डबल जल्दी से क्लिक करते हैं, यह गायब हो जाएगा. आप डबल फिर से क्लिक करते हैं, यह वापस आ जाएगा. तो यह है कि बहुत आसान है. कुंजीपटल इनपुट अजीब तरह का है, मुझे लगता है कि यह वास्तव में इस उदाहरण में काम करता है नहीं लगता क्योंकि नीचे कुंजी, कुंजी और कुंजी प्रेस और अन्य महत्वपूर्ण कार्यों आप करने के लिए बाध्य क्या तत्व कोई फर्क नहीं सक्रिय करें. उदाहरण के लिए, मैं शरीर या पूरी तरह से कुछ और करने के लिए नीचे कुंजी बाध्य नहीं है, भले ही तो यह अभी भी कोई फर्क नहीं पड़ता सक्रिय होता है - यह विशिष्ट नहीं है. मैं इस पर क्लिक करना होगा और कुछ भी गायब करने के लिए एक कुंजी प्रेस नहीं है. यह भले ही मैं अंदर वर्तमान में क्या कर रहा हूँ तत्व सक्रिय हो जाएगा तो क्या ये वास्तव में इस उदाहरण में काम नहीं करते क्योंकि यह कुंजीपटल इनपुट div में इनपुट में प्रवेश के रूप में मुझे पहचान नहीं है. 

लेकिन आप माउस कार्यों पर नजर डालें तो, पहले एक मंडराना है, और यह सीएसएस का उपयोग कर इस का कुछ कर सकते हैं. आप सीएसएस का उपयोग आप कुछ पर जाएँ, तो आप इतना है कि यह बना सकते हैं फिर अपनी शैली में परिवर्तन. लेकिन सर्वर का उपयोग कर आप के रूप में अच्छी तरह से अन्य चीजों की शैली को बदल सकते हैं. तो, उदाहरण के लिए, हम इस div पर जाएँ अगर कार्रवाई कॉल करने के लिए जा रहे हैं. यही कारण है कि हम इसे पर जाएँ, तो बॉक्स गायब हो जाएगा मतलब है. हम से दूर ले जाते हैं, बॉक्स से बाहर निकलना होगा. हम यह कहते हैं और इसे पर जाएँ, तो बॉक्स, गायब है और जैसे ही हम दूर ले जाने के रूप में, यह वापस आता है. हम माउस आईडी पर इस मंडराना फ़ंक्शन को कॉल करते हैं, हम बॉक्स पर जाएँ तो जो है, तो इस बॉक्स से मेल खाती है, फिर बॉक्स वास्तव में गायब हो जाएगा - यह अभी कायरता जा रहा है, लेकिन है - हम से दूर ले जाते हैं, इसे फिर से बाहर निकलना होगा. अभी यह किसी कारण के लिए पीछे की ओर है. माउस दर्ज करें और माउस चाल कार्यों कुछ इसी तरह की है, लेकिन थोड़ा अलग हैं. माउस माउस के रूप में उम्मीद की बॉक्स, में प्रवेश करती है जब केवल सक्रिय है दर्ज करें. आप इसे में ले जाते हैं तो, यह गायब हो जाएगा. आप दूर ले जाते हैं लेकिन यह फिर से प्रकट नहीं होगा, तुम वापस आने के लिए इसके लिए इसे पर वापस जाने के लिए होगा. सक्रिय करेंगे जो माउस चाल समारोह, वहाँ भी माउस बॉक्स में भी मौजूद है जब भी. तो यह बस में और बाहर लुप्त होती जा रही पर रखेंगे. और यह वास्तव में लॉगिंग है - इसे बाहर की यह बस में लुप्त होती है की तरह लगता है और, लेकिन यह वास्तव में, यह एक बहुत अधिक कार्रवाई लॉगिंग है तो आप दूर ले जाते हैं जब यह सिर्फ यह उनमें से एक हजार की तरह लॉग क्योंकि जा रहा रखेंगे. शायद नहीं एक हजार. शायद पाँच. यह है कि अधिक से अधिक लॉग. बिंदु, सभी माउस कार्रवाई है, उनमें से एक बहुत कुछ कर रहे हैं. , आप अन्य लोगों पर पढ़ सकते हैं, लेकिन वे सब थोड़ा अलग हैं आप की जरूरत है जो भी एक और आप चुन सकते हैं विशिष्ट जो भी उद्देश्य के लिए आप क्या करने की कोशिश कर रहे हैं. 

मैं इस बारे में बात करने जा रहा हूँ अगले बात AJAX है. AJAX, मुझे लगता है कि हम इस साल बहुत गहराई के रूप में जावास्क्रिप्ट को कवर नहीं था पता तो मैं बस एक मिनट के लिए सामान्य रूप में AJAX के बारे में बात करने जा रहा हूँ. AJAX अतुल्यकालिक जावास्क्रिप्ट और XML के लिए खड़ा है. यह मूल रूप से, उदाहरण के लिए, यदि आप फेसबुक पर हैं और जब यह, आप एक अधिसूचना धक्का है AJAX के अपने वेब ब्राउज़र पर चल रहा है क्योंकि वह है. कृपया अपने वेब ब्राउज़र वास्तव सेकंड के हर जोड़े उन्हें पूछ, फेसबुक के सर्वर के लिए जा रहा, आप मेरे लिए कुछ भी नया नहीं है तुम्हारे पास और फिर यह तुम्हारे पास वापस आता है. यह आपको एक सर्वर के लिए अनुरोध भेजने के लिए अनुमति देता है वास्तव में पृष्ठ लोड करने के लिए बिना. तो सामान्य रूप से, आप बस PHP और एक डेटाबेस का उपयोग कर रहे हैं, आप सर्वर से नई जानकारी प्राप्त कर सकते हैं इससे पहले कि आप पृष्ठ ताज़ा करने के लिए है. लेकिन AJAX का उपयोग कर, आप लगातार कि नई जानकारी के लिए खींच सकते हैं आप एक बटन या ऐसा कुछ भी क्लिक करने पर या इसके लिए खींच. , हमें पृष्ठ reloading बिना अनुरोध भेजने के लिए अनुमति देता है यह तो और हम प्राप्त या अनुरोध पोस्ट या तो उपयोग कर सकते हैं. 

अनुरोधों आप को अगर Google.com के लिए, उदाहरण के लिए, हो जाओ और क्ष = परीक्षण करते हैं. यही कारण है कि उन्हें एक क्वेरी परीक्षा दे रही है. यह यूआरएल ही में उन मानकों में गुजर रहा है और क्योंकि वह एक अनुरोध प्राप्त है. आप पोस्ट के माध्यम से उन्हें भेज रहे हैं के रूप में एक पोस्ट अनुरोध है. आप एक पत्र में डाल दिया और उन्हें इसे बंद जहाज की तरह यह है लेकिन वे वास्तव में सामग्री नहीं दिख रहा है. वे URL में दिखाई नहीं दे रहे हैं. आप सीधे में नहीं लिख सकते हैं, तो आप लगभग चुपके से भेज दिया है. यह एक पोस्ट में है. लेकिन सर्वर का उपयोग कर, तुम जाओ और अनुरोध पोस्ट कर सकते हैं और अधिक आसानी से आप सामान्य रूप से सिर्फ सादा जावास्क्रिप्ट का उपयोग कर सकता से. आप प्राप्त अनुरोधों का उपयोग कर एपीआई क्वेरी कर सकते हैं, और आप भी प्रवेश जानकारी के लिए जाँच कर सकते हैं. अगले पृष्ठ पर, मैं जो "दोपहर के भोजन के लिए क्या है?" पूछता है, यह बनाया हार्वर्ड भोजन एपीआई का उपयोग कर रहा है, तो वह ऊपर खींच देते हैं. यह आपको एक एपीआई के लिए एक अनुरोध प्राप्त करने के लिए jQuery का उपयोग कर सकते हैं की सिर्फ एक उदाहरण है और इसे से वापस जानकारी मिलती है. तो हम आज के लिए मेनू देखना चाहते हैं और हम दोपहर के भोजन के लिए क्या देखना चाहते हैं. यहाँ jQuery में एक अनुरोध प्राप्त बनाने के लिए यूआरएल है. आप $ का उपयोग करें. समारोह मिलता है. पहला तर्क आप क्वेरी कर रहे हैं तो क्या वास्तव में, यूआरएल है. फिर अगले तर्क अनुरोध प्राप्त पूरा हो गया है जब निष्पादित करता है कि एक समारोह है. तो अगर आप सर्वर से कुछ अनुरोध भेजने के लिए इसे वापस आने के लिए इंतजार. यह वापस आता है, जब आप सर्वर से वापस आ गया है कि डेटा के साथ कुछ कार्रवाई करने के लिए जा रहे हैं. के आगे जाना है और इस के साथ ही कोड कर दें. मैं उद्देश्य पर, या तो यह कोड नहीं था. यहाँ TODO है. सबसे पहले, की घटना बाइंडिंग का उपयोग करते हैं इस बटन दबाया जाता है, जब हम एक अनुरोध प्राप्त विदा सकें. और कहा कि कुछ डेटा के साथ अनुरोध रिटर्न मिलता है, हम इस भोजन की जानकारी आईडी div में यह लिखने जा रहे हैं. सबसे पहले, चलो खाना बटन आईडी का चयन करते हैं. क्लिक करते हैं, तो हम यह कुछ करना चाहते हैं. चलो बस से पहले के रूप में, यह एक गुमनाम fuction बनाने. उन घुंघराले ब्रेसिज़ लपेट कर सकते हैं, और इस बटन दबाया जाता है, जब हम एक अनुरोध प्राप्त भेजना चाहते हैं दोपहर के भोजन के लिए है कि क्या जांच करने के लिए. करना है कि, हम सिर्फ $ में टाइप कर सकते हैं. मिलता है. यह डॉलर के हस्ताक्षर का उपयोग कर, एक jQuery समारोह है. यह तर्क की एक जोड़ी लेता है. पहले एक यूआरएल है दूसरा एक कॉलबैक समारोह, कहा जाता है कि समारोह है अनुरोध है कि वास्तव में देता है. बस पहले यूआरएल का निर्माण करते हैं. हम दाऊद ने लिखा है कि एपीआई से इसे प्राप्त कर सकते हैं. यहां जा रहे हैं, हम यह food.cs50.net/api/1.3/menus है कि देख सकते हैं और फिर आप बस आप चाहते हैं कि मापदंडों के नामों में से गुजरती हैं. तो पैरामीटर मान 1 1 है. यह मानक तारीख की तरह लग रहा है, आज की तारीख, चूक शुरू आप कुछ भी, और भी समाप्ति तिथि चूक दर्ज नहीं करते हैं आज तक आप कुछ भी दर्ज नहीं करते हैं. यही कारण है कि हम क्या चाहते हैं. हम सिर्फ आज के लिए जानकारी प्राप्त करना चाहते हैं. 

हम प्रारूप JSON में होना चाहता हूँ. वह सिर्फ मनमाना है, क्या आप चाहते हैं कि किसी भी रूप में उपयोग कर सकते हैं. आप CSV का उपयोग कर सकते हैं, लेकिन JSON जावास्क्रिप्ट वस्तु संकेतन है. जावास्क्रिप्ट इसका क्या मतलब समझने के लिए यह बहुत आसान है और हम और अधिक आसानी से इस तरह से इसे बाहर प्रिंट कर सकते हैं. तो चलो JSON में यह अनुरोध करते हैं, और चलो अनुरोध दोपहर का भोजन. = दोपहर के भोजन के भोजन तो. बस उस URL लिखने के लिए, हम यहाँ वापस जाओ. मेनू है. पहली पैरामीटर उत्पादन = JSON है क्योंकि कि हम क्या चाहते हैं, और आप एक साथ मापदंडों को अलग 'और.' दूसरा पैरामीटर है - मुझे याद नहीं है. भोजन. और हम भोजन = दोपहर के भोजन के लिए चाहते हैं. आप इसे अपने ब्राउज़र में टाइपिंग और इसे करने के लिए जा रहा द्वारा इस यूआरएल परीक्षण कर सकते हैं. यह आपको कुछ उत्पादन दे देंगे. यह सिर्फ दोपहर के भोजन के लिए है कि सामान का एक गुच्छा है. यह इस बदसूरत प्रारूप में है. हम एक बेहतर स्वरूप में हमारे पृष्ठ पर मुद्रित करना चाहते हैं. URL सही है तो, अब हम सिर्फ एक समारोह लिखने की जरूरत अनुरोध सफल है जब वापस बुलाने के लिए. इस समारोह वास्तव में एक बहस का समय लगेगा. यह डेटा हो जाएगा. डेटा अनुरोध प्राप्त किया जाता है के बाद अनुरोध प्राप्त से वापस आता है. हम घुंघराले ब्रेसिज़ कर सकते हैं, यहां हम गुमनाम समारोह लिखने कि हम वापस जानकारी मिलती है कि डेटा का उपयोग कर कार्यान्वित. डेटा तो, हम इस URL में टाइप करते हैं, इस डेटा की तरह लग रहा है क्या है. यह इस विशाल स्ट्रिंग होने जा रहा है. लेकिन अच्छी बात है, जावास्क्रिप्ट JSON.parse समारोह का उपयोग करके यह पार्स कर सकते हैं. तो चलो पार्स डेटा नामक एक नया चर बना सकते हैं. और पार्स डेटा वस्तुओं की एक सरणी है. प्रत्येक वस्तु के रूप में ऐसी जानकारी शामिल हैं - ठीक है, चलो एक नज़र रखना. यह एक तिथि, एक भोजन, वर्ग, नुस्खा, यह सब अन्य सामान है. तो चलो बस हर एक के लिए नाम बाहर मुद्रित करते हैं. हम इसे से वापस मिलता है कि सामान की पूरी सरणी से पुनरावृति चलो, और बस हर एक को बाहर प्रिंट - हर एक के नाम पर बाहर प्रिंट. इस पाश के लिए एक है. 

जावास्क्रिप्ट, आप एक सरणी पर एक चर और पाश बना सकते हैं जहां यह सहायक वाक्यविन्यास है और var मैं, बजाय var i = 0 करने के लिए होने की तो, बस इटरेटर है मैं लंबाई से भी कम था, मैं + +, आप सिर्फ पार्स डेटा में मैं var कर सकते हैं. इस उदाहरण में, पार्स डेटा (मैं) वर्तमान तत्व के अनुरूप होगा सरणी, वास्तविक वस्तु. और हम इसे का नाम बाहर निकलना चाहते हैं. तो बस क्या नाम हैं. और आखिरी बात, हम फिर से कुछ jQuery के लिए जा रहे हैं है. दरअसल div, वर्तमान में खाली है कि इस भोजन की जानकारी div में जोड़ें. तो चलो का चयन दो कि. हम jQuery का चयन करें और भोजन की जानकारी div आईडी, या भोजन की जानकारी आईडी का उपयोग करेंगे, माफ करना. हम यह करने के लिए संलग्न करने के लिए चाहते हैं. हम परीक्षण किया है, उदाहरण के लिए, यह सिर्फ यह हर समय ऊपर लिख होगा. तो हम सिर्फ इस संलग्न कर सकते हैं. सरणी में मौजूदा तत्व है, हम इसके बारे में नाम बाहर निकलना होगा और हम भोजन की जानकारी आईडी div के अंत तक यह संलग्न करेंगे. और फिर बस, यह क्लीनर देखो बनाने के लिए यह एक लाइन पर सब नहीं है तो हम भी एक पंक्ति विराम जोड़ देंगे. सब कुछ ठीकठाक रहा तो, अगर वह अच्छा होना चाहिए - सब से पहले, यह बटन क्लिक किया जाता है, जब भी यह इस यूआरएल के लिए एक अनुरोध प्राप्त विदा करेंगे. डेटा से वापस आता है, यह, यह पार्स हूँ JSON के, उस डेटा का प्रतिनिधित्व पूरे सरणी पर पाश, में बारी और फिर नाम और एक पंक्ति विराम जोड़ पहले से खाली था जो इस भोजन की जानकारी आईडी में हर पंक्ति के लिए. तो आप इस पेज को वापस जा रहे हैं, हम ताज़ा कर देंगे, क्लिक करें, पता - यह काम नहीं करता. यह दुर्भाग्यपूर्ण है. डिबगिंग अंदर आता है और यह है Index.html, लाइन 1. यह तो इंटरेस्टिंग है. ठीक है, ठीक है, यह कर समय बिताने के बजाय, मैं अभी जा रहा हूँ मुझे लगता है कि कुछ किया फ़ाइल खींच, जो पूरा संस्करण है. मैं अंतर क्या है यकीन नहीं है, लेकिन हम अभी इस जगह को खोल सकते हैं. और हम AJAX के लिए जाना है, और यह सही ढंग से काम करना चाहिए. यही कारण है, दोपहर के भोजन के लिए हुई थी क्या है कोई विशेष क्रम में, यह चारों ओर उद्धरण के साथ है, तो यह सुंदर नहीं है. लेकिन, जाहिर है, आप एक अंतिम परियोजना के लिए यह कर रहे थे, आप यह बेहतर लग रहे हो जाएगा. लेकिन यह है कि आप अनुरोध प्राप्त करते हैं कि कैसे सिर्फ एक सरल उदाहरण है. हम वास्तविक कोड को देखो, तो मुझे लग रहा है, मुझे पूरा यकीन है यह अभी भी बहुत ज्यादा एक ही है. ओह, मैं एक स्ट्रिंग के लिए इसे बदलने के लिए भूल गया, यह बात है. नहीं, यह अभी भी काम नहीं कर रहा. भले ही, यहां वास्तविक पूरा कोड है इस तरह दिखना चाहिए के लिए, और यह मैं अभी लागू है के रूप में एक ही बात करता है. आप बटन पर क्लिक करें, यह JSON के स्वचालित रूप से डेटा पार्स करने के लिए प्राप्त करता है. यह इसे से वापस डेटा लेता है और पूरे सरणी के माध्यम से loops और बाहर प्रिंट - दोपहर के भोजन के लिए आज जो कुछ भी है, इसके बारे में नाम, और प्रत्येक पंक्ति के बाद एक पंक्ति विराम जोड़ता है. यही कारण है कि आप प्राप्त कर समारोह का उपयोग कैसे करना है. 

तुम भी मेरे पास समय नहीं था जो, पोस्ट का उपयोग कर सकते हैं इसके लिए एक उदाहरण के ऊपर लिखने के लिए, लेकिन हम प्रलेखन पर देख सकते हैं. आप jquery.post को देखो आप इसे लगभग एक ही बात है कि देख सकते हैं. आप एक यूआरएल है, लेकिन इसके बजाय का उपयोग कर पैरामीटर गुजर की - बस, यूआरएल खुद के लिए स्ट्रिंग में डाल आप इस डेटा चर में पारित करने के लिए है कि एक शब्दकोश, मूल रूप से एक सरणी है कि मूल्यों के नक्शे मापदंडों. तुम्हें पता है कि में पारित, और कहा कि एक पोस्ट का उपयोग करने में उन्हें भेजता है. और एक बार जब आप, तो आप एक सफल समारोह हो सकता है कि है डेटा वापस आता है कि जब कार्यान्वित. अन्यथा, यह वास्तव में एक ही है. तो पोस्ट का उपयोग कर, तुम एक इनपुट फार्म है अगर तुम, उदाहरण के लिए, पोस्ट का उपयोग करने के लिए चाहते हो सकता है आप इस बारे में लोगों को इनपुट पासवर्ड देना, और उन पासवर्ड विदा अपनी पीठ के अंत स्क्रिप्ट के लिए, कि उपयोगकर्ता वैध है या नहीं डेटाबेस में जाँच करने के लिए. आप क्या कर सकते हैं कि सभी सर्वर का उपयोग कर के बजाय सब पर पेज ताज़ा करने के लिए कर रही है. यही कारण है कि मुझे लगता है कि मैं तुम्हें पहले से पता चला है कि ब्लॉग में लागू किया गया है कि कैसे. हम अंत पोर्टल के लिए जाने के लिए और बाहर प्रवेश करें, तो, लॉग आउट काम नहीं करता है बाहर प्रवेश करें. ठीक है, मुझे बस एक नई विंडो में इसे खोल देना. यहाँ वहाँ एक पासवर्ड है, और मैं बिना सोचे समझे कुछ में टाइप करने के लिए जा रहा था. यह काम नहीं करता, लेकिन आप हम नहीं देख सकते हैं कि वास्तव में सब पर पेज ताज़ा करने के लिए है. कोड, आप इसे देखना चाहते हैं, यहां सब उपलब्ध है. कोड तो मैं कुछ समय पिछले साल लिखा था. आप यहाँ देख सकते हैं, हम एक पोस्ट अनुरोध भेज रहे हैं. मैं वापस अंत में login.php नामक एक फ़ाइल है पासवर्ड मान्य है जो की जाँच करता है. हम में पारित मापदंडों के लिए मैप पासवर्ड, कर रहे हैं वर्तमान में इस इनपुट बॉक्स में है कि इनपुट. और डेटा वापस आता है, हम जांच ले. डेटा गलत है, तो हम गलत पासवर्ड का कहना है, यह नीचे स्लाइड और सिर्फ यह है कि उसके बाद गायब करना. अन्यथा, हम व्यवस्थापक पेज लोड. और यह सब JSON का उपयोग किया गया था. इस कोड का कई लाइनों में, तुम अभी वापस अंत करने के लिए डेटा पास कर सकते हैं यह सही है कि जाँच, आप सही तरीके में लॉग जाँच करें कि क्या और वास्तव में सही पृष्ठ पर व्यक्ति पुनः निर्देशित, यह जवाब या में उन्हें प्रवेश दे और वे कोई गलत पासवर्ड था कि उन्हें नहीं बता रही है. इसलिए कि तुम jQuery पोस्ट का इस्तेमाल कर सकते हैं का एक उदाहरण है अपनी पीठ के अंत के लिए एक पोस्ट अनुरोध भेजने के लिए, किसी ने सही ढंग से करने में लॉग इन कर रहा है कि क्या जाँच. 

ठीक है, मैं था सब उदाहरण हैं, और मैं को कवर करना चाहता था सब सामान है कि इतनी. उन jQuery के तुम क्या करने की अनुमति देता है कि बड़ी बातें कर रहे हैं: , तत्वों का चयन डोम हेरफेर का उपयोग कर उन्हें संशोधित, आप प्रभाव जोड़ सकते हैं, कुछ घटनाओं पर चीजों को सक्रिय, और भी बहुत मूल और आसानी से AJAX अनुरोध करते हैं. तो, आने वाले या देखने के लिए धन्यवाद यदि आप कोई प्रश्न हैं, बस मुझे पता है. हाँ? [छात्र] वापस पता चला, जब आप उद्धरण में पोस्ट अनुरोध के बाद JSON का था और मैं था कि बस सोच रहा था क्या. >> हाँ, मैं देख रहा हूँ. सवाल है, उदाहरण में मैं अभी पता चला है, कि था आसपास उद्धरण में शब्द JSON का था - मैं सिर्फ यह फिर से ऊपर खींच लेंगे - पोस्ट समारोह के आसपास. मैं सिर्फ दिखाने के लिए यह ऊपर खींच रहा हूँ. तो यहाँ इस पोस्ट अनुरोध है, और उद्धरण में यह JSON है. वह सिर्फ हम उत्पादन होने की उम्मीद कर रहे हैं परिभाषित करता है. हम उम्मीद डेटा प्रकार के रूप में JSON में पारित, तो अगर , यह एक आवश्यकता नहीं है, लेकिन हम में इसे पारित अगर तो डेटा स्वचालित रूप से JSON के रूप में विश्लेषित किया जाएगा. तो हम उस पर JSON पार्स समारोह कॉल करने के लिए नहीं है यह बस अपने आप हो जाएगा. और आप पोस्ट के लिए प्रलेखन पर एक नज़र लेते हैं, इस डेटा प्रकार चर, सर्वर से उम्मीद डेटा का प्रकार है. गलत हो सकता है कि एक बुद्धिमान अनुमान के लिए यह चूक, ताकि आप इसे खाली छोड़ सकते हैं, लेकिन यह डेटा की बस प्रकार है आप यह JSON या XML है या कुछ और, चाहे प्रयोग कर रहे हैं कि कोडिंग में. 

अन्य प्रश्न? ठीक है. आप किसी भी अन्य प्रश्न हैं, मुझे ईमेल करने के लिए स्वतंत्र महसूस vshekhawat@college.harvard.edu पर, और स्लाइड और कोड बहुत जल्द ही ऑनलाइन उपलब्ध होना चाहिए. अपने अंतिम परियोजनाओं के साथ गुड लक, आप jQuery का उपयोग करने की उम्मीद है. [CS50.TV]