1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [تابع أسبوع 9]

2
00:00:02,700 --> 00:00:05,160
[ديفيد J. مالان - جامعة هارفارد]

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
أو الأجهزة التي يغضب لك، سواء داخل الحرم الجامعي أو إيقاف تشغيله -

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
في طريقك الى الباب اليوم عليك أن تكون قادرا على التقاط أي دليل غير رسمية لCS في جامعة هارفارد.

38
00:01:54,860 --> 00:01:57,290
سوف نضعه على صناديق القمامة خارج في ارتفاع الخصر

39
00:01:57,290 --> 00:01:59,750
بحيث إذا كنت ترغب في الاستيلاء على هذه وتعلم أكثر قليلا حول CS،

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
دون مزيد من اللغط، وأنا أعطيك التدريس زميل جوزيف أونج.

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
الذي كان قد ذهب إلى أحد الفنادق واستخدام الحنفيات.

49
00:02:31,640 --> 00:02:35,630
يمكن لأحد أن يقول لي ما المقابض 2 على اليسار والقيام أليس كذلك؟

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
أحيانا نرى مثل مطوري البرمجيات ليست سوى التصيد لنا.

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
أنه يحتوي على شبح الهبوط في الخلفية، فقد أنصاف الأقطار الحدود مستمرة.

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
كما انها ليست حشو التطبيق الخاص بك مع طن من وظيفة لا لزوم لها.

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
وينبغي لنا أن نفعل ذلك أو بطريقة ما، على سبيل المثال، مع بحث Google الفوري أو الإكمال التلقائي

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
ماذا يعني efficiency؟

144
00:08:03,750 --> 00:08:08,050
Efficiency يعني مدى سرعة لا المستخدم الكامل الخاص بي في واجهة مهمة معينة بلدي.

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
أما بالنسبة البداهة، وهذا هو، على سبيل المثال، إذا قام مستخدم بالبحث عن واجهة بلدي،

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
أعتقد أن هناك قارئات الشاشة JAWS دعا.

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
يمكن لأحد أن يقول لي عن تجاربهم مع كريغزلست

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
وقد استخدمت كم من الناس في الواقع كريغزلست؟ طن واحد منكم.

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
[مالان] ولكن لا يشكل كما رأينا منهم حتى الآن أن تقدم جسديا

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
ما نسميه طلب أجاكس والحصول على البيانات مرة أخرى وتصفية النتائج على الفور.

202
00:11:38,840 --> 00:11:41,340
هناك طن من الأشياء التي هي خطأ في هذه الواجهة.

203
00:11:41,340 --> 00:11:43,530
[مالان] يمكنك البحث عن كامبردج؟

204
00:11:43,530 --> 00:11:47,030
هناك شيء شاذ قليلا هنا حيث كنت تهتم كامبريدج

205
00:11:47,030 --> 00:11:54,790
وحتى الآن كنت الحصول على يستفورد، سبرينج هيل، نيوتن الغربية وما شابه ذلك.

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
[طالب] على سبيل المثال، شيء للمستخدمين أول مرة الذين لا يعرفون حتى ما هو كريغزلست

211
00:12:14,630 --> 00:12:17,320
أو كنت لا تعرف ما كنت من المفترض القيام به.

212
00:12:17,320 --> 00:12:20,150
الحق. موضحا ذلك ما كريغزلست هو في هذه الصفحة هو المهم.

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
يمكن تقسيمها إلى I أكثر الفئات التي يمكن أن تساعد في تحديد البيانات بشكل أسرع

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
إذا أبدأ بكتابة BO، فقط تظهر لي كل النتائج التي داخل BO منهم.

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
>> هذه كلها أنواع من الفواكه منخفضة حقا أن الشخص الذي شنقا على تنفيذ كريغزلست

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
عندما خرج الفيسبوك، والصور وخاصة الفيسبوك،

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
ولكن لا أحد يعرف ما جعل الفيسبوك صور تنفجر في الوقت الذي تم الإفراج عنه؟

244
00:14:11,710 --> 00:14:15,080
نعم. >> [طالب] الكلمات. الكلمات >>. بالضبط.

245
00:14:15,080 --> 00:14:21,300
لدينا أكثر من هنا ميلو، الذي هو التميمة التي لدينا كلب مع باندانا CS50.

