1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [סמינר] [מסגרות JavaScript: מדוע וכיצד]

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
>> היי, כולם. ברוכים הבאים לסמינר JavaScript המסגרות.

5
00:00:10,630 --> 00:00:14,910
השם שלי הוא קווין, והיום אני הולך לדבר על מסגרות JavaScript,

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
>> לפני שאני עושה את זה, אני מוכן לספק קצת רקע ב-JavaScript,

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
זה די מצחיק. אנחנו צריכים ליישם את רשימת המטלות ב-JavaScript.

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
אנחנו הולכים לקוד JavaScript ולקבל את רשימת מטלות לעבודה.

17
00:00:51,930 --> 00:00:54,370
ואז אנחנו הולכים לשפר את העיצוב בלי להשתמש במסגרת.

18
00:00:54,370 --> 00:00:57,190
אנחנו הולכים לדון בדברים שונים שאנחנו יכולים לעשות רק עם JavaScript לבד

19
00:00:57,190 --> 00:01:00,650
כדי להפוך אותנו לרשימת מטלות קצת יותר מתוכנן היטב.

20
00:01:00,650 --> 00:01:02,490
ואז אנחנו הולכים לזרוק כמה jQuery,

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
כפי שאתה יכול לראות, יש לי כותרת קטנה שאומרת Todo

28
00:01:19,300 --> 00:01:21,740
וקופסה קטנה שבו אני יכול להזין תיאור של ToDo

29
00:01:21,740 --> 00:01:26,990
ולאחר מכן על כפתור פריט חדש, אז בואו ננסה להיכנס לרשימת משימות לביצוע חדש לרשימה זו.

30
00:01:26,990 --> 00:01:31,000
תן סמינר JavaScript מסגרות,

31
00:01:31,000 --> 00:01:33,090
ואני לרמה של פריט חדש.

32
00:01:33,090 --> 00:01:35,730
אני מקבל התראת JavaScript זה שאומר לי ליישם.

33
00:01:35,730 --> 00:01:37,560
אנחנו חייבים ליישם את זה.

34
00:01:37,560 --> 00:01:41,490
בואו לבדוק את הקוד לזה, גם את ה-HTML וה-JavaScript.

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
אירוע הלחיצה על מקבל ירה, ופונקציה זו נקראת מקבלת.

48
00:02:29,940 --> 00:02:33,170
בואו נסתכל על פונקציה.

49
00:02:33,170 --> 00:02:36,260
כפי שניתן לראות, הנה קוד JavaScript שלי עד כה.

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
אני חייב להוסיף לרשימת משימות לביצוע, כי מבנה נתונים הגלובלי,

56
00:02:58,790 --> 00:03:01,860
ולאחר מכן אני רוצה להסב את רשימת המטלות.

57
00:03:01,860 --> 00:03:06,360
שום דבר מהודר מדי עדיין, אבל JavaScript עשוי להיות לא מכיר,

58
00:03:06,360 --> 00:03:12,370
אז אני הולך ללכת לאט ולבדוק את היסודות של JavaScript בדרך זו.

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
כיצד אני יכול למיין את הגישה שטקסט באמצעות JavaScript?

63
00:03:27,620 --> 00:03:32,500
זכור כי JavaScript, אחת מתכונות היסוד שלה היא שהיא נותנת לנו

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
הדרך בה אנו עושים את זה עם העצמות חשופות JavaScript

67
00:03:43,430 --> 00:03:51,360
הוא למעשה אנו יכולים להשתמש בפונקציה שנקראת ב-JavaScript 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
ועכשיו אני מקבל את אלמנט לפי תעודת זהות, ולכן אני צריך את תעודת זהות של אותה תיבת טקסט,

73
00:04:11,580 --> 00:04:15,860
אז נתתי לו new_todo_description מזהה.

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
>> כפי שהיינו עושה את זה ב-JavaScript, ואל תדאג אם אתה לא מכיר את זה,

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
זה נהדר, כי עכשיו יש לי הוסיף אותו לJavaScript

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
מחיצה זו של דפו הוא מזהה 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 הפנימי של שdiv todos הוא ברור לחלוטין,

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
אנחנו יכולים למעשה לקבל את אורכו של מערך ב-JavaScript שימוש במאפיין האורך.

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
וזה אלמנט ה-i של מערך 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
זה סוג של מבוא בסיסי ל- JavaScript.

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
ולאחר מכן השתמשנו בJavaScript כדי להביא ToDo שמתיבת הטקסט.

