1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [9 सप्ताह जारी]

2
00:00:02,700 --> 00:00:05,160
[डेविड जे Malan हार्वर्ड विश्वविद्यालय]

3
00:00:05,160 --> 00:00:07,020
[यह CS50 है. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> यह CS50 है. यह 9 सप्ताह के अंत है. बहुत बहुत धन्यवाद.

5
00:00:13,340 --> 00:00:15,310
अंत में. 9 सप्ताह. मैं समझ गया.

6
00:00:15,310 --> 00:00:18,590
आज हम वेब प्रोग्रामिंग के बारे में हमारी बातचीत जारी

7
00:00:18,590 --> 00:00:21,660
अंतिम परियोजना की ओर एक आँख के साथ, आप के लिए वेब आधारित कुछ करना नहीं है क्योंकि

8
00:00:21,660 --> 00:00:25,610
अंतिम परियोजनाओं के लिए, लेकिन क्योंकि अंतिम परियोजनाओं के लिए या तो CS50 के बाद

9
00:00:25,610 --> 00:00:29,000
यह निश्चित रूप से जिस दिशा में जा रहा है आधुनिक सॉफ्टवेयर है.

10
00:00:29,000 --> 00:00:31,770
और अभी तक यह वास्तव में एक आसान बात नहीं है.

11
00:00:31,770 --> 00:00:35,040
वास्तव में, सबसे मुश्किल चीजों में से एक डिजाइन के पहलू है.

12
00:00:35,040 --> 00:00:38,600
>> उदाहरण के लिए, डिजाइन के द्वारा हम वास्तव में उपयोगकर्ता इंटरफ़ेस हो रही मतलब

13
00:00:38,600 --> 00:00:40,420
या उपयोगकर्ता अनुभव सही.

14
00:00:40,420 --> 00:00:43,200
मैं हिम्मत करना - और हाल ही में एक समस्या सेट से हम जानते हैं

15
00:00:43,200 --> 00:00:45,960
जब आप कुछ सॉफ्टवेयर के कुछ टुकड़े के बारे में अपने शिकंजा प्रसारित

16
00:00:45,960 --> 00:00:49,000
या हार्डवेयर है कि आप चाहे परिसर या बंद पर infuriates

17
00:00:49,000 --> 00:00:51,930
वहाँ वहाँ से बाहर साइटों की एक बहुत कुछ है, वहाँ से बाहर हार्डवेयर का एक बहुत है,

18
00:00:51,930 --> 00:00:53,900
उस तरह बेकार है.

19
00:00:53,900 --> 00:00:58,730
लेकिन वास्तविकता यह है कि चीजें हैं जो अभी तक उपयोग करने के लिए आसान कर रहे हैं फिर भी शक्तिशाली बना रहे हैं

20
00:00:58,730 --> 00:01:00,550
एक बहुत ही मुश्किल चुनौती है.

21
00:01:00,550 --> 00:01:03,680
तो आज के लिए मैं यूसुफ और टॉमी मुझे शामिल होने के लिए यहाँ से पूछा

22
00:01:03,680 --> 00:01:06,680
इतना है कि हम एक बातचीत कर सकते हैं, दोनों के बारे में डिजाइन

23
00:01:06,680 --> 00:01:09,090
और सोचा प्रक्रियाओं के प्रकार क्या अपने सिर के माध्यम से जा रहा शुरू कर देना चाहिए

24
00:01:09,090 --> 00:01:12,040
जब आप अपने अंतिम परियोजनाओं के डिजाइन, अपने भविष्य के प्रयासों.

25
00:01:12,040 --> 00:01:15,040
और फिर टॉमी की मदद से हम कार्यान्वयन के विवरण में से कुछ में देख लेंगे.

26
00:01:15,040 --> 00:01:18,440
आप कागज पर या आपके मन में कैसे कुछ दृष्टि हो सकता है

27
00:01:18,440 --> 00:01:20,760
कि तुम तो प्रोग्राम पर अमल कर सकते हैं

28
00:01:20,760 --> 00:01:24,030
प्रौद्योगिकी और तकनीक के कुछ का उपयोग करके हम बस के बारे में बात कर शुरू कर दिया है,

29
00:01:24,030 --> 00:01:29,080
अर्थात् जावास्क्रिप्ट और भी नए, अर्थात् AJAX अतुल्यकालिक जावास्क्रिप्ट कुछ.

30
00:01:29,080 --> 00:01:32,950
यह आप सभी को और अधिक एक उपयोगकर्ता इंटरफ़ेस के गतिशील बनाने के लिए अनुमति देता है

31
00:01:32,950 --> 00:01:35,780
उत्तरोत्तर अधिक से अधिक एक सर्वर से डेटा दिलकश द्वारा.

32
00:01:35,780 --> 00:01:38,560
तो हम उन के टुकड़े की कुछ आज के रूप में अच्छी तरह से देखेंगे.

33
00:01:38,560 --> 00:01:41,800
एक अलग रूप में, अगर आप कंप्यूटर विज्ञान के क्षेत्र में ध्यान केंद्रित करने में रुचि रखते हैं

34
00:01:41,800 --> 00:01:45,010
या कंप्यूटर विज्ञान में minoring पता है, कि दोपहर में इस शुक्रवार

35
00:01:45,010 --> 00:01:48,750
मैक्सवेल डॉर्किन 221 में एक पिज्जा घटना होगी

36
00:01:48,750 --> 00:01:50,780
आप थोड़ा और अधिक जहां कंप्यूटर विज्ञान के बारे में सीख सकते हैं.

37
00:01:50,780 --> 00:01:54,860
दरवाजा बाहर अपने रास्ते पर आज आप हार्वर्ड में सीएस एक अनौपचारिक गाइड लेने में सक्षम हो जाएगा.

38
00:01:54,860 --> 00:01:57,290
हम कमर ऊंचाई पर बाहर कचरे के डिब्बे पर डाल देता हूँ

39
00:01:57,290 --> 00:01:59,750
इतना है कि यदि आप इस हड़पने और सीएस के बारे में थोड़ा और अधिक जानने के लिए करना चाहते हैं,

40
00:01:59,750 --> 00:02:02,480
कि आप के लिए हो सकता है के रूप में यह 0 सप्ताह में किया गया होगा.

41
00:02:02,480 --> 00:02:06,500
इसके अलावा, अगर आप हमें CS50 दोपहर के भोजन के लिए इस शुक्रवार 1:15 में शामिल होने के लिए करना चाहते हैं,

42
00:02:06,500 --> 00:02:09,800
सिर के लिए cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
आगे की हलचल के बिना, मैं आप शिक्षण साथी यूसुफ Ong दे.

44
00:02:13,260 --> 00:02:19,190
हाय. [वाहवाही]

45
00:02:19,190 --> 00:02:20,770
धन्यवाद.

46
00:02:20,770 --> 00:02:24,780
यहाँ एक वर्ग CS179 बुलाया में पहली बार मैं डिजाइन के बारे में सीखा था.

47
00:02:24,780 --> 00:02:28,040
>> समय पर प्रोफेसर हमें एक और प्रोफेसर के बारे में कहानी को बताया

48
00:02:28,040 --> 00:02:31,640
जो एक होटल में गया था और faucets का इस्तेमाल किया.

49
00:02:31,640 --> 00:02:35,630
किसी ने मुझे बता सकते हैं जो बाएँ पर 2 knobs और सही नहीं है?

50
00:02:35,630 --> 00:02:39,080
[छात्र] गर्म और ठंडे. >> गरम और ठंडे. अच्छा है.

51
00:02:39,080 --> 00:02:41,430
क्या आप सामान्य रूप से उम्मीद है, है ना?

52
00:02:41,430 --> 00:02:46,960
नल का उपयोग करने के बाद यह प्रोफेसर एक शॉवर ले जाना चाहता है, और वह इस का उपयोग करने के लिए आय.

53
00:02:46,960 --> 00:02:51,310
उन्होंने छोड़ दिया सोचता है और सही पक्ष गर्म और ठंडे के लिए कर रहे हैं, है ना?

54
00:02:51,310 --> 00:02:55,470
लेकिन किसी ने मुझे इन वास्तव में क्या बता सकते हैं?

55
00:02:55,470 --> 00:02:58,060
कोई हाथ?

56
00:02:58,060 --> 00:03:01,740
[अश्राव्य छात्र प्रतिक्रिया] >> एक सुझाव है?

57
00:03:01,740 --> 00:03:05,860
[अश्राव्य छात्र प्रतिक्रिया] >> तापमान?

58
00:03:05,860 --> 00:03:10,460
उनमें से एक तो तापमान और अन्य नियंत्रण नियंत्रण? >> [छात्र] पानी के दबाव.

59
00:03:10,460 --> 00:03:12,350
पानी के दबाव. अच्छा है.

60
00:03:12,350 --> 00:03:15,100
यह प्रोफेसर इस में चलता है और, यह सोच कर वे गर्म और ठंडे नियंत्रित कर रहे हैं,

61
00:03:15,100 --> 00:03:21,470
सही एक है, जो वह सोचता है कि गर्म, सभी तरह के लिए है बदल जाता है

62
00:03:21,470 --> 00:03:23,560
क्योंकि वह एक गर्म स्नान ले जाना चाहता है.

63
00:03:23,560 --> 00:03:28,100
खैर, ये वास्तव में से मेल नहीं खाती है, तो वह यह बहुत मजेदार अनुभव नहीं हो जाता है

64
00:03:28,100 --> 00:03:31,110
एक ठंडा स्नान में किया जा रहा है, और हम सभी जानते हैं कि क्या ऐसा लगता है.

65
00:03:31,110 --> 00:03:33,620
यह एक डिजाइन दोष का एक उदाहरण है.

66
00:03:33,620 --> 00:03:37,040
मैं क्या मतलब है कि नल से उसकी अपेक्षा है

67
00:03:37,040 --> 00:03:39,420
मैच क्या बौछार से बाहर आया नहीं,

68
00:03:39,420 --> 00:03:41,780
जो उसके लिए दुर्भाग्यपूर्ण की तरह है.

69
00:03:41,780 --> 00:03:44,990
तो यह एक डिजाइन दोष का एक उदाहरण है कि वास्तविक जीवन में होता है.

70
00:03:44,990 --> 00:03:48,020
लेकिन हम अन्य लोगों के सभी प्रकार के रूप में अच्छी तरह से देखते हैं.

71
00:03:48,020 --> 00:03:50,390
हम शायद MBTA प्रणाली के प्रशंसक नहीं हैं.

72
00:03:50,390 --> 00:03:55,560
यह लंदन में एक मेट्रो प्रणाली वास्तव में, जो कहते हैं, "इस बटन का उपयोग में नहीं है."

73
00:03:55,560 --> 00:04:00,220
क्यों है यह भी वहाँ पर? हम भी क्यों परवाह करूँ?

74
00:04:00,220 --> 00:04:02,810
जब मैं एक बच्चा था, तकनीक प्रेमी एक घर में जा रहा है,

75
00:04:02,810 --> 00:04:05,050
जब भी कंप्यूटर दुर्घटना होगा, मेरी माँ ने मुझे करने के लिए आ जाएगा,

76
00:04:05,050 --> 00:04:07,060
मुझे इस स्क्रीन दिखा रहा है और मुझसे पूछ क्या हुआ.

77
00:04:07,060 --> 00:04:09,210
>> यहां तक ​​कि मैं नहीं जानता कि यह क्या मतलब है.

78
00:04:11,890 --> 00:04:14,700
[हँसी] क्या?

79
00:04:16,950 --> 00:04:18,019
[हँसी]

80
00:04:18,720 --> 00:04:23,050
कभी कभी हम सॉफ्टवेयर डेवलपर्स की तरह महसूस कर रहे हैं बस trolling हमें.

81
00:04:23,050 --> 00:04:28,460
के रूप में हम उपयोगकर्ताओं की तरह कर रहे हैं, "क्या हो रहा है कोई हमें बता सकते हैं?"

82
00:04:28,460 --> 00:04:32,140
डिजाइन का एक मुद्दा यह सब नीचे आता है.

83
00:04:32,140 --> 00:04:34,650
डिजाइन, के रूप में हम देख सकते हैं, विशुद्ध रूप से सौंदर्यशास्त्र के बारे में नहीं है,

84
00:04:34,650 --> 00:04:37,230
यह कैसे चीजों को देखने के बारे में नहीं है.

85
00:04:37,230 --> 00:04:41,720
हम यहाँ देखते हैं कि यहाँ पर पॉप - अप इस छोटे से वास्तव में बहुत अच्छा लग रहा है.

86
00:04:41,720 --> 00:04:45,290
यह पृष्ठभूमि में एक बूंद छाया है, यह सीमा radiuses पर जा रहा है.

87
00:04:45,290 --> 00:04:47,550
यह बहुत की तरह है.

88
00:04:47,550 --> 00:04:51,480
यह वास्तव में अच्छी तरह से है क्योंकि यह बहुत उपयोगकर्ता के अनुकूल नहीं है नहीं बनाया गया है.

89
00:04:51,480 --> 00:04:54,920
कि पॉप अप कम है कि ऊपर आता है वास्तव में मुझे किसी भी जानकारी नहीं दे करता है

90
00:04:54,920 --> 00:04:58,450
के बारे में क्या हो रहा है, यह मुझे उपयोगकर्ता के रूप में कुछ भी नहीं बता करता है

91
00:04:58,450 --> 00:05:01,400
कि कैसे त्रुटि से उबरने के बारे में.

92
00:05:01,400 --> 00:05:05,190
हम चीजें हैं जो डिजाइन नहीं है के बारे में सोचना चाहते हैं.

93
00:05:05,190 --> 00:05:06,670
सबसे पहले, यह सौंदर्यशास्त्र नहीं है.

94
00:05:06,670 --> 00:05:10,800
यह भी अनावश्यक कार्यक्षमता की टन के साथ भराई है अपने app नहीं.

95
00:05:10,800 --> 00:05:14,890
यदि आप एक थाई रेस्तरां कर रहे हैं, तो आप शायद एक ही समय में एक दंत चिकित्सक होना नहीं करना चाहती.

96
00:05:14,890 --> 00:05:17,720
और फेसबुक सवालों के साथ, कई लोगों को यह नहीं है कि का इस्तेमाल किया

97
00:05:17,720 --> 00:05:21,130
और यह वास्तव में क्या वे का निर्माण किया गया के मूल में नहीं था.

98
00:05:21,130 --> 00:05:24,200
और इसलिए यह अच्छा है के बारे में बातें की मात्रा बहुत ज्यादा लगता है नहीं

99
00:05:24,200 --> 00:05:26,390
कि आप अपने आवेदन लेकिन गुणवत्ता डाल रहे हैं

100
00:05:26,390 --> 00:05:28,910
और आपको लगता है कि उपयोगकर्ता अनुभव कैसे बेहतर बना रहे हैं

101
00:05:28,910 --> 00:05:32,540
द्वारा वास्तव में क्या आप पहले से ही है पर सुधार.

102
00:05:32,540 --> 00:05:37,040
>> संक्षेप में, डिजाइन हमें बताता है कि हम क्या निर्माण करना चाहिए.

103
00:05:37,040 --> 00:05:41,950
उदाहरण के लिए, अगर हम कुछ है कि हमें चीजों को खोज ऊपर का निर्माण कर रहे हैं,

104
00:05:41,950 --> 00:05:45,970
गूगल की तरह, उदाहरण के लिए, हम एक तरीके से काम करना चाहिए

105
00:05:45,970 --> 00:05:48,950
कि उपयोगकर्ता क्लिकों की बहुत लेने के लिए वे क्या चाहते हैं पाने की आवश्यकता है,

106
00:05:48,950 --> 00:05:52,580
या हम इसे एक तरह से करना चाहिए, उदाहरण के लिए गूगल त्वरित या autocomplete साथ

107
00:05:52,580 --> 00:05:54,970
देता है कि हमें हमारे परिणाम के लिए मिल तेजी?

108
00:05:54,970 --> 00:05:58,740
इंजीनियरिंग शामिल है, जैसे टॉमी दिखाने के लिए, वास्तव में यह निर्माण होगा.

109
00:05:58,740 --> 00:06:01,890
डिजाइन के प्रकार के बहुत सारे हैं.

110
00:06:01,890 --> 00:06:06,070
उदाहरण के लिए, अगर आप कुछ का निर्माण कर रहे हैं कुछ को तैनात करने के लिए

111
00:06:06,070 --> 00:06:09,770
एक तीसरी दुनिया के देश में, जहां बहुत बिजली या नहीं है कि बहुत प्रौद्योगिकी में,

112
00:06:09,770 --> 00:06:11,440
आप डिजाइन क्या आप का निर्माण कर रहे हैं

113
00:06:11,440 --> 00:06:14,210
एक तरीका है कि वहाँ लोगों को आसानी से पहुँच देता.

114
00:06:14,210 --> 00:06:18,290
लेकिन अन्य डिजाइन निर्णय की तरह वहाँ क्या हो सकता है

115
00:06:18,290 --> 00:06:21,850
या इस तरह से कुछ में शामिल हो सकता है?

116
00:06:23,690 --> 00:06:25,660
हाँ. मैं एक हाथ देखते हैं.

117
00:06:25,660 --> 00:06:37,200
[अश्राव्य छात्र प्रतिक्रिया] >> को राइट. बिल्कुल सही. अभिगम्यता एक बात है.

118
00:06:37,200 --> 00:06:40,870
लोगों का एक बहुत कुछ के बारे में नहीं लगता है, "मेरे उपयोगकर्ताओं के बारे में क्या?"

119
00:06:40,870 --> 00:06:43,160
या तो स्पेक्ट्रम के चरम की तरह.

120
00:06:43,160 --> 00:06:47,770
मैं उपयोगकर्ताओं को, जो विकलांग है कि मैं के बारे में नहीं सोच रहा हूँ हो सकता है

121
00:06:47,770 --> 00:06:50,590
और मैं सिर्फ सामान्य उपयोगकर्ता के लिए डिजाइन के बारे में सोच रहा हूँ.

122
00:06:50,590 --> 00:06:52,630
इंटरनेट आजकल हर किसी के द्वारा सुलभ है,

123
00:06:52,630 --> 00:06:54,870
और मैं उन लोगों के लिए डिजाइन के रूप में अच्छी तरह से किया जाना चाहिए.

124
00:06:54,870 --> 00:06:58,620
आप किस प्रकार के अन्य डिजाइन निर्णय कर सकता है?

125
00:06:58,620 --> 00:07:00,690
हां. >> [छात्र] लागत.

126
00:07:00,690 --> 00:07:02,680
लागत. बहुत अच्छा है.

127
00:07:02,680 --> 00:07:08,060
एक और बात हम हमारे डिजाइन के फैसले के आधार पर हो सकता है खर्च कर रहे हैं.

128
00:07:08,060 --> 00:07:13,130
यदि हम एक व्यापार कर रहे हैं, आप कुछ है कि ज्यादा लागत नहीं लेने के लिए उत्पादन का निर्माण करना चाहते हैं

129
00:07:13,130 --> 00:07:17,720
लेकिन एक विशेष रूप से उच्च कीमत पर बेचते हैं या हमें कुछ लाभ मिल सकता है.

130
00:07:17,720 --> 00:07:21,540
>> ये डिजाइन के सभी विभिन्न प्रकार के होते हैं, लेकिन जब हम इंटरनेट पर कुछ का निर्माण कर रहे हैं

131
00:07:21,540 --> 00:07:25,120
या जब हम कुछ है कि शायद कि ज्यादा खर्च नहीं करने के लिए अब निर्माण करता है का निर्माण कर रहे हैं,

132
00:07:25,120 --> 00:07:28,630
इंटरनेट अनुप्रयोगों की तरह आप इसे में ज्यादा पूंजी फेंक नहीं है

133
00:07:28,630 --> 00:07:30,900
आदेश में कुछ करने के लिए है कि वास्तव में काम करता है -

134
00:07:30,900 --> 00:07:33,490
क्या हम और अधिक के बारे में चिंतित हैं उपयोगकर्ता अनुभव है.

135
00:07:33,490 --> 00:07:36,390
हम इस उपयोगकर्ता केंद्रित डिजाइन फोन.

136
00:07:36,390 --> 00:07:41,550
अनिवार्य रूप से उपयोगकर्ता केंद्रित डिजाइन क्या शामिल अपने उपयोगकर्ताओं के जूते में अपने आप को डाल रहा है.

137
00:07:41,550 --> 00:07:44,870
यदि क्या मैं निर्माण कर रहा हूँ करने के लिए कोई संकेत,

138
00:07:44,870 --> 00:07:48,250
वे स्पष्ट रूप से मन में एक लक्ष्य के साथ अपने विशेष रूप से आवेदन करने के लिए आते हैं,

139
00:07:48,250 --> 00:07:50,280
एक कार्य के साथ वे पूरा करना चाहते हैं.

140
00:07:50,280 --> 00:07:53,650
और अपने काम में ही नहीं है कि कार्य को पूरा करने में मदद के लिए उन्हें

141
00:07:53,650 --> 00:07:57,930
लेकिन उन्हें एक तरह से है कि कुशल है, सहज है कि कार्य को पूरा करने के लिए मदद के लिए,

142
00:07:57,930 --> 00:08:01,900
और, के रूप में किसी व्यक्ति ने कहा कि वहाँ पर पहुँचा जा सकता है.

143
00:08:01,900 --> 00:08:03,750
दक्षता का क्या मतलब है?

144
00:08:03,750 --> 00:08:08,050
क्षमता का मतलब है कि कैसे जल्दी से अपने उपयोगकर्ता मेरे अंतरफलक दिए गए कार्य को पूरा नहीं करता है.

145
00:08:08,050 --> 00:08:11,650
क्या यह क्लिकों की बहुत लेने के लिए उन्हें एक स्थान से दूसरे को पाने के लिए?

146
00:08:11,650 --> 00:08:14,630
यह कठिन है? क्या वे दोहरावदार कार्यों के बहुत सारे करने के लिए है?

147
00:08:14,630 --> 00:08:17,140
हम कुशल के रूप में संभव है कि प्रक्रिया के रूप में बनाना चाहते हैं

148
00:08:17,140 --> 00:08:20,070
इसलिए वे उन चीजों की तरह नहीं है.

149
00:08:20,070 --> 00:08:24,230
Intuitiveness के लिए के रूप में, उदाहरण के लिए, यदि कोई उपयोगकर्ता मेरी इंटरफ़ेस लगता है,

150
00:08:24,230 --> 00:08:27,240
यह है के लिए उन्हें जगह जगह से प्राप्त करने के लिए आसान है?

151
00:08:27,240 --> 00:08:30,390
यह आसान है के लिए उन्हें बाहर निकालने के लिए वे क्या मेरे इंटरफ़ेस में क्लिक करने के लिए है

152
00:08:30,390 --> 00:08:33,770
क्रम में उन्हें या कार्य के लिए लक्ष्य को प्राप्त करने के लिए है कि वे हासिल करना चाहते हैं?

153
00:08:33,770 --> 00:08:37,520
>> और अंत में, एक व्यक्ति के रूप में वहाँ पर कहा, पहुंच बहुत महत्वपूर्ण है.

154
00:08:37,520 --> 00:08:39,640
[पुरुष वक्ता] यह दृष्टि की तरह बातों के लिए पहुंच के लिए आता है,

155
00:08:39,640 --> 00:08:42,740
कैसे मैं वास्तव में जो अंधा होता है किसी के लिए कुछ डिजाइन?

156
00:08:42,740 --> 00:08:46,460
ओह. लोग हैं, जो सब में नहीं देख सकते हैं, हम कुछ स्क्रीन पाठकों बुलाया है.

157
00:08:46,460 --> 00:08:49,070
आप क्या करना चाहिए आप एक तरह से अपनी वेबसाइट का निर्माण करना चाहिए

158
00:08:49,070 --> 00:08:52,020
कि उदाहरण के लिए, विशेष रूप से प्रौद्योगिकी हम क्या कहते हैं -

159
00:08:52,020 --> 00:08:53,590
वहाँ चीजों की अब बहुत सारे हैं.

160
00:08:53,590 --> 00:08:55,660
मुझे लगता है कि वहाँ स्क्रीन जबड़े बुलाया पाठकों के हैं.

161
00:08:55,660 --> 00:08:58,410
इन बातों का एक बहुत पर भरोसा करते हैं हम क्या क्षेत्र नियमों कॉल

162
00:08:58,410 --> 00:09:02,010
क्रम में उपयोगकर्ता के लिए पढ़ने के लिए क्या पृष्ठ पर मौजूद है.

163
00:09:02,010 --> 00:09:05,480
उन लोगों के लिए जो नहीं देख सकते हैं, आपको यह सुनिश्चित करने की जरूरत है कि इन स्क्रीन पाठकों

164
00:09:05,480 --> 00:09:09,130
वास्तव में चुन सकते हैं पृष्ठ पर सामग्री और वास्तव में अपने उपयोगकर्ताओं को दिखा सकते हैं,

165
00:09:09,130 --> 00:09:13,630
अगर आप नहीं देख सकते हैं, कम से कम आप अभी भी पृष्ठ पर सामग्री को समझ सकता हूँ.

166
00:09:13,630 --> 00:09:16,190
हाँ. ठीक है.

167
00:09:16,190 --> 00:09:23,410
काफी अच्छा डिजाइन के बारे में बात कर रहे हैं. चलो बुरा डिजाइन के बारे में बात करते हैं.

168
00:09:23,410 --> 00:09:25,220
ये चीजें हैं जो आप नहीं करना चाहिए.

169
00:09:25,220 --> 00:09:27,890
किसी Craigslist के साथ अपने अनुभवों के बारे में मुझे बता सकते हैं

170
00:09:27,890 --> 00:09:32,190
और क्या उन्हें लगता है कि इस डिजाइन के बारे में बहुत महान नहीं है?

171
00:09:33,690 --> 00:09:36,430
हां. >> [छात्र] मुझे लगता है कि वहाँ एक क्षेत्र में भी कई शब्दों है.

172
00:09:36,430 --> 00:09:39,350
बहुत सारे शब्द हैं, है ना? पूरी तरह से भारी.

173
00:09:39,350 --> 00:09:42,400
आप इस पृष्ठ पर आते हैं और आप यहाँ चीजों की एक पूरी गुच्छा के साथ स्वागत कर रहे हैं

174
00:09:42,400 --> 00:09:43,860
है कि आप भी कोई फर्क नहीं हो सकता है.

175
00:09:43,860 --> 00:09:47,010
उदाहरण के लिए, आप एक राज्य नहीं है कि इस पत्र के साथ शुरू नहीं करता है में रहते हैं.

176
00:09:47,010 --> 00:09:48,690
मान लीजिए कि आप टेक्सास या कुछ में रहते हैं.

177
00:09:48,690 --> 00:09:53,790
>> आप पेज के नीचे सभी तरह स्थान पर हैं करने के लिए स्क्रॉल है.

178
00:09:53,790 --> 00:10:00,320
मैं बोस्टन से हूँ, तो मुझे मैसाचुसेट्स में देखने. मैसाचुसेट्स कहाँ है?

179
00:10:00,320 --> 00:10:03,270
ओह, यह सही यहाँ है. ओह, यह बोस्टन है. ठीक है.

180
00:10:03,270 --> 00:10:09,070
बोस्टन में देखो. [हँसी]

181
00:10:09,070 --> 00:10:12,250
बहुत भारी है, है ना?

182
00:10:12,250 --> 00:10:16,400
वहाँ पर अजीब बातें. [हँसी]

183
00:10:17,320 --> 00:10:19,470
चलो का कहना है कि मैं देख रहा हूँ कहीं रहते हैं.

184
00:10:19,470 --> 00:10:24,130
कितने लोगों को वास्तव Craigslist इस्तेमाल किया है? आप में से टोंस.

185
00:10:24,130 --> 00:10:30,960
बहुत बुरा यह देखो, लेकिन हम इस पर देखने के तरीके हैं.

186
00:10:35,130 --> 00:10:38,970
Img और तस्वीर के बीच अंतर क्या है? किसी ने मुझे बता सकते हैं?

187
00:10:41,350 --> 00:10:42,830
वहाँ वास्तव में कोई फर्क नहीं है.

188
00:10:42,830 --> 00:10:47,710
वे वास्तव में एक ही बात मतलब है, लेकिन वे किसी कारण के लिए उनके लिए अलग लेबल है.

189
00:10:48,980 --> 00:10:53,560
अगर मैं पर क्लिक करें छवि, पृष्ठ पर कुछ भी नहीं होता है.

190
00:10:53,560 --> 00:10:57,490
मैं वास्तव में खोज कुछ होने के लिए फिर से क्लिक करने के लिए है.

191
00:10:57,490 --> 00:11:02,430
एक बेहतर डिजाइन निर्णय है कि वहाँ से किया जा सकता है क्या हो सकता है?

192
00:11:03,820 --> 00:11:08,030
यदि मुझे लगता है कि फिल्टर पर क्लिक कर रहा हूँ, मैं शायद कि विशेष कार्रवाई द्वारा फ़िल्टर करना चाहते हैं

193
00:11:08,030 --> 00:11:09,970
या उस विशेष श्रेणी.

194
00:11:09,970 --> 00:11:14,450
तो खोज फिर प्रेस करने के बजाय, मैं सिर्फ अपने आप को छानने कर सकता है

195
00:11:14,450 --> 00:11:17,060
गूगल शैली की तरह है, जहां वे यह तुरन्त कर.

196
00:11:17,060 --> 00:11:20,440
Malan] रूपों लेकिन ऐसा नहीं है जैसा कि हमने देखा है कि इस प्रकार अब तक उन्हें शारीरिक रूप से प्रस्तुत की जानी है

