1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [ندوة] [أطر جافا سكريبت: لماذا وكيف]

2
00:00:02,000 --> 00:00:04,000
[كيفن شميد] [جامعة هارفارد]

3
00:00:04,000 --> 00:00:06,960
[هذا CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> مرحبا، الجميع. مرحبا بكم في أطر الندوة سكريبت.

5
00:00:10,630 --> 00:00:14,910
اسمي كيفن، واليوم انا ذاهب الى أن نتحدث عن الأطر جافا سكريبت،

6
00:00:14,910 --> 00:00:20,400
والهدف من هذه الندوة ليست لتحصل على، ويقول، إتقان إطار معين في حد ذاته

7
00:00:20,400 --> 00:00:23,810
ولكن لتعطيك مقدمة واسعة لزوجين من الأطر

8
00:00:23,810 --> 00:00:27,150
وتبين لماذا كنا نريد من أي وقت مضى لاستخدام الإطار.

9
00:00:27,150 --> 00:00:31,060
>> قبل أن أفعل ذلك، أنا سوف توفر الخلفية قليلا في جافا سكريبت،

10
00:00:31,060 --> 00:00:33,750
ومن ثم سنقوم أعتبر من هناك.

11
00:00:33,750 --> 00:00:36,270
ونحن في طريقنا للبدء بتنفيذ قائمة المهام.

12
00:00:36,270 --> 00:00:39,330
وإليك قائمة المهام لهذا اليوم.

13
00:00:39,330 --> 00:00:41,990
انها نوع من مضحك. لدينا لتنفيذ قائمة المهام في جافا سكريبت.

14
00:00:41,990 --> 00:00:45,110
هذا هو ما يحدث لتبدو وكأنها، أن ذلك ليس هدفنا الأول.

15
00:00:45,110 --> 00:00:47,160
نحن لن تستخدم إطارا للقيام بذلك.

16
00:00:47,160 --> 00:00:51,930
ونحن في طريقنا إلى شفرة جافا سكريبت والحصول على قائمة المهام للعمل.

17
00:00:51,930 --> 00:00:54,370
ثم ونحن في طريقنا لتحسين تصميم دون استخدام الإطار.

18
00:00:54,370 --> 00:00:57,190
نحن ذاهبون لمناقشة مختلف الأمور يمكننا القيام به فقط مع جافا سكريبت وحده

19
00:00:57,190 --> 00:01:00,650
لجعل لدينا تأليف لائحة قليلا مصممة أكثر جيدا.

20
00:01:00,650 --> 00:01:02,490
ثم نحن ذاهبون الى رمي في بعض مسج،

21
00:01:02,490 --> 00:01:05,030
ومن ثم نحن في طريقنا للبحث في نفس تأليف لائحة،

22
00:01:05,030 --> 00:01:07,170
نفذت فقط في أطر مختلفة، وسنناقش

23
00:01:07,170 --> 00:01:09,280
 إيجابيات وسلبيات على طول الطريق.

24
00:01:09,280 --> 00:01:12,040
>> دعونا نبدأ تنفيذ هذا تأليف لائحة.

25
00:01:12,040 --> 00:01:14,270
دعونا نقول اننا تعطى هذه HTML.

26
00:01:14,270 --> 00:01:16,620
انا ذاهب الى جعل هذا أصغر قليلا.

27
00:01:16,620 --> 00:01:19,300
كما ترون، ولدي القليل من الرأس الذي يقول تودو

28
00:01:19,300 --> 00:01:21,740
ومربع قليلا حيث يمكنني أن أدخل وصفا لTODO

29
00:01:21,740 --> 00:01:26,990
ثم زر عنصر جديد، لذلك دعونا في محاولة لإدخال TODO جديدة إلى هذه القائمة.

30
00:01:26,990 --> 00:01:31,000
إعطاء الأطر ندوة جافا سكريبت،

31
00:01:31,000 --> 00:01:33,090
وأنا ليصل بند جديد.

32
00:01:33,090 --> 00:01:35,730
يمكنني الحصول على هذا التنبيه جافا سكريبت تقول تنفيذ لي.

33
00:01:35,730 --> 00:01:37,560
لقد وصلنا إلى تنفيذه.

34
00:01:37,560 --> 00:01:41,490
دعونا تحقق من رمز لهذا، فإن كلا من HTML وجافا سكريبت.

35
00:01:41,490 --> 00:01:43,260
وهنا HTML لدينا.

36
00:01:43,260 --> 00:01:45,500
كما ترون هنا، وهنا لدينا رأس تودوس قليلا.

37
00:01:45,500 --> 00:01:47,620
وكان أن هذا الشيء جريئة في القمة،

38
00:01:47,620 --> 00:01:50,690
ومن ثم لدينا مربع الإدخال مع العنصر النائب،

39
00:01:50,690 --> 00:01:59,460
وبعد ذلك هناك سمة معينة من هذا الزر الذي يستدعي هذه الدالة addTodo.

40
00:01:59,460 --> 00:02:05,460
هل يريد أي شخص أن يخمن ما الذي على نقرة ومما يدل؟

41
00:02:05,460 --> 00:02:07,390
[طالب استجابة غير مسموع]

42
00:02:07,390 --> 00:02:09,289
جيدة، وعند النقر هو نوع من مثل هذا الحدث،

43
00:02:09,289 --> 00:02:12,120
مثل النقر على الفأرة هو مجرد حدث، وما نقوم به

44
00:02:12,120 --> 00:02:16,890
ونحن ربط حدث من النقر على هذا الزر لتنفيذ هذه المهمة.

45
00:02:16,890 --> 00:02:21,700
AddTodo هو معالج الحدث هذا لالنقر على هذا الزر.

46
00:02:21,700 --> 00:02:25,010
>> كما ترون، عندما كنت اضغط على زر عنصر جديد

47
00:02:25,010 --> 00:02:29,940
أطلقت يحصل الحدث Click على، ويحصل على استدعاء هذه الدالة.

48
00:02:29,940 --> 00:02:33,170
دعونا ننظر في وظيفة.

49
00:02:33,170 --> 00:02:36,260
كما ترون، وهنا شفرة جافا سكريبت بلدي حتى الآن.

50
00:02:36,260 --> 00:02:41,280
ما قلته في الأعلى هو بنية البيانات العالمية لقائمتي تأليف ل.

51
00:02:41,280 --> 00:02:44,060
يبدو صفيف. انها مجرد مجموعة فارغة.

52
00:02:44,060 --> 00:02:47,100
ثم لدي وظيفة addTodo التي رأيناها في وقت سابق،

53
00:02:47,100 --> 00:02:50,740
والخط فقط من التعليمات البرمجية في وجود هذا التنبيه.

54
00:02:50,740 --> 00:02:55,730
إنه ينبه تنفيذ لي، ثم لقد 2 المهام في متناول اليد.

55
00:02:55,730 --> 00:02:58,790
لا بد لي من إضافة TODO إلى أن هيكل البيانات العالمية،

56
00:02:58,790 --> 00:03:01,860
ثم أريد أن استخلاص قائمة المهام.

57
00:03:01,860 --> 00:03:06,360
لا شيء يتوهم جدا فقط حتى الآن، ولكن سكريبت قد تكون غير مألوفة مع،

58
00:03:06,360 --> 00:03:12,370
لذلك انا ذاهب للذهاب بطيئة واستعراض أساسيات الجافا سكربت في ذلك الطريق.

59
00:03:12,370 --> 00:03:15,490
>> دعونا نعطي هذه رصاصة واحدة.

60
00:03:15,490 --> 00:03:21,130
دعونا نقول للمستخدم يدخل شيء في هذا المربع.

61
00:03:21,130 --> 00:03:23,360
أنا فقط كتبت شيئا هنا، النص.

62
00:03:23,360 --> 00:03:27,620
كيف يمكنني فرز Access الذي نص من خلال جافا سكريبت؟

63
00:03:27,620 --> 00:03:32,500
نتذكر أن جافا سكريبت، واحدة من ميزاته الأساسية هي أنها تعطي لنا

64
00:03:32,500 --> 00:03:34,670
هذا بالوصول المبرمج إلى DOM.

65
00:03:34,670 --> 00:03:40,670
لأنها تتيح لنا الوصول إلى عناصر وممتلكاتهم من هذه HTML الفعلية.

66
00:03:40,670 --> 00:03:43,430
الطريقة التي تفعل ذلك مع العارية العظام سكريبت

67
00:03:43,430 --> 00:03:51,360
هو أننا يمكن استخدامها في الواقع وظيفة في جافا سكريبت دعا getElementByID.

68
00:03:51,360 --> 00:03:55,140
أريد أن تخزين النص وهذا ما كتبته هناك في بعض متغير،

69
00:03:55,140 --> 00:03:58,350
لذلك أنا ذاهب الى القول متغير جديد يسمى new_todo،

70
00:03:58,350 --> 00:04:01,980
وانا ذاهب للحصول على هذا العنصر.

71
00:04:01,980 --> 00:04:06,330
هذه هي وظيفة،. getElementByID.

72
00:04:06,330 --> 00:04:11,580
والآن أنا الحصول على عنصر بواسطة معرف، لذلك أنا في حاجة إلى ID من أن مربع النص،

73
00:04:11,580 --> 00:04:15,860
حتى لقد أتيحت لها new_todo_description ID.

74
00:04:15,860 --> 00:04:18,399
هذه هي الطريقة التي انا ذاهب الى الحصول على عنصر.

75
00:04:18,399 --> 00:04:23,880
وهذا حجتي لهذه المهمة، لتحديد أي رقم للحصول على.

76
00:04:23,880 --> 00:04:28,110
وذلك أن عنصر في HTML، ولها خصائص.

77
00:04:28,110 --> 00:04:30,650
كنت قد رأيت هذه. انهم الصفات.

78
00:04:30,650 --> 00:04:37,090
يسمى السمة للعنصر النص الذي يخزن إدخال المستخدم قيمة.

79
00:04:37,090 --> 00:04:40,860
انني أنقذت قيمة مربع النص الآن في هذا المتغير يسمى new_todo.

80
00:04:40,860 --> 00:04:45,040
الآن لدي الوصول البرمجي إلى هذا المتغير، والذي هو نوع من باردة

81
00:04:45,040 --> 00:04:49,200
لأنه الآن ما يمكنني القيام به هو أنني يمكن إضافته إلى قائمة المهام.

82
00:04:49,200 --> 00:04:52,870
>> الطريقة التي ستفعل هذا في جافا سكريبت، و لا تقلق إذا كنت غير مألوف مع هذا،

83
00:04:52,870 --> 00:04:57,010
ولكن مجرد الذهاب من خلال ذلك هو todos.push

84
00:04:57,010 --> 00:05:00,130
لأن هذا هو اسم بلدي هيكل البيانات العالمية هنا،

85
00:05:00,130 --> 00:05:04,450
وانا ذاهب لدفع new_todo.

86
00:05:04,450 --> 00:05:09,120
وهذا شيء عظيم لأنه الآن لقد إضافته إلى تشغيل الجافا بلدي

87
00:05:09,120 --> 00:05:11,280
تمثيل تلك القائمة إلى القيام به.

88
00:05:11,280 --> 00:05:15,170
ولكن الآن كيف يمكنني الحصول على إعادته إلى HTML؟

89
00:05:15,170 --> 00:05:18,560
لا بد لي من ايجاد وسيلة لفرز من يدفع به إلى الوراء.

90
00:05:18,560 --> 00:05:21,830
وبعبارة أخرى، أنا نوع من يجب أن يوجه هذا.

91
00:05:21,830 --> 00:05:26,060
ما نحن بصدد القيام به هو أننا ذاهبون لرسم لائحة تأليف ل.

92
00:05:26,060 --> 00:05:29,270
ولست بحاجة لتحديث HTML أخرى على تلك الصفحة،

93
00:05:29,270 --> 00:05:32,040
وكما ترون، لقد تركت هذه الحاوية قليلا هنا،

94
00:05:32,040 --> 00:05:36,840
هذا المفرق من الصفحة التي ID هو TODOS،

95
00:05:36,840 --> 00:05:40,870
وانا ذاهب الى وضع قائمة إلى القيام به هناك.

96
00:05:40,870 --> 00:05:47,240
أولا أنا ذاهب لمسحها خارج لأنه، يقول، هناك قائمة إلى قيام القديمة هناك.

97
00:05:47,240 --> 00:05:49,560
انني اتلقى هذا العنصر عن الهوية مرة أخرى،

98
00:05:49,560 --> 00:05:54,530
وأنا الوصول إلى HTML الداخلية لهذا العنصر،

99
00:05:54,530 --> 00:05:58,010
وانا ذاهب لمسح ذلك.

100
00:05:58,010 --> 00:06:05,510
إذا تركنا هذا الكود كما هو، لكنا نرى شيئا فارغا هناك،

101
00:06:05,510 --> 00:06:10,410
والآن أريد أن أبدأ جعل بلدي جديد قائمة المهام.

102
00:06:10,410 --> 00:06:12,870
انا اساسا ذاهب للقضاء على قائمتي تأليف ل.

103
00:06:12,870 --> 00:06:18,180
>> الآن داخل HTML الداخلية من أن TODOS DIV غير واضحة تماما،

104
00:06:18,180 --> 00:06:20,060
والآن أنا بحاجة للبدء في إضافة قائمتي.

105
00:06:20,060 --> 00:06:23,890
أول شيء أريد أن أضيف إلى الوراء لائحة علامة غير مرتبة،

106
00:06:23,890 --> 00:06:33,890
الذي يدل أساسا على أن هذا هو بداية قائمة غير مرتبة.

107
00:06:33,890 --> 00:06:39,770
الآن لكل عنصر في بلدي TODOS مجموعة أريد أن طباعته داخل تلك HTML.

108
00:06:39,770 --> 00:06:43,710
أريد أن إلحاقها إلى الجزء السفلي من هذه القائمة.

109
00:06:43,710 --> 00:06:49,040
مثلما هو الحال في C، يمكنني استخدام لحلقة، وأنا ذاهب لبدء في بداية قائمتي

110
00:06:49,040 --> 00:06:54,140
في العنصر 0، وانا ذاهب للذهاب كل وسيلة لطول القائمة.

111
00:06:54,140 --> 00:07:01,100
يمكننا في الواقع الحصول على طول صفيف في جافا سكريبت باستخدام الخاصية طول.

112
00:07:01,100 --> 00:07:03,420
أساسا أنا ذاهب إلى القيام بشيء مماثل جدا داخل هنا

113
00:07:03,420 --> 00:07:05,600
لطباعة هذا العنصر.

114
00:07:05,600 --> 00:07:12,970
أستطيع الوصول مرة أخرى DIV TODOS، الخاصية HTML الداخلية من ذلك،

115
00:07:12,970 --> 00:07:17,560
وانا ذاهب لإضافة على هذه القائمة عنصر جديد، والذي يحدث أن تكون محاطة

116
00:07:17,560 --> 00:07:25,390
هذه العلامة لى، وانا ذاهب لسلسلة مع المشغل +،

117
00:07:25,390 --> 00:07:28,040
وهذا هو العنصر إيث من بلدي TODOS مجموعة،

118
00:07:28,040 --> 00:07:32,380
ثم أنا ذاهب لإغلاق هذه العلامة.

119
00:07:32,380 --> 00:07:36,240
الآن لكل عنصر سنقوم بإضافة إدخال قائمة جديدة.

120
00:07:36,240 --> 00:07:48,700
ثم نحن حقا بحاجة الى القيام به هو إغلاق هذه العلامة.

121
00:07:48,700 --> 00:07:52,820
أنا فقط بحاجة لإغلاق هذا غير مرتبة العلامة قائمة.

122
00:07:52,820 --> 00:07:55,490
>> هل التعود على كيفية عمل ذلك؟

123
00:07:55,490 --> 00:07:57,700
هذا يفتح القائمة بأكملها.

124
00:07:57,700 --> 00:08:01,080
وهذا يضيف عناصر فردية من قائمة TODOS إلى القائمة،

125
00:08:01,080 --> 00:08:05,470
ثم أن يغلق القائمة بأكملها، وهذا هو بلدي وظيفة addTodo.

126
00:08:05,470 --> 00:08:09,590
أبدأ أساسا عن طريق الحصول على ما يجب عمله من مربع النص.

127
00:08:09,590 --> 00:08:18,950
أود أن أضيف أن لمجموعة TODOS، وبعد ذلك إعادة تقديم لائحة تأليف ل.

128
00:08:18,950 --> 00:08:21,520
أنا الآن يمكن إضافة عناصر إلى قائمتي.

129
00:08:21,520 --> 00:08:24,620
هذا هو نوع من الإثارة لأنه في بضعة أسطر من التعليمات البرمجية

130
00:08:24,620 --> 00:08:28,240
التي قمنا بها في الأساس قائمة المهام حيث يمكننا أن نضيف العناصر.

131
00:08:28,240 --> 00:08:30,050
عظيم.

132
00:08:30,050 --> 00:08:34,480
وهذا النوع من مقدمة أساسية للجافا سكريبت.

133
00:08:34,480 --> 00:08:36,179
لا تقلق كثيرا حول بناء الجملة في الوقت الراهن،

134
00:08:36,179 --> 00:08:38,130
ولكن التفكير في هذا المفهوم.

135
00:08:38,130 --> 00:08:40,539
كان لدينا بعض HTML.

136
00:08:40,539 --> 00:08:45,310
كان لدينا مربع نص على الصفحة التي تسمح للمستخدمين أساسا لإدخال عنصر تأليف لإضافته.

137
00:08:45,310 --> 00:08:49,210
ثم استخدمنا جافا سكريبت لجلب أن TODO من أن مربع النص.

138
00:08:49,210 --> 00:08:52,830
نحن المخزنة التي داخل مجموعة وجافا سكريبت، الذي هو في الأساس مثل

139
00:08:52,830 --> 00:08:56,010
التمثيل البرنامجية لدينا من أن تأليف لائحة،

140
00:08:56,010 --> 00:08:59,060
وبعد ذلك طبعت بها.

141
00:08:59,060 --> 00:09:02,690
هذا هو todos.js.

142
00:09:02,690 --> 00:09:07,620
>> هذا هو نوع من باردة، ولكن كيف يمكن لنا أن أغتنم هذه مزيد؟

143
00:09:07,620 --> 00:09:11,350
حسنا، كما ترون، هذه ليست مثل القائمة كاملة إلى القيام به.

144
00:09:11,350 --> 00:09:15,100
على سبيل المثال، وأنا لا يمكن وضع علامة على أي من هذه البنود كما غير مكتملة،

145
00:09:15,100 --> 00:09:19,920
مثل إذا أردت أن إعادة ترتيب أولويات البنود أو حذف العناصر.

146
00:09:19,920 --> 00:09:23,150
هذا على ما يرام، لكننا يمكن أن يستغرق هذا أبعد من ذلك.

147
00:09:23,150 --> 00:09:29,280
أنا لن أتحدث كثيرا عن إضافة ميزات اضافية،

148
00:09:29,280 --> 00:09:32,800
ولكننا يمكن ان يأخذ هذا أبعد من ذلك.

149
00:09:32,800 --> 00:09:35,970
دعونا نتحدث حول إضافة ميزة واحدة أكثر من هذا لتأليف لائحة،

150
00:09:35,970 --> 00:09:40,370
وهو ذاهب الى أن تكون قادرة على التحقق من الفرد إلى القيام البند

151
00:09:40,370 --> 00:09:44,780
ولقد يمكن تجاوزها من ذلك، لذلك أساسا قائلا لقد فعلت هذا.

152
00:09:44,780 --> 00:09:50,240
دعونا نلقي نظرة على بعض التعليمات البرمجية التي يمكن تحقيق ذلك.

153
00:09:50,240 --> 00:09:52,740
لاحظ ما فعلته في الجزء العلوي هو أنني قمت بإضافتها

154
00:09:52,740 --> 00:09:57,620
دعا مجموعة عالمية جديدة كاملة.

155
00:09:57,620 --> 00:10:02,890
أنا أساسا استخدام هذا لتخزين ما إذا كانت العناصر في قائمة المهام

156
00:10:02,890 --> 00:10:06,560
هي كاملة أم لا.

157
00:10:06,560 --> 00:10:08,470
هذه هي طريقة واحدة للقيام بذلك.

158
00:10:08,470 --> 00:10:13,750
إذا كنت تنظر في تنفيذ هذا، وعرض،

159
00:10:13,750 --> 00:10:21,120
أساسا إذا كنت إدخال TODO وأنا الضغط على هذا الزر تبديل

160
00:10:21,120 --> 00:10:25,040
فإنه يعبر بها، لذلك كل بند في هذه القائمة إما كاملة

161
00:10:25,040 --> 00:10:31,050
أو دولة غير مكتملة، وأنا باستخدام مجموعة أخرى لتمثيل ذلك.

162
00:10:31,050 --> 00:10:33,730
>> أساسا لكل TODO في هذا TODOS مجموعة

163
00:10:33,730 --> 00:10:37,110
هناك عنصر في مجموعة كاملة التي تشير إلى الأساس

164
00:10:37,110 --> 00:10:39,060
سواء كان ذلك كاملة أم لا.

165
00:10:39,060 --> 00:10:41,640
لقد كان لإجراء تغييرات الحد الأدنى جدا لهذا الرمز،

166
00:10:41,640 --> 00:10:44,470
حتى هنا لدينا وظيفة addTodo.

167
00:10:44,470 --> 00:10:48,530
لاحظ أن هنا أنا دفعت به إلى مجموعة،

168
00:10:48,530 --> 00:10:51,300
ثم أنا يدفع 0 إلى أن مجموعة كاملة،

169
00:10:51,300 --> 00:10:57,090
أساسا بالتوازي مع ذلك دفع TODO جديدة أن أقول

170
00:10:57,090 --> 00:11:00,430
أنا وأضاف هذا البند، وانها اقترنت هذه القيمة،

171
00:11:00,430 --> 00:11:02,810
وهو ما يعني أنه من غير مكتملة.

172
00:11:02,810 --> 00:11:04,970
ثم أنا إعادة رسم لائحة المهام.

173
00:11:04,970 --> 00:11:09,220
الآن، لاحظ لقد أضيفت هذه وظيفة drawTodoList.

174
00:11:09,220 --> 00:11:11,760
هذا يأخذ الكثير من رمز كان لدينا من قبل،

175
00:11:11,760 --> 00:11:15,320
مسح أساسا خارج منطقة الجزاء ومن ثم توجه جديد قائمة تأليف ل.

176
00:11:15,320 --> 00:11:19,620
ولكن لاحظ أن داخل هذا لحلقة نفعله أكثر من ذلك بقليل الآن.

177
00:11:19,620 --> 00:11:25,000
نحن أساسا فحص ما إذا كان العنصر المقابلة لTODO إيث هنا

178
00:11:25,000 --> 00:11:30,220
كاملة، ونحن يتصرف بشكل مختلف في هذه الظروف 2.

179
00:11:30,220 --> 00:11:32,790
اذا كان كاملة، ونحن مضيفا هذه العلامة ديل،

180
00:11:32,790 --> 00:11:35,360
الذي هو في الأساس الطريقة يمكنك الحصول على هذه الضربة من خلال تأثير

181
00:11:35,360 --> 00:11:38,190
شطب لائحة تأليف للو كان كاملة،

182
00:11:38,190 --> 00:11:42,200
وإذا لم يكن، ونحن لا تشمل ذلك.

183
00:11:42,200 --> 00:11:45,030
وحتى هذا النوع من يعتني ذلك،

184
00:11:45,030 --> 00:11:49,140
>> وهذا هو أحد السبل لتحقيق ذلك.

185
00:11:49,140 --> 00:11:53,420
ومن ثم لاحظ عندما يقوم المستخدم بالنقر فوق واحدة من هذه

186
00:11:53,420 --> 00:11:56,780
نحن تبديل حالة الانتهاء من ذلك.

187
00:11:56,780 --> 00:12:02,170
عندما يقوم المستخدم بالنقر فوق، سنقوم عكس ما إذا كان قد تم الانتهاء منه أم لا،

188
00:12:02,170 --> 00:12:04,540
ومن ثم سنقوم إعادة رسم عليه.

189
00:12:04,540 --> 00:12:06,190
هذا النوع من الأعمال.

190
00:12:06,190 --> 00:12:09,860
لدينا هذه المهام التي تنفذ المهام الخاصة بهم،

191
00:12:09,860 --> 00:12:11,730
وهذا على ما يرام.

192
00:12:11,730 --> 00:12:14,110
هل هناك أي شيء يمكننا القيام به أفضل حول هذا الموضوع، على الرغم من؟

193
00:12:14,110 --> 00:12:18,700
لاحظ لدينا هذه المصفوفات العالمية 2.

194
00:12:18,700 --> 00:12:23,550
إذا كان هذا C، وكان لدينا 2 صفائف هذا النوع من تمثيل

195
00:12:23,550 --> 00:12:25,800
البيانات التي تم نوع من تتصل في بعض الطريق

196
00:12:25,800 --> 00:12:30,140
ما يمكن أن نستخدمها في C في الجمع بين هذه المجالات 2

197
00:12:30,140 --> 00:12:35,420
إلى شيء بتغليف كل قطعة من المعلومات؟

198
00:12:35,420 --> 00:12:37,600
أي شخص تريد أن تجعل من اقتراح؟

199
00:12:37,600 --> 00:12:39,450
[طالب استجابة غير مسموع]

200
00:12:39,450 --> 00:12:42,340
>> بالضبط، حتى أننا يمكن أن تستخدم نوعا من البنية،

201
00:12:42,340 --> 00:12:44,960
وإذا كنت تعتقد أن العودة، ويقول، pset 3،

202
00:12:44,960 --> 00:12:47,350
تذكر كان لدينا قاموس، ومن ثم كان لدينا ما إذا كانت كلمة

203
00:12:47,350 --> 00:12:50,230
وكان في القاموس، ووضعت كل تلك المعلومات معا

204
00:12:50,230 --> 00:12:52,420
داخل بعض هياكل البيانات.

205
00:12:52,420 --> 00:12:56,390
شيء واحد يمكنني القيام به مع هذا الرمز لتجنب وجود هذه 2 صفائف مختلفة

206
00:12:56,390 --> 00:13:01,760
لقطعة مماثلة من المعلومات يمكنني الجمع بينهما إلى كائن جافا سكريبت.

207
00:13:01,760 --> 00:13:07,150
دعونا نلقي نظرة على ذلك.

208
00:13:07,150 --> 00:13:11,740
لاحظ ليس لدي سوى مجموعة واحدة في الجزء العلوي الآن

209
00:13:11,740 --> 00:13:17,650
وما قمت به هو وهذا هو مجرد بناء الجملة جافا سكريبت لنوع من

210
00:13:17,650 --> 00:13:21,350
إنشاء نسخة حرفية من كائن،

211
00:13:21,350 --> 00:13:24,670
وتلاحظ هناك 2 الخصائص، لذلك لدينا ما يجب عمله،

212
00:13:24,670 --> 00:13:29,660
وأبقى جنبا إلى جنب مع ما اذا كان كاملة أو غير كاملة.

213
00:13:29,660 --> 00:13:31,000
هذا هو رمز مشابهة جدا.

214
00:13:31,000 --> 00:13:35,310
نحن نستخدم الكائنات سكريبت.

215
00:13:35,310 --> 00:13:38,600
هذا النوع من الامور تتحسن.

216
00:13:38,600 --> 00:13:43,850
مثل الآن، وتحفظ جميع هذه الحقول من المعلومات ذات الصلة معا.

217
00:13:43,850 --> 00:13:46,410
عندما نذهب لطباعته، يمكننا الوصول إلى الحقول.

218
00:13:46,410 --> 00:13:49,060
>> لاحظ كيف نقوم به TODOS [أنا]. كاملة

219
00:13:49,060 --> 00:13:52,880
بدلا من فحص مجموعة كاملة بشكل منفصل،

220
00:13:52,880 --> 00:13:56,560
ولاحظ أننا عندما ترغب في الحصول على سلسلة تأليف لأننا الحصول على الملكية إلى القيام

221
00:13:56,560 --> 00:13:58,750
ذلك ما يجب عمله، لذلك هذا النوع من المنطقي لأن

222
00:13:58,750 --> 00:14:01,660
كل عنصر له هذه الخصائص الجوهرية حول هذا الموضوع.

223
00:14:01,660 --> 00:14:05,650
أنه يحتوي على ما يجب عمله، ولها سواء كان ذلك كاملة أم لا.

224
00:14:05,650 --> 00:14:11,540
لم يفت العديد من التغييرات هناك وظيفيا، واضاف عادل بعض أكثر إلى رمز.

225
00:14:11,540 --> 00:14:13,430
هذا يعد تحسنا عن بعض الجبهات، أليس كذلك؟

226
00:14:13,430 --> 00:14:16,030
أعني أننا الحسبان بأعمال التصميم قليلا.

227
00:14:16,030 --> 00:14:20,350
الآن لدينا كائنات لتغليف أساسا هذه البيانات.

228
00:14:20,350 --> 00:14:27,130
هل هناك أي شيء أكثر يمكننا القيام به من هنا من حيث جافا سكريبت؟

229
00:14:27,130 --> 00:14:31,810
أحب لاحظ أن هذا الرمز هنا

230
00:14:31,810 --> 00:14:34,760
للحصول على HTML الداخلية للشعبة

231
00:14:34,760 --> 00:14:40,520
قليلا، وأنا أعتقد، طويلة.

232
00:14:40,520 --> 00:14:45,100
هناك document.getElementByID ("TODOS"). innerHTML.

233
00:14:45,100 --> 00:14:48,400
شيء واحد يمكن أن نقوم به لجعل هذا الرمز تبدو ودا قليلا

234
00:14:48,400 --> 00:14:51,450
لذلك أود أن لا يكون للحفاظ على التمرير الأيسر والأيمن، ذهابا وإيابا،

235
00:14:51,450 --> 00:14:58,480
هو أنني يمكن استخدام مكتبة مثل مسج.

236
00:14:58,480 --> 00:15:02,710
>> دعونا تحقق من الحلقه 2

237
00:15:02,710 --> 00:15:05,880
وهذا هو نفس الرمز، ولكن يتم ذلك مع مسج.

238
00:15:05,880 --> 00:15:08,790
قد لا تكون مألوفة جدا مع مسج،

239
00:15:08,790 --> 00:15:11,510
ولكن نعرف تماما أن مسج هو نوع من مكتبة للجافا سكريبت

240
00:15:11,510 --> 00:15:15,910
أن يجعل من الأسهل أن تفعل أشياء مثل العناصر الفردية صول DOM.

241
00:15:15,910 --> 00:15:21,280
هنا بدلا من أن تقول document.getElementByID ("TODOS"). innerHTML

242
00:15:21,280 --> 00:15:25,210
يمكنني استخدامها بالطريقة الأنظف في مسج،

243
00:15:25,210 --> 00:15:28,490
الذي هو مجرد لاستخدام محددات.

244
00:15:28,490 --> 00:15:31,300
كما ترون، هذا الرمز لم يحصل قليلا أكثر نظافة،

245
00:15:31,300 --> 00:15:35,770
مشابهة جدا وظيفيا، ولكن هذه هي الفكرة.

246
00:15:35,770 --> 00:15:37,980
لقد رأينا بضعة أشياء حتى الآن،

247
00:15:37,980 --> 00:15:42,010
لذلك بدأنا في تنفيذ جافا سكريبت الخام فقط.

248
00:15:42,010 --> 00:15:45,370
أضفنا ميزات جديدة وأظهرت كيف يمكننا تحسينه مع

249
00:15:45,370 --> 00:15:49,090
فقط ما لدينا في جافا سكريبت.

250
00:15:49,090 --> 00:15:53,300
>> لا أرى أي شخص أي صعوبات مع هذا التصميم؟

251
00:15:53,300 --> 00:16:01,090
وهي، أعتقد أو ليس بالضرورة صعوبات ولكن دعنا نقول

252
00:16:01,090 --> 00:16:04,830
كنا لا تفعل مشروع قائمة المهام، وغدا قررنا

253
00:16:04,830 --> 00:16:10,320
كنا نرغب في تقديم قائمة البقالة أو مشروع قائمة التسوق.

254
00:16:10,320 --> 00:16:14,150
وهناك الكثير من هذه الميزات هي مشابهة جدا.

255
00:16:14,150 --> 00:16:19,080
وهناك الكثير من الأشياء التي تريد الخروج من جافا سكريبت شائعة جدا،

256
00:16:19,080 --> 00:16:23,820
وهذا يؤكد الحاجة لبعض نوع الطريق

257
00:16:23,820 --> 00:16:25,670
مما يجعل هذا أسهل للقيام به.

258
00:16:25,670 --> 00:16:30,400
كان لي لبناء كل هذا الوصول HTML، كل هذا الوصول DOM،

259
00:16:30,400 --> 00:16:35,530
مثل أنا ذاهب لتمثيل قائمة إلى القيام به مع هذا الطراز.

260
00:16:35,530 --> 00:16:39,130
وإشعار أنا مسؤول عن المطور سكريبت

261
00:16:39,130 --> 00:16:42,890
من أجل الحفاظ على HTML وجافا سكريبت أن لدي في المزامنة.

262
00:16:42,890 --> 00:16:48,040
لا شيء بشكل تلقائي أن التمثيل سكريبت

263
00:16:48,040 --> 00:16:51,590
أو لائحة تأليف لتحصل دفعت بها إلى HTML.

264
00:16:51,590 --> 00:16:54,000
لا شيء القسري التي ما عدا بالنسبة لي.

265
00:16:54,000 --> 00:16:56,880
اضطررت لكتابة القرعة تأليف لوظيفة قائمة.

266
00:16:56,880 --> 00:17:01,650
والتي قد لا تكون أعني، فمن المعقول أن تفعل ذلك،

267
00:17:01,650 --> 00:17:03,670
لكنها قد تكون مملة أحيانا.

268
00:17:03,670 --> 00:17:08,190
إذا كان لديك مشروع أكبر، وهذا قد يكون صعبا.

269
00:17:08,190 --> 00:17:10,720
>> الأطر، واحدة من أغراض الأطر

270
00:17:10,720 --> 00:17:14,060
هو تبسيط هذه العملية ونوع من عامل خارج

271
00:17:14,060 --> 00:17:16,950
هذه الشائعة، وأنا أعتقد أن أنماط القول تصميم

272
00:17:16,950 --> 00:17:20,700
أن الناس لديهم عموما نوعا من طريقة لتمثيل البيانات،

273
00:17:20,700 --> 00:17:25,599
سواء كان ذلك في قائمة الأصدقاء، سواء كان ذلك المعلومات خريطة

274
00:17:25,599 --> 00:17:27,280
أو شيء أو قائمة المهام.

275
00:17:27,280 --> 00:17:30,660
بعض الناس لديهم عموما وسيلة لتمثيل المعلومات،

276
00:17:30,660 --> 00:17:33,650
وأنها تحتاج بشكل عام للحفاظ على هذا النوع من المعلومات في المزامنة

277
00:17:33,650 --> 00:17:36,520
بين ما يراه المستخدم في بعض نوع من الرأي،

278
00:17:36,520 --> 00:17:39,850
يتحدث في شروط مثل وحدة تحكم عرض نموذج التي رأيتها في محاضرة،

279
00:17:39,850 --> 00:17:45,400
ثم النموذج، وهو في هذه الحالة هو هذه المجموعة سكريبت.

280
00:17:45,400 --> 00:17:49,020
الأطر تعطينا طريقة لحل تلك المشكلة.

281
00:17:49,020 --> 00:17:53,080
الآن دعونا نلقي نظرة على تنفيذ هذا تأليف لائحة

282
00:17:53,080 --> 00:18:02,360
في إطار دعا angularjs.

283
00:18:02,360 --> 00:18:04,650
هذا هو عليه. لاحظ تناسبها على شريحة.

284
00:18:04,650 --> 00:18:07,330
أنا لم يكن لديك للتمرير إلى اليسار واليمين.

285
00:18:07,330 --> 00:18:10,460
ربما كان هذا هو ليس سبب وجيه أن يوصي باستخدام الإطار،

286
00:18:10,460 --> 00:18:20,120
لكن لاحظ أنا أي وقت مضى الحصول على عناصر HTML الفردية هنا؟

287
00:18:20,120 --> 00:18:22,400
أنا ذاهب من أي وقت مضى في DOM؟

288
00:18:22,400 --> 00:18:26,120
هل ترى أي document.getElementByID أو شيء من هذا القبيل؟

289
00:18:26,120 --> 00:18:29,870
لا، هذا ذهب.

290
00:18:29,870 --> 00:18:35,590
>> الزاوي يساعدنا على الحفاظ على DOM وجافا سكريبت تمثيلنا من شيء

291
00:18:35,590 --> 00:18:40,430
نوع من وفاق، لذلك إذا لم يكن في ملف JS،

292
00:18:40,430 --> 00:18:46,790
اذا لم يكن هناك طريقة للحصول على برمجيا للجميع أن محتوى HTML

293
00:18:46,790 --> 00:18:51,800
من جافا سكريبت كيف يمكننا أخذ ذلك في المزامنة؟

294
00:18:51,800 --> 00:18:58,160
إذا لم يكن في ملف JS، انها حصلت على أن تكون في HTML، أليس كذلك؟

295
00:18:58,160 --> 00:19:01,910
هذا هو نسخة جديدة من الملف HTML،

296
00:19:01,910 --> 00:19:04,660
وتلاحظ أننا أضفنا الكثير هنا.

297
00:19:04,660 --> 00:19:11,110
لاحظ هناك هذه الصفات الجديدة التي يقول NG-ضغطة وNG-تكرار.

298
00:19:11,110 --> 00:19:15,650
نهج الزاوي على حل هذه المشكلة من الصعوبات في تصميم

299
00:19:15,650 --> 00:19:19,130
هو جعل أساسا HTML أقوى بكثير.

300
00:19:19,130 --> 00:19:24,420
الزاوي هو وسيلة للسماح لك لجعل HTML إلى حد ما أكثر تعبيرا.

301
00:19:24,420 --> 00:19:30,520
على سبيل المثال، أستطيع أن أقول إنني ذاهب لادراك التعادل أو ربط مربع النص هذا

302
00:19:30,520 --> 00:19:35,080
إلى متغير داخل بلدي الزاوي شفرة جافا سكريبت.

303
00:19:35,080 --> 00:19:37,030
هذا الموديل نانوغرام يفعل ذلك بالضبط.

304
00:19:37,030 --> 00:19:41,550
أن يقول أساسا أن هذا البند داخل مربع النص هذا،

305
00:19:41,550 --> 00:19:45,000
مجرد الربط بين ذلك مع new_todo_description متغير

306
00:19:45,000 --> 00:19:47,870
ضمن شفرة جافا سكريبت.

307
00:19:47,870 --> 00:19:51,600
هذا هو قوي جدا لأنني لم يكن لديك للذهاب صراحة إلى

308
00:19:51,600 --> 00:19:53,310
وDOM للحصول على تلك المعلومات.

309
00:19:53,310 --> 00:19:56,250
أنا لا يجب أن أقول document.getElementByID.

310
00:19:56,250 --> 00:19:58,750
أنا لم يكن لديك لاستخدام jQueries مثل الوصول DOM.

311
00:19:58,750 --> 00:20:03,280
يمكنني ربطه مع متغير، ومن ثم عندما أقوم بتغيير هذا المتغير

312
00:20:03,280 --> 00:20:07,400
ضمن سكريبت أبقى ذلك متزامنا مع HTML،

313
00:20:07,400 --> 00:20:11,640
بحيث يبسط عملية الاضطرار للذهاب ذهابا وإيابا بين البلدين.

314
00:20:11,640 --> 00:20:18,260
هل هذا معقول؟

315
00:20:18,260 --> 00:20:22,060
>> وتلاحظ عدم وجود رمز وصول HTML.

316
00:20:22,060 --> 00:20:27,760
لقد أدلى به للتو HTML أكثر قوة،

317
00:20:27,760 --> 00:20:32,070
والآن، على سبيل المثال، يمكننا أن نفعل أشياء مثل هذه،

318
00:20:32,070 --> 00:20:38,610
مثل عندما تنقر على هذا، استدعاء هذه الدالة ضمن نطاق todos.js،

319
00:20:38,610 --> 00:20:43,410
ويمكننا أن نفعل ذلك من قبل، ولكن هناك أشياء أخرى، مثل هذه NG-نموذج،

320
00:20:43,410 --> 00:20:47,020
وتلاحظ هذه NG-تكرار.

321
00:20:47,020 --> 00:20:51,520
ماذا كنت تعتقد أن هذا يفعل؟

322
00:20:51,520 --> 00:20:54,390
وهنا لدينا قائمة غير مرتبة من قبل.

323
00:20:54,390 --> 00:20:56,470
لدينا علامات UL،

324
00:20:56,470 --> 00:21:03,710
ولكن أنا من أي وقت مضى مما يجعل تلك القائمة داخل شفرة جافا سكريبت؟

325
00:21:03,710 --> 00:21:09,280
أنا لا من أي وقت مضى مما يجعل تلك القائمة بشكل صريح.

326
00:21:09,280 --> 00:21:11,580
كيف يعمل هذا؟

327
00:21:11,580 --> 00:21:16,410
حسنا، طريقة الزاوي تنجز هذا هو وهذا ما يسمى مكرر.

328
00:21:16,410 --> 00:21:22,760
أساسا هذا يقول أنني أريد أن طباعة هذه HTML

329
00:21:22,760 --> 00:21:26,240
لكل داخل TODO من بلدي TODOS صفيف.

330
00:21:26,240 --> 00:21:31,850
داخل todos.jr هناك مجموعة TODOS الحق هنا،

331
00:21:31,850 --> 00:21:37,910
وهذا سوف اقول الذهاب الزاوي من خلال هذا الصفيف، ولكل عنصر تشاهد

332
00:21:37,910 --> 00:21:41,390
أريدك أن تطبع هذه HTML.

333
00:21:41,390 --> 00:21:44,620
هذا هو نوع من رائع لأنني أستطيع القيام بذلك فقط

334
00:21:44,620 --> 00:21:47,760
دون الحاجة لكتابة لحلقة،

335
00:21:47,760 --> 00:21:52,250
والتي لقائمة المهام التي كانت فقط 30 أسطر من التعليمات البرمجية

336
00:21:52,250 --> 00:21:54,700
قد لا يكون الشيء الأكثر فائدة،

337
00:21:54,700 --> 00:22:01,240
ولكن إذا كان لديك مشروع كبير، وهذا يمكن الحصول على مريحة للغاية.

338
00:22:01,240 --> 00:22:06,100
>> هذا هو حل واحد لهذه المشكلة، مما يجعل HTML أكثر قوة،

339
00:22:06,100 --> 00:22:10,820
والذي يسمح لنا للحفاظ على سكريبت و HTML في المزامنة.

340
00:22:10,820 --> 00:22:13,220
هناك طرق أخرى ممكنة لحل هذه المشكلة،

341
00:22:13,220 --> 00:22:15,320
وليس كل إطار يفعل هذا.

342
00:22:15,320 --> 00:22:17,720
لا يعمل في كل إطار على طول هذه الخطوط.

343
00:22:17,720 --> 00:22:19,490
بعض الأطر نهجا مختلفا،

344
00:22:19,490 --> 00:22:23,310
وكنت قد تجد أن تستمتع الترميز في إطار واحد على الآخر.

345
00:22:23,310 --> 00:22:26,160
دعونا ننظر إلى واحدة أكثر.

346
00:22:26,160 --> 00:22:30,060
هذه لائحة تأليف لترميز حتى في إطار تسمى العمود الفقري.

347
00:22:30,060 --> 00:22:33,250
انا ذاهب للذهاب من خلال هذا بسرعة.

348
00:22:33,250 --> 00:22:38,300
سأبدأ مع HTML قبل أن نذهب هناك.

349
00:22:38,300 --> 00:22:40,290
ثانية واحدة.

350
00:22:40,290 --> 00:22:43,950
بدءا من HTML، كما لاحظت، HTML دينا هي مشابهة جدا

351
00:22:43,950 --> 00:22:50,000
إلى ما كانت عليه من قبل، لذلك ليس كثيرا جديدة على هذه الجبهة.

352
00:22:50,000 --> 00:22:55,410
لكن ملف شبيبة لدينا هي مختلفة قليلا.

353
00:22:55,410 --> 00:23:00,360
نوع العمود الفقري لديه هذه الفكرة، أو يبني على فكرة

354
00:23:00,360 --> 00:23:04,750
أن الكثير من ما نقوم به، ويقول، ومشاريع جافا سكريبت لدينا

355
00:23:04,750 --> 00:23:09,110
هو التفكير في نماذج ومجموعات من هذه النماذج.

356
00:23:09,110 --> 00:23:12,510
هذا يمكن أن يكون، على سبيل المثال، صورة ومجموعات من الصور،

357
00:23:12,510 --> 00:23:16,230
أو فكرة أحد الأصدقاء ومجموعات من الأصدقاء.

358
00:23:16,230 --> 00:23:20,700
وكثير من الأحيان عندما نقوم برمجة تطبيقات جافا سكريبت

359
00:23:20,700 --> 00:23:25,340
سنقوم فرز من يمثل فكرة وجود مجموعة من الأصدقاء

360
00:23:25,340 --> 00:23:29,500
بطريقة أو بأخرى في جافا سكريبت، والعمود الفقري يعطينا هذه الطبقة

361
00:23:29,500 --> 00:23:33,040
على رأس المصفوفات والكائنات الموجودة جافا سكريبت ل

362
00:23:33,040 --> 00:23:38,300
أن تفعل أشياء أكثر قوة مع أن أكثر بسهولة.

363
00:23:38,300 --> 00:23:41,870
>> أنا هنا قمت بتحديدها نموذجا تأليف ل،

364
00:23:41,870 --> 00:23:44,630
وكنت لا داعي للقلق كثيرا حول بناء الجملة،

365
00:23:44,630 --> 00:23:48,730
ولكن لاحظت أن ما هو واحدة من خصائص هذا؟

366
00:23:48,730 --> 00:23:53,190
أنه يحتوي على الحقل الافتراضي.

367
00:23:53,190 --> 00:23:56,640
العمود الفقري يتيح لي الفرصة لتحديد بالفعل قبالة الخفافيش

368
00:23:56,640 --> 00:24:00,190
أي جديد لذلك أنا خلق وستكون لدينا هذه الافتراضيات.

369
00:24:00,190 --> 00:24:04,100
الآن أستطيع أن تخصيص هذا، ولكن أن تكون قادرة على تحديد الإعدادات الافتراضية

370
00:24:04,100 --> 00:24:07,220
هو لطيف، وانها نوع من مريحة لأن هذا ليس شيئا مثل

371
00:24:07,220 --> 00:24:10,430
المتأصلة في جافا سكريبت، وأنا الآن لا داعي للصراحة

372
00:24:10,430 --> 00:24:12,430
أقول إن TODOS غير مكتملة.

373
00:24:12,430 --> 00:24:19,190
أستطيع أن أقول الحق قبالة الخفافيش التي TODOS ذاهبون إلى أن تكون علامة كاملة.

374
00:24:19,190 --> 00:24:21,300
لاحظ ثم ما هو هذا؟

375
00:24:21,300 --> 00:24:25,520
الآن لدي قائمة إلى القيام به، وهذا هو جمع.

376
00:24:25,520 --> 00:24:30,960
لاحظ مجال يرتبط أن يقول نموذج TODO.

377
00:24:30,960 --> 00:24:33,390
هذه هي طريقتي في إخبار العمود الفقري الذي

378
00:24:33,390 --> 00:24:37,350
انا ذاهب الى أن التفكير في جمع هذه TODOS الفردية.

379
00:24:37,350 --> 00:24:42,140
وهذا هو الأساس لهيكل نموذج لبرنامجي.

380
00:24:42,140 --> 00:24:44,980
هنا لدي هذه الفكرة من مجموعة،

381
00:24:44,980 --> 00:24:48,960
وأساسا العناصر الواردة في ذلك جمع جميعا سوف تكون هذه TODOS،

382
00:24:48,960 --> 00:24:51,910
وهذا طبيعي جدا في هذا المعنى

383
00:24:51,910 --> 00:24:59,890
لأن لدي TODOS، ولدي منها في مجموعة.

384
00:24:59,890 --> 00:25:02,940
>> دعونا ننظر في أكثر قليلا من هذا.

385
00:25:02,940 --> 00:25:05,900
هنا نسخة العمود الفقري.

386
00:25:05,900 --> 00:25:08,890
الشيء الآخر أن العمود الفقري يقول هو أن

387
00:25:08,890 --> 00:25:14,660
الكثير من النماذج التي كنت تفكر أو حتى مجموعات

388
00:25:14,660 --> 00:25:19,150
سوف تحتاج إلى بعض الطريقة التي يتم عرضها.

389
00:25:19,150 --> 00:25:21,900
نحن بحاجة لجعل ذلك تأليف لائحة،

390
00:25:21,900 --> 00:25:25,460
ولن يكون ذلك جميلا إذا نحن يمكن أن توفر لكل نموذج

391
00:25:25,460 --> 00:25:28,390
أو المنتسبين مع كل نموذج هذا الرأي

392
00:25:28,390 --> 00:25:34,020
تسمح لنا أعتقد ربط اثنين معا؟

393
00:25:34,020 --> 00:25:38,320
في حين قبل كان علينا أن استخدام لحلقة التي من شأنها أن تعمل من خلال

394
00:25:38,320 --> 00:25:41,130
كل ما يجب عمله في قائمتنا ثم طباعته هنا

395
00:25:41,130 --> 00:25:44,650
نحن يمكن الاتصال أساسا مع هذا النموذج.

396
00:25:44,650 --> 00:25:47,550
هذه نسخة تأليف ل.

397
00:25:47,550 --> 00:25:50,550
ويرتبط هذا مع ما يجب عمله وجدنا في وقت سابق.

398
00:25:50,550 --> 00:25:54,940
الآن للعرض كل ما يجب عمله أو renderable

399
00:25:54,940 --> 00:25:56,960
هذا إلى عرض المهام.

400
00:25:56,960 --> 00:25:59,440
لاحظ بعض الحقول.

401
00:25:59,440 --> 00:26:05,880
ماذا كنت تعتقد أن هذا tagName هو، tagName: لي؟

402
00:26:05,880 --> 00:26:09,790
تذكر من قبل عندما كنا نريد لتقديم TODO

403
00:26:09,790 --> 00:26:16,700
سيتعين علينا أن إقران صراحة TODOS لدينا مع هذه العلامة لى.

404
00:26:16,700 --> 00:26:21,080
الآن نحن نقول أنه حيثما هذه TODO هو الذهاب الى العيش

405
00:26:21,080 --> 00:26:25,250
ستكون داخل علامة لى.

406
00:26:25,250 --> 00:26:31,440
ونحن الآن أيضا ربط الأحداث مع TODOS لدينا.

407
00:26:31,440 --> 00:26:34,320
>> كل ما يجب عمله لديه هذا حدث واحد.

408
00:26:34,320 --> 00:26:38,480
إذا قمت بالنقر فوق الى حد كبير زر تبديل، وهذا ما أقوله هناك،

409
00:26:38,480 --> 00:26:43,080
ثم وضع علامة في الأساس TODO كما عكس ما كان عليه من قبل

410
00:26:43,080 --> 00:26:45,890
ومن ثم إعادة تقديم الطلب.

411
00:26:45,890 --> 00:26:47,810
هذا هو نوع من مشابهة إلى رمز من قبل.

412
00:26:47,810 --> 00:26:50,730
أتذكر عندما احتفلنا أنها إما عكس أو

413
00:26:50,730 --> 00:26:52,410
ثم نعيد أصدرته.

414
00:26:52,410 --> 00:26:57,750
ولكن لاحظ الآن هذا الحدث كان ليكون شيئا ما في HTML.

415
00:26:57,750 --> 00:26:59,640
كان يجلس هناك.

416
00:26:59,640 --> 00:27:01,410
كان الزر لفي نقرة.

417
00:27:01,410 --> 00:27:05,310
عند النقر فوق الزر، فإنه نوع من يفعل الاشياء ل

418
00:27:05,310 --> 00:27:07,210
اقامة أن TODO أن تكون غير مكتملة.

419
00:27:07,210 --> 00:27:11,180
هنا قمنا يرتبط هذا الحدث من النقر فوق هذا الزر تبديل

420
00:27:11,180 --> 00:27:15,830
وعكس ما اذا كان أو إيقاف تشغيله مع هذا الرأي.

421
00:27:15,830 --> 00:27:20,480
>> هذه هي طريقة لطيفة لإقامة هذا الحدث بحيث انها جدا بإحكام

422
00:27:20,480 --> 00:27:26,980
لهذا الرأي، وهكذا تلاحظ هذا واحد أكثر.

423
00:27:26,980 --> 00:27:31,050
لدي هذا الأسلوب تقديم، ونحن لم يكن لديك للذهاب من خلال التفاصيل.

424
00:27:31,050 --> 00:27:33,650
انها نوع من غرار ما كان لدينا من قبل،

425
00:27:33,650 --> 00:27:36,070
ولكن لاحظ أنا لا حلقات عبر أي شيء.

426
00:27:36,070 --> 00:27:40,700
أنا لا تطبع هذه العلامة UL هذا النوع من يقول انا ذاهب لطباعة كل عنصر من العناصر.

427
00:27:40,700 --> 00:27:46,610
أنا توفير وظائف لتقديم هذا واحد لتأليف البند.

428
00:27:46,610 --> 00:27:49,400
هذا هو مفهوم قوي جدا لأنه في الاساس

429
00:27:49,400 --> 00:27:53,600
يتكون لدينا قائمة لقيام كل هذه TODOS، واذا كنا نستطيع تحديد الأساس

430
00:27:53,600 --> 00:27:56,890
الطريقة لتقديم واحدة من تلك TODOS

431
00:27:56,890 --> 00:28:04,230
ثم أننا يمكن أن يكون العمود الفقري لدينا قوية في حد ذاتها تجعل كل من TODOS

432
00:28:04,230 --> 00:28:07,760
بواسطة استدعاء الأسلوب تجعل على TODOS الفردية.

433
00:28:07,760 --> 00:28:14,180
هذا هو مفهوم يمكن أن يكون مفيدا هنا.

434
00:28:14,180 --> 00:28:18,160
الآن سؤال جيد لطرحه هو كيف يتم هذا التطبيق يتم وضع معا؟

435
00:28:18,160 --> 00:28:21,200
لأن لدينا القدرة على تقديم ما يجب عمله واحدة،

436
00:28:21,200 --> 00:28:23,860
ولكن كيف نحصل على فكرة TODOS متعددة؟

437
00:28:23,860 --> 00:28:25,100
>> دعونا نلقي نظرة على ذلك.

438
00:28:25,100 --> 00:28:27,100
هذا هو الجزء الأخير.

439
00:28:27,100 --> 00:28:29,740
لاحظ لدينا طريقة عرض قائمة إلى القيام به هنا،

440
00:28:29,740 --> 00:28:34,440
وتلاحظ انها أيضا وجهة نظر.

441
00:28:34,440 --> 00:28:36,970
ويذهب أكثر من بضعة أشياء،

442
00:28:36,970 --> 00:28:45,280
سيتم استدعاء هذا الأسلوب تهيئة عندما كنا أولا إنشاء هذه القائمة إلى القيام.

443
00:28:45,280 --> 00:28:52,630
كما ترون، انها مثل إنشاء قائمة إلى القيام به، وربطه مع هذا الرأي.

444
00:28:52,630 --> 00:28:57,860
ثم أضفت وظائف هنا وذلك أساسا عند إضافة بند-

445
00:28:57,860 --> 00:29:01,440
هذا هو مماثل لأسلوب AddItem شاهدنا من قبل،

446
00:29:01,440 --> 00:29:07,430
أنا ذاهب لإنشاء كائن TODO جديدة، وإشعار ادعو فعلا

447
00:29:07,430 --> 00:29:13,080
هذا الأسلوب TODO جديدة، لذلك يتم توفير ذلك من خلال العمود الفقري،

448
00:29:13,080 --> 00:29:16,010
وأنا يمكن أن تمر في ممتلكاتي هنا.

449
00:29:16,010 --> 00:29:23,710
والآن فإن كل ما يجب عمله التي أقوم بإنشائها باستخدام هذا الحصول على تلك الوظيفة التي رأينا من قبل.

450
00:29:23,710 --> 00:29:28,140
لاحظ أنا التخلص من مربع النص بالتفصيل تسبق قليلا صغيرة

451
00:29:28,140 --> 00:29:32,900
ثم أنا مضيفا هذه المجموعة.

452
00:29:32,900 --> 00:29:37,630
>> هذا يكاد يبدو غريبا لأنه قبل كان علينا فقط أن نفعل ذلك todos.push،

453
00:29:37,630 --> 00:29:43,310
ومن ثم كان علينا القيام به، وهذا قد يبدو أكثر تعقيدا لهذا المشروع بالذات،

454
00:29:43,310 --> 00:29:46,980
وكنت قد تجد أن العمود الفقري أو حتى سيارة أجرة أو أي إطار آخر

455
00:29:46,980 --> 00:29:50,790
لا تتناسب مع المشروع الخاص بك معين، لكن أعتقد أنه من المهم أن نفكر في

456
00:29:50,790 --> 00:29:54,100
ماذا يعني هذا على نطاق أوسع لمشاريع أكبر،

457
00:29:54,100 --> 00:29:56,610
لأنه إذا كان لدينا مشروع أكبر حيث كنا يمثل

458
00:29:56,610 --> 00:30:00,860
بعض جمع معقدة حقا، شيء أعمق من مجرد قائمة المهام،

459
00:30:00,860 --> 00:30:04,490
دعنا نقول قائمة الأصدقاء أو شيء من هذا القبيل، وهذا يمكن أن تأتي في متناول اليدين

460
00:30:04,490 --> 00:30:09,620
لأننا يمكن أن تنظم رمز لنا في وسيلة مريحة حقا،

461
00:30:09,620 --> 00:30:12,550
بطريقة من شأنها أن تجعل من السهل على شخص آخر

462
00:30:12,550 --> 00:30:16,820
الذي أراد أن تلتقط مشروع لبناء عليها.

463
00:30:16,820 --> 00:30:21,450
يمكنك أن ترى أن هذا يوفر الكثير من الهيكل.

464
00:30:21,450 --> 00:30:26,580
ثم ادعو تقديم على هذا addItem.

465
00:30:26,580 --> 00:30:31,050
تقدم، وكما ترون، وليس لديك لفهم هذه الجملة الكامل،

466
00:30:31,050 --> 00:30:37,790
ولكن أساسا لكل نموذج انه سيكون لاستدعاء الأسلوب تجعل الفرد.

467
00:30:37,790 --> 00:30:41,500
وهذا النوع من أين يأتي هذا من.

468
00:30:41,500 --> 00:30:44,140
دعونا تحديد مدى لتقديم TODOS الفردية،

469
00:30:44,140 --> 00:30:47,310
ثم دعونا الغراء لهم معا ككل.

470
00:30:47,310 --> 00:30:49,810
ولكن هذا يوفر وسيلة من التجريد،

471
00:30:49,810 --> 00:30:55,470
لأنني يمكن أن تغير الطريقة أقرر لتقديم TODOS الفردية،

472
00:30:55,470 --> 00:30:57,940
وأنا لن تضطر إلى تغيير أي من هذه التعليمات البرمجية.

473
00:30:57,940 --> 00:31:00,700
وهذا النوع من بارد.

474
00:31:00,700 --> 00:31:08,540
>> هل لدى أي شخص أي أسئلة حول الأطر جافا سكريبت؟

475
00:31:08,540 --> 00:31:14,310
[طالب سؤال غير مسموع]

476
00:31:14,310 --> 00:31:16,050
أوه، بالتأكيد، وهذا هو السؤال الكبير.

477
00:31:16,050 --> 00:31:19,080
كان السؤال كيف أنا وتشمل الأطر؟

478
00:31:19,080 --> 00:31:22,970
معظم الأطر جافا سكريبت هي في الأساس مجرد ملفات JS

479
00:31:22,970 --> 00:31:25,740
التي يمكن أن تدرج في الجزء العلوي من التعليمات البرمجية الخاصة بك.

480
00:31:25,740 --> 00:31:29,830
تلاحظ في جزء رئيس من HTML بلدي لدي كل هذه العلامات النصي،

481
00:31:29,830 --> 00:31:34,250
والعلامة النصي النهائي هو رمز أننا قد كتبت.

482
00:31:34,250 --> 00:31:38,820
ثم رموز الإطار 3 هي فقط أيضا علامات البرنامج النصي.

483
00:31:38,820 --> 00:31:42,110
أنا بما لهم من ما يسمى CDN،

484
00:31:42,110 --> 00:31:46,200
الذي يسمح لي للحصول عليه من شخص آخر في هذه المرحلة

485
00:31:46,200 --> 00:31:57,930
ولكن في كل إطار له هذا، يمكنك أن تجد الى حد كبير مضمون

486
00:31:57,930 --> 00:32:03,540
لمكتبة جافا سكريبت خاصة متوفرة في بعض CDN أو شيء من هذا القبيل،

487
00:32:03,540 --> 00:32:05,570
ومن ثم يمكن أن تشمل هذه العلامات النصي.

488
00:32:05,570 --> 00:32:07,600
هل هذا معقول؟

489
00:32:07,600 --> 00:32:09,500
بارد.

490
00:32:09,500 --> 00:32:11,730
>> تلك هي 2 مناهج مختلفة.

491
00:32:11,730 --> 00:32:14,640
تلك ليست هي النهج الوحيد لحل هذه المشكلة.

492
00:32:14,640 --> 00:32:17,080
هناك العديد من الأشياء المختلفة التي

493
00:32:17,080 --> 00:32:19,490
شخص ما يمكن القيام به، وهناك العديد من الأطر هناك.

494
00:32:19,490 --> 00:32:23,300
الزاوي والعمود الفقري لا تروي القصة بأكملها.

495
00:32:23,300 --> 00:32:26,370
حظا سعيدا مع مشاريع النهائي الخاص بك، وشكرا جزيلا لك.

496
00:32:31,960 --> 00:32:35,000
[CS50.TV]