246
00:14:21,300 --> 00:14:24,810
يمكنك أن ترى أن لدينا هذه الميزة العلامات في الوسط.

247
00:14:24,810 --> 00:14:28,240
وجعل ما صور مثيرة للاهتمام حتى الفيسبوك من وجهة نظر الاستخدام

248
00:14:28,240 --> 00:14:34,130
هو أنه يسمح الناس فعلا من خلال هذا إشراك أصدقائهم في صورهم.

249
00:14:34,130 --> 00:14:37,680
لالفيسبوك، منذ موقعه على الانترنت هو وخاصة الاجتماعية،

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
ذلك أن صور الفيسبوك.

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
هيا. أنا أعرف كل واحد منكم استخدام الفيسبوك.

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
وترى نتائج أخبارهم ظهرت في تغذية الأخبار الخاصة بك

270
00:15:43,860 --> 00:15:45,870
وكنت لا تهتم حقا عن ذلك.

271
00:15:45,870 --> 00:15:48,700
جعلت الفيسبوك الواقع محاولة لجعل هذا أفضل،

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 - >> [مالان] كنت هناك. كان >> وهناك. [ضحك]

280
00:16:25,030 --> 00:16:29,210
قد تتذكر امض متحركة خلفيات، سباركلي الأشياء،

281
00:16:29,210 --> 00:16:31,570
توقعات المدن العالمية فرز نمط من الأشياء.

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
موقع الفن ييل كانت لدينا GIF المتحركة وخلفيتهم

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
[مالان] انها أفضل بكثير الآن. انها >> أفضل بكثير الآن، كما ترون. >> [مالان] أوه نعم.

288
00:16:48,940 --> 00:16:56,020
مجرد كبيرة، تماما - نعم. حسنا.

289
00:16:56,020 --> 00:17:00,560
>> جزء منها هو جعل صفحتك أيضا ربما الحد الأدنى للغاية ومفهومة جدا

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
كلمة كبيرة أن يبدأ P-R. >> [طالب] الخصوصية. >> الخصوصية، أليس كذلك؟

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
[مالان] مثلي الآن.

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
[مالان] الجزء حرج وكنت في الواقع تجاهل له،

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
[اونج] لا يمكنك إيقاف هذه الميزة، وهذا هو عيب كبير على سهولة الاستخدام من جانب الفيسبوك.

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
في أعماق الفيسبوك لأن لا أستطيع معرفة كيفية تعطيل هذه الوظيفة على الإطلاق.

337
00:19:58,050 --> 00:20:00,400
[مالان] لكن في بعض الأحيان هذه القرارات ليست واضحة

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
في المشاريع النهائية، بشكل ملموس جدا، ما ينتج أفضل النتائج هنا؟

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
هذا يبدو وكأنه عملية واضحة جدا، ولكن هذه العملية باستمرار من بالتكرار

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
كما نوع من المثال الأخير للمنتج، دعونا ننظر في KAYAK.

389
00:23:11,390 --> 00:23:14,970
كان KAYAK عندما خرج للغاية، بشعبية كبيرة.

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
اسمحوا لي سحب ما يصل KAYAK.

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
[طالب] التحديثات التلقائية. >> [اونج] التحديثات التلقائية.

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
والشيء الجميل في هذا هو شيء من هذا القبيل فإنه يستخدم جدا شيء (غير مفهوم) في الوسط.

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
هذا النوع من ردود الفعل المباشر هو ما جعل KAYAK بشعبية كبيرة

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
[مالان] والإشارة يوسف في وقت سابق عن عدم معرفة المستخدمين بالضرورة ما يريدون،

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
قابليتها للاستخدام الاستدلال عشر.

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
عليك أن تكون فعلا قادرة على، وتقوم بتصميم موقعك، والحفاظ على هذه الاستدلال في الاعتبار

455
00:27:18,900 --> 00:27:21,330
وهذه القواعد من الإبهام.

456
00:27:21,330 --> 00:27:26,610
لمشاريعك، ما أقترح عليك القيام به من أجل تصميم التطبيق بشكل أفضل

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
ومجرد منحهم التطبيق والسماح لهم استخدامها.

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
هم باستخدام آليات UI بشكل خاص على الشاشة

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
وكيف يمكن أن تكون قادرة على تنفيذ شيء من هذا القبيل الإكمال التلقائي

484
00:28:53,220 --> 00:28:56,610
بطريقة بسيطة إلى حد ما.