197
00:11:20,440 --> 00:11:23,170
या कम से कम एक बटन क्लिक करने से टकराने के द्वारा दर्ज करें?

198
00:11:23,170 --> 00:11:26,830
जैसा कि आप उन्हें देखा है अब तक, आप वास्तव में उन चीज़ों को करने के लिए सबमिट करें क्लिक करें.

199
00:11:26,830 --> 00:11:30,090
>> लेकिन जैसा कि टॉमी आप एक दूसरे में दिखाई देगा, वहाँ वास्तव में कर रहे हैं आप के लिए तरीके

200
00:11:30,090 --> 00:11:33,010
ऐसी है कि जब आप उस बात पर क्लिक करें यह स्वचालित रूप से भेज सकते हैं

201
00:11:33,010 --> 00:11:38,840
क्या हम एक AJAX अनुरोध कॉल और डेटा को वापस पाने के लिए और अपने परिणाम तुरंत फ़िल्टर.

202
00:11:38,840 --> 00:11:41,340
वहाँ चीज़ें है कि इस अंतरफलक के साथ गलत कर रहे हैं टन कर रहे हैं.

203
00:11:41,340 --> 00:11:43,530
[Malan] कैम्ब्रिज के लिए खोज कर सकते हैं?

204
00:11:43,530 --> 00:11:47,030
वहाँ थोड़ा विषम कुछ यहाँ है, जहां आप कैंब्रिज के बारे में परवाह

205
00:11:47,030 --> 00:11:54,790
और अभी तक आप Westford, स्प्रिंग हिल, वेस्ट और न्यूटन की तरह हो रही है.

206
00:11:54,790 --> 00:11:57,930
शायद नहीं आदर्श. >> शायद आदर्श नहीं है.

207
00:11:57,930 --> 00:12:03,900
मैं कैसे इस विशेष पृष्ठ पर उपयोगकर्ता के अनुभव को बेहतर बनाने के लिए सक्षम हो सकता है?

208
00:12:03,900 --> 00:12:07,340
हां. >> [छात्र] निर्देश.

209
00:12:07,340 --> 00:12:09,500
ठीक है. क्या भावना की तरह निर्देश?

210
00:12:09,500 --> 00:12:14,630
[छात्र] उदाहरण के लिए, पहली बार प्रयोक्ताओं जो भी Craigslist क्या है पता नहीं है के लिए एक बात

211
00:12:14,630 --> 00:12:17,320
या तुम नहीं जानते कि तुम क्या करना चाहिए रहे हैं.

212
00:12:17,320 --> 00:12:20,150
सही है. तो क्या समझा Craigslist इस पृष्ठ पर महत्वपूर्ण है.

213
00:12:20,150 --> 00:12:23,490
हम वास्तव में उपयोगकर्ताओं को बताने के लिए इस पृष्ठ के लिए वास्तव में क्या कर सकता है.

214
00:12:23,490 --> 00:12:27,090
अगर मैं सिर्फ यह दौरा कर रहा हूँ, मैं स्थानों की एक पूरी गुच्छा देखते हैं. मैं भी वे क्या मतलब है पता नहीं है.

215
00:12:27,090 --> 00:12:29,730
लेकिन अधिक महत्वपूर्ण बात, सिर्फ इस इंटरफेस में देख रहे हैं,

216
00:12:29,730 --> 00:12:35,530
याद है कि मैं चीजों की एक टन करने के लिए नीचे स्क्रॉल करने के लिए एक विशेष समुदाय के लिए किया था

217
00:12:35,530 --> 00:12:37,560
कि मैं वास्तव में इस पर के बारे में परवाह है.

218
00:12:37,560 --> 00:12:39,820
मैं कर सकता है एक तेज़ तरीका क्या है? हां.

219
00:12:39,820 --> 00:12:43,290
[छात्र] उन्हें विभाजित पूरब, पश्चिम क्षेत्रों में. ठीक है. >>

220
00:12:43,290 --> 00:12:47,460
मैं उन्हें मदद कर सकता है कि मुझे तेजी से निर्धारित करने के लिए और अधिक श्रेणियों में विभाजित कर सकते हैं

221
00:12:47,460 --> 00:12:49,820
कैसे उस विशेष स्थान को पाने के लिए.

222
00:12:49,820 --> 00:12:54,510
[छात्र] एक ड्रॉप - डाउन सूची रखो. >> ठीक है. ठीक है.

223
00:12:54,510 --> 00:12:58,240
मैं एक ड्रॉप - डाउन मेनू का उपयोग करें, क्योंकि हम चीजों का एक निश्चित सेट हो सकता है

224
00:12:58,240 --> 00:13:00,100
और हम उन्हें एक ड्रॉप डाउन मेनू में दिखा सकता है.

225
00:13:00,100 --> 00:13:02,240
इस तरह यह स्क्रीन पर इतनी जगह नहीं ले करता है.

226
00:13:02,240 --> 00:13:05,630
लेकिन उससे भी बेहतर है, हम क्या कर सकते है?

227
00:13:05,630 --> 00:13:09,220
हां. >> [अश्राव्य छात्र प्रतिक्रिया] >> आपको लगता है कि फिर से कह सकते हैं? >> [छात्र] खोज बॉक्स.

228
00:13:09,220 --> 00:13:11,260
हाँ, एक खोज बॉक्स. यह बहुत अच्छा है.

229
00:13:11,260 --> 00:13:16,430
हम वास्तव में क्या कर सकते है अगर हम स्लाइड, खोज बॉक्स पर वापस देखो.

230
00:13:16,430 --> 00:13:21,520
स्वत: पूर्ण. परिणाम है कि आप जानते हैं कि के माध्यम से खोज करने के लिए बहुत आसान है जिस तरह से एक सेट में हैं.

231
00:13:21,520 --> 00:13:25,980
अगर मैं बो टाइपिंग शुरू, बस मुझे सभी परिणाम है कि उनमें से बो के अंदर है दिखाते हैं.

232
00:13:25,980 --> 00:13:29,030
कि जिस तरह से मैं बहुत आसानी से विशेष रूप से एक मैं करने के लिए जाना चाहते हैं कर सकते हैं

233
00:13:29,030 --> 00:13:32,390
यह वास्तव में बड़ी सूची के माध्यम से स्क्रॉल करने के बजाय.

234
00:13:32,390 --> 00:13:37,450
>> ये वास्तव में कम लटका फल के सभी प्रकार के कर रहे हैं कि कोई है जो Craigslist लागू कर रहा है

235
00:13:37,450 --> 00:13:42,500
वास्तव में उनके विशेष उपयोगकर्ता के लिए एक बहुत बेहतर वेबसाइट पर अनुभव करने के लिए कर सकते हैं.

236
00:13:42,500 --> 00:13:46,370
ठीक है. पर्याप्त बुरा वेबसाइटों के बारे में बात कर रहे हैं.

237
00:13:46,370 --> 00:13:49,410
फेसबुक के बारे में बात करते हैं.

238
00:13:50,880 --> 00:13:54,390
जब Facebook बाहर आया, और विशेष रूप से Facebook तस्वीरें

239
00:13:54,390 --> 00:13:57,870
वहाँ समय है जो वास्तव में एक ही बातें कर सकता है पर अन्य सेवाओं के बहुत सारे थे.

240
00:13:57,870 --> 00:14:00,740
वे एल्बमों में अपनी तस्वीरों का आयोजन कर सकता है.

241
00:14:00,740 --> 00:14:03,360
आप क्या कर सकता है आप उन्हें सेट में के रूप में अच्छी तरह से व्यवस्थित कर सकता है.

242
00:14:03,360 --> 00:14:06,070
आप उन्हें तिथि से व्यवस्थित कर सकते हैं. आप इन सभी विशेष बातें कर सकता है.

243
00:14:06,070 --> 00:14:11,710
लेकिन किसी को भी पता नहीं है क्या Facebook तस्वीरें इसे जारी किया गया था उस समय विस्फोट किया?

244
00:14:11,710 --> 00:14:15,080
हां. >> [छात्र] टैग. >> टैग. बिल्कुल सही.

245
00:14:15,080 --> 00:14:21,300
हम यहाँ पर मिलो, जो कि CS50 bandana के साथ हमारे कुत्ते शुभंकर है.

246
00:14:21,300 --> 00:14:24,810
आप देख सकते हैं कि हम बीच में इस टैगिंग की सुविधा है.

247
00:14:24,810 --> 00:14:28,240
और क्या एक प्रयोज्य दृष्टि से Facebook तस्वीरें इतनी दिलचस्प बना दिया

248
00:14:28,240 --> 00:14:34,130
यह है कि यह वास्तव में इस के माध्यम से लोगों को उनके फ़ोटो में अपने मित्रों को शामिल करने की अनुमति दी.

249
00:14:34,130 --> 00:14:37,680
Facebook के लिए, के बाद से अपनी वेबसाइट विशेष रूप से सामाजिक है,

250
00:14:37,680 --> 00:14:40,750
यह सामाजिक वातावरण के इस प्रकार के निर्माण के बारे में है.

251
00:14:40,750 --> 00:14:42,620
फ़ोटो का अनुभव एक बहुत अधिक सुधार

252
00:14:42,620 --> 00:14:46,390
क्योंकि वे वास्तव में कह शुरू कर सकता है, "इन लोगों के बीच कनेक्शन हैं,

253
00:14:46,390 --> 00:14:49,220
और इन लोगों के बारे में आप वास्तव में के बारे में परवाह तस्वीरें हैं. "

254
00:14:49,220 --> 00:14:52,200
इसे का कुछ भाग भी तरह अहंकार है.

255
00:14:52,200 --> 00:14:54,980
लोगों को तस्वीरें और इस तरह की बातों में चिह्नित किया जा पसंद है.

256
00:14:54,980 --> 00:14:58,510
हालांकि यह एक अच्छा मानव विशेषता जरूरी नहीं है,

257
00:14:58,510 --> 00:15:01,910
एक ही समय में यह अच्छा डिजाइन निर्णय पर आधारित है

258
00:15:01,910 --> 00:15:04,860
क्योंकि लोगों को वास्तव में इस तरह की चीजों के बारे में परवाह है.

259
00:15:04,860 --> 00:15:07,190
तो यह है कि Facebook तस्वीरें है.

260
00:15:07,190 --> 00:15:09,800
>> लेकिन फेसबुक के अधिक आम तौर पर बात करते हैं.

261
00:15:09,800 --> 00:15:13,400
मुझे यकीन है कि यहाँ के लोग बहुत फेसबुक के बारे में राय है,

262
00:15:13,400 --> 00:15:16,430
दोनों अच्छे डिजाइन फैसले और बुरा डिजाइन निर्णय.

263
00:15:16,430 --> 00:15:20,270
तो चलो उतारना या खुश हो.

264
00:15:23,480 --> 00:15:26,450
आओ. मैं जानता हूँ कि आप के सभी Facebook का उपयोग.

265
00:15:26,450 --> 00:15:30,970
किसी को बुरा कहने के लिए कुछ या कुछ अच्छा करने के लिए इस बारे में कहना है. हां.

266
00:15:30,970 --> 00:15:35,060
समाचार फ़ीड में [छात्र] वहाँ चीज़ें मैं वास्तव में बारे में परवाह नहीं की एक बहुत कुछ है.

267
00:15:35,060 --> 00:15:37,740
समाचार फ़ीड बातें आप के बारे में परवाह नहीं सकता था की एक बहुत कुछ दिखा.

268
00:15:37,740 --> 00:15:41,660
आप फेसबुक पर दोस्त तुम जो 2 या 3 साल के लिए नहीं मिले हैं

269
00:15:41,660 --> 00:15:43,860
और आप अपनी खबर परिणामों को अपने समाचार फ़ीड में popping देख

270
00:15:43,860 --> 00:15:45,870
और तुम सच में इसके बारे में परवाह नहीं है.

271
00:15:45,870 --> 00:15:48,700
Facebook वास्तव में एक के लिए यह बेहतर बनाने का प्रयास किया है,

272
00:15:48,700 --> 00:15:53,150
और वे वास्तव में देर के रूप में समाचार फ़ीड के शीर्ष के लिए प्रासंगिक परिणाम धक्का करने की कोशिश की है

273
00:15:53,150 --> 00:15:58,300
ताकि आप वास्तव में दोस्त हैं जो आप या अपने करीबी दोस्तों के लिए प्रासंगिक हैं चीजें देखते हैं.

274
00:15:58,300 --> 00:16:01,110
और कुछ? हां.

275
00:16:01,110 --> 00:16:06,400
[अश्राव्य छात्र प्रतिक्रिया] >> आपको लगता है कि फिर से कह सकते हैं?

276
00:16:06,400 --> 00:16:10,140
[छात्र] विज्ञापन अपेक्षाकृत विनीत हैं. क्या अर्थ? >>

277
00:16:10,140 --> 00:16:16,370
[अश्राव्य छात्र प्रतिक्रिया] वे बैनर की तरह स्क्रीन पर प्रकाश नहीं है,.

278
00:16:16,370 --> 00:16:17,760
ठीक है. यह अच्छा है.

279
00:16:17,760 --> 00:16:25,030
यदि आप 90 के दशक से इंटरनेट याद - >> [Malan] मैं वहां गया था. >> वह वहाँ था. [हँसी]

280
00:16:25,030 --> 00:16:29,210
आप चमकती GIFs पृष्ठभूमि, sparkly बातें याद कर सकते हैं,

281
00:16:29,210 --> 00:16:31,570
GeoCities चीजों की शैली की तरह.

282
00:16:31,570 --> 00:16:34,080
यह वास्तव में एक अच्छा डिजाइन का एक उदाहरण नहीं है

283
00:16:34,080 --> 00:16:36,690
क्योंकि यह वास्तव में सामग्री से ध्यान भंग है.

284
00:16:36,690 --> 00:16:39,590
येल कला उनकी पृष्ठभूमि के रूप में एनिमेटेड GIFs का प्रयोग किया जाता है वेबसाइट

285
00:16:39,590 --> 00:16:41,800
और आप पृष्ठ पर कुछ भी नहीं पढ़ सकता है,

286
00:16:41,800 --> 00:16:44,870
लेकिन मुझे लगता है कि किसी को वास्तव में उनसे बात की है और अब यह एक अलग सा है.

287
00:16:44,870 --> 00:16:48,940
[Malan] अब यह ज्यादा बेहतर है. >> अब यह ज्यादा बेहतर है, जैसा कि आप देख सकते हैं. >> [Malan] ओह, हाँ.

288
00:16:48,940 --> 00:16:56,020
बस महान, बस - हाँ. ठीक है.

289
00:16:56,020 --> 00:17:00,560
>> इसे का एक हिस्सा भी अपने पृष्ठ संभवतः बहुत minimalist और बहुत ही समझा कर रही है

290
00:17:00,560 --> 00:17:05,690
एक तरीका है कि बहुत तार्किक है पृष्ठ प्रवाह पर बातें तो और एक दूसरे के रास्ते में नहीं मिलता है.

291
00:17:05,690 --> 00:17:11,849
अन्य बातों के बारे में क्या प्रकार फेसबुक के बारे में फेसबुक के बारे में अच्छा या बुरा?

292
00:17:11,849 --> 00:17:15,730
चलो बस एक डिजाइन बातचीत यहाँ है.

293
00:17:19,470 --> 00:17:21,339
ओह. कहां? हाँ.

294
00:17:21,339 --> 00:17:25,640
[छात्र] नए समय प्रणाली आप अपने अतीत के बारे में व्यक्ति का प्रोफाइल खोज करने के लिए अनुमति देता है.

295
00:17:25,640 --> 00:17:28,119
ओह, समयरेखा.

296
00:17:28,119 --> 00:17:30,280
समयरेखा एक बड़ी बात है, क्योंकि यह आप डंठल अपने दोस्तों की मदद से

297
00:17:30,280 --> 00:17:33,300
वापस जब वे हाई स्कूल में थे.

298
00:17:35,160 --> 00:17:38,060
समय अच्छा है क्योंकि यह आपको एक बहुत तेजी से सामग्री के माध्यम से फिल्टर,

299
00:17:38,060 --> 00:17:41,500
यह आपको बातें है कि अन्यथा आप एक बहुत लंबे समय ले लिया लगता है

300
00:17:41,500 --> 00:17:45,840
अभी तक स्क्रॉल और नीचे, ऊपर, ऊपर, ऊपर, ऊपर, समय में वापस जाने की तरह है.

301
00:17:45,840 --> 00:17:48,910
लेकिन फिर वहाँ भी है कि उपयोगकर्ता के अनुभव के मामले में एक नकारात्मक पक्ष की तरह.

302
00:17:48,910 --> 00:17:51,190
कि क्या हो सकता है?

303
00:17:51,190 --> 00:17:56,780
बड़ा शब्द है कि पी आर के साथ शुरू होता है. >> [छात्र] गोपनीयता. >> गोपनीयता, है ना?

304
00:17:56,780 --> 00:17:59,970
गोपनीयता एक बड़ा उपयोगकर्ता अनुभव मुद्दा है.

305
00:17:59,970 --> 00:18:07,190
यह बातें मैं फेसबुक के बारे में सबसे अधिक अब नफरत में से एक है. [हँसी]

306
00:18:07,190 --> 00:18:09,000
[Malan] जैसा कि मैंने अब नहीं है.

307
00:18:09,000 --> 00:18:11,380
दाऊद को एहसास नहीं था कि यह वास्तव में कल तक हुआ.

