[Powered by Google Translate] [9 सप्ताह जारी] [डेविड जे Malan हार्वर्ड विश्वविद्यालय] [यह CS50 है. - CS50.TV] 

यह CS50 है. यह 9 सप्ताह के अंत है. बहुत बहुत धन्यवाद. अंत में. 9 सप्ताह. मैं समझ गया. आज हम वेब प्रोग्रामिंग के बारे में हमारी बातचीत जारी अंतिम परियोजना की ओर एक आँख के साथ, आप के लिए वेब आधारित कुछ करना नहीं है क्योंकि अंतिम परियोजनाओं के लिए, लेकिन क्योंकि अंतिम परियोजनाओं के लिए या तो CS50 के बाद यह निश्चित रूप से जिस दिशा में जा रहा है आधुनिक सॉफ्टवेयर है. और अभी तक यह वास्तव में एक आसान बात नहीं है. वास्तव में, सबसे मुश्किल चीजों में से एक डिजाइन के पहलू है. 

उदाहरण के लिए, डिजाइन के द्वारा हम वास्तव में उपयोगकर्ता इंटरफ़ेस हो रही मतलब या उपयोगकर्ता अनुभव सही. मैं हिम्मत करना - और हाल ही में एक समस्या सेट से हम जानते हैं जब आप कुछ सॉफ्टवेयर के कुछ टुकड़े के बारे में अपने शिकंजा प्रसारित या हार्डवेयर है कि आप चाहे परिसर या बंद पर infuriates वहाँ वहाँ से बाहर साइटों की एक बहुत कुछ है, वहाँ से बाहर हार्डवेयर का एक बहुत है, उस तरह बेकार है. लेकिन वास्तविकता यह है कि चीजें हैं जो अभी तक उपयोग करने के लिए आसान कर रहे हैं फिर भी शक्तिशाली बना रहे हैं एक बहुत ही मुश्किल चुनौती है. तो आज के लिए मैं यूसुफ और टॉमी मुझे शामिल होने के लिए यहाँ से पूछा इतना है कि हम एक बातचीत कर सकते हैं, दोनों के बारे में डिजाइन और सोचा प्रक्रियाओं के प्रकार क्या अपने सिर के माध्यम से जा रहा शुरू कर देना चाहिए जब आप अपने अंतिम परियोजनाओं के डिजाइन, अपने भविष्य के प्रयासों. और फिर टॉमी की मदद से हम कार्यान्वयन के विवरण में से कुछ में देख लेंगे. आप कागज पर या आपके मन में कैसे कुछ दृष्टि हो सकता है कि तुम तो प्रोग्राम पर अमल कर सकते हैं प्रौद्योगिकी और तकनीक के कुछ का उपयोग करके हम बस के बारे में बात कर शुरू कर दिया है, अर्थात् जावास्क्रिप्ट और भी नए, अर्थात् AJAX अतुल्यकालिक जावास्क्रिप्ट कुछ. यह आप सभी को और अधिक एक उपयोगकर्ता इंटरफ़ेस के गतिशील बनाने के लिए अनुमति देता है उत्तरोत्तर अधिक से अधिक एक सर्वर से डेटा दिलकश द्वारा. तो हम उन के टुकड़े की कुछ आज के रूप में अच्छी तरह से देखेंगे. एक अलग रूप में, अगर आप कंप्यूटर विज्ञान के क्षेत्र में ध्यान केंद्रित करने में रुचि रखते हैं या कंप्यूटर विज्ञान में minoring पता है, कि दोपहर में इस शुक्रवार मैक्सवेल डॉर्किन 221 में एक पिज्जा घटना होगी आप थोड़ा और अधिक जहां कंप्यूटर विज्ञान के बारे में सीख सकते हैं. दरवाजा बाहर अपने रास्ते पर आज आप हार्वर्ड में सीएस एक अनौपचारिक गाइड लेने में सक्षम हो जाएगा. हम कमर ऊंचाई पर बाहर कचरे के डिब्बे पर डाल देता हूँ इतना है कि यदि आप इस हड़पने और सीएस के बारे में थोड़ा और अधिक जानने के लिए करना चाहते हैं, कि आप के लिए हो सकता है के रूप में यह 0 सप्ताह में किया गया होगा. इसके अलावा, अगर आप हमें CS50 दोपहर के भोजन के लिए इस शुक्रवार 1:15 में शामिल होने के लिए करना चाहते हैं, सिर के लिए cs50.net/lunch. आगे की हलचल के बिना, मैं आप शिक्षण साथी यूसुफ Ong दे. हाय. [वाहवाही] धन्यवाद. यहाँ एक वर्ग CS179 बुलाया में पहली बार मैं डिजाइन के बारे में सीखा था. 

समय पर प्रोफेसर हमें एक और प्रोफेसर के बारे में कहानी को बताया जो एक होटल में गया था और faucets का इस्तेमाल किया. किसी ने मुझे बता सकते हैं जो बाएँ पर 2 knobs और सही नहीं है? [छात्र] गर्म और ठंडे. >> गरम और ठंडे. अच्छा है. क्या आप सामान्य रूप से उम्मीद है, है ना? नल का उपयोग करने के बाद यह प्रोफेसर एक शॉवर ले जाना चाहता है, और वह इस का उपयोग करने के लिए आय. उन्होंने छोड़ दिया सोचता है और सही पक्ष गर्म और ठंडे के लिए कर रहे हैं, है ना? लेकिन किसी ने मुझे इन वास्तव में क्या बता सकते हैं? कोई हाथ? [अश्राव्य छात्र प्रतिक्रिया] >> एक सुझाव है? [अश्राव्य छात्र प्रतिक्रिया] >> तापमान? उनमें से एक तो तापमान और अन्य नियंत्रण नियंत्रण? >> [छात्र] पानी के दबाव. पानी के दबाव. अच्छा है. यह प्रोफेसर इस में चलता है और, यह सोच कर वे गर्म और ठंडे नियंत्रित कर रहे हैं, सही एक है, जो वह सोचता है कि गर्म, सभी तरह के लिए है बदल जाता है क्योंकि वह एक गर्म स्नान ले जाना चाहता है. खैर, ये वास्तव में से मेल नहीं खाती है, तो वह यह बहुत मजेदार अनुभव नहीं हो जाता है एक ठंडा स्नान में किया जा रहा है, और हम सभी जानते हैं कि क्या ऐसा लगता है. यह एक डिजाइन दोष का एक उदाहरण है. मैं क्या मतलब है कि नल से उसकी अपेक्षा है मैच क्या बौछार से बाहर आया नहीं, जो उसके लिए दुर्भाग्यपूर्ण की तरह है. तो यह एक डिजाइन दोष का एक उदाहरण है कि वास्तविक जीवन में होता है. लेकिन हम अन्य लोगों के सभी प्रकार के रूप में अच्छी तरह से देखते हैं. हम शायद MBTA प्रणाली के प्रशंसक नहीं हैं. यह लंदन में एक मेट्रो प्रणाली वास्तव में, जो कहते हैं, "इस बटन का उपयोग में नहीं है." क्यों है यह भी वहाँ पर? हम भी क्यों परवाह करूँ? जब मैं एक बच्चा था, तकनीक प्रेमी एक घर में जा रहा है, जब भी कंप्यूटर दुर्घटना होगा, मेरी माँ ने मुझे करने के लिए आ जाएगा, मुझे इस स्क्रीन दिखा रहा है और मुझसे पूछ क्या हुआ. 

यहां तक ​​कि मैं नहीं जानता कि यह क्या मतलब है. [हँसी] क्या? [हँसी] कभी कभी हम सॉफ्टवेयर डेवलपर्स की तरह महसूस कर रहे हैं बस trolling हमें. के रूप में हम उपयोगकर्ताओं की तरह कर रहे हैं, "क्या हो रहा है कोई हमें बता सकते हैं?" डिजाइन का एक मुद्दा यह सब नीचे आता है. डिजाइन, के रूप में हम देख सकते हैं, विशुद्ध रूप से सौंदर्यशास्त्र के बारे में नहीं है, यह कैसे चीजों को देखने के बारे में नहीं है. हम यहाँ देखते हैं कि यहाँ पर पॉप - अप इस छोटे से वास्तव में बहुत अच्छा लग रहा है. यह पृष्ठभूमि में एक बूंद छाया है, यह सीमा radiuses पर जा रहा है. यह बहुत की तरह है. यह वास्तव में अच्छी तरह से है क्योंकि यह बहुत उपयोगकर्ता के अनुकूल नहीं है नहीं बनाया गया है. कि पॉप अप कम है कि ऊपर आता है वास्तव में मुझे किसी भी जानकारी नहीं दे करता है के बारे में क्या हो रहा है, यह मुझे उपयोगकर्ता के रूप में कुछ भी नहीं बता करता है कि कैसे त्रुटि से उबरने के बारे में. हम चीजें हैं जो डिजाइन नहीं है के बारे में सोचना चाहते हैं. सबसे पहले, यह सौंदर्यशास्त्र नहीं है. यह भी अनावश्यक कार्यक्षमता की टन के साथ भराई है अपने app नहीं. यदि आप एक थाई रेस्तरां कर रहे हैं, तो आप शायद एक ही समय में एक दंत चिकित्सक होना नहीं करना चाहती. और फेसबुक सवालों के साथ, कई लोगों को यह नहीं है कि का इस्तेमाल किया और यह वास्तव में क्या वे का निर्माण किया गया के मूल में नहीं था. और इसलिए यह अच्छा है के बारे में बातें की मात्रा बहुत ज्यादा लगता है नहीं कि आप अपने आवेदन लेकिन गुणवत्ता डाल रहे हैं और आपको लगता है कि उपयोगकर्ता अनुभव कैसे बेहतर बना रहे हैं द्वारा वास्तव में क्या आप पहले से ही है पर सुधार. 

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

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

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

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

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

