1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Семінари] [JavaScript Програмні каркаси: як і навіщо]

2
00:00:02,000 --> 00:00:04,000
[Кевін Schmid] [Гарвардський університет]

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
Ми збираємося почати з реалізації To-Do List.

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
, А потім кнопку Створити елемент, так що давайте спробуємо ввести новий TODO до цього списку.

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
Як ви можете бачити тут, тут наш маленький заголовок Todos.

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
а потім я хочу, щоб витягнути To-Do List.

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
тому я дав йому ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Ось як я йду, щоб отримати елемент.

75
00:04:18,399 --> 00:04:23,880
Це мій аргумент цієї функції, щоб вказати, які ID отримати.

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
Я отримую цей елемент по ID знову,

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
Я можу знову отримає доступ до Todos DIV, внутрішній 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
Я в основному Почніть отримувати TODO з текстового поля.

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
як якщо б я хотів змінити пріоритети пунктів або виключати пункти.

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
Я в основному використовують це, щоб зберігати чи деталі на To-Do List

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
А потім я перемальовування To-Do List.

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
для аналогічних частин інформації я можу об'єднати їх в об'єкт 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 властивості, тому ми повинні TODO,

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
цього списку завдань, тому цей вид має сенс, оскільки

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
як я збираюся представляти To-Do List з цією моделлю.

260
00:16:35,530 --> 00:16:39,130
І зауважте, я відповідаю як розробник JavaScript

261
00:16:39,130 --> 00:16:42,890
для зберігання HTML і JavaScript, що у мене в синхронізації.

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-повтор.

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
Це нг-модель робить саме це.

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
і ми могли б зробити це і раніше, але є й інші речі, як цей НГ-моделі,

320
00:20:43,410 --> 00:20:47,020
і помітити це нг-повтор.

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
У нас є уль тегів,

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
>> Тут я визначив To-Do моделі,

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
кожен TODO в нашому списку, а потім роздрукувати його тут

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
Це пов'язано з TODO ми виявили раніше.

398
00:25:50,550 --> 00:25:54,940
Тепер кожен TODO є відображуваним або відображається

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
Як ви думаєте, це тег, імяТега: Лі?

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
Я не друкує, що уль тег, який начебто говорять, що я збираюся надрукувати всі елементи.

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
спосіб зробити одним з тих Тодос

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
цього методу ініціалізації буде викликаний, коли ми спочатку створюємо цю To-Do List.

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
це схоже на метод айсНЬет ми бачили раніше-

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
І тепер кожен TODO, що я створюю за допомогою цього отримаєте, що функціональні можливості, які ми бачили раніше.

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
І тоді я дзвоню надають на цю айсНЬет.

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]