308
00:18:11,380 --> 00:18:14,560
तो अब वह जानता है कि हर बार मैं उसे चैट मैं जानता हूँ कि वह मुझे से अनदेखी कर रहा है.

309
00:18:14,560 --> 00:18:16,880
Malan [] अजीब हिस्सा मैं वास्तव में किया गया था उसे अनदेखी कर,

310
00:18:16,880 --> 00:18:21,040
और मुझे नहीं पता था कि वह जानता था कि मैं उसे अनदेखा कर रहा था. [हँसी]

311
00:18:21,040 --> 00:18:24,030
गोपनीयता एक बड़ा मुद्दा है.

312
00:18:24,030 --> 00:18:28,670
यहाँ किसी ने मुझे बता सकते हैं कि क्या फेसबुक गोपनीयता के बारे में बुरा हो सकता है

313
00:18:28,670 --> 00:18:32,270
तथ्य यह है कि वे इस तरह बातें करते हैं के अलावा?

314
00:18:32,270 --> 00:18:37,240
यह क्या है विशेष रूप से कठिन फेसबुक गोपनीयता के लिए सम्मान के साथ क्या करना है?

315
00:18:37,240 --> 00:18:40,340
उस तरह के एक प्रमुख सवाल है.

316
00:18:41,680 --> 00:18:43,930
हां. >> [छात्र] कुछ लोगों से अपनी तस्वीरों छुपाएं.

317
00:18:43,930 --> 00:18:46,170
सही है. वास्तव में, कुछ लोगों से अपनी तस्वीरों को छिपाने के लिए.

318
00:18:46,170 --> 00:18:51,290
वे ऊपरी सही है कि आपको एक तस्वीर की गोपनीयता टॉगल में इस छोटे, छोटे बटन है.

319
00:18:51,290 --> 00:18:56,360
उनकी गोपनीयता विकल्प मेनू के विभिन्न प्रकार के बीच बहुत विविध रहे हैं.

320
00:18:56,360 --> 00:18:59,510
>> वे एक बहुत बेहतर है, इसके बारे में मिल गया है हाल ही में, लेकिन यह मामला

321
00:18:59,510 --> 00:19:04,870
जब भी आप को देखकर तस्वीरों से अपने मित्रों को रोकने के लिए चाहते थे कि,

322
00:19:04,870 --> 00:19:08,280
आप की तरह किया जा रहा है की एक बहुत जटिल प्रक्रिया 5 कदम के माध्यम से जाना होगा,

323
00:19:08,280 --> 00:19:11,150
मुझे इस लिंक पर क्लिक करें, अब मुझे फिर से क्लिक करें, मुझे फिर से क्लिक करें,

324
00:19:11,150 --> 00:19:13,420
मुझे निर्दिष्ट जो लोग मेरी तस्वीरें नहीं देख सकते हैं.

325
00:19:13,420 --> 00:19:17,250
वह फेसबुक के भाग पर विशेष रूप से अच्छा नहीं है

326
00:19:17,250 --> 00:19:20,530
क्योंकि वास्तव में उपयोगकर्ता के अनुभव के बारे में इतना उन्हें स्वतंत्रता दे रहा है

327
00:19:20,530 --> 00:19:22,460
नियंत्रित करने के लिए लोग क्या देख सकते हैं.

328
00:19:22,460 --> 00:19:25,550
हम इस उपयोगकर्ता नियंत्रण और स्वतंत्रता कहते हैं.

329
00:19:25,550 --> 00:19:31,090
यदि आप नहीं दे रहे हैं कि अपने उपयोगकर्ताओं एक तरीका है कि कुशल और सहज है,

330
00:19:31,090 --> 00:19:34,570
तो आपके उपयोगकर्ता अनुभव है कि वास्तव में महान बिल्कुल नहीं है.

331
00:19:34,570 --> 00:19:38,200
 तुम लोगों को फेसबुक के बारे में कुछ भी कहना चाहेंगे?

332
00:19:38,700 --> 00:19:41,420
मैं यह कैसे बंद बारी है?

333
00:19:41,420 --> 00:19:46,290
[Ong] आप इस बंद बारी नहीं है, और है कि फेसबुक के हिस्से पर एक विशाल प्रयोज्य दोष है.

334
00:19:46,290 --> 00:19:49,410
यह फीचर - मैं वास्तव में कल इसे में देखा -

335
00:19:49,410 --> 00:19:53,940
यह भी है कि तुम यह नहीं कर सकता है या इसे कहीं दफन है बहुत, बहुत गहरी

336
00:19:53,940 --> 00:19:58,050
फेसबुक के recesses में क्योंकि मैं समझ नहीं कैसे इस कार्यशीलता को निष्क्रिय करने के लिए सब पर कर सकते हैं.

337
00:19:58,050 --> 00:20:00,400
Malan [] लेकिन कभी कभी इन निर्णय स्पष्ट नहीं कर रहे हैं

338
00:20:00,400 --> 00:20:03,890
क्योंकि आप लोग हमें दिया है CS50 विभिन्न आवेदनों पर उपयोगी प्रतिक्रिया का एक बहुत

339
00:20:03,890 --> 00:20:05,710
और वेबसाइटों है कि इस पाठ्यक्रम का उपयोग करता है.

340
00:20:05,710 --> 00:20:10,260
हम इन अनुरोधों और सुझावों के सभी लागू नहीं किया है.

341
00:20:10,260 --> 00:20:14,550
>> उस के भाग के इतने सारे अनुरोध प्राप्त करने के लिए है कि यह समय के एक समारोह है,

342
00:20:14,550 --> 00:20:17,070
लेकिन कभी कभी हम सिर्फ एक सचेत निर्णय की तरह बनाने के लिए,

343
00:20:17,070 --> 00:20:19,830
"आप सुझाव के लिए धन्यवाद, लेकिन हम इससे सहमत नहीं है."

344
00:20:19,830 --> 00:20:24,350
तो आप वास्तव में कैसे तय है कि आप क्या करना चाहिए अगर अपने उपयोगकर्ताओं को लगता है कि आप कुछ करना चाहिए

345
00:20:24,350 --> 00:20:28,110
यहां तक ​​कि अगर आप जरूरी नहीं करते हैं?

346
00:20:28,110 --> 00:20:32,360
यह वास्तव में अपने उपयोगकर्ताओं को क्या कहना है सुनने के बीच एक अच्छा संतुलन है

347
00:20:32,360 --> 00:20:35,840
और वास्तव में लाइन के कुछ प्रकार जहाँ तुम कहते हो,

348
00:20:35,840 --> 00:20:37,750
"हम इन उपयोगकर्ताओं को क्या कहते हैं नहीं जा रहे हैं."

349
00:20:37,750 --> 00:20:42,520
और विशेष रूप में, मुझे लगता है कि वहाँ हेनरी फोर्ड द्वारा एक कहावत है कि इस को बहुत अच्छी तरह राशियाँ था.

350
00:20:42,520 --> 00:20:47,130
"अगर मैं लोगों से पूछा था कि वे क्या चाहते थे, उन्होंने कहा कि वे तेजी से घोड़ों चाहता होगा."

351
00:20:47,130 --> 00:20:51,840
किसी को चिढ़ाने के अलावा है कि बोली वास्तव में क्या मतलब है की तरह कर सकते हैं?

352
00:20:51,840 --> 00:20:56,060
ऐसा नहीं है कि उपयोगकर्ताओं को पता है कि वे क्या चाहते हैं,

353
00:20:56,060 --> 00:20:59,180
लेकिन इसे और अधिक है कि -

354
00:20:59,180 --> 00:21:02,720
[छात्र] वे नहीं जानते कि क्या हो सकता है.

355
00:21:02,720 --> 00:21:06,140
भाग में वे नहीं जानते कि क्या हो सकता है.

356
00:21:07,880 --> 00:21:11,440
कि थोड़ा अलग छेड़ो. तुम क्या मतलब है?

357
00:21:11,440 --> 00:21:21,340
[अश्राव्य छात्र प्रतिक्रिया]

358
00:21:21,340 --> 00:21:25,770
यह अच्छा है. मुझे लगता है कि हम यहाँ कहने की कोशिश कर रहे हैं क्या है कि लोगों को पता है कि वे क्या चाहते हैं.

359
00:21:25,770 --> 00:21:28,050
वे तेजी से घोड़ों चाहता हूँ.

360
00:21:28,050 --> 00:21:29,840
क्या वे वास्तव में चाहते हैं तेजी से स्थानांतरित करने की क्षमता है,

361
00:21:29,840 --> 00:21:32,310
लेकिन वे वास्तव माध्यम है जिसके द्वारा प्राप्त करने के लिए पता नहीं है.

362
00:21:32,310 --> 00:21:36,330
जब आप अपने उपयोगकर्ताओं के लिए आते हैं और अपने उपयोगकर्ताओं को आप कुछ बता

363
00:21:36,330 --> 00:21:39,700
और वे आपको बता, "हम इन सुविधाओं और इन सुविधाओं और इन सुविधाओं चाहते हैं,

364
00:21:39,700 --> 00:21:42,650
आप जरूरी के बारे में सोचना नहीं चाहता, "मुझे आगे जाना है

365
00:21:42,650 --> 00:21:44,720
"को लागू करने के लिए और क्या वे स्पष्ट रूप से कहते हैं,"

366
00:21:44,720 --> 00:21:48,610
लेकिन आप के बारे में सोचना चाहते क्या है, "विचारों की तरह मैं उस से क्या मिल सकता है?"

367
00:21:48,610 --> 00:21:50,450
वे वास्तव में क्या चाहते हो?

368
00:21:50,450 --> 00:21:55,560
>> और वहाँ से आप क्या कर सकते हैं कुछ है कि उन अनुरोधों को संतुष्ट डिजाइन

369
00:21:55,560 --> 00:22:00,340
लेकिन जरूरी नहीं कि तरीका है कि उपयोगकर्ता इसे संतुष्ट हो की उम्मीद में.

370
00:22:00,340 --> 00:22:03,830
तो अंतिम परियोजनाओं की तरह बहुत ही वास्तविक संदर्भ में कुछ के लिए,

371
00:22:03,830 --> 00:22:07,900
एक उपयोगी अनुमानी क्या है जब यह कुछ बेहतर बनाने के लिए आता है,

372
00:22:07,900 --> 00:22:10,630
खासकर अगर डिजाइनर ने अपने बारे में यह अहंकार है

373
00:22:10,630 --> 00:22:14,360
जिससे आप सॉर्ट का पता क्या सबसे अच्छा है, आप अपने उपयोगकर्ताओं से इनपुट ले सकता है,

374
00:22:14,360 --> 00:22:16,580
लेकिन आप वास्तव में कैसे उस प्रतिक्रिया हो रही है के बारे में जाना है?

375
00:22:16,580 --> 00:22:21,610
अंतिम परियोजनाओं में बहुत concretely, क्या इष्टतम परिणाम यहाँ पैदा करता है?

376
00:22:21,610 --> 00:22:25,030
क्या इष्टतम परिणामों के उत्पादन और मैं इस पर एक दूसरे में जाना जाएगा -

377
00:22:25,030 --> 00:22:29,190
और फिर विकासशील परीक्षण और फिर पुनरावृति की इस प्रक्रिया है.

378
00:22:29,190 --> 00:22:32,020
मैं परीक्षण द्वारा क्या मतलब है आम तौर पर होता है जब आप कुछ डिजाइन

379
00:22:32,020 --> 00:22:36,970
आपको लगता है कि यह काफी अच्छा है, जैसे, "मैं इस तरह के एक महान डिजाइनर हूँ हर कोई इस प्यार करने जा रहा है."

380
00:22:36,970 --> 00:22:41,600
और फिर आप इसे डाल बाहर वहाँ और लोगों को वास्तव में किसी कारण के लिए यह पसंद नहीं है.

381
00:22:41,600 --> 00:22:46,820
तुम्हें क्या करना है क्या आप चीजें हैं जो लोगों की तरह करते हैं के कुछ हिस्सों को ले जाना है

382
00:22:46,820 --> 00:22:49,180
और चीजें हैं जो लोगों को पसंद नहीं सुधार.

383
00:22:49,180 --> 00:22:53,080
यह एक बहुत ही स्पष्ट प्रक्रिया की तरह लगता है, लेकिन इस प्रक्रिया लगातार iterating

384
00:22:53,080 --> 00:22:55,980
क्या आप पहले से ही बनाया है के शीर्ष पर एक प्रक्रिया है कि तुम में मदद करता है

385
00:22:55,980 --> 00:22:59,730
न केवल अपने खुद के डिजाइन कौशल को निखारने के लिए, लेकिन यह भी मदद करता है आप डिजाइन को परिष्कृत

386
00:22:59,730 --> 00:23:03,790
इतना है कि लोगों को वास्तव में अपने उत्पाद को भी अधिक से अधिक वे पहले किया था की सराहना करते हैं.

387
00:23:03,790 --> 00:23:07,390
>> मैं आप वास्तव में क्या हो सकता है की अधिक ठोस उदाहरण के लिए जाना होगा.

388
00:23:07,390 --> 00:23:11,390
एक उत्पाद की एक अंतिम उदाहरण की तरह के रूप में, कश्ती में देखो.

389
00:23:11,390 --> 00:23:14,970
कश्ती जब वह बाहर आया बहुत, बहुत लोकप्रिय था.

390
00:23:14,970 --> 00:23:18,760
क्यों किसी को अनुमान कर सकते हैं?

391
00:23:18,760 --> 00:23:20,950
चीजों की तरह क्या आप इस बारे में की तरह अगर आप इसे इस्तेमाल किया है

392
00:23:20,950 --> 00:23:23,990
या क्या बातें आप पसंद नहीं की तरह कर रहे हैं?

393
00:23:23,990 --> 00:23:31,590
हां. >> [अश्राव्य छात्र प्रतिक्रिया] >> ठीक है.

394
00:23:31,590 --> 00:23:34,730
दे रहा है कि इसे का हिस्सा है उपयोगकर्ता एक प्रश्न है कि अधिक प्रशस्त है

395
00:23:34,730 --> 00:23:38,150
एक बहुत प्रतिबंधक की तरह एक से अधिक, "आप अपने शुरू की तारीख लेने के लिए है

396
00:23:38,150 --> 00:23:39,810
"और आप अपनी समाप्ति तिथि लेने जाना है."

397
00:23:39,810 --> 00:23:44,910
वास्तव में, यह आपको इसके बारे में लचीला हो और यह कि सीमा में उड़ानों की आप सभी देता है.

398
00:23:44,910 --> 00:23:46,730
और कुछ?

399
00:23:46,730 --> 00:23:50,530
[छात्र] वे कीमत में फीस शामिल हैं.

400
00:23:50,530 --> 00:23:53,330
वे कीमत में फीस शामिल है.

401
00:23:53,330 --> 00:23:56,720
करों और बातें है कि वास्तव में कीमत में सीधे ऊपरी बाएँ में जाना

402
00:23:56,720 --> 00:24:00,710
तो आप सोच में नहीं बरगलाया कि आप वास्तव में एक $ 240 उड़ान के लिए भुगतान कर रहे हैं कर रहे हैं

403
00:24:00,710 --> 00:24:03,280
जब यह वास्तव में 330 डॉलर है.

404
00:24:03,280 --> 00:24:06,200
और कुछ? हां.

405
00:24:06,200 --> 00:24:10,140
[अश्राव्य छात्र प्रतिक्रिया]

406
00:24:10,140 --> 00:24:14,610
मुझे यकीन है कि यदि वे वास्तव में आपको लगता है कि नहीं कर रहा हूँ.

407
00:24:14,610 --> 00:24:18,310
मैं गलत हो सकता है.

408
00:24:18,310 --> 00:24:23,360
यह एक दिलचस्प बात अगर आप विशेष फिल्टर पर अधिक भार डाल चाहते हो सकता है

409
00:24:23,360 --> 00:24:27,000
इतना है कि वे शीर्ष पर है कि फिल्टर करने के लिए संबंधित परिणाम धक्का.

410
00:24:27,000 --> 00:24:31,920
लेकिन किसी ने मुझे बता इस बाईं ओर के बारे में इतना खास क्या है?

411
00:24:31,920 --> 00:24:39,540
आप पारंपरिक कैसे किया इस से पहले एक इंटरनेट सेवा पर एक उड़ान लग रही हो?

412
00:24:41,600 --> 00:24:44,650
>> हां. >> [अश्राव्य छात्र प्रतिक्रिया] >> आप कहते हैं कि कर सकते हैं -

413
00:24:44,650 --> 00:24:47,530
[छात्र] प्रत्येक एयरलाइन. >> हाँ. प्रत्येक एयरलाइन की अपनी वेबसाइट है.

414
00:24:47,530 --> 00:24:50,110
यह बातें समेकित करता है. और?

415
00:24:50,110 --> 00:24:52,190
[छात्र] आप जानते हैं कि वास्तव में समय क्या आप जा रहे हैं.

416
00:24:52,190 --> 00:24:54,460
तुम्हें पता है कि वास्तव में समय क्या आप जा रहे हैं,

417
00:24:54,460 --> 00:24:59,380
लेकिन विशेष रूप से फिल्टर करने के लिए संबंधित.

418
00:25:00,710 --> 00:25:03,540
चलो मुझे कश्ती खींच.

419
00:25:11,490 --> 00:25:14,020
हे भगवान, पॉप - अप. बुरा उपयोगकर्ता अनुभव.

420
00:25:14,020 --> 00:25:17,230
क्या होता है जब मैं इस स्लाइडर चाल?

421
00:25:17,230 --> 00:25:21,010
[छात्र] स्वचालित अद्यतन. >> [Ong] स्वचालित अद्यतन.

422
00:25:21,010 --> 00:25:23,440
यह कुछ है कि बहुत महत्वपूर्ण है.

423
00:25:23,440 --> 00:25:25,380
इस से पहले, जब भी आप एक उड़ान देखना चाहता था

424
00:25:25,380 --> 00:25:28,410
आप अपने इनपुट स्थान, अपने उत्पादन स्थान, प्रेस खोज में डाल दिया था,

425
00:25:28,410 --> 00:25:31,190
यह है कि प्रक्रिया और अपने परिणामों को दिखा सकते हैं.

426
00:25:31,190 --> 00:25:34,120
यदि आप आपकी क्वेरी बदलना चाहते थे, तुम वापस दो बार दबा होता है,

427
00:25:34,120 --> 00:25:39,770
खरोंच से एक नई क्वेरी में दर्ज करते हैं, और फिर इसे करो पर और फिर से.

428
00:25:39,770 --> 00:25:43,910
इस तरह से कुछ के बारे में अच्छी बात यह है कि यह बीच में एक बहुत [unintelligible] बात का उपयोग करता है.

429
00:25:43,910 --> 00:25:46,230
जब भी आप कुछ इस तरह करते हैं, यह बंद एक अनुरोध शूटिंग

430
00:25:46,230 --> 00:25:48,420
और यह सभी तुरंत परिणाम देता है.

431
00:25:48,420 --> 00:25:51,680
तत्काल प्रतिक्रिया के इस तरह के कुछ है कि कश्ती बेतहाशा लोकप्रिय बनाया है

432
00:25:51,680 --> 00:25:55,910
क्योंकि यह वास्तव में मेरे लिए सिर्फ मेरे क्वेरी को बदलने के लिए आसान है

433
00:25:55,910 --> 00:25:58,890
और बाहर निकालने के लिए चीजें हैं जो एक विशेष सीमा के आसपास हैं

434
00:25:58,890 --> 00:26:01,950
आगे और पीछे जाने, आगे और पीछे, आगे और पीछे करने के लिए बिना.

435
00:26:01,950 --> 00:26:05,200
इसलिए इन चीजों के सभी प्रकार आप जब आप अपनी वेबसाइट डिजाइन कर रहे हैं के बारे में सोचना चाहते हैं.

436
00:26:05,200 --> 00:26:08,930
कैसे मैं यह बहुत ही कुशल बनाने के लिए अपने उपयोगकर्ताओं के माध्यम से जाने के लिए जो कुछ भी वे पर काम कर रहे हैं

437
00:26:08,930 --> 00:26:13,010
और अपने अंतिम लक्ष्य को प्राप्त करने के लिए जितना जल्दी संभव हो?

438
00:26:13,010 --> 00:26:16,430
[Malan] और यूसुफ के बारे में जानते हुए भी कि वे क्या चाहते हैं जरूरी नहीं कि उपयोगकर्ताओं पहले बिंदु

439
00:26:16,430 --> 00:26:18,640
क्या तुम लोगों को अब HTML के बारे में पता के आधार पर

440
00:26:18,640 --> 00:26:22,780
और आप चेक बॉक्स, रेडियो बटन, चुनिंदा मेनू, इनपुट क्षेत्रों और इस तरह है,

441
00:26:22,780 --> 00:26:26,140
आप एक उड़ान के लिए शुरू करने का समय चुनने की धारणा को कैसे लागू होगा?

442
00:26:26,140 --> 00:26:30,030
>> आप जो उन विभिन्न UI तंत्र का प्रयोग करेंगे?

443
00:26:30,030 --> 00:26:34,100
अगर तुम सिर्फ HTML की राशि पहले पढ़ाया जाता था कि पता

444
00:26:34,100 --> 00:26:39,070
और आप जानते हैं कि जानकारी रेडियो बटन, चेक बॉक्स, ड्रॉप - चढ़ाव और इनपुट बॉक्स हैं,

445
00:26:39,070 --> 00:26:43,320
अपने स्वाभाविक पसंद तिथियाँ चुनने के लिए क्या किया गया है?

446
00:26:43,320 --> 00:26:48,670
[छात्र] इनपुट. >> इनपुट. या शायद यह भी एक तारीखों के सभी के साथ ड्रॉप - डाउन है, है ना?

447
00:26:48,670 --> 00:26:53,170
तो इस तरह बाईं ओर अधिक जटिल UI तंत्र है कि आप को लागू कर सकते हैं के साथ,

448
00:26:53,170 --> 00:26:55,500
आप इस प्रक्रिया को और अधिक सहज ज्ञान युक्त एक स्लाइडर के साथ कर सकते हैं

449
00:26:55,500 --> 00:27:01,020
क्योंकि समय निरंतर है, और लोगों को आमतौर पर यह असतत मात्रा के संदर्भ में नहीं लगता है.

450
00:27:01,020 --> 00:27:04,950
सही सभी. आखिरी बात.

451
00:27:04,950 --> 00:27:07,370
दस प्रयोज्य heuristics.

452
00:27:07,370 --> 00:27:10,820
सभी बातें हम के बारे में बात की शायद एक इन श्रेणियों के अंतर्गत आते हैं.

453
00:27:10,820 --> 00:27:14,420
यदि आप इस लिंक है, जो ऑनलाइन साइटों तैनात किया जाएगा करने के लिए जाना है,

454
00:27:14,420 --> 00:27:18,900
आप वास्तव में करने में सक्षम हो जाएगा, के रूप में आप अपनी साइट डिजाइन, मन में इन heuristics रखने

455
00:27:18,900 --> 00:27:21,330
और अंगूठे के इन नियमों.

456
00:27:21,330 --> 00:27:26,610
अपनी परियोजनाओं के लिए, मैं क्या सुझाव है कि आप क्रम में अपने app बेहतर डिजाइन

457
00:27:26,610 --> 00:27:28,850
कागज प्रोटोटाइप पहले करना है.

458
00:27:28,850 --> 00:27:32,150
जब आप अपने आवेदन के बारे में सोच रहे हैं, बहुत जल्दी स्केच क्या आप की तरह देखने के लिए करना चाहते हैं