ये वास्तव में कम लटका फल के सभी प्रकार के कर रहे हैं कि कोई है जो Craigslist लागू कर रहा है वास्तव में उनके विशेष उपयोगकर्ता के लिए एक बहुत बेहतर वेबसाइट पर अनुभव करने के लिए कर सकते हैं. ठीक है. पर्याप्त बुरा वेबसाइटों के बारे में बात कर रहे हैं. फेसबुक के बारे में बात करते हैं. जब Facebook बाहर आया, और विशेष रूप से Facebook तस्वीरें वहाँ समय है जो वास्तव में एक ही बातें कर सकता है पर अन्य सेवाओं के बहुत सारे थे. वे एल्बमों में अपनी तस्वीरों का आयोजन कर सकता है. आप क्या कर सकता है आप उन्हें सेट में के रूप में अच्छी तरह से व्यवस्थित कर सकता है. आप उन्हें तिथि से व्यवस्थित कर सकते हैं. आप इन सभी विशेष बातें कर सकता है. लेकिन किसी को भी पता नहीं है क्या Facebook तस्वीरें इसे जारी किया गया था उस समय विस्फोट किया? हां. >> [छात्र] टैग. >> टैग. बिल्कुल सही. हम यहाँ पर मिलो, जो कि CS50 bandana के साथ हमारे कुत्ते शुभंकर है. आप देख सकते हैं कि हम बीच में इस टैगिंग की सुविधा है. और क्या एक प्रयोज्य दृष्टि से Facebook तस्वीरें इतनी दिलचस्प बना दिया यह है कि यह वास्तव में इस के माध्यम से लोगों को उनके फ़ोटो में अपने मित्रों को शामिल करने की अनुमति दी. Facebook के लिए, के बाद से अपनी वेबसाइट विशेष रूप से सामाजिक है, यह सामाजिक वातावरण के इस प्रकार के निर्माण के बारे में है. फ़ोटो का अनुभव एक बहुत अधिक सुधार क्योंकि वे वास्तव में कह शुरू कर सकता है, "इन लोगों के बीच कनेक्शन हैं, और इन लोगों के बारे में आप वास्तव में के बारे में परवाह तस्वीरें हैं. " इसे का कुछ भाग भी तरह अहंकार है. लोगों को तस्वीरें और इस तरह की बातों में चिह्नित किया जा पसंद है. हालांकि यह एक अच्छा मानव विशेषता जरूरी नहीं है, एक ही समय में यह अच्छा डिजाइन निर्णय पर आधारित है क्योंकि लोगों को वास्तव में इस तरह की चीजों के बारे में परवाह है. तो यह है कि Facebook तस्वीरें है. 

लेकिन फेसबुक के अधिक आम तौर पर बात करते हैं. मुझे यकीन है कि यहाँ के लोग बहुत फेसबुक के बारे में राय है, दोनों अच्छे डिजाइन फैसले और बुरा डिजाइन निर्णय. तो चलो उतारना या खुश हो. आओ. मैं जानता हूँ कि आप के सभी Facebook का उपयोग. किसी को बुरा कहने के लिए कुछ या कुछ अच्छा करने के लिए इस बारे में कहना है. हां. समाचार फ़ीड में [छात्र] वहाँ चीज़ें मैं वास्तव में बारे में परवाह नहीं की एक बहुत कुछ है. समाचार फ़ीड बातें आप के बारे में परवाह नहीं सकता था की एक बहुत कुछ दिखा. आप फेसबुक पर दोस्त तुम जो 2 या 3 साल के लिए नहीं मिले हैं और आप अपनी खबर परिणामों को अपने समाचार फ़ीड में popping देख और तुम सच में इसके बारे में परवाह नहीं है. Facebook वास्तव में एक के लिए यह बेहतर बनाने का प्रयास किया है, और वे वास्तव में देर के रूप में समाचार फ़ीड के शीर्ष के लिए प्रासंगिक परिणाम धक्का करने की कोशिश की है ताकि आप वास्तव में दोस्त हैं जो आप या अपने करीबी दोस्तों के लिए प्रासंगिक हैं चीजें देखते हैं. और कुछ? हां. [अश्राव्य छात्र प्रतिक्रिया] >> आपको लगता है कि फिर से कह सकते हैं? [छात्र] विज्ञापन अपेक्षाकृत विनीत हैं. क्या अर्थ? >> [अश्राव्य छात्र प्रतिक्रिया] वे बैनर की तरह स्क्रीन पर प्रकाश नहीं है,. ठीक है. यह अच्छा है. यदि आप 90 के दशक से इंटरनेट याद - >> [Malan] मैं वहां गया था. >> वह वहाँ था. [हँसी] आप चमकती GIFs पृष्ठभूमि, sparkly बातें याद कर सकते हैं, GeoCities चीजों की शैली की तरह. यह वास्तव में एक अच्छा डिजाइन का एक उदाहरण नहीं है क्योंकि यह वास्तव में सामग्री से ध्यान भंग है. येल कला उनकी पृष्ठभूमि के रूप में एनिमेटेड GIFs का प्रयोग किया जाता है वेबसाइट और आप पृष्ठ पर कुछ भी नहीं पढ़ सकता है, लेकिन मुझे लगता है कि किसी को वास्तव में उनसे बात की है और अब यह एक अलग सा है. [Malan] अब यह ज्यादा बेहतर है. >> अब यह ज्यादा बेहतर है, जैसा कि आप देख सकते हैं. >> [Malan] ओह, हाँ. बस महान, बस - हाँ. ठीक है. 

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

वे एक बहुत बेहतर है, इसके बारे में मिल गया है हाल ही में, लेकिन यह मामला जब भी आप को देखकर तस्वीरों से अपने मित्रों को रोकने के लिए चाहते थे कि, आप की तरह किया जा रहा है की एक बहुत जटिल प्रक्रिया 5 कदम के माध्यम से जाना होगा, मुझे इस लिंक पर क्लिक करें, अब मुझे फिर से क्लिक करें, मुझे फिर से क्लिक करें, मुझे निर्दिष्ट जो लोग मेरी तस्वीरें नहीं देख सकते हैं. वह फेसबुक के भाग पर विशेष रूप से अच्छा नहीं है क्योंकि वास्तव में उपयोगकर्ता के अनुभव के बारे में इतना उन्हें स्वतंत्रता दे रहा है नियंत्रित करने के लिए लोग क्या देख सकते हैं. हम इस उपयोगकर्ता नियंत्रण और स्वतंत्रता कहते हैं. यदि आप नहीं दे रहे हैं कि अपने उपयोगकर्ताओं एक तरीका है कि कुशल और सहज है, तो आपके उपयोगकर्ता अनुभव है कि वास्तव में महान बिल्कुल नहीं है.  तुम लोगों को फेसबुक के बारे में कुछ भी कहना चाहेंगे? मैं यह कैसे बंद बारी है? [Ong] आप इस बंद बारी नहीं है, और है कि फेसबुक के हिस्से पर एक विशाल प्रयोज्य दोष है. यह फीचर - मैं वास्तव में कल इसे में देखा - यह भी है कि तुम यह नहीं कर सकता है या इसे कहीं दफन है बहुत, बहुत गहरी फेसबुक के recesses में क्योंकि मैं समझ नहीं कैसे इस कार्यशीलता को निष्क्रिय करने के लिए सब पर कर सकते हैं. Malan [] लेकिन कभी कभी इन निर्णय स्पष्ट नहीं कर रहे हैं क्योंकि आप लोग हमें दिया है CS50 विभिन्न आवेदनों पर उपयोगी प्रतिक्रिया का एक बहुत और वेबसाइटों है कि इस पाठ्यक्रम का उपयोग करता है. हम इन अनुरोधों और सुझावों के सभी लागू नहीं किया है. 