138
00:08:49,210 --> 00:08:52,830
אנחנו מאוחסנים שבתוך מערך JavaScript, שהוא בעצם כמו

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
רוצה אם אני רוצה reprioritize את הפריטים או למחוק פריטים.

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
בעיקרון אם אני נכנסתי למשימות ואני לוחץ כפתור לעבור את זה

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
>> בעיקרון לכל משימות שבמערך 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
אנחנו בעצם בודקים אם הפריט מתאים למשימות ith כאן

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
>> בדיוק, כדי שנוכל להשתמש בסוג כלשהו של struct,

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
לחלקים דומים של מידע הוא שאני יכול לשלב אותם לתוך אובייקט JavaScript.

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
ומה שעשיתי הוא, וזה רק תחביר JavaScript לסוג של

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
אנחנו משתמשים באובייקטים של JavaScript.

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 [i]. מלא

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
שמTodo, כך מסוג זה הגיוני כי

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
האם יש משהו שאנחנו יכולים לעשות יותר מכאן במונחים של JavaScript?

229
00:14:27,130 --> 00:14:31,810
הודעה רוצה שהקוד הזה ממש כאן

230
00:14:31,810 --> 00:14:34,760
מקבל את ה-HTML הפנימי של div

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
הוא הייתי יכול להשתמש בספרייה כמו jQuery.

236
00:14:58,480 --> 00:15:02,710
>> בואו לבדוק את הסמינר 2,

237
00:15:02,710 --> 00:15:05,880
וזה אותו הקוד, אבל עושה את זה עם jQuery.

238
00:15:05,880 --> 00:15:08,790
אתה לא יכול להיות מוכר מדי עם jQuery,

239
00:15:08,790 --> 00:15:11,510
אבל רק יודע שjQuery היא סוג של ספרייה לJavaScript

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
אני יכול להשתמש בהרבה יותר נקי בדרך jQuery,

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
אז התחלנו עם יישום JavaScript פשוט גלם.

248
00:15:42,010 --> 00:15:45,370
אנחנו הוספנו תכונות חדשות, והראו כיצד אנו יכולים לשפר אותו עם

249
00:15:45,370 --> 00:15:49,090
בדיוק מה שיש לנו ב-JavaScript.

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
הרבה הדברים שאנחנו רוצים לצאת מJavaScript נפוצים מאוד,

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
ושים לב אני אחראי כמפתח JavaScript

261
00:16:39,130 --> 00:16:42,890
לשמירה על ה-HTML וג'אווה סקריפט שיש לי בסינכרון.

262
00:16:42,890 --> 00:16:48,040
שום דבר לא נעשה באופן אוטומטי, כי ייצוג JavaScript

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
ולאחר מכן את המודל, אשר במקרה זה הוא מערך JavaScript זה.

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 ו-JavaScript שלנו הייצוג של משהו

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
מJavaScript איך אנחנו שומרים על זה בסינכרון?

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
למשתנה בתוך קוד JavaScript זוויתי.

303
00:19:35,080 --> 00:19:37,030
ng-מודל זה עושה בדיוק את זה.

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
בתוך קוד JavaScript.

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
בתוך JavaScript הוא נשמר בסנכרון עם ה-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
אבל אני תמיד אני טיוח שהרשימה פנימי של קוד JavaScript?

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
וזה מאפשר לנו לשמור על JavaScript ו-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
אבל קובץ JS שלנו הוא קצת שונה.

353
00:22:55,410 --> 00:23:00,360
יש סוג עמוד השדרה של הרעיון הזה, או בונה על הרעיון

354
00:23:00,360 --> 00:23:04,750
שהרבה ממה שאנחנו עושים עם, נניח, JavaScript הפרויקטים שלנו

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
ולעתים קרובות, כאשר אנחנו תכנות יישומי JavaScript

359
00:23:20,700 --> 00:23:25,340
אנחנו נטפל במייצגים את הרעיון שיש אוסף של חברים

360
00:23:25,340 --> 00:23:29,500
איכשהו ב-JavaScript, וחוט שהדרה נותנת לנו שכבה זו

361
00:23:29,500 --> 00:23:33,040
בחלק העליון של המערכים הקיימים של JavaScript ואובייקטים

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
גלום ב-JavaScript, ועכשיו אין לי באופן מפורש

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: Li?

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
>> לכל ToDo אירוע אחד זה.

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
בגלל שיש לנו את היכולת לעבד ToDo אחד,

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
>> האם יש למישהו שאלות על מסגרות JavaScript?

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
רוב מסגרות JavaScript הן בעצם רק קבצי 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
לספריית JavaScript מסוימת נגישה בחלק 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]