459
00:27:32,150 --> 00:27:36,230
और सुनिश्चित करें कि सभी बक्से एक तरीका है कि उपयोगकर्ता का उपयोग करने के लिए बहुत सहज है में व्यवस्थित कर रहे हैं

460
00:27:36,230 --> 00:27:39,820
और यहां तक ​​कि अपने दोस्तों के लिए इन कागज प्रोटोटाइप दिखाने और फोकस समूहों शुरू.

461
00:27:39,820 --> 00:27:44,230
बस 2 या 3 लोगों को एक साथ पाने के लिए और उन्हें पूछने के लिए बस इन कागज प्रोटोटाइप पर नल,

462
00:27:44,230 --> 00:27:47,650
और उन्हें नए स्क्रीन दिखाने के लिए देखने के लिए यदि वे वास्तव में समझने के लिए क्या हो रहा है.

463
00:27:47,650 --> 00:27:50,680
>> आप क्या करना चाहते हैं उन्हें एक काम दे, कि कार्य को प्रेरित है,

464
00:27:50,680 --> 00:27:53,270
और सिर्फ उन्हें app देना और उन्हें इसका इस्तेमाल.

465
00:27:53,270 --> 00:27:56,530
से परे है कि निर्देश दे उन्हें नहीं.

466
00:27:56,530 --> 00:28:00,920
आप वास्तव में उन्हें एक तरीका है कि आपको देखने में अपने अनुप्रयोग के साथ बातचीत करना चाहते हैं

467
00:28:00,920 --> 00:28:03,870
वे यह कैसे उपयोग करें यदि आप उन्हें करने के लिए अगले नहीं खड़े थे.

468
00:28:03,870 --> 00:28:05,250
और कहा कि बहुत महत्वपूर्ण है.

469
00:28:05,250 --> 00:28:08,780
आप अंतर्दृष्टि के बहुत देने के लिए करने के लिए के रूप में विशेष बातों के आसपास हो रही लोगों

470
00:28:08,780 --> 00:28:10,560
में एक तरीका है कि मैं उन्हें इरादा नहीं किया था?

471
00:28:10,560 --> 00:28:14,680
वे परदे पर विशेष यूआई तंत्र का उपयोग

472
00:28:14,680 --> 00:28:17,490
एक तरह से कि hacky की तरह है?

473
00:28:17,490 --> 00:28:22,020
मैं के लिए उन्हें यह है कि जिस तरह से करने के लिए इरादा नहीं था.

474
00:28:22,020 --> 00:28:23,940
और एक बार आप उस के साथ कर रहे हैं, तो आप क्या करना चाहते हो?

475
00:28:23,940 --> 00:28:26,010
अपने डिजाइन चट्टानों, है ना?

476
00:28:26,010 --> 00:28:29,600
आप क्या करना चाहते है कि आप को विकसित करने और फिर से अधिक है कि प्रक्रिया फिर से करना चाहते हैं.

477
00:28:29,600 --> 00:28:32,110
तो यह अपने दोस्तों को दिखाने के लिए एक बार आप इसे विकसित किया है, यह परीक्षण,

478
00:28:32,110 --> 00:28:36,630
विकास, परीक्षण, विकसित करने, परीक्षण, पुनरावृति, पर और पर और आगे.

479
00:28:36,630 --> 00:28:39,720
डिजाइन एक बहुत से इस अर्थ में प्रक्रिया चलने का.

480
00:28:39,720 --> 00:28:43,280
आप वास्तव में कुछ निर्माण और फिर इसके बारे में बातें समझ

481
00:28:43,280 --> 00:28:46,520
है कि आप पहले का एहसास नहीं था और वापस जाने के लिए और उस से सुधार.

482
00:28:46,520 --> 00:28:50,890
अब, विकास के भाग के रूप में, है कि टॉमी क्या तुम्हें दिखाने के ब्रेक के बाद जा रहा है

483
00:28:50,890 --> 00:28:53,220
और आप कैसे autocomplete की तरह कुछ को लागू करने में सक्षम हो सकता है

484
00:28:53,220 --> 00:28:56,610
एक तरीका है कि काफी सरल है.

485
00:28:57,440 --> 00:28:59,550
[Malan] के रूप में टॉमी यहाँ सेट, एक सवाल है तो.

486
00:28:59,550 --> 00:29:03,780
जल्द से जल्द वेबसाइटों की एक बहुत - और जब यूसुफ वेबसाइट ने कहा कि 1990 के दशक शैली,

487
00:29:03,780 --> 00:29:07,640
यह implementations जहां अगर आप एक शुरुआत के समय का चयन करने के लिए करना चाहता था और एक अंत समय था,

488
00:29:07,640 --> 00:29:10,380
सच में, वापस दिन में और यहां तक ​​कि कुछ वेबसाइटों पर आज,

489
00:29:10,380 --> 00:29:13,220
जिस तरह से आप इस करते हैं आप एक ड्रॉप डाउन से एक घंटे लेने,

490
00:29:13,220 --> 00:29:15,910
आप एक ड्रॉप डाउन, शायद आप AM चुनने से प्रधानमंत्री मिनट लेने,

491
00:29:15,910 --> 00:29:17,440
और फिर आपको लगता है कि 3 गुना अधिक करते हैं.

492
00:29:17,440 --> 00:29:19,920
और इसलिए 6 क्लिक करता है और शायद कुछ स्क्रॉल के साथ

493
00:29:19,920 --> 00:29:24,000
वास्तव में आपके उपयोगकर्ता तिथि और / या इस अर्थ में समय सीमा के कुछ प्रकार प्रदान कर सकते हैं.

494
00:29:24,000 --> 00:29:27,920
>> तो निश्चित रूप से suboptimal है और अभी तक इस प्रकार अब तक हम कोई अर्थपूर्ण क्षमताओं देखा है

495
00:29:27,920 --> 00:29:30,330
किसी भी भाषा में हम पर देखा है कुछ sexier

496
00:29:30,330 --> 00:29:32,620
प्रारंभ समय और समाप्ति के समय के इस स्लाइडर की तरह.

497
00:29:32,620 --> 00:29:36,290
लेकिन अगर आप 0 सप्ताह के लिए वापस लगता है कि जब हम खरोंच के बारे में बात की थी,

498
00:29:36,290 --> 00:29:39,080
वहाँ भी वहाँ widgets है कि सिर्फ कुछ बातें नहीं थे.

499
00:29:39,080 --> 00:29:42,700
तुम सच में सिर्फ loops और शर्तों और इस तरह की तरह इन बुनियादी बातों था.

500
00:29:42,700 --> 00:29:46,910
तो बस अब बहुत abstractly सोच, HTML के विवरण के स्वतंत्र की तरह,

501
00:29:46,910 --> 00:29:51,260
क्या वास्तव में इस प्रारंभ समय और समाप्ति समय स्लाइडर की तरह कुछ के साथ चल रहा है?

502
00:29:51,260 --> 00:29:54,960
जब मैं अपने माउस हिलना और मुझे छोड़ दिया पर उस छोटे से गाजर प्रतीक पर क्लिक करें

503
00:29:54,960 --> 00:29:59,220
और खींच शुरू, प्रोग्राम, यह क्या है आप को लागू करने में सक्षम होना चाहते हैं

504
00:29:59,220 --> 00:30:01,000
ऐसा करने के लिए?

505
00:30:01,000 --> 00:30:04,920
क्या सवाल है, क्या आप बूलियन अभिव्यक्ति करने के पूछने के लिए सक्षम होना चाहते हो?

506
00:30:04,920 --> 00:30:06,930
वास्तव में क्या हो रहा है? सैमी?

507
00:30:06,930 --> 00:30:10,080
[छात्र] कर्सर की स्थिति कहाँ है? >> अच्छा है. कर्सर की स्थिति कहां है?

508
00:30:10,080 --> 00:30:11,970
यह कुछ हम खरोंच में वापस व्यक्त की जरूरत थी,

509
00:30:11,970 --> 00:30:14,690
चाहे वह स्थान या भी रंग या इस तरह के आधार पर किया गया था.

510
00:30:14,690 --> 00:30:18,410
आप कभी भी सोमवार को ऐसा संक्षेप में याद हो सकता है इन सब बातों के थे घटनाओं बुलाया

511
00:30:18,410 --> 00:30:22,370
वेब की दुनिया में, और इसलिए वहाँ onclick और onkeypress तरह बातें

512
00:30:22,370 --> 00:30:25,960
और onkeyup और onmouseover और onmouseout.

513
00:30:25,960 --> 00:30:29,130
तो एहसास है कि यहां तक ​​कि इन बातों को हम के लिए ले जा रहा है वेब पर दी

514
00:30:29,130 --> 00:30:32,190
फेसबुक और Gmail जैसी साइटों, भले ही आप कोई विचार है साथ

515
00:30:32,190 --> 00:30:34,890
तुम कैसे संभवतः कि को लागू करने क्योंकि वहाँ की तरह भी व्याख्यान में कुछ भी नहीं है

516
00:30:34,890 --> 00:30:38,570
या समस्या 7 सेट, एहसास है कि इन सटीक एक ही बुनियादी बातों के साथ,

517
00:30:38,570 --> 00:30:41,090
HTTP और मानकों के साथ और पाने के लिए और पोस्ट,

518
00:30:41,090 --> 00:30:44,010
मूल HTML जानकारी है कि हम में देखा है इस प्रकार अब तक के साथ

519
00:30:44,010 --> 00:30:47,690
और कार्यक्रमों के तंत्र के साथ एक पल में है कि टॉमी के बारे में परिचय

520
00:30:47,690 --> 00:30:51,300
आप खुद को व्यक्त करने के लिए आप की तरह 0 सप्ताह में किया था शुरू कर सकते हैं

521
00:30:51,300 --> 00:30:53,800
द्वारा बहुत intuitively खींचने और छोड़ने.

522
00:30:53,800 --> 00:30:58,950
>> तो उस ने कहा, टॉमी MacWilliam और वेब के लिए कुछ हमारे लिए नई पहेली टुकड़े के साथ.

523
00:30:58,950 --> 00:31:03,450
सही सभी. मेरा नाम टॉमी है और मैं जावास्क्रिप्ट के बारे में बात कर रही हो जा रहा हूँ.

524
00:31:03,450 --> 00:31:07,150
बस एक अस्वीकरण: मेरा मानना ​​है कि जावास्क्रिप्ट सर्वश्रेष्ठ प्रोग्रामिंग भाषा है

525
00:31:07,150 --> 00:31:09,010
पूरे पूरे विश्व में.

526
00:31:09,010 --> 00:31:11,940
वहाँ बहुत सारे लोग हैं, जो मुझसे असहमत हैं, लेकिन यह बस कमाल है.

527
00:31:11,940 --> 00:31:16,330
एक बार जब आप सी के लिए वापस जाने के लिए, अगर आप एक अन्य वर्ग या कुछ अन्य भाषाओं के लिए सी लिखना है,

528
00:31:16,330 --> 00:31:19,780
यह सिर्फ सच में सभी कम स्तर के विवरण आप में निराशा के लिए नीचे के अंदर फंस गया है

529
00:31:19,780 --> 00:31:23,050
तो अगर तुम कभी कैसे कष्टप्रद सी लिखने के लिए है के बारे में दु: खी महसूस कर रहे हैं,

530
00:31:23,050 --> 00:31:25,130
अभी वापस जाने के लिए, कुछ जावास्क्रिप्ट लिख. यह निर्वाण है.

531
00:31:25,130 --> 00:31:27,980
आप अपने बुरे दिन के बारे में ज्यादा बेहतर महसूस होगा.

532
00:31:27,980 --> 00:31:31,900
जावास्क्रिप्ट के जादू का एक बहुत बातें हेरफेर करने की क्षमता से आता है

533
00:31:31,900 --> 00:31:33,730
कि पृष्ठ पर पहले से ही कर रहे हैं.

534
00:31:33,730 --> 00:31:38,520
जब हम अपने PHP स्क्रिप्ट लिखा है, वे सर्वर पर निष्पादित किया गया है,

535
00:31:38,520 --> 00:31:42,270
और अंततः है कि PHP स्क्रिप्ट शायद कुछ HTML उत्पादन.

536
00:31:42,270 --> 00:31:45,860
HTML है कि ग्राहक के लिए भेजा गया था, और फिर कहा कि यह गया था.

537
00:31:45,860 --> 00:31:50,180
यदि PHP के लिए एक पृष्ठ पर एक बटन जोड़ने के लिए चाहते थे, उदाहरण के लिए, यह सच है कि नहीं कर सकते हैं.

538
00:31:50,180 --> 00:31:54,350
यह एक नया HTML फ़ाइल प्रस्तुत करना है और ब्राउज़र के लिए भेज कि करना होगा.

539
00:31:54,350 --> 00:31:57,840
जावास्क्रिप्ट के साथ हम जानते हैं कि हम चीजों को अद्यतन जब वे पृष्ठ पर पहले से ही हो सकता है,

540
00:31:57,840 --> 00:32:00,840
और इस वजह से हम बहुत अधिक त्वरित प्रतिक्रिया प्रदान कर सकते हैं,

541
00:32:00,840 --> 00:32:06,150
जो वास्तव में हमारी वेबसाइट पर उपयोगकर्ता अनुभव में सुधार होगा.

542
00:32:06,150 --> 00:32:09,330
बस जावास्क्रिप्ट चयनकर्ताओं के एक त्वरित पुनर्कथन.

543
00:32:09,330 --> 00:32:11,590
हम जानते हैं कि जब हम एक HTML पृष्ठ डाउनलोड,

544
00:32:11,590 --> 00:32:13,890
कि डोम में प्रतिनिधित्व किया जा रहा है.

545
00:32:13,890 --> 00:32:19,340
>> डोम याद सिर्फ इस बड़े पेड़ जहां तत्वों को इस बड़ी पदानुक्रम में जुड़े हुए हैं.

546
00:32:19,340 --> 00:32:21,810
जब हम 7 pset में डेटाबेस के साथ काम किया है

547
00:32:21,810 --> 00:32:26,280
पहली बातें हम कैसे पता करने की जरूरत है एक डेटाबेस क्वेरी.

548
00:32:26,280 --> 00:32:29,060
हम इस बड़े उपयोगकर्ताओं तालिका है, और कभी कभी हम सिर्फ कहना चाहता हूँ,

549
00:32:29,060 --> 00:32:33,260
"मैं केवल इन उपयोगकर्ताओं है कि कुछ हालत मैच की कुछ करना चाहते हैं."

550
00:32:33,260 --> 00:32:36,020
इसी तरह, जब हम डोम हम यह querying का कुछ तरह की जरूरत है.

551
00:32:36,020 --> 00:32:39,490
हम कह के कुछ तरह की जरूरत है, "मैं बटन है कि इस तरह लग के सभी चाहते हैं

552
00:32:39,490 --> 00:32:41,860
"या पृष्ठ पर छवियों के सभी."

553
00:32:41,860 --> 00:32:44,330
और इन चयनकर्ताओं हमें ऐसा करने की अनुमति है.

554
00:32:44,330 --> 00:32:45,690
तो बस एक त्वरित पुनर्कथन.

555
00:32:45,690 --> 00:32:50,770
यह पहली बार यहाँ एक # सबमिट करने के लिए, क्या है कि चयन करने के लिए जा रहा है? क्या किसी को याद है?

556
00:32:50,770 --> 00:32:54,880
[अश्राव्य छात्र प्रतिक्रिया] >> हाँ, बिल्कुल.

557
00:32:54,880 --> 00:32:59,510
इस पृष्ठ है कि प्रस्तुत की एक आईडी पर एक तत्व का चयन करने के लिए जा रहा है.

558
00:32:59,510 --> 00:33:03,470
और इतना है कि हैश टैग का कहना है कि इस चयनकर्ता आईडी के साथ काम करने के लिए जा रहा है.

559
00:33:03,470 --> 00:33:07,630
कैसे के बारे में 2 एक, इस केन्द्रित, कि क्या चयन करेंगे?

560
00:33:11,360 --> 00:33:15,180
हाँ. >> [छात्र] क्लास. वास्तव में. >> अब इस वर्ग द्वारा चयन करने के लिए जा रहा है.

561
00:33:15,180 --> 00:33:18,840
यहाँ आईडी और वर्ग के बीच आम तौर पर अंतर है आईडी अद्वितीय होना चाहिए

562
00:33:18,840 --> 00:33:20,820
जो भी अंतरिक्ष के भीतर आप खोज रहे हैं.

563
00:33:20,820 --> 00:33:23,080
तो अगर आप एक पूरे वेब पेज पर खोज कर रहे थे,

564
00:33:23,080 --> 00:33:27,740
आप वास्तव में केवल कि कुछ आईडी के साथ 1 तत्व होना चाहिए, तो इस मामले में प्रस्तुत की.

565
00:33:27,740 --> 00:33:31,330
कक्षाओं के साथ, दूसरे हाथ पर, हम एक ही पृष्ठ पर एक से अधिक तत्व हो सकता है

566
00:33:31,330 --> 00:33:33,130
एक ही वर्ग के साथ.

567
00:33:33,130 --> 00:33:36,580
यह कह रही है, मैं सब कुछ है कि पृष्ठ पर केंद्रित है का चयन करने के लिए करना चाहते हैं के लिए उपयोगी हो सकता है

568
00:33:36,580 --> 00:33:38,450
के बजाय सिर्फ एक बात.

569
00:33:38,450 --> 00:33:40,310
>> और अंत में, यह पिछले एक थोड़ा और अधिक जटिल है,

570
00:33:40,310 --> 00:33:43,890
लेकिन यह क्या डोम से चयन करने के लिए जा रहा है?

571
00:33:46,650 --> 00:33:48,810
[अश्राव्य छात्र प्रतिक्रिया] >> वह क्या है?

572
00:33:48,810 --> 00:33:53,250
[छात्र] कुछ भी है कि एक टैग है. >> हम 2 भागों यहाँ है.

573
00:33:53,250 --> 00:33:58,070
दूसरे भाग के लिए कहते हैं कि मैं इनपुट के टैग के साथ इन टैग का चयन करना चाहते हैं जा रहा है,

574
00:33:58,070 --> 00:34:00,730
किसी भी तत्व इतना है कि एक इनपुट टैग है.

575
00:34:00,730 --> 00:34:03,080
लेकिन मैं सिर्फ जानकारी के सभी चयन नहीं करना चाहते

576
00:34:03,080 --> 00:34:05,170
क्योंकि एक submit बटन की तरह कुछ एक निवेश किया जा सकता है

577
00:34:05,170 --> 00:34:08,409
और एक पाठ बॉक्स की तरह कुछ एक निवेश किया जा सकता है.

578
00:34:08,409 --> 00:34:11,909
तो मैं सिर्फ इतना कह रहा हूँ इन वर्ग कोष्ठक के साथ मैं केवल उन तत्वों का चयन करना चाहते हैं

579
00:34:11,909 --> 00:34:14,110
कि पाठ लिखें.

580
00:34:14,110 --> 00:34:17,400
कहीं मेरी HTML टैग में मैं एक विशेषता प्रकार कहा जाता है,

581
00:34:17,400 --> 00:34:19,750
और उस विशेषता के मूल्य के लिए पाठ हो गया है.

582
00:34:19,750 --> 00:34:21,340
तो कैसे इस पहले भाग के बारे में यहाँ?

583
00:34:21,340 --> 00:34:25,489
इस चयनकर्ता का पहला शब्द रूप है तो मैं एक अंतरिक्ष और फिर इस इनपुट हिस्सा है.

584
00:34:25,489 --> 00:34:29,620
कि क्या है, क्या करता है इसे के सामने के फार्म डाल?

585
00:34:33,409 --> 00:34:35,860
यह मूल रूप से हमारे क्वेरी सीमा जा रहा है.

586
00:34:35,860 --> 00:34:38,510
यह मामला हो सकता है कि हम पृष्ठ पर कुछ जानकारी है

587
00:34:38,510 --> 00:34:41,080
कि एक फार्म की सन्तान नहीं कर रहे हैं.

588
00:34:41,080 --> 00:34:46,150
यह करना होगा क्या है यह कहना होगा मैं केवल चाहते हैं इनपुट टैग है कि उन्हें ऊपर कहीं है

589
00:34:46,150 --> 00:34:49,030
एक फार्म के कुछ मूल तत्व.

590
00:34:49,030 --> 00:34:52,100
और इसलिए इस तरह से हम इन अधिक पदानुक्रमित प्रश्नों कर सकते हैं

591
00:34:52,100 --> 00:34:55,000
तो हम सिर्फ एक दिया सब कुछ चयनकर्ता मिलान का चयन करने के लिए नहीं है.

592
00:34:55,000 --> 00:35:00,760
हम कुछ और करने के लिए क्वेरी के गुंजाइश सीमा की तरह कर सकते हैं.

593
00:35:00,760 --> 00:35:04,000
तो अब है कि हम जानते हैं कि कैसे पेज पर तत्वों का चयन करने के लिए,

594
00:35:04,000 --> 00:35:06,780
AJAX के बारे में कुछ बात करते हैं.

595
00:35:06,780 --> 00:35:12,270
AJAX एक अभी भी बहुत ट्रेंडी परिचित करा रहा है कि अतुल्यकालिक जावास्क्रिप्ट और XML के लिए खड़ा है.

596
00:35:12,270 --> 00:35:15,640
यह सिर्फ इतना होता है कि XML डेटा का प्रतिनिधित्व करने के लिए कुछ करने के लिए एक तरीका है.

597
00:35:15,640 --> 00:35:20,920
>> खो लोकप्रियता की है कि हाल ही तरह है, तो AJAX में एक्स हर समय नहीं प्रयोग किया जाता है.

598
00:35:20,920 --> 00:35:26,220
असल में, AJAX हमें क्या करने की अनुमति देता है HTTP अनुरोध बनाने के लिए है

599
00:35:26,220 --> 00:35:28,620
जावास्क्रिप्ट के संदर्भ से.

600
00:35:28,620 --> 00:35:32,310
, जब हम अपने वेब ब्राउज़र में कर रहे हैं और हम पृष्ठों के आसपास नेविगेट कर रहे हैं और हम एक लिंक पर क्लिक करें

601
00:35:32,310 --> 00:35:37,790
हमारे ब्राउज़र करने जा रहा है क्या लिंक हम जो कुछ भी क्लिक करने के लिए एक HTTP अनुरोध बनाने के लिए है.

602
00:35:37,790 --> 00:35:41,670
लेकिन यह हमेशा आदर्श नहीं है क्योंकि अगर यह मामला है, तो के रूप में दाऊद कह रहा था,

603
00:35:41,670 --> 00:35:45,220
हम हमेशा के लिए उपयोगकर्ताओं को एक सबमिट बटन पर क्लिक करें या एक लिंक पर क्लिक करें

604
00:35:45,220 --> 00:35:50,380
आदेश में करने के लिए कुछ भी हो सकता है कि एक HTTP अनुरोध शामिल हो रहा है.

605
00:35:50,380 --> 00:35:54,160
तो AJAX के साथ हम जावास्क्रिप्ट की ओर से इन अनुरोध कर सकते हैं.

606
00:35:54,160 --> 00:35:57,020
इसका मतलब है कि जब उपयोगकर्ता पृष्ठ या कुछ भी होता है के साथ सूचना का आदान प्रदान,

607
00:35:57,020 --> 00:36:01,780
हम वास्तव में हमारी वेबसाइट पर कुछ अन्य PHP फ़ाइल के लिए एक कार्यक्रम का अनुरोध कर सकते हैं

608
00:36:01,780 --> 00:36:06,280
या कुछ और डेटा पुनः प्राप्त कि फाइल बाहर spits.