उस के भाग के इतने सारे अनुरोध प्राप्त करने के लिए है कि यह समय के एक समारोह है, लेकिन कभी कभी हम सिर्फ एक सचेत निर्णय की तरह बनाने के लिए, "आप सुझाव के लिए धन्यवाद, लेकिन हम इससे सहमत नहीं है." तो आप वास्तव में कैसे तय है कि आप क्या करना चाहिए अगर अपने उपयोगकर्ताओं को लगता है कि आप कुछ करना चाहिए यहां तक ​​कि अगर आप जरूरी नहीं करते हैं? यह वास्तव में अपने उपयोगकर्ताओं को क्या कहना है सुनने के बीच एक अच्छा संतुलन है और वास्तव में लाइन के कुछ प्रकार जहाँ तुम कहते हो, "हम इन उपयोगकर्ताओं को क्या कहते हैं नहीं जा रहे हैं." और विशेष रूप में, मुझे लगता है कि वहाँ हेनरी फोर्ड द्वारा एक कहावत है कि इस को बहुत अच्छी तरह राशियाँ था. "अगर मैं लोगों से पूछा था कि वे क्या चाहते थे, उन्होंने कहा कि वे तेजी से घोड़ों चाहता होगा." किसी को चिढ़ाने के अलावा है कि बोली वास्तव में क्या मतलब है की तरह कर सकते हैं? ऐसा नहीं है कि उपयोगकर्ताओं को पता है कि वे क्या चाहते हैं, लेकिन इसे और अधिक है कि - [छात्र] वे नहीं जानते कि क्या हो सकता है. भाग में वे नहीं जानते कि क्या हो सकता है. कि थोड़ा अलग छेड़ो. तुम क्या मतलब है? [अश्राव्य छात्र प्रतिक्रिया] यह अच्छा है. मुझे लगता है कि हम यहाँ कहने की कोशिश कर रहे हैं क्या है कि लोगों को पता है कि वे क्या चाहते हैं. वे तेजी से घोड़ों चाहता हूँ. क्या वे वास्तव में चाहते हैं तेजी से स्थानांतरित करने की क्षमता है, लेकिन वे वास्तव माध्यम है जिसके द्वारा प्राप्त करने के लिए पता नहीं है. जब आप अपने उपयोगकर्ताओं के लिए आते हैं और अपने उपयोगकर्ताओं को आप कुछ बता और वे आपको बता, "हम इन सुविधाओं और इन सुविधाओं और इन सुविधाओं चाहते हैं, आप जरूरी के बारे में सोचना नहीं चाहता, "मुझे आगे जाना है "को लागू करने के लिए और क्या वे स्पष्ट रूप से कहते हैं," लेकिन आप के बारे में सोचना चाहते क्या है, "विचारों की तरह मैं उस से क्या मिल सकता है?" वे वास्तव में क्या चाहते हो? 

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

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

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

आप जो उन विभिन्न UI तंत्र का प्रयोग करेंगे? अगर तुम सिर्फ HTML की राशि पहले पढ़ाया जाता था कि पता और आप जानते हैं कि जानकारी रेडियो बटन, चेक बॉक्स, ड्रॉप - चढ़ाव और इनपुट बॉक्स हैं, अपने स्वाभाविक पसंद तिथियाँ चुनने के लिए क्या किया गया है? [छात्र] इनपुट. >> इनपुट. या शायद यह भी एक तारीखों के सभी के साथ ड्रॉप - डाउन है, है ना? तो इस तरह बाईं ओर अधिक जटिल UI तंत्र है कि आप को लागू कर सकते हैं के साथ, आप इस प्रक्रिया को और अधिक सहज ज्ञान युक्त एक स्लाइडर के साथ कर सकते हैं क्योंकि समय निरंतर है, और लोगों को आमतौर पर यह असतत मात्रा के संदर्भ में नहीं लगता है. सही सभी. आखिरी बात. दस प्रयोज्य heuristics. सभी बातें हम के बारे में बात की शायद एक इन श्रेणियों के अंतर्गत आते हैं. यदि आप इस लिंक है, जो ऑनलाइन साइटों तैनात किया जाएगा करने के लिए जाना है, आप वास्तव में करने में सक्षम हो जाएगा, के रूप में आप अपनी साइट डिजाइन, मन में इन heuristics रखने और अंगूठे के इन नियमों. अपनी परियोजनाओं के लिए, मैं क्या सुझाव है कि आप क्रम में अपने app बेहतर डिजाइन कागज प्रोटोटाइप पहले करना है. जब आप अपने आवेदन के बारे में सोच रहे हैं, बहुत जल्दी स्केच क्या आप की तरह देखने के लिए करना चाहते हैं और सुनिश्चित करें कि सभी बक्से एक तरीका है कि उपयोगकर्ता का उपयोग करने के लिए बहुत सहज है में व्यवस्थित कर रहे हैं और यहां तक ​​कि अपने दोस्तों के लिए इन कागज प्रोटोटाइप दिखाने और फोकस समूहों शुरू. बस 2 या 3 लोगों को एक साथ पाने के लिए और उन्हें पूछने के लिए बस इन कागज प्रोटोटाइप पर नल, और उन्हें नए स्क्रीन दिखाने के लिए देखने के लिए यदि वे वास्तव में समझने के लिए क्या हो रहा है. 

आप क्या करना चाहते हैं उन्हें एक काम दे, कि कार्य को प्रेरित है, और सिर्फ उन्हें app देना और उन्हें इसका इस्तेमाल. से परे है कि निर्देश दे उन्हें नहीं. आप वास्तव में उन्हें एक तरीका है कि आपको देखने में अपने अनुप्रयोग के साथ बातचीत करना चाहते हैं वे यह कैसे उपयोग करें यदि आप उन्हें करने के लिए अगले नहीं खड़े थे. और कहा कि बहुत महत्वपूर्ण है. आप अंतर्दृष्टि के बहुत देने के लिए करने के लिए के रूप में विशेष बातों के आसपास हो रही लोगों में एक तरीका है कि मैं उन्हें इरादा नहीं किया था? वे परदे पर विशेष यूआई तंत्र का उपयोग एक तरह से कि hacky की तरह है? मैं के लिए उन्हें यह है कि जिस तरह से करने के लिए इरादा नहीं था. और एक बार आप उस के साथ कर रहे हैं, तो आप क्या करना चाहते हो? अपने डिजाइन चट्टानों, है ना? आप क्या करना चाहते है कि आप को विकसित करने और फिर से अधिक है कि प्रक्रिया फिर से करना चाहते हैं. तो यह अपने दोस्तों को दिखाने के लिए एक बार आप इसे विकसित किया है, यह परीक्षण, विकास, परीक्षण, विकसित करने, परीक्षण, पुनरावृति, पर और पर और आगे. डिजाइन एक बहुत से इस अर्थ में प्रक्रिया चलने का. आप वास्तव में कुछ निर्माण और फिर इसके बारे में बातें समझ है कि आप पहले का एहसास नहीं था और वापस जाने के लिए और उस से सुधार. अब, विकास के भाग के रूप में, है कि टॉमी क्या तुम्हें दिखाने के ब्रेक के बाद जा रहा है और आप कैसे autocomplete की तरह कुछ को लागू करने में सक्षम हो सकता है एक तरीका है कि काफी सरल है. [Malan] के रूप में टॉमी यहाँ सेट, एक सवाल है तो. जल्द से जल्द वेबसाइटों की एक बहुत - और जब यूसुफ वेबसाइट ने कहा कि 1990 के दशक शैली, यह implementations जहां अगर आप एक शुरुआत के समय का चयन करने के लिए करना चाहता था और एक अंत समय था, सच में, वापस दिन में और यहां तक ​​कि कुछ वेबसाइटों पर आज, जिस तरह से आप इस करते हैं आप एक ड्रॉप डाउन से एक घंटे लेने, आप एक ड्रॉप डाउन, शायद आप AM चुनने से प्रधानमंत्री मिनट लेने, और फिर आपको लगता है कि 3 गुना अधिक करते हैं. और इसलिए 6 क्लिक करता है और शायद कुछ स्क्रॉल के साथ वास्तव में आपके उपयोगकर्ता तिथि और / या इस अर्थ में समय सीमा के कुछ प्रकार प्रदान कर सकते हैं. 

तो निश्चित रूप से suboptimal है और अभी तक इस प्रकार अब तक हम कोई अर्थपूर्ण क्षमताओं देखा है किसी भी भाषा में हम पर देखा है कुछ sexier प्रारंभ समय और समाप्ति के समय के इस स्लाइडर की तरह. लेकिन अगर आप 0 सप्ताह के लिए वापस लगता है कि जब हम खरोंच के बारे में बात की थी, वहाँ भी वहाँ widgets है कि सिर्फ कुछ बातें नहीं थे. तुम सच में सिर्फ loops और शर्तों और इस तरह की तरह इन बुनियादी बातों था. तो बस अब बहुत abstractly सोच, HTML के विवरण के स्वतंत्र की तरह, क्या वास्तव में इस प्रारंभ समय और समाप्ति समय स्लाइडर की तरह कुछ के साथ चल रहा है? जब मैं अपने माउस हिलना और मुझे छोड़ दिया पर उस छोटे से गाजर प्रतीक पर क्लिक करें और खींच शुरू, प्रोग्राम, यह क्या है आप को लागू करने में सक्षम होना चाहते हैं ऐसा करने के लिए? क्या सवाल है, क्या आप बूलियन अभिव्यक्ति करने के पूछने के लिए सक्षम होना चाहते हो? वास्तव में क्या हो रहा है? सैमी? [छात्र] कर्सर की स्थिति कहाँ है? >> अच्छा है. कर्सर की स्थिति कहां है? यह कुछ हम खरोंच में वापस व्यक्त की जरूरत थी, चाहे वह स्थान या भी रंग या इस तरह के आधार पर किया गया था. आप कभी भी सोमवार को ऐसा संक्षेप में याद हो सकता है इन सब बातों के थे घटनाओं बुलाया वेब की दुनिया में, और इसलिए वहाँ onclick और onkeypress तरह बातें और onkeyup और onmouseover और onmouseout. तो एहसास है कि यहां तक ​​कि इन बातों को हम के लिए ले जा रहा है वेब पर दी फेसबुक और Gmail जैसी साइटों, भले ही आप कोई विचार है साथ तुम कैसे संभवतः कि को लागू करने क्योंकि वहाँ की तरह भी व्याख्यान में कुछ भी नहीं है या समस्या 7 सेट, एहसास है कि इन सटीक एक ही बुनियादी बातों के साथ, HTTP और मानकों के साथ और पाने के लिए और पोस्ट, मूल HTML जानकारी है कि हम में देखा है इस प्रकार अब तक के साथ और कार्यक्रमों के तंत्र के साथ एक पल में है कि टॉमी के बारे में परिचय आप खुद को व्यक्त करने के लिए आप की तरह 0 सप्ताह में किया था शुरू कर सकते हैं द्वारा बहुत intuitively खींचने और छोड़ने. 

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