485
00:28:57,440 --> 00:28:59,550
[مالان] كما تومي يضع هنا، سؤال الحين.

486
00:28:59,550 --> 00:29:03,780
وقال جوزيف وعندما 1990s الموقع الاسلوب، - وهناك الكثير من المواقع في أقرب وقت

487
00:29:03,780 --> 00:29:07,640
حيث كان من تطبيقات إذا أردت تحديد وقت البدء ووقت الانتهاء،

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، PM،

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
>> ذلك بالتأكيد دون المستوى الأمثل وحتى الآن حتى الآن رأيناه لا قدرات التعبيرية

495
00:29:27,920 --> 00:29:30,330
في أي من لغات بحثنا في شيء أن تفعل أكثر جنسية

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
هناك أيضا لم تكن هناك الحاجيات التي فعلت بعض الأمور.

499
00:29:39,080 --> 00:29:42,700
كنت حقا للتو مثل هذه الأسس والشروط الحلقات وما شابه ذلك.

500
00:29:42,700 --> 00:29:46,910
ذلك النوع من التفكير المجرد فقط للغاية الآن، بغض النظر عن التفاصيل من 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
في عالم الانترنت، ولذا فإن هناك أشياء مثل عند _ النقر و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
مع مواقع مثل الفيسبوك وجوجل، حتى لو كان لديك أي فكرة

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
بواسطة حدسي جدا سحب وإسقاط.

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
بمجرد العودة إلى C، إذا كان لديك لكتابة C لفئة أخرى أو بعض اللغات الأخرى،

528
00:31:16,330 --> 00:31:19,780
انها مجرد محبطة حقا في جميع التفاصيل ذات المستوى المنخفض وعليك أن يتورطوا فيها.

529
00:31:19,780 --> 00:31:23,050
إذا كان الأمر كذلك كنت تشعر بالحزن من أي وقت مضى حول كيفية مزعج C هو الكتابة،

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
أن يحدث أن تكون ممثلة في DOM.

545
00:32:13,890 --> 00:32:19,340
>> وDOM هو فقط تذكر هذه الشجرة الكبيرة حيث ترتبط عناصر في هذا التسلسل الهرمي كبيرة.

546
00:32:19,340 --> 00:32:21,810
عندما عملنا مع قواعد البيانات في pset 7،

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
وبالمثل، عندما يكون لدينا نحن DOM بحاجة إلى طريقة الاستعلام من ذلك.

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
هذا هو الذهاب لتحديد عنصر في الصفحة التي تحتوي على ID من تقدم.

558
00:32:59,510 --> 00:33:03,470
وعلامة التجزئة بحيث يقول هذا محدد هو الذهاب إلى العمل مع معرفات.

559
00:33:03,470 --> 00:33:07,630
ماذا عن ثانية واحدة، وهذا. محورها، ما أن اختار؟

560
00:33:11,360 --> 00:33:15,180
نعم. >> [طالب] فئة. بالضبط >>. هذا يجري الآن لتحديد حسب الطبقة.

561
00:33:15,180 --> 00:33:18,840
الفرق بين الهوية والطبقة هنا هو عادة ID يجب أن تكون فريدة من نوعها

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 عنصر مع أن بعض ID، لذلك في هذه الحالة من الحلقة.

565
00:33:27,740 --> 00:33:31,330
مع الطبقات، من ناحية أخرى، يمكن أن لدينا أكثر من 1 عنصر في نفس الصفحة

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
بدلا من مجرد شيء 1.

569
00:33:38,450 --> 00:33:40,310
>> وأخيرا، وهذا هو آخر هنا قليلا أكثر تعقيدا،

570
00:33:40,310 --> 00:33:43,890
ولكن ما هو هذا يحدث لتحديد من DOM؟

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
لأنه شيء من هذا القبيل على زر إرسال تكون مدخلا

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 X في كل وقت.

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
أو أي شيء آخر واسترداد البيانات التي يبصق هذا الملف.

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
لقد فعلت هذا لمجرد انه سيكون لجعل هذا أسهل قليلا قليلا لتحديد من DOM

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
بعض الملفات الأخرى CSS فقط بالنسبة لي أن الإجابة على هذا السؤال بسيطة جدا

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
جميع ملفات JavaScript بلدي سوف يكون موجودا في 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
هذه علامة الدولار يعني هنا أنا باستخدام مكتبة تسمى مسج.