609
00:36:06,280 --> 00:36:09,860
चलो AJAX का एक उदाहरण पर एक नज़र रखना.

610
00:36:09,860 --> 00:36:16,140
यह हमारे CS50 वित्त पेज के साथ जो उम्मीद है कि हम में से कुछ परिचित हैं.

611
00:36:16,140 --> 00:36:21,790
यदि हम इस पृष्ठ के HTML को देखो, हम यहाँ देखते हैं कि मैं कुछ चीजें जोड़ दिया है,

612
00:36:21,790 --> 00:36:23,820
जिनमें से एक मैं इस फार्म का एक आईडी दिया है.

613
00:36:23,820 --> 00:36:26,480
मैं id = "फार्म बोली" कहा है.

614
00:36:26,480 --> 00:36:31,910
मैं इस किया है बस, क्योंकि यह करने के लिए यह एक छोटा सा डोम से चयन करने के लिए आसान बनाने के लिए जा रहा है

615
00:36:31,910 --> 00:36:35,090
के बाद से मैं सिर्फ एक बहुत ही सरल प्रश्न कर सकते हैं.

616
00:36:35,090 --> 00:36:38,960
क्या मैं यहाँ करना चाहता है मैं CS50 वित्त के साथ कुछ समस्या को ठीक करना चाहते हैं.

617
00:36:38,960 --> 00:36:41,550
, तो अगर हम finance.cs50.net

618
00:36:41,550 --> 00:36:45,700
हर बार मैं एक बोली प्राप्त करना चाहते हैं, मैं इस समीक्षा बटन पर क्लिक करें,

619
00:36:45,700 --> 00:36:48,960
और कहा कि भाव बटन तो मुझे एक और पूरे पृष्ठ के लिए ले जाता है.

620
00:36:48,960 --> 00:36:52,400
और अगर मैं एक उद्धरण चाहता हूँ, मैं वापस बटन हिट करने के लिए है और फिर मैं इसे टाइप में,

621
00:36:52,400 --> 00:36:54,480
मैं एक उद्धरण मिलता है, और मैं वापस बटन मारा.

622
00:36:54,480 --> 00:36:56,840
यह वास्तव में सबसे अच्छा उपयोगकर्ता अनुभव नहीं है.

623
00:36:56,840 --> 00:37:01,570
जो वास्तव में इस साइट का उपयोग अगर यह है कि शेयर कीमतों में प्राप्त करने के लिए धीमी है?

624
00:37:01,570 --> 00:37:05,630
तो क्या हम AJAX के साथ करना चाहते हैं कि एक अलग पेज के लिए जाने की कदम दूर करने के लिए है

625
00:37:05,630 --> 00:37:08,410
आदेश में परिणाम देखने के लिए.

626
00:37:08,410 --> 00:37:11,240
>> क्या हम वास्तव में केवल के लिए पूछ रहे हैं कि वास्तव में छोटी सी कीमत है,

627
00:37:11,240 --> 00:37:14,240
और कहा कि सिर्फ आंकड़ों का एक बहुत छोटी राशि है.

628
00:37:14,240 --> 00:37:17,400
तो वहाँ मुझे एक और पूरे HTML पृष्ठ जाने के लिए कोई ज़रूरत नहीं है,

629
00:37:17,400 --> 00:37:20,670
HTML का एक नया बैच डाउनलोड करने के लिए, हो सकता है कुछ और छवियों को डाउनलोड करने के लिए,

630
00:37:20,670 --> 00:37:24,410
कुछ अन्य सीएसएस फ़ाइलों के लिए मुझे लगता है कि बहुत ही आसान सवाल का जवाब देने के लिए

631
00:37:24,410 --> 00:37:27,810
इस शेयर की कीमत का कितना करता है.

632
00:37:27,810 --> 00:37:31,000
AJAX के साथ हम यह एक बहुत आसान बना सकते हैं.

633
00:37:31,000 --> 00:37:36,400
हम यहाँ नीचे देखते हैं कि मैं एक जावास्क्रिप्ट quote.js बुलाया फ़ाइल में जोड़ने हूँ.

634
00:37:36,400 --> 00:37:40,140
चलो वास्तव में उस फ़ाइल को खोलने के. वहाँ नहीं.

635
00:37:42,610 --> 00:37:45,860
मेरी जावास्क्रिप्ट फाइलों के सभी HTML में स्थित होने जा रहे हैं

636
00:37:45,860 --> 00:37:47,630
इतना है कि वेब ब्राउज़र का उपयोग कर सकते हैं.

637
00:37:47,630 --> 00:37:50,330
फिर हम यहाँ जावास्क्रिप्ट के लिए एक अलग निर्देशिका है,

638
00:37:50,330 --> 00:37:54,340
और अब यहाँ quote.js है.

639
00:37:54,340 --> 00:38:00,930
इस फाइल के शीर्ष पर यह यहाँ का कहना है कि मैं पूरे पृष्ठ के लिए प्रतीक्षा करने के लिए लोड किया जा करना चाहते हैं

640
00:38:00,930 --> 00:38:04,830
इससे पहले कि मैं कुछ भी करने की कोशिश करो. ऐसा क्यों आवश्यक है?

641
00:38:04,830 --> 00:38:08,650
यह पता चला है कि अगले बात मैं यहाँ क्या करने जा रहा हूँ एक तत्व के लिए तलाश शुरू

642
00:38:08,650 --> 00:38:10,810
कि कुछ चयनकर्ता से मेल खाता है.

643
00:38:10,810 --> 00:38:15,600
यदि इस जावास्क्रिप्ट पहले कभी इस तत्व पृष्ठ पर भरी हुई है मार डाला है,

644
00:38:15,600 --> 00:38:17,820
तो सब कुछ मैं करने की कोशिश करने के लिए काम करने नहीं जा रहा है

645
00:38:17,820 --> 00:38:20,580
क्योंकि मैं कुछ है कि वहाँ अभी तक नहीं है का चयन करने के लिए प्रयास करने के लिए जा रहा हूँ.

646
00:38:20,580 --> 00:38:23,780
तो शीर्ष ऊपर इस लाइन कहते हैं, मैं आप जब तक सब कुछ भरी हुई है प्रतीक्षा करने के लिए करना चाहते हैं

647
00:38:23,780 --> 00:38:28,030
तो हम गारंटी रहे हैं कि किसी भी तत्व के लिए मैं देख रहा हूँ पृष्ठ पर वास्तव में कर रहे हैं.

648
00:38:29,730 --> 00:38:34,310
यहाँ यह डॉलर हस्ताक्षर का मतलब है मैं jQuery बुलाया पुस्तकालय का उपयोग कर रहा हूँ.

649
00:38:34,310 --> 00:38:38,570
इस jQuery पुस्तकालय हमें इन चयनकर्ताओं का है कि हम बस में देखा का उपयोग करने की अनुमति देता है.

650
00:38:38,570 --> 00:38:44,010
$ तो कह रही है एक तर्क के रूप में इस फार्म बोली गुजर,

651
00:38:44,010 --> 00:38:47,910
अब मैं उस फार्म का चयन कर रहा हूँ कि हम बस पर एक नज़र लिया.

652
00:38:47,910 --> 00:38:52,290
अब मैं स्मृति में है कि किसी तरह फार्म का प्रतिनिधित्व किया है.

653
00:38:52,290 --> 00:38:56,760
>> इस वस्तु पर अब, फार्म का प्रतिनिधित्व,

654
00:38:56,760 --> 00:38:58,890
मैं अब एक पर बुलाया समारोह का उपयोग कर रहा हूँ.

655
00:38:58,890 --> 00:39:02,710
इस समारोह में क्या करता है यह एक घटना हेन्डलर संलग्न करने के लिए जा रहा है.

656
00:39:02,710 --> 00:39:06,310
घटना में है कि हम करने के लिए सुनने के लिए जा रहे हैं submit घटना है.

657
00:39:06,310 --> 00:39:08,890
तो जब उपयोगकर्ता क्लिक करता है कि प्रस्तुत करना बटन या प्रेस दर्ज करें,

658
00:39:08,890 --> 00:39:11,730
इस घटना के लिए आग के लिए जा रहा है.

659
00:39:11,730 --> 00:39:16,390
इस में hooking द्वारा, मैं अब प्रपत्र के डिफ़ॉल्ट व्यवहार को ओवरराइड कर सकते हैं.

660
00:39:16,390 --> 00:39:19,770
इस जावास्क्रिप्ट के बिना, प्रपत्र प्रस्तुत करेंगे जो PHP फ़ाइल

661
00:39:19,770 --> 00:39:22,110
हम विशेषता है कि कार्रवाई में इस्तेमाल किया.

662
00:39:22,110 --> 00:39:25,440
लेकिन इसके बजाय, अब मैं, कह रहा हूँ रुको, रुको, मैं आप वास्तव में है कि करने के लिए नहीं करना चाहती.

663
00:39:25,440 --> 00:39:31,140
मैं यह पहले तुम जाओ और कुछ PHP फाइल करने के लिए प्रस्तुत करने की कोशिश होने के लिए करना चाहते हैं.

664
00:39:31,140 --> 00:39:32,870
अब मैं क्या करना चाहते हैं?

665
00:39:32,870 --> 00:39:39,270
इस बिंदु पर मैं AJAX किसी भी तरह से उपयोग करने के लिए शेयर की कीमत क्या है में लोड करना चाहते हैं.

666
00:39:39,270 --> 00:39:44,170
पहली बात मैं जानना चाहता है कि क्या शेयर उपयोगकर्ता के लिए लग रही है.

667
00:39:44,170 --> 00:39:46,760
ऐसा करने के लिए है कि मैं एक और चयनकर्ता का उपयोग करने के लिए जा रहा हूँ.

668
00:39:46,760 --> 00:39:49,020
यह 3 चयनकर्ता हम पहले को देखा है.

669
00:39:49,020 --> 00:39:54,460
यह कहना है कि मैं फार्म बोली के एक आईडी के साथ इस फार्म तत्व शुरू करना चाहते हैं.

670
00:39:54,460 --> 00:39:58,440
फिर कहीं उस फार्म के अंदर एक इनपुट तत्व हो गया है

671
00:39:58,440 --> 00:40:01,270
कि प्रतीक के एक नाम है.

672
00:40:01,270 --> 00:40:05,460
यदि हम हमारे HTML पर वापस देखो, हमने देखा है कि हम एक इनपुट था [नाम = प्रतीक].

673
00:40:05,460 --> 00:40:12,380
इसका मतलब है कि यह करने के लिए कि पाठ बॉक्स का चयन करने जा रहा है कि उपयोगकर्ता में टाइपिंग है.

674
00:40:12,380 --> 00:40:13,870
यह अच्छा है. हम पाठ बॉक्स है.

675
00:40:13,870 --> 00:40:17,360
अब हम सिर्फ पता है कि इसे अंदर क्या है की जरूरत है.

676
00:40:17,360 --> 00:40:20,290
करना है कि हम इस विधि कॉल कर सकते हैं, इस वैल.

677
00:40:20,290 --> 00:40:23,240
और यह कहते हैं कि मैं जानता हूँ कि तुम क्या पाठ बॉक्स है.

678
00:40:23,240 --> 00:40:28,160
मैं तुम मुझे बताओ कि यह क्या है कि पाठ बॉक्स में टाइप उपयोगकर्ता चाहते हैं.

679
00:40:28,160 --> 00:40:34,440
अब हम एक प्रतीक नामक स्ट्रिंग कि जो उपयोगकर्ता अंदर टाइप करने के लिए बराबर है

680
00:40:34,440 --> 00:40:39,820
यह अच्छा है. अब हम जानते हैं कि स्ट्रिंग का उपयोग के हमारे अनुरोध कर सकते हैं.

681
00:40:39,820 --> 00:40:42,450
यह एक नया कार्य यहाँ है, $ इस

682
00:40:42,450 --> 00:40:44,900
को छोड़कर हम नहीं रह तत्वों का चयन करने जा रहे हैं,

683
00:40:44,900 --> 00:40:48,910
हम एक अलग समारोह है कि jQuery द्वारा हमें प्रदान की है बुला रहे हो जा रहे हैं.

684
00:40:48,910 --> 00:40:54,810
यह AJAX समारोह है कि क्या वास्तव में इस HTTP अनुरोध बनाने के लिए जा रहा है.

685
00:40:54,810 --> 00:40:57,000
तो हम कुछ बातें बताना है.

686
00:40:57,000 --> 00:41:01,410
पहली बात हम इस समारोह को बताना है जहाँ मैं जाने के लिए अनुरोध करना चाहते हैं.

687
00:41:01,410 --> 00:41:08,910
कहीं मेरी परियोजना में मैं HTML quote.php बुलाया निर्देशिका के अंदर इस फाइल है.

688
00:41:08,910 --> 00:41:15,150
मैं इस फाइल का उपयोग कर सकते हैं, हम सिर्फ इस तरह देखा, अगर मैं लोकलहोस्ट quote.php / जाना.

689
00:41:15,150 --> 00:41:20,450
>> मैं अपने जावास्क्रिप्ट के उस पृष्ठ पर एक अनुरोध करना चाहते हैं.

690
00:41:20,450 --> 00:41:22,920
प्रकार क्या अनुरोध की अब?

691
00:41:22,920 --> 00:41:27,210
हमने देखा है कि पहले फार्म कि विधि = "पोस्ट" विशेषता है,

692
00:41:27,210 --> 00:41:29,270
और इसका मतलब है कि यह करने के लिए एक पोस्ट अनुरोध करने जा रही है,

693
00:41:29,270 --> 00:41:32,630
तो यह एक अनुरोध प्राप्त बजाय URL में कुछ भी डाल नहीं जा रहा है,

694
00:41:32,630 --> 00:41:36,860
जो सिर्फ अगर हम सिर्फ उदाहरण के लिए वेब ब्राउज़र के साथ पृष्ठ, पहुँचा निकाल दिया जाएगा.

695
00:41:36,860 --> 00:41:41,260
अब हमने कहा है मैं एक HTTP POST अनुरोध बनाना चाहते हैं

696
00:41:41,260 --> 00:41:44,840
एक पृष्ठ quote.php में स्थित है.

697
00:41:44,840 --> 00:41:51,490
जब हम फार्म जमा करने के लिए याद है, हम उस फार्म के अंदर इनपुट तत्व का उपयोग कर सकता है

698
00:41:51,490 --> 00:41:54,430
कि $ _POST चर के साथ.

699
00:41:54,430 --> 00:41:58,710
कहानी में अब तक हम वास्तव में किसी भी डाटा के साथ अभी तक नहीं भेजा है.

700
00:41:58,710 --> 00:42:00,640
हम सिर्फ इतना कहा है कि हम एक AJAX अनुरोध कर रहे हैं

701
00:42:00,640 --> 00:42:03,200
और यहाँ हम कर रहे हैं अनुरोध के प्रकार है.

702
00:42:03,200 --> 00:42:07,090
अब हम वास्तव में पृष्ठ पर कुछ डेटा भेजने की जरूरत है.

703
00:42:07,090 --> 00:42:10,930
करना है कि हम इस डेटा बुलाया संपत्ति का उपयोग कर सकते हैं.

704
00:42:10,930 --> 00:42:14,950
इस संपत्ति का मूल्य वास्तव में एक साहचर्य सरणी है.

705
00:42:14,950 --> 00:42:19,390
इस के लिए कारण यह है कि यह हमें सिर्फ आंकड़ों का 1 टुकड़ा से अधिक भेजने के लिए अनुमति देता है.

706
00:42:19,390 --> 00:42:24,750
यही कारण है कि हम इन घुंघराले ब्रेसिज़ यहाँ इन अन्य घुंघराले ब्रेसिज़ के अंदर नीडिंत.

707
00:42:24,750 --> 00:42:29,680
इन साहचर्य arrays में चाबियाँ करने के लिए एक ही बात होने जा रहे हैं

708
00:42:29,680 --> 00:42:32,630
उन लोगों के नाम के रूप में हमारे फार्म तत्वों में जिम्मेदार बताते हैं.

709
00:42:32,630 --> 00:42:35,740
इसका मतलब है कि अगर मैं प्रतीक की एक प्रमुख के साथ भेजने के लिए,

710
00:42:35,740 --> 00:42:41,870
इसका मतलब है कि मेरे PHP पृष्ठ $ _POST [प्रतीक] के साथ इस डेटा का उपयोग कर सकते हैं

711
00:42:41,870 --> 00:42:44,640
जैसे हम पहले किया था जब हम एक फार्म जमा कर रहे थे.

712
00:42:44,640 --> 00:42:47,090
और अब वास्तविक डेटा हम भेजना चाहते हैं

713
00:42:47,090 --> 00:42:50,790
इस साहचर्य सरणी के मूल्य के अंदर होने जा रहा है.

714
00:42:50,790 --> 00:42:54,070
>> हम एक चर बुलाया प्रतीक में इस पाठ संग्रहीत

715
00:42:54,070 --> 00:42:57,380
और इसलिए हम साथ भेज रहे हैं अब प्रतीक के एक कुंजी

716
00:42:57,380 --> 00:43:01,380
और जो उपयोगकर्ता अंदर टाइप के एक मूल्य

717
00:43:01,380 --> 00:43:06,270
अब हम इस HTTP अनुरोध किया है, हमारे PHP फ़ाइल को मार डाला गया है,

718
00:43:06,270 --> 00:43:11,480
और यह करने के लिए कुछ डेटा अब ग्राहक है कि सिर्फ इस अनुरोध किया वापस भेजने के लिए जा रहा है.

719
00:43:11,480 --> 00:43:15,220
अब हम जो कुछ भी हमारे लिए सर्वर कहा जवाब की जरूरत है.

720
00:43:15,220 --> 00:43:20,180
करना है कि हम यहाँ यह पिछले संपत्ति सफलता बुलाया है.

721
00:43:20,180 --> 00:43:24,240
इस सफलता की कुंजी के मूल्य वास्तव में एक समारोह में किया जा रहा है,

722
00:43:24,240 --> 00:43:26,910
और यह वास्तव में ठंडी चीजें आप जावास्क्रिप्ट के साथ कर सकते हैं में से एक है.

723
00:43:26,910 --> 00:43:31,720
न केवल आप ints या सरणियों एक साहचर्य सरणी के एक मूल्य के अंदर के रूप में हो सकता है,

724
00:43:31,720 --> 00:43:34,170
हम भी एक समारोह हो सकता है.

725
00:43:34,170 --> 00:43:36,380
सफलता कह कर तो, यह मेरी चाबी है.

726
00:43:36,380 --> 00:43:38,830
बृहदान्त्र यहाँ का कहना है कि मूल्य आता है,

727
00:43:38,830 --> 00:43:41,810
और अब इस के मूल्य वास्तव में एक समारोह है.

728
00:43:41,810 --> 00:43:44,460
तो हम इस समारोह से प्रति एक नाम देने की जरूरत नहीं है.

729
00:43:44,460 --> 00:43:48,820
हम बस कहना है कि यह कुछ समारोह होने जा रहा है. यह 1 तर्क ले जा रहा है.

730
00:43:48,820 --> 00:43:51,190
इस समारोह के लिए तर्क को होने जा रहा है

731
00:43:51,190 --> 00:43:54,460
सर्वर जो हमें अनुरोध से वापस भेज दिया.

732
00:43:54,460 --> 00:43:57,750
जैसे जब हमारे ब्राउज़र एक अनुरोध करता है, सर्वर कुछ वापस भेजता है

733
00:43:57,750 --> 00:43:59,060
और ब्राउज़र यह प्रदर्शित करता है,

734
00:43:59,060 --> 00:44:03,030
AJAX के संदर्भ में हम सिर्फ एक अनुरोध किया है, सर्वर कुछ वापस भेजा,

735
00:44:03,030 --> 00:44:07,110
और अब हम उस एक स्ट्रिंग के रूप में प्रतिनिधित्व किया है.

736
00:44:07,110 --> 00:44:11,280
कि स्ट्रिंग के साथ मैं सिर्फ पृष्ठ पर प्रदर्शित करना चाहते हैं.

737
00:44:11,280 --> 00:44:14,040
ऐसा करने के लिए है कि मैं पिछले एक चयनकर्ता के लिए जा रहा हूँ.

738
00:44:14,040 --> 00:44:17,570
मैं आईडी कीमत के साथ तत्व का चयन करने के लिए करना चाहते हैं.

739
00:44:17,570 --> 00:44:20,710
यह सिर्फ एक खाली div कि मैं पेज पर बनाया है,

740
00:44:20,710 --> 00:44:26,640
और मैं कि सर्वर हमें जो कुछ भी वापस भेजा div की सामग्री को सेट करने के लिए करना चाहते हैं.

741
00:44:26,640 --> 00:44:30,280
मैं वास्तव में quote.php थोड़ा संशोधित किया है.

742
00:44:30,280 --> 00:44:33,460
>> बजाय प्रस्तुत करना फोन और कुछ पृष्ठ प्रतिपादन से,

743
00:44:33,460 --> 00:44:38,100
quote.php अब बस से बाहर एक स्ट्रिंग के रूप में स्टॉक के मूल्य मुद्रित करने के लिए जा रहा है.

744
00:44:38,100 --> 00:44:41,880
तो अगर आप वास्तव में पृष्ठ पर जाएँ, तो आप सिर्फ इतना है कि छोटे स्ट्रिंग देखना होगा

745
00:44:41,880 --> 00:44:45,030
जो कुछ भी शेयर की कीमत है.

746
00:44:45,030 --> 00:44:50,170
एक आखिरी बात हम यहाँ क्या करने की जरूरत है सिर्फ यकीन है कि इस समारोह में झूठे रिटर्न है.

747
00:44:50,170 --> 00:44:53,560
इस कहते हैं क्या है कि अगर मैं किसी ईवेंट हैंडलर के अंदर हूँ

748
00:44:53,560 --> 00:44:57,300
और उस ईवेंट हैंडलर सच लौटने के बजाय झूठी देता है,

749
00:44:57,300 --> 00:45:01,510
इसका मतलब है कि मैं मूल घटना आग नहीं करना चाहती.

750
00:45:01,510 --> 00:45:05,270
इस मामले में, अगर हम किसी भी जावास्क्रिप्ट नहीं था और हम एक फार्म प्रस्तुत है,

751
00:45:05,270 --> 00:45:08,280
हमारे वेब ब्राउज़र के लिए कहते हैं, "मैं उस डेटा के साथ भेजने के लिए जा रहा हूँ," जा रहा है

752
00:45:08,280 --> 00:45:10,130
और वे आप अन्य पृष्ठ पर भेजने के लिए जा रहे हैं.

753
00:45:10,130 --> 00:45:14,360
क्योंकि हम AJAX का उपयोग कर रहे हैं अब, वहाँ कोई दूसरे पृष्ठ पर उपयोगकर्ता को भेजने की जरूरत है.

754
00:45:14,360 --> 00:45:17,920
हम सिर्फ परिणाम यह एक ही पृष्ठ पर गतिशील प्रदर्शित करने के लिए जा रहे हैं.

755
00:45:17,920 --> 00:45:21,460
हम वास्तव में उन्हें कहीं भी जाने के लिए नहीं करना चाहते हैं, और मैं एक ही पृष्ठ पर रहना चाहते हैं.

756
00:45:21,460 --> 00:45:27,060
तो झूठी लौटने से, हम यह सुनिश्चित करना है कि फार्म का है कि हमारे लिए ऐसा नहीं करता.

757
00:45:27,060 --> 00:45:31,170
चलो यह क्या वास्तव में ऐसा लग रहा है पर एक नज़र रखना.