डोम याद सिर्फ इस बड़े पेड़ जहां तत्वों को इस बड़ी पदानुक्रम में जुड़े हुए हैं. जब हम 7 pset में डेटाबेस के साथ काम किया है पहली बातें हम कैसे पता करने की जरूरत है एक डेटाबेस क्वेरी. हम इस बड़े उपयोगकर्ताओं तालिका है, और कभी कभी हम सिर्फ कहना चाहता हूँ, "मैं केवल इन उपयोगकर्ताओं है कि कुछ हालत मैच की कुछ करना चाहते हैं." इसी तरह, जब हम डोम हम यह querying का कुछ तरह की जरूरत है. हम कह के कुछ तरह की जरूरत है, "मैं बटन है कि इस तरह लग के सभी चाहते हैं "या पृष्ठ पर छवियों के सभी." और इन चयनकर्ताओं हमें ऐसा करने की अनुमति है. तो बस एक त्वरित पुनर्कथन. यह पहली बार यहाँ एक # सबमिट करने के लिए, क्या है कि चयन करने के लिए जा रहा है? क्या किसी को याद है? [अश्राव्य छात्र प्रतिक्रिया] >> हाँ, बिल्कुल. इस पृष्ठ है कि प्रस्तुत की एक आईडी पर एक तत्व का चयन करने के लिए जा रहा है. और इतना है कि हैश टैग का कहना है कि इस चयनकर्ता आईडी के साथ काम करने के लिए जा रहा है. कैसे के बारे में 2 एक, इस केन्द्रित, कि क्या चयन करेंगे? हाँ. >> [छात्र] क्लास. वास्तव में. >> अब इस वर्ग द्वारा चयन करने के लिए जा रहा है. यहाँ आईडी और वर्ग के बीच आम तौर पर अंतर है आईडी अद्वितीय होना चाहिए जो भी अंतरिक्ष के भीतर आप खोज रहे हैं. तो अगर आप एक पूरे वेब पेज पर खोज कर रहे थे, आप वास्तव में केवल कि कुछ आईडी के साथ 1 तत्व होना चाहिए, तो इस मामले में प्रस्तुत की. कक्षाओं के साथ, दूसरे हाथ पर, हम एक ही पृष्ठ पर एक से अधिक तत्व हो सकता है एक ही वर्ग के साथ. यह कह रही है, मैं सब कुछ है कि पृष्ठ पर केंद्रित है का चयन करने के लिए करना चाहते हैं के लिए उपयोगी हो सकता है के बजाय सिर्फ एक बात. 

और अंत में, यह पिछले एक थोड़ा और अधिक जटिल है, लेकिन यह क्या डोम से चयन करने के लिए जा रहा है? [अश्राव्य छात्र प्रतिक्रिया] >> वह क्या है? [छात्र] कुछ भी है कि एक टैग है. >> हम 2 भागों यहाँ है. दूसरे भाग के लिए कहते हैं कि मैं इनपुट के टैग के साथ इन टैग का चयन करना चाहते हैं जा रहा है, किसी भी तत्व इतना है कि एक इनपुट टैग है. लेकिन मैं सिर्फ जानकारी के सभी चयन नहीं करना चाहते क्योंकि एक submit बटन की तरह कुछ एक निवेश किया जा सकता है और एक पाठ बॉक्स की तरह कुछ एक निवेश किया जा सकता है. तो मैं सिर्फ इतना कह रहा हूँ इन वर्ग कोष्ठक के साथ मैं केवल उन तत्वों का चयन करना चाहते हैं कि पाठ लिखें. कहीं मेरी HTML टैग में मैं एक विशेषता प्रकार कहा जाता है, और उस विशेषता के मूल्य के लिए पाठ हो गया है. तो कैसे इस पहले भाग के बारे में यहाँ? इस चयनकर्ता का पहला शब्द रूप है तो मैं एक अंतरिक्ष और फिर इस इनपुट हिस्सा है. कि क्या है, क्या करता है इसे के सामने के फार्म डाल? यह मूल रूप से हमारे क्वेरी सीमा जा रहा है. यह मामला हो सकता है कि हम पृष्ठ पर कुछ जानकारी है कि एक फार्म की सन्तान नहीं कर रहे हैं. यह करना होगा क्या है यह कहना होगा मैं केवल चाहते हैं इनपुट टैग है कि उन्हें ऊपर कहीं है एक फार्म के कुछ मूल तत्व. और इसलिए इस तरह से हम इन अधिक पदानुक्रमित प्रश्नों कर सकते हैं तो हम सिर्फ एक दिया सब कुछ चयनकर्ता मिलान का चयन करने के लिए नहीं है. हम कुछ और करने के लिए क्वेरी के गुंजाइश सीमा की तरह कर सकते हैं. तो अब है कि हम जानते हैं कि कैसे पेज पर तत्वों का चयन करने के लिए, AJAX के बारे में कुछ बात करते हैं. AJAX एक अभी भी बहुत ट्रेंडी परिचित करा रहा है कि अतुल्यकालिक जावास्क्रिप्ट और XML के लिए खड़ा है. यह सिर्फ इतना होता है कि XML डेटा का प्रतिनिधित्व करने के लिए कुछ करने के लिए एक तरीका है. 

खो लोकप्रियता की है कि हाल ही तरह है, तो AJAX में एक्स हर समय नहीं प्रयोग किया जाता है. असल में, AJAX हमें क्या करने की अनुमति देता है HTTP अनुरोध बनाने के लिए है जावास्क्रिप्ट के संदर्भ से. , जब हम अपने वेब ब्राउज़र में कर रहे हैं और हम पृष्ठों के आसपास नेविगेट कर रहे हैं और हम एक लिंक पर क्लिक करें हमारे ब्राउज़र करने जा रहा है क्या लिंक हम जो कुछ भी क्लिक करने के लिए एक HTTP अनुरोध बनाने के लिए है. लेकिन यह हमेशा आदर्श नहीं है क्योंकि अगर यह मामला है, तो के रूप में दाऊद कह रहा था, हम हमेशा के लिए उपयोगकर्ताओं को एक सबमिट बटन पर क्लिक करें या एक लिंक पर क्लिक करें आदेश में करने के लिए कुछ भी हो सकता है कि एक HTTP अनुरोध शामिल हो रहा है. तो AJAX के साथ हम जावास्क्रिप्ट की ओर से इन अनुरोध कर सकते हैं. इसका मतलब है कि जब उपयोगकर्ता पृष्ठ या कुछ भी होता है के साथ सूचना का आदान प्रदान, हम वास्तव में हमारी वेबसाइट पर कुछ अन्य PHP फ़ाइल के लिए एक कार्यक्रम का अनुरोध कर सकते हैं या कुछ और डेटा पुनः प्राप्त कि फाइल बाहर spits. चलो AJAX का एक उदाहरण पर एक नज़र रखना. यह हमारे CS50 वित्त पेज के साथ जो उम्मीद है कि हम में से कुछ परिचित हैं. यदि हम इस पृष्ठ के HTML को देखो, हम यहाँ देखते हैं कि मैं कुछ चीजें जोड़ दिया है, जिनमें से एक मैं इस फार्म का एक आईडी दिया है. मैं id = "फार्म बोली" कहा है. मैं इस किया है बस, क्योंकि यह करने के लिए यह एक छोटा सा डोम से चयन करने के लिए आसान बनाने के लिए जा रहा है के बाद से मैं सिर्फ एक बहुत ही सरल प्रश्न कर सकते हैं. क्या मैं यहाँ करना चाहता है मैं CS50 वित्त के साथ कुछ समस्या को ठीक करना चाहते हैं. , तो अगर हम finance.cs50.net हर बार मैं एक बोली प्राप्त करना चाहते हैं, मैं इस समीक्षा बटन पर क्लिक करें, और कहा कि भाव बटन तो मुझे एक और पूरे पृष्ठ के लिए ले जाता है. और अगर मैं एक उद्धरण चाहता हूँ, मैं वापस बटन हिट करने के लिए है और फिर मैं इसे टाइप में, मैं एक उद्धरण मिलता है, और मैं वापस बटन मारा. यह वास्तव में सबसे अच्छा उपयोगकर्ता अनुभव नहीं है. जो वास्तव में इस साइट का उपयोग अगर यह है कि शेयर कीमतों में प्राप्त करने के लिए धीमी है? तो क्या हम AJAX के साथ करना चाहते हैं कि एक अलग पेज के लिए जाने की कदम दूर करने के लिए है आदेश में परिणाम देखने के लिए. 

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

