1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Семинар] [Javascript, рамки: Защо и как]

2
00:00:02,000 --> 00:00:04,000
[Kevin Schmid] [Harvard University]

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
и след това нов бутон позиция, така че нека се опитаме да въведете нова 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
[Student недоловим отговор]

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
Той предупреждава ме изпълни, а след това имам две задачи в ръка.

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
И сега аз съм се елемент от ID, така че имам нужда от ID на това текстово поле,

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
този делител на страницата, чието 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
Аз съм се, че елемент от 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 вътрешността че 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
и това е Ith елемент от моята 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
Great.

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
основно, ако въведете 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
Аз съм имал да pretty минимални промени в този кодекс,

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 Todo тук

178
00:11:25,000 --> 00:11:30,220
е пълна, и ние сме различно поведение в тези две обстоятелства.

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
Забележете, ние имаме тези две глобални масиви.

194
00:12:18,700 --> 00:12:23,550
Ако това е C, и имахме две масиви, вид, представени

195
00:12:23,550 --> 00:12:25,800
данни, че е нещо, свързани по някакъв начин

196
00:12:25,800 --> 00:12:30,140
какво ще използвате в C да се съчетаят тези две полета

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
[Student недоловим отговор]

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
Едно нещо, което мога да направя с този код, за да се избегне наличието на тези две различни масиви

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
и забележиш, че има две свойства, така че ние имаме 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
на тази Todo, така този вид има смисъл, защото

222
00:13:58,750 --> 00:14:01,660
всеки елемент има следните характерни свойства за него.

223
00:14:01,660 --> 00:14:05,650
Той има Todo, и тя е, дали е пълна или не.

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 и 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-клик и 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
и забележите това нг-повторение.

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
Това е списък със задачи кодирани в рамка наречена Backbone.

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
Backbone вид има тази идея, или се основава на идеята,

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, и Backbone ни дава този слой

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
Backbone ми позволява да се определят вече на разстояние бухалката

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
Това е моят начин да кажа, че Backbone

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
Тук е Backbone гледка.

386
00:25:05,900 --> 00:25:08,890
Другото нещо, което Backbone казва, е, че

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 се Показвани или 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
Какво мислиш, че това е име на маркер, име на маркер: 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
Аз не съм за печат, които ул. маркер, който е нещо като да кажеш, че отивам да отпечатате всички елементи.

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
Отивам да се създаде нов обект със задачи, и забележите, аз съм всъщност обадите

447
00:29:07,430 --> 00:29:13,080
този нов метод със задачи, така че това е предвидено в Backbone,

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
и може да откриете, че Backbone или дори ъглови или всяка друга рамка

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
[Student недоловим въпрос]

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
И тогава на три рамкови кодове са просто също скрипт тагове.

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
Cool.

490
00:32:09,500 --> 00:32:11,730
>> Това са два различни подхода.

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
Ъглови и Backbone не разкажа цялата история.

495
00:32:23,300 --> 00:32:26,370
Успех с окончателните проекти, и много ви благодаря.

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