758
00:45:31,170 --> 00:45:34,180
हमारी बोली पृष्ठ पर एक ही लग रहा है.

759
00:45:34,180 --> 00:45:37,240
मुझे निरीक्षक यहाँ नीचे खींच तो हम देख सकते हैं कि क्या हो रहा है.

760
00:45:37,240 --> 00:45:40,270
यह एक छोटे से कम विशाल.

761
00:45:40,270 --> 00:45:44,590
याद रखें अगर हम नेटवर्क टैब खोलने के लिए, यह है जहाँ हम HTTP अनुरोधों के सभी देख सकते हैं

762
00:45:44,590 --> 00:45:47,570
कि पृष्ठ पर हो रही हैं.

763
00:45:47,570 --> 00:45:52,890
>> एक प्रतीक के लिए मुझे AAPL में लिखें और भाव प्राप्त करें क्लिक करें.

764
00:45:52,890 --> 00:45:56,720
अब हमने देखा है कि एप्पल के एक हिस्से के डॉलर के कुछ नंबर लागत

765
00:45:56,720 --> 00:46:00,410
बस पृष्ठ पर दिखाई दिया, लेकिन सभी यूआरएल बदल नहीं किया था.

766
00:46:00,410 --> 00:46:04,570
वास्तव में, यहाँ HTTP अनुरोध है कि हम बस के लिए बनाया है.

767
00:46:04,570 --> 00:46:09,980
हम quote.php के लिए एक पोस्ट अनुरोध किया. यह समझ में आता है.

768
00:46:09,980 --> 00:46:12,800
यह सर्वर क्या हमें वापस भेजा.

769
00:46:12,800 --> 00:46:16,320
यह अब छवियों और चीजों की तरह साथ इस विशाल HTML दस्तावेज़ है,

770
00:46:16,320 --> 00:46:20,920
यह सिर्फ पाठ की एक पंक्ति है, और फिर हम सिर्फ पाठ की रेखा प्रदर्शित.

771
00:46:20,920 --> 00:46:26,290
यदि हम हेडर के लिए वापस जाओ और देखो क्या हम वास्तव में इस HTTP अनुरोध के अंदर भेजा,

772
00:46:26,290 --> 00:46:33,950
हम यहाँ नीचे देखते हैं कि हम AAPL का प्रतीक है और एक मूल्य के एक कुंजी के साथ भेजा जा सकता है,

773
00:46:33,950 --> 00:46:36,430
जो उपयोगकर्ता क्या अंदर टाइप

774
00:46:36,430 --> 00:46:39,230
यह अच्छा है, लेकिन यह अभी भी एक छोटे से परेशान है.

775
00:46:39,230 --> 00:46:42,490
मैं अभी भी शेयर बोली प्राप्त करने के लिए इस बटन पर क्लिक करें.

776
00:46:42,490 --> 00:46:45,880
हम व्यस्त लोग हैं और हम करने के लिए बटन क्लिक करने के लिए समय नहीं है.

777
00:46:45,880 --> 00:46:49,910
Google इस थोड़ी देर पहले एहसास हुआ जब वे Google झटपट कार्यान्वित किया.

778
00:46:49,910 --> 00:46:53,590
Google झटपट क्या करता है के रूप में आप टाइप कर रहे हैं, यह सिर्फ आप के लिए परिणाम प्रदर्शित शुरू

779
00:46:53,590 --> 00:46:56,520
ताकि आप भी खोज क्लिक के बारे में चिंता करने की ज़रूरत नहीं है.

780
00:46:56,520 --> 00:46:58,730
दरअसल, एक मजेदार कहानी है कि संबंधित.

781
00:46:58,730 --> 00:47:01,100
Google झटपट एक बार बाहर आया, लोगों की तरह थे, "वाह, यह सुपर अद्भुत है."

782
00:47:01,100 --> 00:47:02,540
"यह बहुत अच्छा है."

783
00:47:02,540 --> 00:47:05,950
और स्टैनफोर्ड में एक छात्र नीचे जो समय पर 19 थी

784
00:47:05,950 --> 00:47:09,000
इस साइट बुलाया यूट्यूब त्वरित बनाया.

785
00:47:09,000 --> 00:47:13,170
सभी YouTube तुरंत प्रभावी ढंग से करता है यूट्यूब तुरन्त खोज.

786
00:47:13,170 --> 00:47:17,020
तो बल्कि YouTube.com खोज मारा जाना होने से,

787
00:47:17,020 --> 00:47:21,650
जब मैं CS50 तरह YouTube तुरंत कुछ में टाइप करना आरंभ करें

788
00:47:21,650 --> 00:47:25,320
हम यहाँ देख सकते हैं कि यह एक धीमी इंटरनेट कनेक्शन पर कोशिश कर सकता है

789
00:47:25,320 --> 00:47:28,500
पॉप्युलेट करने के लिए इन परिणामों रहते हैं.

790
00:47:28,500 --> 00:47:35,590
करना है कि हम वास्तव में एक बहुत ही सरल हमारे quote.js फाइल करने के लिए संशोधन कर सकते हैं.

791
00:47:35,590 --> 00:47:40,900
अभी हम इस घटना को संलग्न कर रहे हैं जब फार्म प्रस्तुत है.

792
00:47:40,900 --> 00:47:43,760
हम वास्तव में उपयोगकर्ता है कि फार्म का अब प्रस्तुत नहीं करना चाहते,

793
00:47:43,760 --> 00:47:48,570
तो चलो बजाय इस घटना हर बार जब उपयोगकर्ता एक चाबी प्रेस आग.

794
00:47:48,570 --> 00:47:53,200
करना है कि चलो 1 KeyUp करने के लिए प्रस्तुत घटना बदल.

795
00:47:53,200 --> 00:47:55,740
के लिए फार्म जमा करने के लिए इंतज़ार कर के बजाय इसका मतलब है कि,

796
00:47:55,740 --> 00:47:58,490
हर बार कुंजी दबाया जाता है, कुछ होने जा रहा है.

797
00:47:58,490 --> 00:48:02,030
यह अब समझ में आता है पूरे फार्म इस KeyUp घटना देते हैं.

798
00:48:02,030 --> 00:48:05,080
हम वास्तव में केवल उस खोज बॉक्स के बारे में परवाह है.

799
00:48:05,080 --> 00:48:09,320
>> का चयन करने के लिए कि अब, हम यह हो, बजाय फार्म बोली बदल सकते हैं,

800
00:48:09,320 --> 00:48:14,220
फार्म बोली और हम एक इनपुट है = पाठ लिखें या हम कह सकते हैं (नाम = प्रतीक)

801
00:48:14,220 --> 00:48:16,420
जो हम चाहते हैं.

802
00:48:16,420 --> 00:48:18,650
अब वहाँ एक आखिरी बात हमें क्या करना है.

803
00:48:18,650 --> 00:48:21,190
यहाँ नीचे याद है जब हम ने कहा कि वापसी झूठी

804
00:48:21,190 --> 00:48:24,370
हमने कहा कि हम कि डिफ़ॉल्ट घटना आग नहीं करना चाहती.

805
00:48:24,370 --> 00:48:26,390
लेकिन यह सिर्फ इतना है कि होता है कि अगर हम अब निष्क्रिय कर देते हैं,

806
00:48:26,390 --> 00:48:29,660
जो कुछ भी हम में टाइप करने के ब्राउज़र में दिखाने के लिए अब और नहीं जा रहा है

807
00:48:29,660 --> 00:48:33,000
वजह है कि एक पाठ बॉक्स में टाइप करने के डिफ़ॉल्ट व्यवहार होगा.

808
00:48:33,000 --> 00:48:38,660
हम अब तक ओवरराइड कि है, तो हम इस वापसी झूठी को नष्ट करना चाहते हैं.

809
00:48:38,660 --> 00:48:44,800
अगर हम उस बचाने के लिए और पृष्ठ पुनः लोड, अब जब मैं AAPL टाइपिंग शुरू

810
00:48:44,800 --> 00:48:50,160
आप देखेंगे कि यहाँ नीचे में शेयर की कीमत अपने आप पूरा कर रहा है.

811
00:48:50,160 --> 00:48:53,150
तो यहाँ CS50 वित्त तुरंत है.

812
00:48:53,150 --> 00:48:55,860
दरअसल YouTube झटपट के बारे में एक मजेदार कहानी

813
00:48:55,860 --> 00:48:59,420
है कि छात्र बस की तरह यह परियोजना एक रात के रूप में लिखा है,

814
00:48:59,420 --> 00:49:03,800
और अगले दिन वह यूट्यूब सीईओ द्वारा एक नौकरी की पेशकश की थी.

815
00:49:03,800 --> 00:49:10,610
इसलिए कि जैसे ही आसान है, आप CS50 छात्रों, अपने अंतिम परियोजनाओं आप यूट्यूब पर एक नौकरी प्राप्त कर सकते हैं.

816
00:49:10,610 --> 00:49:14,720
कुछ की तरह है कि एक अंतिम परियोजना के लिए एक बहुत अच्छा विचार है, है ना?

817
00:49:14,720 --> 00:49:18,170
हम कुछ मौजूदा कार्यक्षमता है कि हम साथ एकीकृत करना चाहता था.

818
00:49:18,170 --> 00:49:20,330
हम उपयोगकर्ता अनुभव एक छोटा सा सुधार करने के लिए,

819
00:49:20,330 --> 00:49:24,340
और अचानक यूट्यूब पर कुछ त्वरित खोज एक बहुत आसान हो सकता है

820
00:49:24,340 --> 00:49:27,290
की तुलना में नियमित रूप से यूट्यूब पर इसके लिए खोज.

821
00:49:27,290 --> 00:49:30,790
तो यह है कि संक्षेप में AJAX है.

822
00:49:30,790 --> 00:49:34,860
>> उदाहरण है कि यूसुफ दिखा रहा था, हम autocompletes के एक बहुत कुछ देखा है,

823
00:49:34,860 --> 00:49:39,250
और उन autocompletes वास्तव में, वास्तव में काम कर रहे हैं क्योंकि हम याद नहीं है -

824
00:49:39,250 --> 00:49:41,770
उदाहरण के लिए, यदि आप एप्पल के लिए शेयर की कीमत नहीं याद है

825
00:49:41,770 --> 00:49:45,110
और हम सिर्फ इतना पता है कि यह आ कुछ सिर्फ मेरे लिए बजाय कह,

826
00:49:45,110 --> 00:49:48,740
"इस बात का एक हिस्सा इतना पैसा खर्च,"

827
00:49:48,740 --> 00:49:52,540
मैं एक तरह से पता है कि शेयरों क्या ए.ए. के साथ शुरू करना चाहते हैं.

828
00:49:52,540 --> 00:49:58,340
हम जानते हैं कि बूटस्ट्रैप पुस्तकालय है कि पहले से ही शामिल है के साथ वास्तव में अच्छी तरह से कर सकते हैं

829
00:49:58,340 --> 00:50:01,380
अंदर CS50 वित्त की.

830
00:50:01,380 --> 00:50:09,390
यदि आप यहाँ आते हैं और JavaScript टैग Typeahead के लिए नीचे स्क्रॉल,

831
00:50:09,390 --> 00:50:13,730
यह सिर्फ एक अच्छा प्लगइन है कि किसी ने पहले से ही हमारे लिए लिखा है,

832
00:50:13,730 --> 00:50:16,980
और हम आसानी से इस तरह अपनी कार्यक्षमता का उपयोग कर सकते हैं.

833
00:50:16,980 --> 00:50:21,410
मैं एक एक में टाइप किया है और यहाँ कुछ कहा गया है कि ए के साथ शुरू की एक सूची है

834
00:50:21,410 --> 00:50:25,360
चलो का कहना है कि मुझे लगता है कि यह वास्तव में अच्छा है और यह मुझे मेरे पृष्ठ पर शामिल करने के लिए समय है.

835
00:50:25,360 --> 00:50:28,300
यह पता चला है कि यह वास्तव में, वास्तव में सरल है.

836
00:50:28,300 --> 00:50:32,810
चलो quote3.js करने के लिए यहाँ कूद.

837
00:50:34,890 --> 00:50:37,380
मेरी फ़ाइल थोड़ा अलग दिखता है.

838
00:50:37,380 --> 00:50:39,700
यहाँ नीचे मेरी AJAX सामान के सब एक ही है.

839
00:50:39,700 --> 00:50:43,170
मैं दूसरे पृष्ठ पर जाने के लिए बिना शेयर डेटा लोड करने के लिए चाहते हैं.

840
00:50:43,170 --> 00:50:46,220
लेकिन अब मैं इस प्लगइन का उपयोग करना चाहते हैं.

841
00:50:46,220 --> 00:50:51,020
बूटस्ट्रैप प्रलेखन बिल्कुल मैं कैसे कर सकते हैं कि महान उदाहरण है.

842
00:50:51,020 --> 00:50:54,350
मैं कहना चाहता हूँ "यहाँ इनपुट है कि मैं पर autocomplete चाहते है,"

843
00:50:54,350 --> 00:50:56,640
और मैं इस typeahead बुलाया समारोह कॉल करने के लिए जा रहा हूँ,

844
00:50:56,640 --> 00:50:59,730
और कहा कि सभी हमारे लिए Typeahead सामान की संभाल करने के लिए जा रहा है.

845
00:50:59,730 --> 00:51:02,090
यह सूची इनिशियलाइज़ जाएगा, यह हमारे छानने की सब करना होगा.

846
00:51:02,090 --> 00:51:06,680
केवल एक बात यह पता करने की जरूरत है कि हम क्या डेटा पर autocompleting रहे हैं.

847
00:51:06,680 --> 00:51:10,480
तो मैं बाहर प्रलेखन पढ़ने और उदाहरणों को देख बस इस कुंजी पाया.

848
00:51:10,480 --> 00:51:14,150
अगर मैं इसे स्रोत का एक महत्वपूर्ण है, इस कुंजी का मान दे

849
00:51:14,150 --> 00:51:17,770
सिर्फ बातें की कुछ सरणी मैं पर स्वत: पूर्ण करने के लिए चाहते है.

850
00:51:17,770 --> 00:51:20,180
यह चर इस अन्य फ़ाइल से आया था.

851
00:51:20,180 --> 00:51:23,400
मैं symbols.js खोलने के लिए.

852
00:51:23,400 --> 00:51:27,980
>> इस symbols.js सिर्फ यह वास्तव में, वास्तव में बड़ा तार युक्त सरणी है

853
00:51:27,980 --> 00:51:32,080
NASDAQ से इन स्टॉक प्रतीक के सभी.

854
00:51:32,080 --> 00:51:42,190
अगर मैं करने के लिए वापस HTML, इतना jharvard, vhosts, globalhost, html, टेम्पलेट्स कूदना चाहते हैं,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
के बाद से है कि अब quote3.js कहा जाता है, मुझे JavaScript फ़ाइल मैं यहाँ सहित हूँ बदलने.

857
00:51:50,910 --> 00:51:55,110
अब मैं quote3.js है, तो मैं कि अलग JavaScript फ़ाइल में लोड करने के लिए जा रहा हूँ,

858
00:51:55,110 --> 00:51:57,910
एक है कि उस बूटस्ट्रैप autocomplete है.

859
00:51:57,910 --> 00:52:04,430
अब जब मैं ब्राउज़र में वापस कूद, पृष्ठ पुनः लोड, और मैं आ टाइपिंग शुरू,

860
00:52:04,430 --> 00:52:06,880
वहाँ मेरी autocomplete है. और यह सच है कि जितना सरल था.

861
00:52:06,880 --> 00:52:11,400
मैं कोड की एक पंक्ति है, कि सिर्फ इतना कहा था, "यहाँ बातें मैं पर स्वत: पूर्ण करने के लिए चाहते हैं,"

862
00:52:11,400 --> 00:52:16,590
और अचानक मैं प्रयास के पूरे नहीं सभी में एक बहुत कुछ के साथ यह वास्तव में बहुत अच्छी कार्यक्षमता है.

863
00:52:16,590 --> 00:52:19,810
जैसा कि आप वेबसाइटों और चीजों की विशेष रूप से सामने के छोर की ओर विकसित कर रहे हैं,

864
00:52:19,810 --> 00:52:21,840
आप को खोजने के लिए इस मामले में एक बहुत कुछ है करने के लिए जा रहे हैं.

865
00:52:21,840 --> 00:52:25,700
वहाँ से बाहर एक बहुत, बहुत, बहुत शांत मुक्त पुस्तकालयों के बहुत कुछ कर रहे हैं

866
00:52:25,700 --> 00:52:30,190
कि यह करने के लिए इस तरह से बातें करने के लिए आसान सुपर.

867
00:52:30,190 --> 00:52:37,230
किसी केवल प्रतीकों की इस बड़ी सूची पर autocompleting की किसी भी कमियां के बारे में सोच सकते हैं?

868
00:52:37,230 --> 00:52:41,580
कुछ है कि इस दृष्टिकोण के साथ सबसे अच्छा नहीं है क्या हो सकता है?

869
00:52:42,790 --> 00:52:45,960
हाँ. >> [छात्र] समय, अगर आप [अश्राव्य] की एक बहुत कुछ है

870
00:52:45,960 --> 00:52:50,420
हाँ. अभी हम इस विशाल जावास्क्रिप्ट फाइल डाउनलोड कर रहे हैं और वहाँ प्रतीकों में से एक बहुत कुछ है.

871
00:52:50,420 --> 00:52:54,360
और यदि ऐसा है तो हम सामान की एक टन है, इस तरह की खोज ही नहीं सकता है विलंबता में वृद्धि

872
00:52:54,360 --> 00:52:56,600
लेकिन यह भी वास्तविक फाइल डाउनलोड.

873
00:52:56,600 --> 00:52:58,670
बढ़िया है. और कुछ?

874
00:53:01,950 --> 00:53:05,280
अभी वहाँ प्रासंगिकता का कोई वास्तविक अर्थ है.

875
00:53:05,280 --> 00:53:08,190
यदि मैं एक एक, कंपनियों है कि यहाँ दिखाने में लिखते हैं

876
00:53:08,190 --> 00:53:11,220
सबसे लोकप्रिय कंपनियों है कि ए के साथ शुरू नहीं हो सकता है

877
00:53:11,220 --> 00:53:17,130
>> इससे पहले कि मैं एप्पल के लिए मिलता है, तो यह कुछ और वर्ण ले खोजने के लिए मैं क्या देख रहा हूँ हो सकता है.

878
00:53:17,130 --> 00:53:20,420
इस autocomplete प्रासंगिकता की इस भावना नहीं है.

879
00:53:20,420 --> 00:53:24,400
यह सिर्फ कहने के लिए, जा रहा है, "कुछ भी है कि मैच मैं प्रदर्शित करने के लिए जा रहा हूँ."

880
00:53:24,400 --> 00:53:30,510
कि के बजाय, मैं करने के लिए किसी भी तरह से अपनी खोजों में कुछ प्रासंगिकता एकीकृत करने के लिए करना चाहते हैं.

881
00:53:30,510 --> 00:53:36,440
अगर मैं यहाँ जाना याहू वित्त finance.yahoo.com,,

882
00:53:36,440 --> 00:53:42,100
अगर मैं याहू वित्त पेज पर एक प्रतीक दर्ज करने की कोशिश

883
00:53:42,100 --> 00:53:52,310
और मैं goog टाइपिंग शुरू, मैं चीजों की इस अच्छी सूची है.

884
00:53:52,310 --> 00:53:57,100
जाहिर है, ऐसा लगता है जैसे याहू वित्त चालाक यहाँ और अधिक कुछ कर रही है.

885
00:53:57,100 --> 00:53:59,790
वे कुछ प्रासंगिकता है और वे भी अतिरिक्त जानकारी

886
00:53:59,790 --> 00:54:01,430
स्टॉक के नाम की तरह.

887
00:54:01,430 --> 00:54:05,850
यह कुछ ऐसा है कि मैं वास्तव में सिर्फ मेरी प्रतीकों का जायजा सूची के साथ नहीं मिल सकता है.

888
00:54:05,850 --> 00:54:09,520
मैं यह चाहता हूँ और इसलिए मैं इसे लेने के लिए जा रहा हूँ.

889
00:54:09,520 --> 00:54:11,790
करना है कि हम कुछ बातें करते हैं.

890
00:54:11,790 --> 00:54:15,580
चलो पहली बार इस पृष्ठ पर निरीक्षक खुला

891
00:54:15,580 --> 00:54:18,100
क्योंकि हमने देखा है कि इस पृष्ठ पर नहीं reloading है,

892
00:54:18,100 --> 00:54:21,960
तो यह शायद AJAX है किसी भी तरह का उपयोग करने के लिए अपने डेटा को लोड किया.

893
00:54:21,960 --> 00:54:23,920
हम यह पता लगाने के लिए क्या डेटा लोड हो रहा है कर सकते हैं.

894
00:54:23,920 --> 00:54:28,390
अगर मैं इस नेटवर्क टैब पर क्लिक करें, इन अनुरोध है कि निकाल दिया जाना शुरू होने जा रहे हैं.

895
00:54:28,390 --> 00:54:34,020
अब अगर मैं goo में टाइप करते हैं, हम देख सकते हैं कि मैं सिर्फ एक नया HTTP अनुरोध मिला.

896
00:54:34,020 --> 00:54:37,490
शायद यह है कि जहां कि डेटा से आ रही है.

897
00:54:37,490 --> 00:54:41,990
यकीन है कि पर्याप्त है, अगर मैं इस यूआरएल है, जो थोड़ा अजीब नाम है पर देखो

898
00:54:41,990 --> 00:54:46,930
हम देख सकते हैं कि यह वही जगह है जहाँ याहू से भेज रहा है से अपने डेटा.

899
00:54:46,930 --> 00:54:53,400
>> मैं एक अलग suggest.php नामक फाइल कि बहुत भावना में देखने का कार्य करने के लिए समान है बनाया है.

900
00:54:53,400 --> 00:54:57,730
यह मूल रूप से याहू के यूआरएल के लिए एक क्वेरी बनाने के लिए जा रहा है, कुछ डेटा वापस प्राप्त करने के लिए,

901
00:54:57,730 --> 00:54:59,750
और यह मेरे लिए वापस भेज.

902
00:54:59,750 --> 00:55:02,570
अब, इस बड़े, प्रतीकों के विशाल सूची का उपयोग करने के बजाय,

903
00:55:02,570 --> 00:55:05,280
मैं याहू अच्छा प्रासंगिकता चीजों का उपयोग कर सकते हैं,

904
00:55:05,280 --> 00:55:08,150
और मैं करने के लिए है कि बड़े पैमाने पर JavaScript फ़ाइल डाउनलोड करने के लिए नहीं है.

905
00:55:08,150 --> 00:55:12,040
मैं केवल वास्तव में प्रासंगिक स्टॉक प्रतीक नीचे खींचने के लिए जा रहा हूँ.

906
00:55:12,040 --> 00:55:13,960
चलो उस में कूद.

907
00:55:13,960 --> 00:55:17,360
तो html, जे एस. हम quote4 में अब कर रहे हैं.

908
00:55:17,360 --> 00:55:22,120
अब हम नहीं रह जावास्क्रिप्ट फाइलों की बड़ी सूची का उपयोग कर रहे हैं.

909
00:55:22,120 --> 00:55:24,430
लेकिन वहाँ डिजाइन समस्या का एक छोटा सा तरह यहाँ है.

910
00:55:24,430 --> 00:55:28,200
हमने कहा है कि AJAX में एक अतुल्यकालिक है.

911
00:55:28,200 --> 00:55:31,000
क्या इसका मतलब यह है कि जब मैं एक AJAX अनुरोध करते हैं,