इस वस्तु पर अब, फार्म का प्रतिनिधित्व, मैं अब एक पर बुलाया समारोह का उपयोग कर रहा हूँ. इस समारोह में क्या करता है यह एक घटना हेन्डलर संलग्न करने के लिए जा रहा है. घटना में है कि हम करने के लिए सुनने के लिए जा रहे हैं submit घटना है. तो जब उपयोगकर्ता क्लिक करता है कि प्रस्तुत करना बटन या प्रेस दर्ज करें, इस घटना के लिए आग के लिए जा रहा है. इस में hooking द्वारा, मैं अब प्रपत्र के डिफ़ॉल्ट व्यवहार को ओवरराइड कर सकते हैं. इस जावास्क्रिप्ट के बिना, प्रपत्र प्रस्तुत करेंगे जो PHP फ़ाइल हम विशेषता है कि कार्रवाई में इस्तेमाल किया. लेकिन इसके बजाय, अब मैं, कह रहा हूँ रुको, रुको, मैं आप वास्तव में है कि करने के लिए नहीं करना चाहती. मैं यह पहले तुम जाओ और कुछ PHP फाइल करने के लिए प्रस्तुत करने की कोशिश होने के लिए करना चाहते हैं. अब मैं क्या करना चाहते हैं? इस बिंदु पर मैं AJAX किसी भी तरह से उपयोग करने के लिए शेयर की कीमत क्या है में लोड करना चाहते हैं. पहली बात मैं जानना चाहता है कि क्या शेयर उपयोगकर्ता के लिए लग रही है. ऐसा करने के लिए है कि मैं एक और चयनकर्ता का उपयोग करने के लिए जा रहा हूँ. यह 3 चयनकर्ता हम पहले को देखा है. यह कहना है कि मैं फार्म बोली के एक आईडी के साथ इस फार्म तत्व शुरू करना चाहते हैं. फिर कहीं उस फार्म के अंदर एक इनपुट तत्व हो गया है कि प्रतीक के एक नाम है. यदि हम हमारे HTML पर वापस देखो, हमने देखा है कि हम एक इनपुट था [नाम = प्रतीक]. इसका मतलब है कि यह करने के लिए कि पाठ बॉक्स का चयन करने जा रहा है कि उपयोगकर्ता में टाइपिंग है. यह अच्छा है. हम पाठ बॉक्स है. अब हम सिर्फ पता है कि इसे अंदर क्या है की जरूरत है. करना है कि हम इस विधि कॉल कर सकते हैं, इस वैल. और यह कहते हैं कि मैं जानता हूँ कि तुम क्या पाठ बॉक्स है. मैं तुम मुझे बताओ कि यह क्या है कि पाठ बॉक्स में टाइप उपयोगकर्ता चाहते हैं. अब हम एक प्रतीक नामक स्ट्रिंग कि जो उपयोगकर्ता अंदर टाइप करने के लिए बराबर है यह अच्छा है. अब हम जानते हैं कि स्ट्रिंग का उपयोग के हमारे अनुरोध कर सकते हैं. यह एक नया कार्य यहाँ है, $ इस को छोड़कर हम नहीं रह तत्वों का चयन करने जा रहे हैं, हम एक अलग समारोह है कि jQuery द्वारा हमें प्रदान की है बुला रहे हो जा रहे हैं. यह AJAX समारोह है कि क्या वास्तव में इस HTTP अनुरोध बनाने के लिए जा रहा है. तो हम कुछ बातें बताना है. पहली बात हम इस समारोह को बताना है जहाँ मैं जाने के लिए अनुरोध करना चाहते हैं. कहीं मेरी परियोजना में मैं HTML quote.php बुलाया निर्देशिका के अंदर इस फाइल है. मैं इस फाइल का उपयोग कर सकते हैं, हम सिर्फ इस तरह देखा, अगर मैं लोकलहोस्ट quote.php / जाना. 

मैं अपने जावास्क्रिप्ट के उस पृष्ठ पर एक अनुरोध करना चाहते हैं. प्रकार क्या अनुरोध की अब? हमने देखा है कि पहले फार्म कि विधि = "पोस्ट" विशेषता है, और इसका मतलब है कि यह करने के लिए एक पोस्ट अनुरोध करने जा रही है, तो यह एक अनुरोध प्राप्त बजाय URL में कुछ भी डाल नहीं जा रहा है, जो सिर्फ अगर हम सिर्फ उदाहरण के लिए वेब ब्राउज़र के साथ पृष्ठ, पहुँचा निकाल दिया जाएगा. अब हमने कहा है मैं एक HTTP POST अनुरोध बनाना चाहते हैं एक पृष्ठ quote.php में स्थित है. जब हम फार्म जमा करने के लिए याद है, हम उस फार्म के अंदर इनपुट तत्व का उपयोग कर सकता है कि $ _POST चर के साथ. कहानी में अब तक हम वास्तव में किसी भी डाटा के साथ अभी तक नहीं भेजा है. हम सिर्फ इतना कहा है कि हम एक AJAX अनुरोध कर रहे हैं और यहाँ हम कर रहे हैं अनुरोध के प्रकार है. अब हम वास्तव में पृष्ठ पर कुछ डेटा भेजने की जरूरत है. करना है कि हम इस डेटा बुलाया संपत्ति का उपयोग कर सकते हैं. इस संपत्ति का मूल्य वास्तव में एक साहचर्य सरणी है. इस के लिए कारण यह है कि यह हमें सिर्फ आंकड़ों का 1 टुकड़ा से अधिक भेजने के लिए अनुमति देता है. यही कारण है कि हम इन घुंघराले ब्रेसिज़ यहाँ इन अन्य घुंघराले ब्रेसिज़ के अंदर नीडिंत. इन साहचर्य arrays में चाबियाँ करने के लिए एक ही बात होने जा रहे हैं उन लोगों के नाम के रूप में हमारे फार्म तत्वों में जिम्मेदार बताते हैं. इसका मतलब है कि अगर मैं प्रतीक की एक प्रमुख के साथ भेजने के लिए, इसका मतलब है कि मेरे PHP पृष्ठ $ _POST [प्रतीक] के साथ इस डेटा का उपयोग कर सकते हैं जैसे हम पहले किया था जब हम एक फार्म जमा कर रहे थे. और अब वास्तविक डेटा हम भेजना चाहते हैं इस साहचर्य सरणी के मूल्य के अंदर होने जा रहा है. 

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

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

एक प्रतीक के लिए मुझे AAPL में लिखें और भाव प्राप्त करें क्लिक करें. अब हमने देखा है कि एप्पल के एक हिस्से के डॉलर के कुछ नंबर लागत बस पृष्ठ पर दिखाई दिया, लेकिन सभी यूआरएल बदल नहीं किया था. वास्तव में, यहाँ HTTP अनुरोध है कि हम बस के लिए बनाया है. हम quote.php के लिए एक पोस्ट अनुरोध किया. यह समझ में आता है. यह सर्वर क्या हमें वापस भेजा. यह अब छवियों और चीजों की तरह साथ इस विशाल HTML दस्तावेज़ है, यह सिर्फ पाठ की एक पंक्ति है, और फिर हम सिर्फ पाठ की रेखा प्रदर्शित. यदि हम हेडर के लिए वापस जाओ और देखो क्या हम वास्तव में इस HTTP अनुरोध के अंदर भेजा, हम यहाँ नीचे देखते हैं कि हम AAPL का प्रतीक है और एक मूल्य के एक कुंजी के साथ भेजा जा सकता है, जो उपयोगकर्ता क्या अंदर टाइप यह अच्छा है, लेकिन यह अभी भी एक छोटे से परेशान है. मैं अभी भी शेयर बोली प्राप्त करने के लिए इस बटन पर क्लिक करें. हम व्यस्त लोग हैं और हम करने के लिए बटन क्लिक करने के लिए समय नहीं है. Google इस थोड़ी देर पहले एहसास हुआ जब वे Google झटपट कार्यान्वित किया. Google झटपट क्या करता है के रूप में आप टाइप कर रहे हैं, यह सिर्फ आप के लिए परिणाम प्रदर्शित शुरू ताकि आप भी खोज क्लिक के बारे में चिंता करने की ज़रूरत नहीं है. दरअसल, एक मजेदार कहानी है कि संबंधित. Google झटपट एक बार बाहर आया, लोगों की तरह थे, "वाह, यह सुपर अद्भुत है." "यह बहुत अच्छा है." और स्टैनफोर्ड में एक छात्र नीचे जो समय पर 19 थी इस साइट बुलाया यूट्यूब त्वरित बनाया. सभी YouTube तुरंत प्रभावी ढंग से करता है यूट्यूब तुरन्त खोज. तो बल्कि YouTube.com खोज मारा जाना होने से, जब मैं CS50 तरह YouTube तुरंत कुछ में टाइप करना आरंभ करें हम यहाँ देख सकते हैं कि यह एक धीमी इंटरनेट कनेक्शन पर कोशिश कर सकता है पॉप्युलेट करने के लिए इन परिणामों रहते हैं. करना है कि हम वास्तव में एक बहुत ही सरल हमारे quote.js फाइल करने के लिए संशोधन कर सकते हैं. अभी हम इस घटना को संलग्न कर रहे हैं जब फार्म प्रस्तुत है. हम वास्तव में उपयोगकर्ता है कि फार्म का अब प्रस्तुत नहीं करना चाहते, तो चलो बजाय इस घटना हर बार जब उपयोगकर्ता एक चाबी प्रेस आग. करना है कि चलो 1 KeyUp करने के लिए प्रस्तुत घटना बदल. के लिए फार्म जमा करने के लिए इंतज़ार कर के बजाय इसका मतलब है कि, हर बार कुंजी दबाया जाता है, कुछ होने जा रहा है. यह अब समझ में आता है पूरे फार्म इस KeyUp घटना देते हैं. हम वास्तव में केवल उस खोज बॉक्स के बारे में परवाह है. 

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