649
00:38:34,310 --> 00:38:38,570
هذه المكتبة مسج يتيح لنا استخدام هذه محددات أن ننظر فقط في.

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
الحدث الذي نحن ذاهبون للاستماع لهو الحدث يقدم.

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
عن طريق تركيب في هذا، لا أستطيع تجاوز السلوك الافتراضي الآن من النموذج.

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
هذا هو الثالث الذي بدا محدد في السابق.

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
ونحن في طريقنا إلى أن استدعاء دالة مختلفة هذا ما توفرها لنا مسج.

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
وهذا يعني انه سيكون لتقديم طلب POST،

693
00:41:29,270 --> 00:41:32,630
لذلك لن تضع أي شيء في URL، بدلا من طلب GET،

694
00:41:32,630 --> 00:41:36,860
وفقط التي يمكن الوصول إليها إذا كنا أطلقت للتو صفحة مع متصفح الويب، على سبيل المثال.

695
00:41:36,860 --> 00:41:41,260
الآن قلنا أريد أن تقديم طلب POST HTTP

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
هذه المفاتيح في صفائف النقابي ستكون نفس الشيء

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
لا يمكن إلا أن يكون لديك رجات أو صفائف باعتبارها قيمة داخل صفيف النقابي،

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
A القولون يقول هنا يأتي القيمة،

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
سأقوم بتحديد العنصر مع السعر ID.

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
وأن معالج الأحداث بإرجاع false بدلا من العودة الحقيقية،

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
ظهرت فقط في الصفحة، ولكن لم يتغير URL على الإطلاق.

766
00:46:00,410 --> 00:46:04,570
في الواقع، وهنا طلب HTTP التي قطعناها على أنفسنا فقط.

767
00:46:04,570 --> 00:46:09,980
قدمنا ​​طلب POST إلى 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 الفوري.

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
مرة واحدة جوجل الفوري خرج، كان الناس مثل، "قف، هذا هو مدهش سوبر".

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
جميع فورية يوتيوب لا يتم البحث بشكل فعال يوتيوب على الفور.

786
00:47:13,170 --> 00:47:17,020
وذلك بدلا من الحاجة إلى الذهاب إلى YouTube.com وضرب البحث،

787
00:47:17,020 --> 00:47:21,650
عندما أبدأ بكتابة إلى شيء مثل يوتيوب الفوري CS50،

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
للقيام بذلك في دعونا أولا تغيير الحدث من تقدم إلى 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
في الواقع قصة ممتعة حول الفوري يوتيوب

813
00:48:55,860 --> 00:48:59,420
هو أن الطالب فقط نوع من كتب عليه كمشروع 1-الليل،

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
ونحن نعرف فقط انه شيء AA، بدلا من القول فقط بالنسبة لي،

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
إذا كنت تأتي إلى هنا إلى العلامة جافا سكريبت وانتقل لأسفل إلى 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
كتبت في A وهنا لائحة لبعض الدول التي تبدأ ب A.

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
أريد أن أقول، "هنا هو الإدخال الذي أريد أن الإكمال التلقائي"

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
I فتح 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، لذلك أنا ذاهب لتحميل هذا الملف في جافا سكريبت منفصل،

858
00:51:55,110 --> 00:51:57,910
واحد لديه أن الإكمال التلقائي التمهيد.

859
00:51:57,910 --> 00:52:04,430
الآن عندما تقفز مرة أخرى إلى المتصفح، إعادة تحميل الصفحة، وأبدأ بكتابة AA،

860
00:52:04,430 --> 00:52:06,880
هناك الإكمال التلقائي بلدي. وكان حقا بهذه البساطة.

861
00:52:06,880 --> 00:52:11,400
كان I 1 سطر من التعليمات البرمجية التي تقول فقط، "وهنا أريد أن الأشياء الإكمال التلقائي"

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
إذا كان نوع I في الشركات A، والتي تظهر هنا

876
00:53:08,190 --> 00:53:11,220
قد لا تكون الشركات الأكثر شعبية التي تبدأ ب A.

877
00:53:11,220 --> 00:53:17,130
>> قبل أن نصل إلى أبل، قد يستغرق بعض الأحرف أكثر للعثور على ما كنت أبحث عنه.