912
00:55:31,000 --> 00:55:36,490
तो ठीक है यहाँ 8 लाइन पर, यह है, जहां मेरे AJAX अनुरोध वास्तव में निकाल दिया है.

913
00:55:36,490 --> 00:55:40,370
चलो कहते हैं कि अब मैं कुछ कोड यहाँ नीचे है कि कुछ सामान करने के लिए जा रहा है

914
00:55:40,370 --> 00:55:43,930
उपयोगकर्ता परिवर्तन या पृष्ठ पर कुछ सूचित करना चाहते हैं.

915
00:55:43,930 --> 00:55:49,830
ब्राउज़र क्या होने वाला नहीं है, इस अनुरोध के लिए प्रतीक्षा करने के लिए जारी रखने के लिए नहीं जा रहा है

916
00:55:49,830 --> 00:55:53,480
नीचे आ रहा है और इस लाइन से टकराने से पहले.

917
00:55:53,480 --> 00:55:55,900
यह अतुल्यकालिक हिस्सा है.

918
00:55:55,900 --> 00:55:58,400
यह इस अनुरोध को बनाने के लिए और कहते हैं, "जब भी आप खत्म हो रहा है,

919
00:55:58,400 --> 00:56:03,080
"वापस आते हैं और कि समारोह है कि मैंने तुमसे कहा सफलता के अंदर कॉल करने के लिए कहते हैं."

920
00:56:03,080 --> 00:56:07,300
इसका मतलब है कि हम सिर्फ सभी शेयरों को पहले नहीं डाउनलोड कर सकते हैं.

921
00:56:07,300 --> 00:56:10,300
हम अनुरोध बनाने के लिए और कुछ करने के लिए वापस आने के लिए प्रतीक्षा करने की जरूरत है.

922
00:56:10,300 --> 00:56:13,330
यह है कि इससे पहले का मतलब है, हम बस बूटस्ट्रैप बता सकता है,

923
00:56:13,330 --> 00:56:15,580
"यहाँ चीजों की सूची मैं autocomplete के लिए आप पर चाहते है."

924
00:56:15,580 --> 00:56:18,950
हम अब नहीं है कि अब और नहीं कर सकते हैं क्योंकि हम नहीं जानते

925
00:56:18,950 --> 00:56:21,780
क्या हम वास्तव में स्वत: पूर्ण करने के लिए करना चाहते हैं.

926
00:56:21,780 --> 00:56:25,190
सौभाग्य से, बूटस्ट्रैप इस के बारे में सोचा है, क्योंकि उन, वहाँ पर स्मार्ट लोग कर रहे हैं,

927
00:56:25,190 --> 00:56:30,160
और वे वास्तव में हमें इस Typeahead प्लगइन लोड के लिए एक और रास्ता दे दिया.

928
00:56:30,160 --> 00:56:35,630
इससे पहले, इस स्रोत संपत्ति के मूल्य सिर्फ बातें की इस बड़ी autocomplete के लिए सरणी था.

929
00:56:35,630 --> 00:56:39,580
>> अब स्रोत संपत्ति वास्तव में एक समारोह है,

930
00:56:39,580 --> 00:56:44,580
और इस समारोह का उद्देश्य के लिए बाहर निकालने पर स्वचालित पूर्ण करने की बातें कर रहे हैं.

931
00:56:44,580 --> 00:56:48,730
जिस तरह से यह आंकड़ा है कि बाहर जा रहा है यह याहू वित्त पूछने के लिए जा रहा है

932
00:56:48,730 --> 00:56:51,750
autocomplete के लिए सबसे अच्छी चीजों में क्या कर रहे हैं.

933
00:56:51,750 --> 00:56:54,500
ऐसा करने के लिए है कि मैं एक बहुत ही इसी तरह AJAX अनुरोध करने के लिए जा रहा हूँ.

934
00:56:54,500 --> 00:56:59,010
मैं suggest.php में इस पृष्ठ का अनुरोध करने के लिए जा रहा हूँ.

935
00:56:59,010 --> 00:57:01,360
मैं प्रतीकों के साथ अभी भी भेजना चाहते हैं.

936
00:57:01,360 --> 00:57:05,570
और अब मेरी सफलता को, बूटस्ट्रैप प्रलेखन मुझे बताया

937
00:57:05,570 --> 00:57:09,130
है कि आदेश में चीजों की है कि सूची को आबाद करने के लिए,

938
00:57:09,130 --> 00:57:14,370
मैं सब करने की ज़रूरत है इस सरणी में पारित अब कॉलबैक समारोह.

939
00:57:14,370 --> 00:57:15,660
लेकिन एक मिनट रुको.

940
00:57:15,660 --> 00:57:20,240
यदि यह एक सरणी माना जाता है और AJAX मुझे वापस भेज रहा है पाठ,

941
00:57:20,240 --> 00:57:22,720
कि कैसे संभव है?

942
00:57:22,720 --> 00:57:27,910
यह JSON कहा जाता है डाटा के आदान - प्रदान का एक नया तरीका परिचय.

943
00:57:27,910 --> 00:57:33,000
इस मामले में हम अभी वापस नहीं पाठ का एक सरल स्ट्रिंग भेज रहे हैं.

944
00:57:33,000 --> 00:57:37,670
अब हम स्टॉक प्रतीक के इस अधिक जटिल सूची के साथ काम कर रहे हैं.

945
00:57:37,670 --> 00:57:41,730
ये स्टॉक प्रतीक भी कंपनी का नाम या मौजूदा कीमतों की तरह बातें शामिल कर सकते हैं.

946
00:57:41,730 --> 00:57:47,550
बस एक बड़ी लंबी स्ट्रिंग है कि किसी भी उम्मीद के मुताबिक रास्ते में नहीं स्वरूपित का उपयोग

947
00:57:47,550 --> 00:57:51,970
सबसे अच्छा करने के लिए याहू के सर्वर से इस डेटा मुझे मिल नहीं जा रहा है

948
00:57:51,970 --> 00:57:54,540
एक तरीका है कि मैं आसानी से समझ सकता है.

949
00:57:54,540 --> 00:58:01,280
JSON एक तकनीक है कि कैसे हम जावास्क्रिप्ट में साहचर्य arrays बनाने का लाभ लेता है.

950
00:58:01,280 --> 00:58:04,510
यह एक जावास्क्रिप्ट साहचर्य सरणी की तरह एक बहुत लग रहा है,

951
00:58:04,510 --> 00:58:06,600
और वास्तव में, यह है क्योंकि यह है.

952
00:58:06,600 --> 00:58:09,710
JSON जावास्क्रिप्ट वस्तु संकेतन के लिए खड़ा है.

953
00:58:09,710 --> 00:58:15,020
यह मूल रूप से एक डेटा स्थानांतरित करने के लिए आगे और पीछे प्रारूप पर सहमति व्यक्त की.

954
00:58:15,020 --> 00:58:18,280
यहाँ इस JSON वस्तु या इस JSON साहचर्य सरणी

955
00:58:18,280 --> 00:58:21,010
मुझे एक पाठ्यक्रम के बारे में कुछ डेटा भेजने.

956
00:58:21,010 --> 00:58:25,110
>> इस सरणी की चाबियाँ CS50 के एक मूल्य है पाठ्यक्रम की तरह बातें कर रहे हैं,

957
00:58:25,110 --> 00:58:29,140
और यहाँ नीचे हम देख सकते हैं कि मैं एक मूल्य है कि एक सरणी है हो सकता है.

958
00:58:29,140 --> 00:58:32,730
मैं तार बाहर पार्स तरह बातें करने की नहीं है और अल्पविराम के लिए देखो

959
00:58:32,730 --> 00:58:35,330
और इस तरह से पागल बातें करते हैं.

960
00:58:35,330 --> 00:58:38,820
क्योंकि यह इस JSON प्रारूप में घोषित किया जाता है,

961
00:58:38,820 --> 00:58:43,510
जावास्क्रिप्ट और jQuery पहले से ही एक स्ट्रिंग परिवर्तित करने के लिए कार्य किया है

962
00:58:43,510 --> 00:58:48,140
कि एक वास्तविक जावास्क्रिप्ट साहचर्य सरणी में इस JSON की तरह लग रहा है

963
00:58:48,140 --> 00:58:50,440
कि हम साथ काम कर सकते हैं.

964
00:58:50,440 --> 00:58:56,660
कर रही है कि के रूप में कह रही है कि अब कोई इस फ़ाइल suggest.php, है के रूप में सरल है,

965
00:58:56,660 --> 00:58:59,040
मुझे वापस बस पाठ की एक स्ट्रिंग भेजने,

966
00:58:59,040 --> 00:59:01,950
लेकिन मुझे पता है कि यह मुझे भेज JSON वापस जा रहा है.

967
00:59:01,950 --> 00:59:06,760
इसका मतलब है कि कि JSON एक जावास्क्रिप्ट साहचर्य सरणी में परिवर्तित किया जा सकता है.

968
00:59:06,760 --> 00:59:10,830
और jQuery हां, तो मैं आप मेरे लिए है कि करने के लिए करना चाहते हैं.

969
00:59:10,830 --> 00:59:13,990
इसका मतलब है कि इस प्रतिक्रिया यहाँ पैरामीटर,

970
00:59:13,990 --> 00:59:16,070
यह अब सिर्फ एक स्ट्रिंग है.

971
00:59:16,070 --> 00:59:19,860
क्योंकि हम jQuery बताया है कि यहाँ कुछ JSON आता है,

972
00:59:19,860 --> 00:59:22,950
jQuery के काफी स्मार्ट कहने के लिए होने जा रहा है, "आप JSON चाहता था?"

973
00:59:22,950 --> 00:59:26,890
"मैं करने के लिए है कि आप के लिए एक साहचर्य सरणी में परिवर्तित करने के लिए जा रहा हूँ."

974
00:59:26,890 --> 00:59:32,100
चलो वास्तव नेटवर्क टैब पर एक नज़र रखना एक बार हम quote4.js है.

975
00:59:32,100 --> 00:59:35,400
हम इस को बदलने के लिए और पृष्ठ पुनः लोड हूँ.

976
00:59:37,150 --> 00:59:41,250
अब मैं फिर से एक एक टाइप करने के लिए जा रहा हूँ.

977
00:59:41,250 --> 00:59:45,600
मैं suggest.php के लिए एक जोड़ी का अनुरोध किया है, लेकिन अब इस प्रतिक्रिया

978
00:59:45,600 --> 00:59:48,670
बजाय सिर्फ स्ट्रिंग, यह JSON है.

979
00:59:48,670 --> 00:59:52,580
तो मैं एक खुली धनु धनुकोष्ठक कह रही है, "यहाँ एक साहचर्य सरणी आता है."

980
00:59:52,580 --> 00:59:56,830
>> इस साहचर्य सरणी की पहली और एकमात्र कुंजी प्रतीकों कहा जाता है,

981
00:59:56,830 --> 01:00:00,240
और फिर यहाँ सभी प्रासंगिक प्रतीकों में से एक की एक सरणी है

982
01:00:00,240 --> 01:00:04,820
याहू वित्त से अब उस विशाल सूची से नहीं आ रहा.

983
01:00:06,110 --> 01:00:10,630
कि कैसे मैं बस इस autocomplete प्लगइन आबाद कर सकते हैं

984
01:00:10,630 --> 01:00:14,280
कुछ डेटा है कि एक स्थानीय फ़ाइल है कि पहले से ही पूर्व निर्धारित से नहीं आ रहा है साथ

985
01:00:14,280 --> 01:00:17,490
लेकिन कुछ और से.

986
01:00:17,490 --> 01:00:21,160
यह पता चला है कि हम वास्तव में एक JSONP बुलाया प्रौद्योगिकी के लाभ ले सकते हैं,

987
01:00:21,160 --> 01:00:27,420
या padding के साथ JSON है कि इस suggest.php बिचौलिया को समाप्त होगा.

988
01:00:27,420 --> 01:00:34,010
लेकिन लगता है कि कर के बजाय, चलो बजाय कैसे मैं यह और भी सुधार कर सकते हैं पर एक नज़र रखना.

989
01:00:34,010 --> 01:00:36,040
मैं वास्तव में बूटस्ट्रैप Typeahead की तरह. यह वास्तव में अच्छा है.

990
01:00:36,040 --> 01:00:39,570
लेकिन हम जावास्क्रिप्ट में अच्छा हो रही है और हम किस तरह का यह अपने आप करना चाहते हैं,

991
01:00:39,570 --> 01:00:43,870
शायद इस प्लगइन क्या कर रही हो सकता है पर एक नज़र रखना.

992
01:00:43,870 --> 01:00:46,500
चलो अब नहीं है कि Typeahead बात का उपयोग,

993
01:00:46,500 --> 01:00:50,550
और सुझाए गए शेयरों की इस सूची में खुद को बनाने की कोशिश करते हैं.

994
01:00:50,550 --> 01:00:53,790
यहाँ quote6.php में हम उसी तरह से शुरू करने जा रहे हैं.

995
01:00:53,790 --> 01:00:58,050
हर बार किसी के कुछ प्रकार, हम एक AJAX अनुरोध बनाना चाहते हैं.

996
01:00:58,050 --> 01:01:01,590
यह हमारी मूल CS50 वित्त त्वरित के लिए इसी तरह की है.

997
01:01:01,590 --> 01:01:05,020
बल्कि quote.php के लिए एक अनुरोध बनाने से,

998
01:01:05,020 --> 01:01:08,530
अब हम कर रहे हैं कि एक ही फाइल को पहले के रूप में एक अनुरोध बनाने, इस suggest.php,

999
01:01:08,530 --> 01:01:12,460
जो सिर्फ याहू वित्त से डेटा खींचने के लिए जा रहा है.

1000
01:01:12,460 --> 01:01:19,480
>> फिर, हम अभी भी JSON की उम्मीद कर रहे हैं, लेकिन अब के बाद से Typeahead यह हमारे लिए नहीं कर रही है,

1001
01:01:19,480 --> 01:01:24,850
हम भी साथ मूल्य है कि मौजूदा पाठ बॉक्स के अंदर भेजने की जरूरत है.

1002
01:01:24,850 --> 01:01:28,120
अब हम जानते हैं कि याहू वित्त पूछने के लिए,

1003
01:01:28,120 --> 01:01:34,160
और इसलिए अब यहाँ समारोह में कहा कि हम को निष्पादित करने के लिए एक बार अनुरोध पूर्ण करना चाहते है.

1004
01:01:34,160 --> 01:01:36,520
हम प्लगइन नहीं है हमारे लिए सूची बनाने के लिए करते हैं,

1005
01:01:36,520 --> 01:01:40,630
तो यहाँ है जहाँ हम वास्तव में करने के लिए सुझावों की एक सूची का निर्माण करने जा रहे हैं.

1006
01:01:40,630 --> 01:01:44,850
करना है कि, PHP में बहुत पसंद है हम HTML के इन बड़े तार concatenated

1007
01:01:44,850 --> 01:01:48,170
तो हम उन्हें मुद्रित, हम जावास्क्रिप्ट में एक ही सटीक बात कर सकते हैं.

1008
01:01:48,170 --> 01:01:51,850
पहले हम इस सुझाव बुलाया स्ट्रिंग शुरू करने के लिए जा रहे हैं,

1009
01:01:51,850 --> 01:01:54,590
और इस स्ट्रिंग के कुछ HTML होते जा रहा है.

1010
01:01:54,590 --> 01:01:58,320
हम यह चीजों की एक सूची में होना चाहते हैं, तो हम इस सूची टैग के साथ शुरू करने जा रहे हैं,

1011
01:01:58,320 --> 01:02:03,340
और अब हम सभी प्रतीक है कि हमारे पास वापस लौट रहे थे की पुनरावृति करने के लिए जा रहे हैं.

1012
01:02:03,340 --> 01:02:06,500
याद रखें, क्योंकि हम डेटाप्रकार कहा है: 'json' है, यह एक स्ट्रिंग नहीं है.

1013
01:02:06,500 --> 01:02:09,500
यह पहले से ही हमारे लिए एक सरणी है. यह वास्तव में अच्छा है.

1014
01:02:09,500 --> 01:02:13,790
हम बस कह सकते हैं, "मैं तुम्हें एक सूची तत्व संलग्न करने के लिए करना चाहते हैं."

1015
01:02:13,790 --> 01:02:16,000
हम उस के पक्ष में एक तत्व के अंदर डाल देता हूँ,

1016
01:02:16,000 --> 01:02:19,030
हम यह सुझाव के एक वर्ग दे तो हम जानते हैं कि यह क्या है,

1017
01:02:19,030 --> 01:02:23,880
और अब यहाँ प्रतीक है कि हम याहू वित्त से वापस मिल गया है.

1018
01:02:23,880 --> 01:02:27,230
>> एक बार हम प्रतीकों हम वापस मिल गया है में से प्रत्येक के लिए एक तत्व बनाया है,

1019
01:02:27,230 --> 01:02:30,100
हम बस के लिए रवाना सूची को बंद करना चाहते हैं.

1020
01:02:30,100 --> 01:02:33,040
तो अब सुझाव इस छोटी सी HTML टुकड़ा का प्रतिनिधित्व करता है

1021
01:02:33,040 --> 01:02:37,860
बातें हम के लिए देख रहे हैं की सूची है कि जब एक पृष्ठ पर रखा जा रहा है.

1022
01:02:37,860 --> 01:02:41,070
अब वास्तव में पृष्ठ पर डाल दिया है कि.

1023
01:02:41,070 --> 01:02:46,390
ऐसा करने के लिए है कि मैं वास्तव में एक खाली div बनाया है और मैं यह सुझाव एक आईडी दिया है.

1024
01:02:46,390 --> 01:02:52,520
बहुत पसंद है हम div की सामग्री है कि स्टॉक डेटा की कीमत प्रदर्शित होगा सेट,

1025
01:02:52,520 --> 01:02:58,600
अब हम सिर्फ इस div की सामग्री जो भी इस स्ट्रिंग सेट करना चाहते हैं

1026
01:02:58,600 --> 01:03:00,290
जिसमें इन प्रतीकों.

1027
01:03:00,290 --> 01:03:07,650
इस HTML पद्धति का उपयोग करके, इस सुझाव चर, इस स्ट्रिंग, HTML की एक स्ट्रिंग है.

1028
01:03:07,650 --> 01:03:13,490
मैं आपको लगता है कि HTML लेने के लिए चाहते हैं और यह सुझाव बुलाया div के अंदर डाल दिया.

1029
01:03:13,490 --> 01:03:15,680
हम सिर्फ डोम के लिए अब कुछ संलग्न.

1030
01:03:15,680 --> 01:03:20,360
हम डोम के लिए कुछ नए तत्व जोड़ दिया है कि हम अब पृष्ठ पर प्रदर्शित कर सकते हैं.

1031
01:03:20,360 --> 01:03:22,540
चलो देखते हैं इस तरह दिखता है.

1032
01:03:22,540 --> 01:03:29,110
यदि हम quote6 में लोड करने के लिए और अब हम वापस आ गया,

1033
01:03:29,110 --> 01:03:34,480
अब जब मैं AAPL टाइपिंग शुरू, हम लंबे समय तक नहीं है कि बूटस्ट्रैप autocomplete है,

1034
01:03:34,480 --> 01:03:38,470
लेकिन हम अब इस सूची में है कि हम अपने आप को बनाया है.

1035
01:03:38,470 --> 01:03:43,230
यह बूटस्ट्रैप Typeahead की तुलना में एक छोटा सा uglier है, उदाहरण के लिए,

1036
01:03:43,230 --> 01:03:45,580
लेकिन यह हमें एक दूसरी बात करने के लिए अनुमति नहीं है.

1037
01:03:45,580 --> 01:03:48,660
जब हम कि बूटस्ट्रैप प्लगइन में देख रहे थे

1038
01:03:48,660 --> 01:03:52,590
हमने देखा है कि जब हम स्वतः पूर्ण, एक autocomplete मूल्यों की AAPL था.

1039
01:03:52,590 --> 01:03:54,820
यह बहुत मददगार नहीं हो सकता है.

1040
01:03:54,820 --> 01:03:59,100
एक उपयोगकर्ता के रूप में, मैं तुरंत स्टॉक प्रतीक के सभी नहीं पहचान सकता है.

1041
01:03:59,100 --> 01:04:02,370
मैं शायद अधिक करने के लिए पहचान की संभावना कंपनी के वास्तविक नाम क्या हैं.

1042
01:04:02,370 --> 01:04:05,310
तो यह वास्तव में मददगार नहीं हो सकता है अगर बजाय AAPL कह

1043
01:04:05,310 --> 01:04:07,970
यह एप्पल इंक की तरह कुछ कहा

1044
01:04:07,970 --> 01:04:12,240
क्योंकि हम खुद इस लुढ़का है, हम वास्तव में आसानी से कर सकता हूँ.

1045
01:04:12,240 --> 01:04:17,630
तो चलो यहाँ हमारे पिछले बोली फ़ाइल खोलने, quote7.

1046
01:04:17,630 --> 01:04:23,200
>> एक ही बात. मैं बस एक PHP फ़ाइल है कि सिर्फ प्रतीकों से हमारे लिए वापस आ जाएगी बनाया है.

1047
01:04:23,200 --> 01:04:25,550
यह भी हमें वापस देने के लिए कंपनी के नाम.

1048
01:04:25,550 --> 01:04:28,150
और इसलिए हम एक ही बात कर रहे हैं. हम एक AJAX अनुरोध कर रहे हैं.

1049
01:04:28,150 --> 01:04:32,370
एक बार अनुरोध पूरा कर लिया है, हम इस समारोह में यहाँ निष्पादित करने के लिए जा रहे हैं,

1050
01:04:32,370 --> 01:04:36,520
और इस समारोह के लिए तत्वों का एक बड़ा स्ट्रिंग का निर्माण करने जा रहा है.

1051
01:04:36,520 --> 01:04:39,520
लेकिन यहाँ अंतर यह है कि इन सूचियों के मूल्य में अब सिर्फ प्रतीक है,

1052
01:04:39,520 --> 01:04:45,370
अब यह नाम है.

1053
01:04:45,370 --> 01:04:47,070
तो हम एक छोटी सी समस्या है.

1054
01:04:47,070 --> 01:04:51,590
जब हम हमारे देखने का उपयोग करें, हम किसी भी तरह से यह प्रतीक पारित करने की आवश्यकता है.

1055
01:04:51,590 --> 01:04:54,950
हम Microsoft Corporation की तरह देखने का कुछ नहीं पारित कर सकते हैं.

1056
01:04:54,950 --> 01:04:57,900
हम यह MSFT पारित करने की आवश्यकता है.

1057
01:04:57,900 --> 01:05:01,640
जब हम HTML लिख रहे हैं, हम अच्छा में निर्मित विशेषताओं के बहुत सारे हैं.

1058
01:05:01,640 --> 01:05:05,440
एक एक एक href या एक वर्ग के साथ जुड़ा हो सकता है.

1059
01:05:05,440 --> 01:05:08,230
लेकिन क्या हम वास्तव में अब जरूरत है इन कड़ियों में से प्रत्येक के लिए है

1060
01:05:08,230 --> 01:05:11,120
एक शेयर इसके साथ जुड़े प्रतीक है.

1061
01:05:11,120 --> 01:05:14,240
वहाँ कोई HTML विशेषता में निर्मित स्टॉक प्रतीक के लिए,

1062
01:05:14,240 --> 01:05:21,010
लेकिन सौभाग्य से, HTML5 हमें अपने स्वयं के गुण पैदा करने के लिए हो सकता है जो हम चाहते हैं की अनुमति देता है.