उदाहरण है कि यूसुफ दिखा रहा था, हम autocompletes के एक बहुत कुछ देखा है, और उन autocompletes वास्तव में, वास्तव में काम कर रहे हैं क्योंकि हम याद नहीं है - उदाहरण के लिए, यदि आप एप्पल के लिए शेयर की कीमत नहीं याद है और हम सिर्फ इतना पता है कि यह आ कुछ सिर्फ मेरे लिए बजाय कह, "इस बात का एक हिस्सा इतना पैसा खर्च," मैं एक तरह से पता है कि शेयरों क्या ए.ए. के साथ शुरू करना चाहते हैं. हम जानते हैं कि बूटस्ट्रैप पुस्तकालय है कि पहले से ही शामिल है के साथ वास्तव में अच्छी तरह से कर सकते हैं अंदर CS50 वित्त की. यदि आप यहाँ आते हैं और JavaScript टैग Typeahead के लिए नीचे स्क्रॉल, यह सिर्फ एक अच्छा प्लगइन है कि किसी ने पहले से ही हमारे लिए लिखा है, और हम आसानी से इस तरह अपनी कार्यक्षमता का उपयोग कर सकते हैं. मैं एक एक में टाइप किया है और यहाँ कुछ कहा गया है कि ए के साथ शुरू की एक सूची है चलो का कहना है कि मुझे लगता है कि यह वास्तव में अच्छा है और यह मुझे मेरे पृष्ठ पर शामिल करने के लिए समय है. यह पता चला है कि यह वास्तव में, वास्तव में सरल है. चलो quote3.js करने के लिए यहाँ कूद. मेरी फ़ाइल थोड़ा अलग दिखता है. यहाँ नीचे मेरी AJAX सामान के सब एक ही है. मैं दूसरे पृष्ठ पर जाने के लिए बिना शेयर डेटा लोड करने के लिए चाहते हैं. लेकिन अब मैं इस प्लगइन का उपयोग करना चाहते हैं. बूटस्ट्रैप प्रलेखन बिल्कुल मैं कैसे कर सकते हैं कि महान उदाहरण है. मैं कहना चाहता हूँ "यहाँ इनपुट है कि मैं पर autocomplete चाहते है," और मैं इस typeahead बुलाया समारोह कॉल करने के लिए जा रहा हूँ, और कहा कि सभी हमारे लिए Typeahead सामान की संभाल करने के लिए जा रहा है. यह सूची इनिशियलाइज़ जाएगा, यह हमारे छानने की सब करना होगा. केवल एक बात यह पता करने की जरूरत है कि हम क्या डेटा पर autocompleting रहे हैं. तो मैं बाहर प्रलेखन पढ़ने और उदाहरणों को देख बस इस कुंजी पाया. अगर मैं इसे स्रोत का एक महत्वपूर्ण है, इस कुंजी का मान दे सिर्फ बातें की कुछ सरणी मैं पर स्वत: पूर्ण करने के लिए चाहते है. यह चर इस अन्य फ़ाइल से आया था. मैं symbols.js खोलने के लिए. 

इस symbols.js सिर्फ यह वास्तव में, वास्तव में बड़ा तार युक्त सरणी है NASDAQ से इन स्टॉक प्रतीक के सभी. अगर मैं करने के लिए वापस HTML, इतना jharvard, vhosts, globalhost, html, टेम्पलेट्स कूदना चाहते हैं, quote_form. के बाद से है कि अब quote3.js कहा जाता है, मुझे JavaScript फ़ाइल मैं यहाँ सहित हूँ बदलने. अब मैं quote3.js है, तो मैं कि अलग JavaScript फ़ाइल में लोड करने के लिए जा रहा हूँ, एक है कि उस बूटस्ट्रैप autocomplete है. अब जब मैं ब्राउज़र में वापस कूद, पृष्ठ पुनः लोड, और मैं आ टाइपिंग शुरू, वहाँ मेरी autocomplete है. और यह सच है कि जितना सरल था. मैं कोड की एक पंक्ति है, कि सिर्फ इतना कहा था, "यहाँ बातें मैं पर स्वत: पूर्ण करने के लिए चाहते हैं," और अचानक मैं प्रयास के पूरे नहीं सभी में एक बहुत कुछ के साथ यह वास्तव में बहुत अच्छी कार्यक्षमता है. जैसा कि आप वेबसाइटों और चीजों की विशेष रूप से सामने के छोर की ओर विकसित कर रहे हैं, आप को खोजने के लिए इस मामले में एक बहुत कुछ है करने के लिए जा रहे हैं. वहाँ से बाहर एक बहुत, बहुत, बहुत शांत मुक्त पुस्तकालयों के बहुत कुछ कर रहे हैं कि यह करने के लिए इस तरह से बातें करने के लिए आसान सुपर. किसी केवल प्रतीकों की इस बड़ी सूची पर autocompleting की किसी भी कमियां के बारे में सोच सकते हैं? कुछ है कि इस दृष्टिकोण के साथ सबसे अच्छा नहीं है क्या हो सकता है? हाँ. >> [छात्र] समय, अगर आप [अश्राव्य] की एक बहुत कुछ है हाँ. अभी हम इस विशाल जावास्क्रिप्ट फाइल डाउनलोड कर रहे हैं और वहाँ प्रतीकों में से एक बहुत कुछ है. और यदि ऐसा है तो हम सामान की एक टन है, इस तरह की खोज ही नहीं सकता है विलंबता में वृद्धि लेकिन यह भी वास्तविक फाइल डाउनलोड. बढ़िया है. और कुछ? अभी वहाँ प्रासंगिकता का कोई वास्तविक अर्थ है. यदि मैं एक एक, कंपनियों है कि यहाँ दिखाने में लिखते हैं सबसे लोकप्रिय कंपनियों है कि ए के साथ शुरू नहीं हो सकता है 

इससे पहले कि मैं एप्पल के लिए मिलता है, तो यह कुछ और वर्ण ले खोजने के लिए मैं क्या देख रहा हूँ हो सकता है. इस autocomplete प्रासंगिकता की इस भावना नहीं है. यह सिर्फ कहने के लिए, जा रहा है, "कुछ भी है कि मैच मैं प्रदर्शित करने के लिए जा रहा हूँ." कि के बजाय, मैं करने के लिए किसी भी तरह से अपनी खोजों में कुछ प्रासंगिकता एकीकृत करने के लिए करना चाहते हैं. अगर मैं यहाँ जाना याहू वित्त finance.yahoo.com,, अगर मैं याहू वित्त पेज पर एक प्रतीक दर्ज करने की कोशिश और मैं goog टाइपिंग शुरू, मैं चीजों की इस अच्छी सूची है. जाहिर है, ऐसा लगता है जैसे याहू वित्त चालाक यहाँ और अधिक कुछ कर रही है. वे कुछ प्रासंगिकता है और वे भी अतिरिक्त जानकारी स्टॉक के नाम की तरह. यह कुछ ऐसा है कि मैं वास्तव में सिर्फ मेरी प्रतीकों का जायजा सूची के साथ नहीं मिल सकता है. मैं यह चाहता हूँ और इसलिए मैं इसे लेने के लिए जा रहा हूँ. करना है कि हम कुछ बातें करते हैं. चलो पहली बार इस पृष्ठ पर निरीक्षक खुला क्योंकि हमने देखा है कि इस पृष्ठ पर नहीं reloading है, तो यह शायद AJAX है किसी भी तरह का उपयोग करने के लिए अपने डेटा को लोड किया. हम यह पता लगाने के लिए क्या डेटा लोड हो रहा है कर सकते हैं. अगर मैं इस नेटवर्क टैब पर क्लिक करें, इन अनुरोध है कि निकाल दिया जाना शुरू होने जा रहे हैं. अब अगर मैं goo में टाइप करते हैं, हम देख सकते हैं कि मैं सिर्फ एक नया HTTP अनुरोध मिला. शायद यह है कि जहां कि डेटा से आ रही है. यकीन है कि पर्याप्त है, अगर मैं इस यूआरएल है, जो थोड़ा अजीब नाम है पर देखो हम देख सकते हैं कि यह वही जगह है जहाँ याहू से भेज रहा है से अपने डेटा. 