878
00:53:17,130 --> 00:53:20,420
هذا الإكمال التلقائي لايوجد بهذا المعنى ذات الصلة.

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
لأن رأينا أن هذه الصفحة لم يتم إعادة في كل شيء،

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
الآن إذا كنت اكتب في غو، يمكننا أن نرى أن أنا فقط حصلت على طلب HTTP جديدة.

896
00:54:34,020 --> 00:54:37,490
وربما هذا هو حيث أن البيانات تأتي من.

897
00:54:37,490 --> 00:54:41,990
المؤكد، إذا كنت تنظر في هذه URL، الذي هو جزء اسمه الغريب،

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
انه سيكون أساسا لإجراء الاستعلام إلى URL ياهو، والحصول على بعض البيانات مرة أخرى،

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
وأنا لم يكن لديك لتحميل هذا الملف جافا سكريبت واسعة النطاق.

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، JS. نحن الآن في 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
لقد قلنا أن A في 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
"وفيما يلي قائمة من الأشياء أريدك أن الإكمال التلقائي".

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
من قبل، كان قيمة هذه الخاصية فقط مصدر هذه المجموعة الكبيرة من الأمور التي الإكمال التلقائي.

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
ما هي أفضل الأشياء لالإكمال التلقائي هي.

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 هي التكنولوجيا التي تستفيد من الطريقة التي إنشاء صفائف النقابي في جافا سكريبت.

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
سكريبت مسج وظائف لديها بالفعل لتحويل سلسلة

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
وهكذا مسج، أود منك أن تفعل ذلك بالنسبة لي.

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
لأننا قد قال مسج الذي يأتي هنا بعض JSON،

972
00:59:19,860 --> 00:59:22,950
مسج ستكون ذكية بما فيه الكفاية ليقول "أنت تريد 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
هذه هي الطريقة التي يمكنني ببساطة ملء هذا البرنامج المساعد الإكمال التلقائي

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
أو 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

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
لقد إلحاق نحن مجرد شيء إلى الآن DOM.

1030
01:03:15,680 --> 01:03:20,360
لقد أضفنا بعض العناصر الجديدة إلى DOM أن نتمكن من عرض الآن على الصفحة.

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، لم يعد لدينا أن التمهيد الإكمال التلقائي،

1034
01:03:34,480 --> 01:03:38,470
ولكن لدينا الآن هذه القائمة التي قطعناها على أنفسنا بأنفسنا.

1035
01:03:38,470 --> 01:03:43,230
هذا هو أقبح قليلا من Typeahead التمهيد، على سبيل المثال،

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
رأينا أن إحدى القيم الإكمال التلقائي عندما كنا autocompleted، كان 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
لا يمكننا تمرير شيء مثل البحث شركة مايكروسوفت.

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
اسمه الذي أدليت به لأول مرة، وهذا ما يرام لأنني استهل مع هذه البيانات.

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
الإكمال التلقائي داخل لدينا، ونحن لا تزال تذكر الرمز

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
>> ذلك دون أية وسائط الدالة Val هذا يعود إلى ما كنت بالفعل في مربع النص،

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
هذا الشيء هنا هو جديد، وهذا دولار (هذا).

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
الذي نعرفه يجب أن تحتوي على الرمز هذا ما يرتبط مع الشركة I النقر فقط.

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
يمكننا أن نرى أننا في الواقع ملء مربع النص وليس مع اسم الشركة

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، JS، محفظة.

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
ويتم تمثيل كل صف من عنصر TR،

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
يمكن لك وأنا لحلقة، ولكن في الواقع يقدم لنا مسج وظيفة لطيفة دعا "كل".

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
تذكر، DOM هي شجرة هرمية،

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
أريد فقط أن البحث عبر الخلية الأولى.

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
مسج لديه أساليب رهيبة لهذه الرسوم المتحركة والتلاعب خصائص CSS.

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-ثون، وفي الوقت نفسه، في غضون بضعة أسابيع.

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
وصولا الى ساحة كيندال حيث تمتلك مايكروسوفت منشأة جميلة باقتدار يسمى "NERD" -

1202
01:13:51,540 --> 01:13:53,830
للبحث نيو انغلاند ومركز التنمية.

1203
01:13:53,830 --> 01:13:56,380
سوف نصل الى هناك حوالي 20:00 ونحن سيكون لديك بعض الطعام.

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
 [تصفيق]