1063
01:05:21,010 --> 01:05:24,620
डेटा प्रतीक कह, मैं एक नई विशेषता शुरू की है

1064
01:05:24,620 --> 01:05:29,350
जिसका नाम मैं अभी तक बनाया है, और यह ठीक है क्योंकि मैं इसे इस डेटा के साथ prefaced.

1065
01:05:29,350 --> 01:05:34,270
हम स्टॉक से अब वहाँ के प्रतीक के अंदर की दुकान करने के लिए जा रहे हैं.

1066
01:05:34,270 --> 01:05:39,590
क्या इसका मतलब यह है कि भले ही हम कंपनी के नाम के मूल्य को प्रदर्शित कर रहे हैं

1067
01:05:39,590 --> 01:05:43,380
के अंदर हमारे autocomplete, हम अभी भी याद रखने के प्रतीक रहे हैं

1068
01:05:43,380 --> 01:05:47,110
कि प्रत्येक कंपनी के साथ जुड़ा हुआ है.

1069
01:05:47,110 --> 01:05:50,350
जिस तरह से है कि हम कर रहे हैं इस तत्व ही के अंदर है.

1070
01:05:50,350 --> 01:05:52,930
तो इसका मतलब है कि हम एक और परिवर्तन करना चाहिए.

1071
01:05:52,930 --> 01:05:57,090
जब हम यह अब क्लिक करते हैं, हम वास्तव में प्रतीक, विशेषता का लाभ लेने की जरूरत

1072
01:05:57,090 --> 01:06:00,220
के बजाय सिर्फ अपने मूल्य.

1073
01:06:00,220 --> 01:06:05,010
यदि हम वापस ऊपर, हम सुझाव के लिए कोई ईवेंट हैंडलर देते हैं.

1074
01:06:05,010 --> 01:06:09,280
जब भी इन सुझावों में से एक अब क्लिक किया है, मैं करने के लिए कुछ करना चाहते हैं.

1075
01:06:09,280 --> 01:06:13,160
मैं क्या करना चाहते है कि इनपुट बॉक्स के मूल्य बदल जाते हैं.

1076
01:06:13,160 --> 01:06:16,100
अब मैं इस एक ही वैल समारोह निर्धारित करने के लिए करना चाहते हैं.

1077
01:06:16,100 --> 01:06:21,060
>> तो किसी भी तर्क के बिना इस वैल समारोह तुम देता है क्या पाठ बॉक्स में पहले से ही है,

1078
01:06:21,060 --> 01:06:27,070
लेकिन अगर आप इसे एक स्ट्रिंग दे, यह कि स्ट्रिंग लेने के लिए और यह पाठ बॉक्स में डाल दिया जा रहा है.

1079
01:06:27,070 --> 01:06:28,980
मैं उसी तरह में अपने पाठ बॉक्स का चयन कर रहा हूँ.

1080
01:06:28,980 --> 01:06:31,230
यह नाम फार्म बोली के प्रतीक के अंदर है.

1081
01:06:31,230 --> 01:06:37,540
अब मैं यह गुण डेटा प्रतीक मान भेज रहा हूँ.

1082
01:06:37,540 --> 01:06:41,560
यहाँ यह बात नई है, यह $ (this).

1083
01:06:41,560 --> 01:06:46,850
क्या इस के लिए संदर्भित करता है तत्व है कि क्लिक किया गया था.

1084
01:06:46,850 --> 01:06:50,880
हम यहाँ देख सकते हैं कि हम एक पर क्लिक करें घटना संलग्न नहीं कर रहे हैं कर सकते हैं

1085
01:06:50,880 --> 01:06:54,690
सुझाव के एक वर्ग के साथ प्रत्येक व्यक्तिगत तत्व.

1086
01:06:54,690 --> 01:06:57,140
दरअसल, हम इस एक छोटे से अलग आ रहे हैं.

1087
01:06:57,140 --> 01:07:01,700
इसके बजाय हम कह रहे हैं कि जब भी इस सुझाव div के अंदर कुछ भी,

1088
01:07:01,700 --> 01:07:04,080
जो याद सिर्फ उस सूची के लिए कंटेनर है,

1089
01:07:04,080 --> 01:07:10,150
अगर इस div के अंदर कुछ क्लिक किया और यह सुझाव का एक वर्ग है,

1090
01:07:10,150 --> 01:07:13,000
मैं इस घटना को आग करने के लिए करना चाहते हैं.

1091
01:07:13,000 --> 01:07:17,490
असल में यह क्या मतलब है कि हम क्या कर सकते हैं हम इस एक ही घटना हेन्डलर का पुन: उपयोग कर सकते हैं

1092
01:07:17,490 --> 01:07:20,000
सूची में चीजों के सभी के लिए.

1093
01:07:20,000 --> 01:07:22,080
तो हम पहले तत्व के लिए एक ईवेंट हैंडलर नहीं है

1094
01:07:22,080 --> 01:07:24,550
और दूसरे तत्व के लिए एक अलग घटना हेन्डलर.

1095
01:07:24,550 --> 01:07:29,880
हम बजाय कह सकते हैं, "मैं एक ही घटना हेन्डलर मेरी सूची में सब कुछ करने के लिए लागू करना चाहते हैं."

1096
01:07:29,880 --> 01:07:34,420
लेकिन हम किसी भी तरह से पता है कि जो तत्व क्लिक किया गया था की जरूरत है.

1097
01:07:34,420 --> 01:07:38,450
यह "इस" कीवर्ड का प्रतिनिधित्व करता है कि बस.

1098
01:07:38,450 --> 01:07:42,360
इस वस्तु है कि सिर्फ उपयोगकर्ता द्वारा क्लिक किया गया था.

1099
01:07:42,360 --> 01:07:47,680
अगर मैं सिर्फ 3 लिंक पर क्लिक किया, यह है कि 3 लिंक के तत्व का प्रतिनिधित्व करता है,

1100
01:07:47,680 --> 01:07:51,670
जिसका अर्थ है कि मैं अपने गुण, डेटा प्रतीक मिल सकता है,

1101
01:07:51,670 --> 01:07:57,760
जो हम जानते हैं प्रतीक है कि कंपनी के साथ जुड़ा हुआ है मैं सिर्फ क्लिक शामिल है.

1102
01:07:57,760 --> 01:08:04,550
यदि हम हमारे वित्त पृष्ठ पर वापस कूद,

1103
01:08:04,550 --> 01:08:08,580
अब हम देख सकते हैं कि एक बार मैं MSFT तरह कुछ टाइपिंग शुरू,

1104
01:08:08,580 --> 01:08:11,220
हम अब सिर्फ स्टॉक प्रतीक हो रही है,

1105
01:08:11,220 --> 01:08:13,720
अब हम वास्तविक कंपनियों को हो रही है.

1106
01:08:13,720 --> 01:08:20,410
, लेकिन जब मैं इन कंपनियों में से एक पर क्लिक करें

1107
01:08:20,410 --> 01:08:25,180
हम है कि हम वास्तव में पाठ बॉक्स populating नहीं कर रहे हैं कंपनी के नाम के साथ देख सकते हैं

1108
01:08:25,180 --> 01:08:29,850
लेकिन साथ जो कुछ भी उन डेटा विशेषताओं के अंदर संग्रहित किया गया था.

1109
01:08:29,850 --> 01:08:32,880
और यदि ऐसा है तो मैं वास्तव में यह सही क्लिक करके इन तत्वों में से एक का निरीक्षण

1110
01:08:32,880 --> 01:08:36,200
और तत्व का निरीक्षण के लिए क्लिक, हम वास्तव में देखने के लिए इस तरह दिखता है कर सकते हैं.

1111
01:08:36,200 --> 01:08:40,290
>> याद रखें यह कुछ है कि हम उस के अंदर पाश के लिए बनाया है

1112
01:08:40,290 --> 01:08:42,649
जब हम HTML की कि स्ट्रिंग का निर्माण किया गया.

1113
01:08:42,649 --> 01:08:47,870
हम यहाँ देख सकते हैं कि इस डेटा प्रतीक MSFT, जो महान है मूल्य है.

1114
01:08:47,870 --> 01:08:49,189
यही कारण है कि हम क्या उम्मीद कर रहे थे.

1115
01:08:49,189 --> 01:08:53,170
यह प्रतीक है और है कि कैसे हम मूल्य है कि हम का उपयोग करने की जरूरत है मिला

1116
01:08:53,170 --> 01:08:56,140
इस पाठ बॉक्स के अंदर.

1117
01:08:56,140 --> 01:08:58,850
यह बोली फार्म के लिए पर्याप्त है कि क्योंकि बोरिंग की तरह है.

1118
01:08:58,850 --> 01:09:02,990
चलो बस हमारे पोर्टफोलियो पृष्ठ के लिए कुछ त्वरित संवर्द्धन बनाने.

1119
01:09:02,990 --> 01:09:08,109
यदि आप थोड़ी देर के लिए CS50 वित्त का उपयोग किया है और आप खरीदने और बेचने के शेयरों की एक बहुत शुरू,

1120
01:09:08,109 --> 01:09:11,300
अंततः इस तालिका बहुत बड़ा पाने के लिए जा रहा है,

1121
01:09:11,300 --> 01:09:13,850
और आप निश्चित रूप से एक स्टॉक टिकर, चाहते करने जा रहे हैं.

1122
01:09:13,850 --> 01:09:20,350
एक बार मेज वास्तव में, वास्तव में बड़ा है, यह उपयोगकर्ता के लिए उपयोगी हो करने के लिए इस पर खोज करने की कोशिश कर सकता है.

1123
01:09:20,350 --> 01:09:23,290
अगर मैं डिज्नी की तरह कुछ टाइपिंग शुरू खोज बॉक्स के अंदर

1124
01:09:23,290 --> 01:09:26,359
और मेरे मिकी माउस स्टॉक के लिए देख रहे हैं, हम देख सकते हैं कि अब तालिका फ़िल्टरिंग है

1125
01:09:26,359 --> 01:09:28,189
मैं क्या सिर्फ अंदर टाइप के आधार पर

1126
01:09:28,189 --> 01:09:31,640
यह कार्यक्षमता सुपर जटिल दिखता है, लेकिन यह वास्तव में, वास्तव में आसान है

1127
01:09:31,640 --> 01:09:33,859
jQuery और जावास्क्रिप्ट के साथ.

1128
01:09:33,859 --> 01:09:39,189
इस portfolio.php फ़ाइल एक जावास्क्रिप्ट portfolio.js बुलाया फ़ाइल में शामिल हैं.

1129
01:09:39,189 --> 01:09:41,130
चलो उस पर एक नज़र रखना.

1130
01:09:41,130 --> 01:09:44,890
तो html, जे एस, पोर्टफोलियो.

1131
01:09:44,890 --> 01:09:49,210
यहाँ है जहाँ हम कर रहे हैं कि मेज पर खोज.

1132
01:09:49,210 --> 01:09:52,750
पहली बात मैं क्या करने की जरूरत है कि पाठ बॉक्स के लिए एक घटना हेन्डलर संलग्न करने के लिए है

1133
01:09:52,750 --> 01:09:55,760
क्योंकि हम जानते हैं कि हम हमारे फ़िल्टरिंग समारोह आग चाहते

1134
01:09:55,760 --> 01:09:59,800
हर बार जब उपयोगकर्ता कुछ प्रेस क्योंकि हम खोज बटन के लिए समय नहीं है.

1135
01:09:59,800 --> 01:10:03,000
पहली बात हम क्या करने की जरूरत है बाहर आंकड़ा क्या उपयोगकर्ता के लिए खोज कर रहा है,

1136
01:10:03,000 --> 01:10:04,780
जैसे हम पहले किया था.

1137
01:10:04,780 --> 01:10:11,320
यह कीवर्ड वर्तमान तत्व उपयोगकर्ता के साथ बातचीत करने के लिए संदर्भित करता है.

1138
01:10:11,320 --> 01:10:14,070
>> क्योंकि उपयोगकर्ता खोज बॉक्स के साथ बातचीत कर रहा है,

1139
01:10:14,070 --> 01:10:17,020
$ इस खोज बॉक्स का प्रतिनिधित्व करता है,

1140
01:10:17,020 --> 01:10:21,820
इतना this.val हमें देता है खोज बॉक्स उपयोगकर्ता वर्तमान में टाइपिंग है के अंदर क्या है.

1141
01:10:22,810 --> 01:10:27,320
तो, अब हम क्या करना चाहते हैं, हम सभी पंक्तियों की पुनरावृति करना चाहता है

1142
01:10:27,320 --> 01:10:29,240
हमारे तालिका के अंदर.

1143
01:10:29,240 --> 01:10:35,630
हमारे तालिका में पंक्तियों के सभी का चयन करें, मुझे लगता है कि तालिका तालिका पोर्टफोलियो की एक आईडी दी,

1144
01:10:35,630 --> 01:10:39,060
और प्रत्येक पंक्ति एक टी.आर. तत्व द्वारा प्रतिनिधित्व किया है,

1145
01:10:39,060 --> 01:10:42,080
तो इस चयनकर्ता मुझे एक बड़ा सरणी लौटने जा रहा है

1146
01:10:42,080 --> 01:10:44,370
मेरी तालिका में सभी पंक्तियों की.

1147
01:10:44,370 --> 01:10:47,010
अब मैं कि सरणी पुनरावृति चाहते हैं.

1148
01:10:47,010 --> 01:10:52,390
मैं एक पाश के लिए आप कर सकते थे, लेकिन jQuery वास्तव में हमें अच्छा बुलाया समारोह प्रदान करता है "प्रत्येक."

1149
01:10:52,390 --> 01:10:55,220
प्रत्येक क्या करता है प्रत्येक एक तर्क लेता है,

1150
01:10:55,220 --> 01:10:57,090
और है कि तर्क एक समारोह है.

1151
01:10:57,090 --> 01:11:02,760
यह करने के लिए क्या हो रहा है यह है कि इस सूची के अंदर हर तत्व समारोह लागू करने जा रहा है.

1152
01:11:02,760 --> 01:11:05,550
इस समारोह में एक तर्क यह है कि ई लेता है,

1153
01:11:05,550 --> 01:11:10,090
और जब इस समारोह में मार डाला है, यह ई के लिए पहली पंक्ति के साथ प्रतिस्थापित किया जा रहा है,

1154
01:11:10,090 --> 01:11:12,070
तो दूसरी पंक्ति, और फिर तीसरी पंक्ति.

1155
01:11:12,070 --> 01:11:15,150
इस तरह से, यह एक पाश के लिए चल रहा है के रूप में एक ही बात है

1156
01:11:15,150 --> 01:11:21,360
और फिर वर्तमान पाश के लिए अपने अंदर सूचकांक पर आधारित तत्व लगाना.

1157
01:11:21,360 --> 01:11:24,750
प्रत्येक चलना, तालिका में इन तत्वों में से प्रत्येक के लिए,

1158
01:11:24,750 --> 01:11:30,560
पंक्ति के अंदर सेल का पाठ - मैं तत्व का पाठ अगर जाँच करना चाहते हैं -

1159
01:11:30,560 --> 01:11:33,130
मैच मैं क्या तलाश कर रहा हूँ.

1160
01:11:33,130 --> 01:11:36,390
आदेशों की यह बड़ी लंबी स्ट्रिंग है कि मैं कैसे कर सकता है.

1161
01:11:36,390 --> 01:11:40,900
सबसे पहले, फिर से, अब यह करने के लिए संदर्भित करता है क्योंकि यह एक नए समारोह के अंदर है -

1162
01:11:40,900 --> 01:11:45,020
अब इस तालिका में वर्तमान पंक्ति है.

1163
01:11:45,020 --> 01:11:47,340
मैं तालिका में वर्तमान पंक्ति में ले जाना चाहता हूँ,

1164
01:11:47,340 --> 01:11:49,950
और मैं अपने बच्चों के सभी प्राप्त करना चाहते हैं.

1165
01:11:49,950 --> 01:11:51,940
याद रखें, डोम एक वृक्ष पदानुक्रमित है,

1166
01:11:51,940 --> 01:11:54,200
जिसका अर्थ है कि तत्वों के बच्चों की संख्या में है.

1167
01:11:54,200 --> 01:12:00,180
>> यह बच्चों को कार्य करने के लिए मुझे वापस करने के सभी तत्वों की एक सरणी वापस जा रहा है

1168
01:12:00,180 --> 01:12:03,240
कि के बच्चों को इस मामले में, तालिका में एक पंक्ति में हैं.

1169
01:12:03,240 --> 01:12:07,150
यह बस यूँ ही पंक्ति के अंदर कोशिकाओं.

1170
01:12:07,150 --> 01:12:09,230
मैं सिर्फ 1 कक्ष पर खोज करना चाहते हैं.

1171
01:12:09,230 --> 01:12:13,090
यह पहला समारोह का कहना है कि मुझे उस सरणी में पहला तत्व दे.

1172
01:12:13,090 --> 01:12:17,070
तो पाठ समारोह का कहना है कि मुझे वास्तव में क्या है कि सेल के अंदर है

1173
01:12:17,070 --> 01:12:19,530
के बाद से मैं उस पाठ पर खोज करने के लिए करना चाहते हैं.

1174
01:12:19,530 --> 01:12:21,040
अंत में, यह लोअरकेस कनवर्टर के लिए इस्तेमाल किया जा सकता है,

1175
01:12:21,040 --> 01:12:23,940
इसलिए हम पाठ मामले असंवेदनशील प्रश्नों कर सकते हैं.

1176
01:12:23,940 --> 01:12:29,990
अंत में, हम देखने के लिए अगर एक तालिका के अंदर है कि स्ट्रिंग स्ट्रिंग के लिए हम खोज कर रहे हैं शामिल करना चाहते हैं.

1177
01:12:29,990 --> 01:12:32,980
जावास्क्रिप्ट में indexOf समारोह कि बस.

1178
01:12:32,980 --> 01:12:37,060
यह हमें बताता है कि क्या है या नहीं इस स्ट्रिंग एक स्ट्रिंग.

1179
01:12:37,060 --> 01:12:40,150
अगर यह सच है कि सेल में मैं क्या खोज रहा हूँ,

1180
01:12:40,150 --> 01:12:42,140
तो मुझे यकीन है कि यह दिखाया गया है बनाना चाहते हैं.

1181
01:12:42,140 --> 01:12:45,330
शो विधि कहते हैं, "तत्व दिखाएँ." होगा

1182
01:12:45,330 --> 01:12:50,350
यदि यह मामला नहीं है, तो इसका मतलब है कि मैं जो कुछ भी शामिल नहीं है के लिए खोज रहा हूँ

1183
01:12:50,350 --> 01:12:53,550
उस पंक्ति के भीतर तो है, और मैं छुपाना चाहते उपयोगकर्ता से है.

1184
01:12:53,550 --> 01:12:59,240
यह अच्छा है कि फिल्टर प्रभाव प्राप्त होता है जहां अब हम संपूर्ण तालिका देखें.

1185
01:12:59,240 --> 01:13:01,480
यदि आप कैसे इस टिकर बनाने के लिए के रूप में अच्छी तरह से करने में रुचि रखते हैं,

1186
01:13:01,480 --> 01:13:04,180
हम स्रोत ऑनलाइन पोस्ट करेंगे. लेकिन यह वास्तव में सरल है.

1187
01:13:04,180 --> 01:13:09,860
JQuery इन एनिमेशन और छेड़खानी सीएसएस संपत्तियों के लिए भयानक तरीके है.

1188
01:13:09,860 --> 01:13:11,020
इसलिए, कि यह मेरे लिए है.

1189
01:13:11,020 --> 01:13:15,560
>> तो क्या आगे झूठ? जैसा कि आप कुछ ही दिनों में देखेंगे, अंतिम परियोजनाओं के प्रस्ताव की वजह से है.

1190
01:13:15,560 --> 01:13:17,730
अंतिम परियोजनाओं प्रस्ताव आप कुछ सवाल पूछना होगा,

1191
01:13:17,730 --> 01:13:19,420
लेकिन उन के बीच तीन मील के पत्थर होगा -

1192
01:13:19,420 --> 01:13:22,840
एक एक "अच्छा" मील का पत्थर है, एक बेहतर मील का पत्थर है, और एक सबसे अच्छा.

1193
01:13:22,840 --> 01:13:25,870
विचार किया जा रहा करने के लिए वास्तव में आप लोगों की मदद अपनी अपेक्षाओं को सेट

1194
01:13:25,870 --> 01:13:29,160
इतना है कि न्यूनतम आप अपने अंतिम परियोजना के उत्पादन के साथ खुश हो जाएगा

1195
01:13:29,160 --> 01:13:32,060
और यह "अच्छा" अब तक के रूप में आप चिंतित हैं होगा.

1196
01:13:32,060 --> 01:13:34,540
लेकिन फिर आप कुछ करने के लिए सिर्फ एक छोटा सा तक पहुँचने के लिए हो रही के हित में बेहतर

1197
01:13:34,540 --> 01:13:37,680
या सबसे अच्छा कुछ है, हम भी के रूप में अच्छी तरह से आप की ओर धक्का की तरह हूँ.

1198
01:13:37,680 --> 01:13:40,660
CS50 हैक-a-thon, इस बीच, कुछ ही हफ्तों में है.

1199
01:13:40,660 --> 01:13:44,340
आमतौर पर, हम एक लॉटरी के आधार के आधार पर ब्याज की वजह से ऐसा करते हैं,

1200
01:13:44,340 --> 01:13:47,680
लेकिन हालात हैं हम हार्वर्ड स्क्वायर से शटल बसों में हम में से कुछ सौ ले जाऊँगा

1201
01:13:47,680 --> 01:13:51,540
केंडल स्क्वायर जहां माइक्रोसॉफ्ट एक सुंदर सुविधा aptly "बेवकूफ" कहा जाता है -

1202
01:13:51,540 --> 01:13:53,830
न्यू इंग्लैंड अनुसंधान और विकास केंद्र.

1203
01:13:53,830 --> 01:13:56,380
हम वहाँ पाने के 8 बजे के आसपास हम कुछ भोजन करेंगे.

1204
01:13:56,380 --> 01:13:58,160
01:00 के आसपास हम कुछ और खाना होगा.

1205
01:13:58,160 --> 01:14:02,150
लगभग 5 अगर आप अभी भी जाग रहे हैं हम पर सिर IHOP या आप परिसर के लिए वापस ले लेंगे.

1206
01:14:02,150 --> 01:14:04,380
वहाँ उद्देश्य अंतिम परियोजनाओं में गोता

1207
01:14:04,380 --> 01:14:06,190
के साथ - साथ सहपाठियों और कर्मचारियों की.

1208
01:14:06,190 --> 01:14:08,280
फिर कुछ दिनों बाद CS50 साफ है,

1209
01:14:08,280 --> 01:14:10,990
जो वास्तव में करने के लिए एक अवसर के लिए होती है के लिए तुम लोगों को अपने काम के प्रदर्शन करने के लिए

1210
01:14:10,990 --> 01:14:12,700
सेमेस्टर के लिए और उपलब्धियों

1211
01:14:12,700 --> 01:14:15,610
जबकि एक दूसरे के साथ कंधे रगड़ और हर कोई क्या किया की भावना रही है.

1212
01:14:15,610 --> 01:14:17,850
ने कहा, टॉमी और यूसुफ के लिए बहुत धन्यवाद,

1213
01:14:17,850 --> 01:14:19,960
और हम आप सोमवार को देखेंगे.

1214
01:14:19,960 --> 01:14:24,070
 [वाहवाही]