मैं एक अलग suggest.php नामक फाइल कि बहुत भावना में देखने का कार्य करने के लिए समान है बनाया है. यह मूल रूप से याहू के यूआरएल के लिए एक क्वेरी बनाने के लिए जा रहा है, कुछ डेटा वापस प्राप्त करने के लिए, और यह मेरे लिए वापस भेज. अब, इस बड़े, प्रतीकों के विशाल सूची का उपयोग करने के बजाय, मैं याहू अच्छा प्रासंगिकता चीजों का उपयोग कर सकते हैं, और मैं करने के लिए है कि बड़े पैमाने पर JavaScript फ़ाइल डाउनलोड करने के लिए नहीं है. मैं केवल वास्तव में प्रासंगिक स्टॉक प्रतीक नीचे खींचने के लिए जा रहा हूँ. चलो उस में कूद. तो html, जे एस. हम quote4 में अब कर रहे हैं. अब हम नहीं रह जावास्क्रिप्ट फाइलों की बड़ी सूची का उपयोग कर रहे हैं. लेकिन वहाँ डिजाइन समस्या का एक छोटा सा तरह यहाँ है. हमने कहा है कि AJAX में एक अतुल्यकालिक है. क्या इसका मतलब यह है कि जब मैं एक AJAX अनुरोध करते हैं, तो ठीक है यहाँ 8 लाइन पर, यह है, जहां मेरे AJAX अनुरोध वास्तव में निकाल दिया है. चलो कहते हैं कि अब मैं कुछ कोड यहाँ नीचे है कि कुछ सामान करने के लिए जा रहा है उपयोगकर्ता परिवर्तन या पृष्ठ पर कुछ सूचित करना चाहते हैं. ब्राउज़र क्या होने वाला नहीं है, इस अनुरोध के लिए प्रतीक्षा करने के लिए जारी रखने के लिए नहीं जा रहा है नीचे आ रहा है और इस लाइन से टकराने से पहले. यह अतुल्यकालिक हिस्सा है. यह इस अनुरोध को बनाने के लिए और कहते हैं, "जब भी आप खत्म हो रहा है, "वापस आते हैं और कि समारोह है कि मैंने तुमसे कहा सफलता के अंदर कॉल करने के लिए कहते हैं." इसका मतलब है कि हम सिर्फ सभी शेयरों को पहले नहीं डाउनलोड कर सकते हैं. हम अनुरोध बनाने के लिए और कुछ करने के लिए वापस आने के लिए प्रतीक्षा करने की जरूरत है. यह है कि इससे पहले का मतलब है, हम बस बूटस्ट्रैप बता सकता है, "यहाँ चीजों की सूची मैं autocomplete के लिए आप पर चाहते है." हम अब नहीं है कि अब और नहीं कर सकते हैं क्योंकि हम नहीं जानते क्या हम वास्तव में स्वत: पूर्ण करने के लिए करना चाहते हैं. सौभाग्य से, बूटस्ट्रैप इस के बारे में सोचा है, क्योंकि उन, वहाँ पर स्मार्ट लोग कर रहे हैं, और वे वास्तव में हमें इस Typeahead प्लगइन लोड के लिए एक और रास्ता दे दिया. इससे पहले, इस स्रोत संपत्ति के मूल्य सिर्फ बातें की इस बड़ी autocomplete के लिए सरणी था. 

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

इस सरणी की चाबियाँ CS50 के एक मूल्य है पाठ्यक्रम की तरह बातें कर रहे हैं, और यहाँ नीचे हम देख सकते हैं कि मैं एक मूल्य है कि एक सरणी है हो सकता है. मैं तार बाहर पार्स तरह बातें करने की नहीं है और अल्पविराम के लिए देखो और इस तरह से पागल बातें करते हैं. क्योंकि यह इस JSON प्रारूप में घोषित किया जाता है, जावास्क्रिप्ट और jQuery पहले से ही एक स्ट्रिंग परिवर्तित करने के लिए कार्य किया है कि एक वास्तविक जावास्क्रिप्ट साहचर्य सरणी में इस JSON की तरह लग रहा है कि हम साथ काम कर सकते हैं. कर रही है कि के रूप में कह रही है कि अब कोई इस फ़ाइल suggest.php, है के रूप में सरल है, मुझे वापस बस पाठ की एक स्ट्रिंग भेजने, लेकिन मुझे पता है कि यह मुझे भेज JSON वापस जा रहा है. इसका मतलब है कि कि JSON एक जावास्क्रिप्ट साहचर्य सरणी में परिवर्तित किया जा सकता है. और jQuery हां, तो मैं आप मेरे लिए है कि करने के लिए करना चाहते हैं. इसका मतलब है कि इस प्रतिक्रिया यहाँ पैरामीटर, यह अब सिर्फ एक स्ट्रिंग है. क्योंकि हम jQuery बताया है कि यहाँ कुछ JSON आता है, jQuery के काफी स्मार्ट कहने के लिए होने जा रहा है, "आप JSON चाहता था?" "मैं करने के लिए है कि आप के लिए एक साहचर्य सरणी में परिवर्तित करने के लिए जा रहा हूँ." चलो वास्तव नेटवर्क टैब पर एक नज़र रखना एक बार हम quote4.js है. हम इस को बदलने के लिए और पृष्ठ पुनः लोड हूँ. अब मैं फिर से एक एक टाइप करने के लिए जा रहा हूँ. मैं suggest.php के लिए एक जोड़ी का अनुरोध किया है, लेकिन अब इस प्रतिक्रिया बजाय सिर्फ स्ट्रिंग, यह JSON है. तो मैं एक खुली धनु धनुकोष्ठक कह रही है, "यहाँ एक साहचर्य सरणी आता है." 

इस साहचर्य सरणी की पहली और एकमात्र कुंजी प्रतीकों कहा जाता है, और फिर यहाँ सभी प्रासंगिक प्रतीकों में से एक की एक सरणी है याहू वित्त से अब उस विशाल सूची से नहीं आ रहा. कि कैसे मैं बस इस autocomplete प्लगइन आबाद कर सकते हैं कुछ डेटा है कि एक स्थानीय फ़ाइल है कि पहले से ही पूर्व निर्धारित से नहीं आ रहा है साथ लेकिन कुछ और से. यह पता चला है कि हम वास्तव में एक JSONP बुलाया प्रौद्योगिकी के लाभ ले सकते हैं, या padding के साथ JSON है कि इस suggest.php बिचौलिया को समाप्त होगा. लेकिन लगता है कि कर के बजाय, चलो बजाय कैसे मैं यह और भी सुधार कर सकते हैं पर एक नज़र रखना. मैं वास्तव में बूटस्ट्रैप Typeahead की तरह. यह वास्तव में अच्छा है. लेकिन हम जावास्क्रिप्ट में अच्छा हो रही है और हम किस तरह का यह अपने आप करना चाहते हैं, शायद इस प्लगइन क्या कर रही हो सकता है पर एक नज़र रखना. चलो अब नहीं है कि Typeahead बात का उपयोग, और सुझाए गए शेयरों की इस सूची में खुद को बनाने की कोशिश करते हैं. यहाँ quote6.php में हम उसी तरह से शुरू करने जा रहे हैं. हर बार किसी के कुछ प्रकार, हम एक AJAX अनुरोध बनाना चाहते हैं. यह हमारी मूल CS50 वित्त त्वरित के लिए इसी तरह की है. बल्कि quote.php के लिए एक अनुरोध बनाने से, अब हम कर रहे हैं कि एक ही फाइल को पहले के रूप में एक अनुरोध बनाने, इस suggest.php, जो सिर्फ याहू वित्त से डेटा खींचने के लिए जा रहा है. 

फिर, हम अभी भी JSON की उम्मीद कर रहे हैं, लेकिन अब के बाद से Typeahead यह हमारे लिए नहीं कर रही है, हम भी साथ मूल्य है कि मौजूदा पाठ बॉक्स के अंदर भेजने की जरूरत है. अब हम जानते हैं कि याहू वित्त पूछने के लिए, और इसलिए अब यहाँ समारोह में कहा कि हम को निष्पादित करने के लिए एक बार अनुरोध पूर्ण करना चाहते है. हम प्लगइन नहीं है हमारे लिए सूची बनाने के लिए करते हैं, तो यहाँ है जहाँ हम वास्तव में करने के लिए सुझावों की एक सूची का निर्माण करने जा रहे हैं. करना है कि, PHP में बहुत पसंद है हम HTML के इन बड़े तार concatenated तो हम उन्हें मुद्रित, हम जावास्क्रिप्ट में एक ही सटीक बात कर सकते हैं. पहले हम इस सुझाव बुलाया स्ट्रिंग शुरू करने के लिए जा रहे हैं, और इस स्ट्रिंग के कुछ HTML होते जा रहा है. हम यह चीजों की एक सूची में होना चाहते हैं, तो हम इस सूची टैग के साथ शुरू करने जा रहे हैं, और अब हम सभी प्रतीक है कि हमारे पास वापस लौट रहे थे की पुनरावृति करने के लिए जा रहे हैं. याद रखें, क्योंकि हम डेटाप्रकार कहा है: 'json' है, यह एक स्ट्रिंग नहीं है. यह पहले से ही हमारे लिए एक सरणी है. यह वास्तव में अच्छा है. हम बस कह सकते हैं, "मैं तुम्हें एक सूची तत्व संलग्न करने के लिए करना चाहते हैं." हम उस के पक्ष में एक तत्व के अंदर डाल देता हूँ, हम यह सुझाव के एक वर्ग दे तो हम जानते हैं कि यह क्या है, और अब यहाँ प्रतीक है कि हम याहू वित्त से वापस मिल गया है. 

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

एक ही बात. मैं बस एक PHP फ़ाइल है कि सिर्फ प्रतीकों से हमारे लिए वापस आ जाएगी बनाया है. यह भी हमें वापस देने के लिए कंपनी के नाम. और इसलिए हम एक ही बात कर रहे हैं. हम एक AJAX अनुरोध कर रहे हैं. एक बार अनुरोध पूरा कर लिया है, हम इस समारोह में यहाँ निष्पादित करने के लिए जा रहे हैं, और इस समारोह के लिए तत्वों का एक बड़ा स्ट्रिंग का निर्माण करने जा रहा है. लेकिन यहाँ अंतर यह है कि इन सूचियों के मूल्य में अब सिर्फ प्रतीक है, अब यह नाम है. तो हम एक छोटी सी समस्या है. जब हम हमारे देखने का उपयोग करें, हम किसी भी तरह से यह प्रतीक पारित करने की आवश्यकता है. हम Microsoft Corporation की तरह देखने का कुछ नहीं पारित कर सकते हैं. हम यह MSFT पारित करने की आवश्यकता है. जब हम HTML लिख रहे हैं, हम अच्छा में निर्मित विशेषताओं के बहुत सारे हैं. एक एक एक href या एक वर्ग के साथ जुड़ा हो सकता है. लेकिन क्या हम वास्तव में अब जरूरत है इन कड़ियों में से प्रत्येक के लिए है एक शेयर इसके साथ जुड़े प्रतीक है. वहाँ कोई HTML विशेषता में निर्मित स्टॉक प्रतीक के लिए, लेकिन सौभाग्य से, HTML5 हमें अपने स्वयं के गुण पैदा करने के लिए हो सकता है जो हम चाहते हैं की अनुमति देता है. डेटा प्रतीक कह, मैं एक नई विशेषता शुरू की है जिसका नाम मैं अभी तक बनाया है, और यह ठीक है क्योंकि मैं इसे इस डेटा के साथ prefaced. हम स्टॉक से अब वहाँ के प्रतीक के अंदर की दुकान करने के लिए जा रहे हैं. क्या इसका मतलब यह है कि भले ही हम कंपनी के नाम के मूल्य को प्रदर्शित कर रहे हैं के अंदर हमारे autocomplete, हम अभी भी याद रखने के प्रतीक रहे हैं कि प्रत्येक कंपनी के साथ जुड़ा हुआ है. जिस तरह से है कि हम कर रहे हैं इस तत्व ही के अंदर है. तो इसका मतलब है कि हम एक और परिवर्तन करना चाहिए. जब हम यह अब क्लिक करते हैं, हम वास्तव में प्रतीक, विशेषता का लाभ लेने की जरूरत के बजाय सिर्फ अपने मूल्य. यदि हम वापस ऊपर, हम सुझाव के लिए कोई ईवेंट हैंडलर देते हैं. जब भी इन सुझावों में से एक अब क्लिक किया है, मैं करने के लिए कुछ करना चाहते हैं. मैं क्या करना चाहते है कि इनपुट बॉक्स के मूल्य बदल जाते हैं. अब मैं इस एक ही वैल समारोह निर्धारित करने के लिए करना चाहते हैं. 

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

याद रखें यह कुछ है कि हम उस के अंदर पाश के लिए बनाया है जब हम HTML की कि स्ट्रिंग का निर्माण किया गया. हम यहाँ देख सकते हैं कि इस डेटा प्रतीक MSFT, जो महान है मूल्य है. यही कारण है कि हम क्या उम्मीद कर रहे थे. यह प्रतीक है और है कि कैसे हम मूल्य है कि हम का उपयोग करने की जरूरत है मिला इस पाठ बॉक्स के अंदर. यह बोली फार्म के लिए पर्याप्त है कि क्योंकि बोरिंग की तरह है. चलो बस हमारे पोर्टफोलियो पृष्ठ के लिए कुछ त्वरित संवर्द्धन बनाने. यदि आप थोड़ी देर के लिए CS50 वित्त का उपयोग किया है और आप खरीदने और बेचने के शेयरों की एक बहुत शुरू, अंततः इस तालिका बहुत बड़ा पाने के लिए जा रहा है, और आप निश्चित रूप से एक स्टॉक टिकर, चाहते करने जा रहे हैं. एक बार मेज वास्तव में, वास्तव में बड़ा है, यह उपयोगकर्ता के लिए उपयोगी हो करने के लिए इस पर खोज करने की कोशिश कर सकता है. अगर मैं डिज्नी की तरह कुछ टाइपिंग शुरू खोज बॉक्स के अंदर और मेरे मिकी माउस स्टॉक के लिए देख रहे हैं, हम देख सकते हैं कि अब तालिका फ़िल्टरिंग है मैं क्या सिर्फ अंदर टाइप के आधार पर यह कार्यक्षमता सुपर जटिल दिखता है, लेकिन यह वास्तव में, वास्तव में आसान है jQuery और जावास्क्रिप्ट के साथ. इस portfolio.php फ़ाइल एक जावास्क्रिप्ट portfolio.js बुलाया फ़ाइल में शामिल हैं. चलो उस पर एक नज़र रखना. तो html, जे एस, पोर्टफोलियो. यहाँ है जहाँ हम कर रहे हैं कि मेज पर खोज. पहली बात मैं क्या करने की जरूरत है कि पाठ बॉक्स के लिए एक घटना हेन्डलर संलग्न करने के लिए है क्योंकि हम जानते हैं कि हम हमारे फ़िल्टरिंग समारोह आग चाहते हर बार जब उपयोगकर्ता कुछ प्रेस क्योंकि हम खोज बटन के लिए समय नहीं है. पहली बात हम क्या करने की जरूरत है बाहर आंकड़ा क्या उपयोगकर्ता के लिए खोज कर रहा है, जैसे हम पहले किया था. यह कीवर्ड वर्तमान तत्व उपयोगकर्ता के साथ बातचीत करने के लिए संदर्भित करता है. 

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

यह बच्चों को कार्य करने के लिए मुझे वापस करने के सभी तत्वों की एक सरणी वापस जा रहा है कि के बच्चों को इस मामले में, तालिका में एक पंक्ति में हैं. यह बस यूँ ही पंक्ति के अंदर कोशिकाओं. मैं सिर्फ 1 कक्ष पर खोज करना चाहते हैं. यह पहला समारोह का कहना है कि मुझे उस सरणी में पहला तत्व दे. तो पाठ समारोह का कहना है कि मुझे वास्तव में क्या है कि सेल के अंदर है के बाद से मैं उस पाठ पर खोज करने के लिए करना चाहते हैं. अंत में, यह लोअरकेस कनवर्टर के लिए इस्तेमाल किया जा सकता है, इसलिए हम पाठ मामले असंवेदनशील प्रश्नों कर सकते हैं. अंत में, हम देखने के लिए अगर एक तालिका के अंदर है कि स्ट्रिंग स्ट्रिंग के लिए हम खोज कर रहे हैं शामिल करना चाहते हैं. जावास्क्रिप्ट में indexOf समारोह कि बस. यह हमें बताता है कि क्या है या नहीं इस स्ट्रिंग एक स्ट्रिंग. अगर यह सच है कि सेल में मैं क्या खोज रहा हूँ, तो मुझे यकीन है कि यह दिखाया गया है बनाना चाहते हैं. शो विधि कहते हैं, "तत्व दिखाएँ." होगा यदि यह मामला नहीं है, तो इसका मतलब है कि मैं जो कुछ भी शामिल नहीं है के लिए खोज रहा हूँ उस पंक्ति के भीतर तो है, और मैं छुपाना चाहते उपयोगकर्ता से है. यह अच्छा है कि फिल्टर प्रभाव प्राप्त होता है जहां अब हम संपूर्ण तालिका देखें. यदि आप कैसे इस टिकर बनाने के लिए के रूप में अच्छी तरह से करने में रुचि रखते हैं, हम स्रोत ऑनलाइन पोस्ट करेंगे. लेकिन यह वास्तव में सरल है. JQuery इन एनिमेशन और छेड़खानी सीएसएस संपत्तियों के लिए भयानक तरीके है. इसलिए, कि यह मेरे लिए है. 

तो क्या आगे झूठ? जैसा कि आप कुछ ही दिनों में देखेंगे, अंतिम परियोजनाओं के प्रस्ताव की वजह से है. अंतिम परियोजनाओं प्रस्ताव आप कुछ सवाल पूछना होगा, लेकिन उन के बीच तीन मील के पत्थर होगा - एक एक "अच्छा" मील का पत्थर है, एक बेहतर मील का पत्थर है, और एक सबसे अच्छा. विचार किया जा रहा करने के लिए वास्तव में आप लोगों की मदद अपनी अपेक्षाओं को सेट इतना है कि न्यूनतम आप अपने अंतिम परियोजना के उत्पादन के साथ खुश हो जाएगा और यह "अच्छा" अब तक के रूप में आप चिंतित हैं होगा. लेकिन फिर आप कुछ करने के लिए सिर्फ एक छोटा सा तक पहुँचने के लिए हो रही के हित में बेहतर या सबसे अच्छा कुछ है, हम भी के रूप में अच्छी तरह से आप की ओर धक्का की तरह हूँ. CS50 हैक-a-thon, इस बीच, कुछ ही हफ्तों में है. आमतौर पर, हम एक लॉटरी के आधार के आधार पर ब्याज की वजह से ऐसा करते हैं, लेकिन हालात हैं हम हार्वर्ड स्क्वायर से शटल बसों में हम में से कुछ सौ ले जाऊँगा केंडल स्क्वायर जहां माइक्रोसॉफ्ट एक सुंदर सुविधा aptly "बेवकूफ" कहा जाता है - न्यू इंग्लैंड अनुसंधान और विकास केंद्र. हम वहाँ पाने के 8 बजे के आसपास हम कुछ भोजन करेंगे. 01:00 के आसपास हम कुछ और खाना होगा. लगभग 5 अगर आप अभी भी जाग रहे हैं हम पर सिर IHOP या आप परिसर के लिए वापस ले लेंगे. वहाँ उद्देश्य अंतिम परियोजनाओं में गोता के साथ - साथ सहपाठियों और कर्मचारियों की. फिर कुछ दिनों बाद CS50 साफ है, जो वास्तव में करने के लिए एक अवसर के लिए होती है के लिए तुम लोगों को अपने काम के प्रदर्शन करने के लिए सेमेस्टर के लिए और उपलब्धियों जबकि एक दूसरे के साथ कंधे रगड़ और हर कोई क्या किया की भावना रही है. ने कहा, टॉमी और यूसुफ के लिए बहुत धन्यवाद, और हम आप सोमवार को देखेंगे.  [वाहवाही]