1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Семинар: jQuery]

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, Универзитетот Харвард]

3
00:00:04,790 --> 00:00:08,000
[Ова е CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Ако сте по должината на вашиот дом, вие всушност може да пристапам до мојата слајдови онлајн

5
00:00:10,640 --> 00:00:13,310
со одење на овој линк.

6
00:00:13,310 --> 00:00:18,650
Тоа е TjjRWj, на bit.ly.

7
00:00:18,650 --> 00:00:20,700
Можете исто така да само одете на URL-то директно,

8
00:00:20,700 --> 00:00:27,300
кој е cloud.cs50.net / ~ vshekhawat, што е мое име,

9
00:00:27,300 --> 00:00:32,409
и jQuery.

10
00:00:32,409 --> 00:00:34,920
Силно ве охрабруваме да ги следат заедно ако гледате дома,

11
00:00:34,920 --> 00:00:40,650
и ако си тука, исто така, затоа што ова е прилично интерактивна презентација.

12
00:00:40,650 --> 00:00:43,160
>> Па денес јас ќе одам да се зборува за jQuery, и на првото прашање е,

13
00:00:43,160 --> 00:00:45,300
она што е jQuery?

14
00:00:45,300 --> 00:00:47,090
Оваа година, знам дека вие момци не се опфатени вклучите Javascript-

15
00:00:47,090 --> 00:00:51,080
во колку детално што ја имаме во изминатите години.

16
00:00:51,080 --> 00:00:53,150
JavaScript е, прв од сите, само клиент-страна јазик

17
00:00:53,150 --> 00:00:58,390
кои ги користите да се кандидира скрипти и кодот на машина секој корисник.

18
00:00:58,390 --> 00:01:00,660
Па имате серверот која обезбедува веб страници на луѓето,

19
00:01:00,660 --> 00:01:02,600
но можеби ќе сакате да направите нешто на нивната машина,

20
00:01:02,600 --> 00:01:08,060
побара нивната машина да испрати барања до вашиот сервер на секои 30 секунди или нешто слично.

21
00:01:08,060 --> 00:01:10,420
Можете да го направите тоа користејќи JavaScript.

22
00:01:10,420 --> 00:01:13,190
JQuery само обезбедува поголема функционалност на врвот на вклучите Javascript-

23
00:01:13,190 --> 00:01:15,680
која го прави дополнителни работи за вас.

24
00:01:15,680 --> 00:01:17,710
Ако се погледне на содржината на врвот,

25
00:01:17,710 --> 00:01:21,410
кој ги опишува некои од работите кои сте во можност да го стори.

26
00:01:21,410 --> 00:01:23,500
Значи во целост, тоа беше формирана во јануари 2006 година.

27
00:01:23,500 --> 00:01:26,560
Тоа беше прв зачнати од во август 2005 година.

28
00:01:26,560 --> 00:01:31,370
Тоа е околу за неколку години, и тоа е навистина дел од новиот Веб 2.0 движење

29
00:01:31,370 --> 00:01:34,330
кој е направен на интернет толку сјајна.

30
00:01:34,330 --> 00:01:37,630
Тоа е најшироко користени JavaScript библиотека.

31
00:01:37,630 --> 00:01:41,450
Над 19.600.000 веб-сајтови го користат, како и употреба е уште поголем

32
00:01:41,450 --> 00:01:45,640
според builtwith.com, која, очигледно, во текот на минатата година,

33
00:01:45,640 --> 00:01:49,710
има само постојано се зголемуваат и прилично линеарно.

34
00:01:49,710 --> 00:01:52,870
Меѓу првите 10 милиони сајтови, има уште -

35
00:01:52,870 --> 00:01:55,180
околу 40% од нив се во моментов го користите.

36
00:01:55,180 --> 00:01:58,540
Фејсбук го користи, многу други веб-сајтови во моментов го користам.

37
00:01:58,540 --> 00:02:01,540
Можете да го погледнете овие статистики на свој, ако сакате.

38
00:02:01,540 --> 00:02:05,820
И може да се каже дека тоа е legit поради тоа што има основа и 13 членови на одборот,

39
00:02:05,820 --> 00:02:11,910
заедно со тим од 20 луѓе кои работат на тоа, на редовна основа.

40
00:02:11,910 --> 00:02:16,110
Така што е многу широко се користи, таа има. Org рачно, тоа е фенси,

41
00:02:16,110 --> 00:02:21,660
има спин-off за други нешта, па тоа е голема работа.

42
00:02:21,660 --> 00:02:24,510
>> Зошто треба да го користам? JQuery е многу лесен.

43
00:02:24,510 --> 00:02:27,270
Тоа значи дека тој не е голема датотека. Може да го симнете

44
00:02:27,270 --> 00:02:31,540
на minified датотека, која е без сите бел простор и коментари, и тоа е само 32 KB.

45
00:02:31,540 --> 00:02:33,600
Па тоа е лесно да се само фрли кон вашиот веб-страница

46
00:02:33,600 --> 00:02:35,910
и само за да започнете да го користите.

47
00:02:35,910 --> 00:02:39,630
Тоа е, исто така, многу ефикасно напишани, па затоа не заземаат многу -

48
00:02:39,630 --> 00:02:42,550
тоа не го успори вашиот сајт многу, кога ќе ја користите.

49
00:02:42,550 --> 00:02:45,770
Тоа ви овозможува да се спроведе работи што беа претходно неизводливо.

50
00:02:45,770 --> 00:02:47,790
Постојат некои аспекти на функционалност,

51
00:02:47,790 --> 00:02:51,780
како и создавање анимации, кои нормално ќе биде многу, многу тешко да се направи.

52
00:02:51,780 --> 00:02:54,300
Но во jQuery тие се всушност многу едноставна.

53
00:02:54,300 --> 00:02:57,040
А тука се и некои работи кои се досадни да се направи,

54
00:02:57,040 --> 00:02:59,610
можно во JavaScript, како и испраќање на POST побарување,

55
00:02:59,610 --> 00:03:02,190
но да се испрати барање до сервер, имаш да се напише

56
00:03:02,190 --> 00:03:04,320
пет или шест или седум линии на код.

57
00:03:04,320 --> 00:03:07,200
Сега можеш само да го направи тоа во една линија од код, во еден единствен повик на функција.

58
00:03:07,200 --> 00:03:11,790
Што навистина го поедноставува многу од работите што ќе правиш.

59
00:03:11,790 --> 00:03:15,950
И сите кул деца го користат тоа. Со тоа, јас мене значи.

60
00:03:15,950 --> 00:03:19,270
Во мојот последен проект минатата година, што е news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
што е за радио станица, Јас создаде овој блог

62
00:03:22,530 --> 00:03:29,750
кој е домаќин на сите покажува дека ние го направивме и на MP3 датотеки за нив.

63
00:03:29,750 --> 00:03:32,070
Можете да пребарувате низ минатото емисии,

64
00:03:32,070 --> 00:03:34,130
и тоа е направено со користење на веб. Можете да му кажете

65
00:03:34,130 --> 00:03:37,340
затоа што на сите овие анимации, во суштина.

66
00:03:37,340 --> 00:03:42,360
Значи, ако имате - ако сте создавање на нов пост,

67
00:03:42,360 --> 00:03:45,980
ќе видите овие мали slideDowns; тоа е направено со користење на веб.

68
00:03:45,980 --> 00:03:49,140
И ова бледеат - па тој вид на работи е направено со користење на веб,

69
00:03:49,140 --> 00:03:52,720
и вие не мора постојано да ја превчитате страница за да отидете на страницата.

70
00:03:52,720 --> 00:03:57,220
Уште една кул работа која е направена со користење jQuery е оваа презентација.

71
00:03:57,220 --> 00:03:59,700
Јас сум со користење на овој софтвер со отворен код нешто што се нарекува scrolldeck,

72
00:03:59,700 --> 00:04:03,250
што некој напишал на врвот на jQuery.

73
00:04:03,250 --> 00:04:04,870
Ако навистина се погледне на извор, можете да видите дека

74
00:04:04,870 --> 00:04:07,830
тие се со користење на овој знакот за долар, долар знаци

75
00:04:07,830 --> 00:04:12,110
се користат во jQuery да означува дека некоја функција е jQuery функцијата.

76
00:04:12,110 --> 00:04:15,020
Па тие се дефинирање на омотот на врвот на jQuery

77
00:04:15,020 --> 00:04:18,570
кој ви овозможува да се направи презентација вака,

78
00:04:18,570 --> 00:04:21,200
и можете да видите дека тука тие се вклучувајќи го и оригиналот jQuery датотека,

79
00:04:21,200 --> 00:04:24,120
што е она што ќе треба да се вклучи ако сакате да го користите jQuery

80
00:04:24,120 --> 00:04:30,450
во свој веб-сајтови.

81
00:04:30,450 --> 00:04:32,790
>> Допирање на тоа, како да го инсталирате?

82
00:04:32,790 --> 00:04:36,150
Вие само може да оди на jQuery.com и да ја преземете датотеката,

83
00:04:36,150 --> 00:04:38,320
додадете го во веб директориум и се тоа.

84
00:04:38,320 --> 00:04:42,200
Па само на врвот, во главата таг на вашиот HTML датотека

85
00:04:42,200 --> 00:04:45,400
од вашите главни HTML датотека, само треба таа линија на кодот

86
00:04:45,400 --> 00:04:49,490
со потребната верзија за која верзија на jQuery сте користите.

87
00:04:49,490 --> 00:04:51,340
Можете да го преземете со одење на jQuery.com,

88
00:04:51,340 --> 00:04:55,130
кликнете на "Download jQuery", и сте го зедов тоа. Тоа е тоа.

89
00:04:55,130 --> 00:04:58,880
И всушност, можеме да ги разгледаме во она што изгледа како.

90
00:04:58,880 --> 00:05:01,080
Ако кликнете на преземете тука, jQuery е ова.

91
00:05:01,080 --> 00:05:05,260
Тоа е само една голема вклучите Javascript-датотека што не сите магија работи за вас.

92
00:05:05,260 --> 00:05:09,270
Ова е minified верзија, која не е читлива на сите.

93
00:05:09,270 --> 00:05:13,180
Можете исто така да се погледне на развој верзија, која е читлив

94
00:05:13,180 --> 00:05:15,370
но сепак многу, многу долги.

95
00:05:15,370 --> 00:05:17,980
Тоа е многу нешта во таму.

96
00:05:17,980 --> 00:05:20,240
Можете исто така да водат кон домаќин верзија на Google на неа.

97
00:05:20,240 --> 00:05:23,820
Така што ќе ви овозможи да само се потпираат на Google да го обезбеди.

98
00:05:23,820 --> 00:05:29,310
Тие обезбедуваат секоја верзија на тоа, на располагање на сите времиња.

99
00:05:29,310 --> 00:05:31,530
Така што веројатно може да се потпира на Google да го домаќин за вас.

100
00:05:31,530 --> 00:05:33,270
Или може да водат до свој jQuery е најновата верзија.

101
00:05:33,270 --> 00:05:36,400
Тие имаат URL, кој е секогаш ажурирани да ја најновата верзија.

102
00:05:36,400 --> 00:05:40,850
Тоа е jQuery-најновите, и таму е еден проблем со тоа,

103
00:05:40,850 --> 00:05:44,350
а тоа е дека ако нема jQuery и некои од претходните функционалност

104
00:05:44,350 --> 00:05:47,250
тие се станува retrograded или запоставена,

105
00:05:47,250 --> 00:05:49,620
тоа не може - тоа може да почнат да не се поддржани повеќе.

106
00:05:49,620 --> 00:05:52,940
Па ако напишете веб користење на верзија 1.8.2,

107
00:05:52,940 --> 00:05:55,000
од страна на време верзија 2.7 излегува

108
00:05:55,000 --> 00:05:57,000
некои од функциите што го напиша не работат повеќе.

109
00:05:57,000 --> 00:05:59,930
Така, тоа е подобро само да ја преземете 32 kB датотека,

110
00:05:59,930 --> 00:06:04,100
го стави на вашата веб страница, и тоа ќе работи засекогаш.

111
00:06:04,100 --> 00:06:07,450
>> Одам да се оди напред и да почнам да зборувам за вистинските функционалност на jQuery.

112
00:06:07,450 --> 00:06:13,090
Првото нешто е селектори. Тоа е она што jQuery првично беше замислен да обезбеди.

113
00:06:13,090 --> 00:06:15,500
И можете да кликнете на документација да се погледне во

114
00:06:15,500 --> 00:06:18,690
на детална документација за селектори, ќе одам да се покриваат.

115
00:06:18,690 --> 00:06:24,120
Идејата зад селектори е тоа што можете да одберете HTML елементи на страница.

116
00:06:24,120 --> 00:06:28,790
Елементи на страница имаат лични карти и класи и други идентификување аспекти за нив.

117
00:06:28,790 --> 00:06:30,500
Постои, исто така - they're во различни наредби.

118
00:06:30,500 --> 00:06:32,570
Некои од тоа време тие се вгнездени внатре едни со други.

119
00:06:32,570 --> 00:06:38,120
JQuery ви овозможува да се изгради едноставни пребарувања, кои добивање на елементи од страната.

120
00:06:38,120 --> 00:06:41,890
Тогаш може да се манипулира со овие елементи со користење на веб функции,

121
00:06:41,890 --> 00:06:43,990
кој е манипулација дел ние ќе дојдеме до подоцна.

122
00:06:43,990 --> 00:06:46,040
Можете да ги менувате HTML, промена на CSS,

123
00:06:46,040 --> 00:06:50,500
исто така можете да анимира и додадете функции кои активирате на одредени настани.

124
00:06:50,500 --> 00:06:52,710
Така, на пример, ако нешто е кликнато, сакаш нешто да се случи,

125
00:06:52,710 --> 00:06:55,210
можете да го направите тоа со користење на веб, како и.

126
00:06:55,210 --> 00:06:57,380
И постојат голем број на начини да изберете елементи.

127
00:06:57,380 --> 00:07:00,310
Повеќето од нив јас никогаш не сум користел, но постојат основните оние,

128
00:07:00,310 --> 00:07:02,340
кои се прилично важни.

129
00:07:02,340 --> 00:07:05,750
Елементот селектор, на пример, ако сте само изборот ништо

130
00:07:05,750 --> 00:07:10,640
дека е една div - Јас всушност имаат кодот отворена за овој слајд презентација.

131
00:07:10,640 --> 00:07:13,450
Така, на пример, тука е првиот слајд.

132
00:07:13,450 --> 00:07:17,430
Тука имаме DIV. Ако ние всушност изберете сите Divs на страницата,

133
00:07:17,430 --> 00:07:22,300
тоа само ќе ни даде низа на сите Divs кои постојат во оваа датотека.

134
00:07:22,300 --> 00:07:27,040
На проект селектор ви овозможува да изберете нешто со даден проект.

135
00:07:27,040 --> 00:07:32,230
Значи, ако оваа, на пример, тоа нешто има проект "она"

136
00:07:32,230 --> 00:07:37,160
и ако ние го сторивме тоа со # она што наместо на некои проект,

137
00:07:37,160 --> 00:07:42,920
тоа само ќе се врати низа која има еден елемент, а тоа е дека елемент на страната.

138
00:07:42,920 --> 00:07:45,490
Ние, исто така, може да се комбинираат селектори на овој начин со тоа што

139
00:07:45,490 --> 00:07:48,260
само изберете работи со лични карти, кои се Divs.

140
00:07:48,260 --> 00:07:51,810
Па је. Само изберете Divs кои имаат тој проект.

141
00:07:51,810 --> 00:07:55,260
За класа само користење точка, тоа е истото како CSS.

142
00:07:55,260 --> 00:07:57,500
Потомок исто така, работи, па ако имате некоја класа

143
00:07:57,500 --> 00:08:00,170
и тоа вгнездени елементи во неа - така, на пример,

144
00:08:00,170 --> 00:08:03,260
има некои класа и таа има сидро таг да се поврзат со друга страница,

145
00:08:03,260 --> 00:08:08,510
можете да го користите оваа синтакса за добивање на линк.

146
00:08:08,510 --> 00:08:12,420
Можете исто така да изберете повеќе работи одеднаш, само да ги одвои со запирки,

147
00:08:12,420 --> 00:08:17,360
користите било селектор сакате, и ќе ги изберете сите нив одеднаш, во еден единствен низа.

148
00:08:17,360 --> 00:08:19,650
И потоа, тука е, исто така, не селектор, па можете да ги изберете сите Divs

149
00:08:19,650 --> 00:08:24,210
кои немаат некои специфични класа.

150
00:08:24,210 --> 00:08:28,790
И тоа е само корисен начин да се добие вовед во овој избор функционира.

151
00:08:28,790 --> 00:08:32,270
Ќе ви покажам некои конкретни примери кои во една секунда.

152
00:08:32,270 --> 00:08:35,480
>> Напредно селектори се - овие се само неколку примери.

153
00:08:35,480 --> 00:08:38,840
Постојат десетици од овие, но ако сакате да изберете сите на сликата тагови

154
00:08:38,840 --> 00:08:42,799
во рамките на некои елемент, тогаш само направи: сликата.

155
00:08:42,799 --> 00:08:45,340
Ако сакате да изберете дури елементи, на пример, ако постојат 20 од нив,

156
00:08:45,340 --> 00:08:48,290
сакате да изберете 0, 2, 4, 6 и така натаму,

157
00:08:48,290 --> 00:08:51,630
ќе го направите: дури, или исто така можете да направите: чудно.

158
00:08:51,630 --> 00:08:55,470
Овие се псевдо селектори, што значи дека тие всушност се пресмета

159
00:08:55,470 --> 00:09:00,960
секој друг елемент наместо само ќе и избирање на сите од нив.

160
00:09:00,960 --> 00:09:05,510
Можете исто така - секој елемент, исто така, може да има специфични атрибути.

161
00:09:05,510 --> 00:09:10,580
Така, на пример, класа = центарот е исто така атрибут.

162
00:09:10,580 --> 00:09:16,500
За ова сидро таг, href, хипертекст референца, е особина исто така.

163
00:09:16,500 --> 00:09:21,150
Така можете да изберете нешто што врски на одредена страница или само - тоа е навистина воопшто.

164
00:09:21,150 --> 00:09:25,410
Можете да изберете нешто со било кој атрибут што сакате.

165
00:09:25,410 --> 00:09:27,470
А потоа, исто така, атрибутот содржи.

166
00:09:27,470 --> 00:09:30,420
Ако, на пример, сакаше да изберете сите влезни елементи

167
00:09:30,420 --> 00:09:32,700
кои имаат зборот "помине" како име на нив,

168
00:09:32,700 --> 00:09:37,560
ако една страница има внесување текст блок

169
00:09:37,560 --> 00:09:41,050
што се вика "лозинка", дека ќе биде еден од начините можете да изберете тоа.

170
00:09:41,050 --> 00:09:43,020
И постојат многу повеќе. Можете да одите напред и се погледне на документација

171
00:09:43,020 --> 00:09:46,950
и да видиме конкретни примери за тоа како таа работи.

172
00:09:46,950 --> 00:09:48,840
>> Следното нешто е ДОМ манипулација.

173
00:09:48,840 --> 00:09:52,500
Откако ќе ги изберете елементи, ние ќе сакаат да всушност направи нешто со нив.

174
00:09:52,500 --> 00:09:55,500
Досега не сме гледаше дека на сите, но ако се погледне на документацијата,

175
00:09:55,500 --> 00:09:57,950
има навистина многу што можеме да направиме.

176
00:09:57,950 --> 00:10:02,900
Во овој момент, ние ќе треба да изберете елементи на оваа презентација

177
00:10:02,900 --> 00:10:04,890
и манипулира со нив користење jQuery.

178
00:10:04,890 --> 00:10:08,290
Бидејќи ова се спроведува со користење jQuery, имаме пристап до jQuery библиотеката,

179
00:10:08,290 --> 00:10:13,580
и можеме да ги користат овие функции во рамките на овој код.

180
00:10:13,580 --> 00:10:16,200
Една корисна работа што вие не смеете да знаете за е конзола.

181
00:10:16,200 --> 00:10:19,340
И Google Chrome е она што јас сум користење. Можете да притиснете Alt команда Ј

182
00:10:19,340 --> 00:10:21,720
или alt контрола J за да ја отвори конзола.

183
00:10:21,720 --> 00:10:26,130
Во Firefox Мислам дека е команда промена K или контрола промена К

184
00:10:26,130 --> 00:10:28,880
Во Safari треба да се оди промена на некои поставки.

185
00:10:28,880 --> 00:10:35,460
Има еден линк ако сакате да го направи тоа, но јас препорачувам добивање Chrome или Firefox.

186
00:10:35,460 --> 00:10:37,750
Па ајде да се отвори на конзолата, тоа е овде долу.

187
00:10:37,750 --> 00:10:41,170
Тоа ви овозможува да само во основа направи нешто што сакате.

188
00:10:41,170 --> 00:10:45,100
Па едноставно можете да напишете во создаде променлива наречена X,

189
00:10:45,100 --> 00:10:49,200
x = 5, ајде да видиме што x + 2 е.

190
00:10:49,200 --> 00:10:57,670
Можете дури и да се направи нешто како CS + Ајде да видиме, x + 45, што ќе биде CS50.

191
00:10:57,670 --> 00:11:00,530
Можете само да направите некои типични го вклучите Javascript нешта.

192
00:11:00,530 --> 00:11:02,730
Но вие исто така може да го направи jQuery во тука.

193
00:11:02,730 --> 00:11:06,200
>> Па ајде да се погледне на овој првиот аспект тука.

194
00:11:06,200 --> 00:11:09,500
Ние ќе треба да се создаде променлива наречена HTML, која е стринг.

195
00:11:09,500 --> 00:11:15,890
Таа има став таг во тоа, дека се вика некои нови текстот.

196
00:11:15,890 --> 00:11:19,420
Значи имаме овој HTML, тоа е некој нов текст, во став тагови.

197
00:11:19,420 --> 00:11:21,800
Сега ние всушност сакате да го додадете во страната.

198
00:11:21,800 --> 00:11:28,310
Јас го постави, така што на HTML за овој став, овој наслов тука, е додавај проект.

199
00:11:28,310 --> 00:11:32,320
Ако ние избираме додавај проект, а потоа додадете на тоа

200
00:11:32,320 --> 00:11:34,560
HTML кодот променлива јас само замислен,

201
00:11:34,560 --> 00:11:40,370
тоа ќе додадете дека HTML на крајот, веднаш по овој став таг.

202
00:11:40,370 --> 00:11:43,730
Значи, ако ние го правам тоа - ние избрани овој став,

203
00:11:43,730 --> 00:11:47,590
и ние го нарече додавај функција со HTML променлива Јас само додаде,

204
00:11:47,590 --> 00:11:50,960
тоа ќе се додаде дека новиот текст право таму на страницата.

205
00:11:50,960 --> 00:11:54,970
Ние, исто така може да ставете пред, што значи дека ќе одат пред, на почетокот на тој елемент.

206
00:11:54,970 --> 00:11:58,290
Па има некаков нов текст на почетокот и потоа.

207
00:11:58,290 --> 00:12:01,660
Јас може да оди напред и освежување да се ослободи од овој материјал Јас сум само направено.

208
00:12:01,660 --> 00:12:05,280
Но тоа е пример за тоа како можете да го користите ставете пред и додаваат методи

209
00:12:05,280 --> 00:12:08,910
да се манипулира работи на страница, да додадете некои HTML.

210
00:12:08,910 --> 00:12:11,080
>> Исто така можете да ја промените часови.

211
00:12:11,080 --> 00:12:14,970
Назад во овој стил датотека, Јас направивме ова за победа класа

212
00:12:14,970 --> 00:12:19,990
кој има текст во боја црвена, некои боја на позадината, и текст сенка.

213
00:12:19,990 --> 00:12:23,810
Тоа изгледа грозен, но можам всушност -

214
00:12:23,810 --> 00:12:26,410
овој став одговара на класа проект.

215
00:12:26,410 --> 00:12:29,860
За да можам да додадете класа за победа.

216
00:12:29,860 --> 00:12:31,870
Јас може да се изврши ова во конзола,

217
00:12:31,870 --> 00:12:35,480
и дека ќе додадам дека класа, а сега тоа изгледа грозен, како што се очекуваше.

218
00:12:35,480 --> 00:12:39,680
На CSS автоматски станува применува на класи кои вас -

219
00:12:39,680 --> 00:12:42,680
ако има CSS за една класа, тој автоматски добива применува

220
00:12:42,680 --> 00:12:44,680
ако го промените класа на елементот.

221
00:12:44,680 --> 00:12:49,230
Тогаш ние само може да го отстрани користење отстрани класа.

222
00:12:49,230 --> 00:12:53,690
Значи, ако имате некои претходно дефинирани класи како црвена или обележан,

223
00:12:53,690 --> 00:12:55,990
и тогаш ќе сакате да се применуваат овие да се елементи,

224
00:12:55,990 --> 00:12:58,230
вие не мора да го направите сите CSS стил во секое време.

225
00:12:58,230 --> 00:13:01,510
Вие само може да додадете класа на елемент, и тогаш тоа автоматски ќе стане -

226
00:13:01,510 --> 00:13:05,580
тој автоматски ќе изгледа соодветно за таа класа.

227
00:13:05,580 --> 00:13:07,900
Ние, исто така може да се отстранат нешта, па ќе одам да изберете сите Divs

228
00:13:07,900 --> 00:13:10,830
на оваа страница и отстранете ги.

229
00:13:10,830 --> 00:13:13,990
Што е тоа што ќе изгледа?

230
00:13:13,990 --> 00:13:16,170
Тоа се случува да изгледа како ништо, па таму е всушност ништо лево.

231
00:13:16,170 --> 00:13:18,170
Мојата презентација е нема.

232
00:13:18,170 --> 00:13:21,290
Јас може да се освежи и да се вратиме, за среќа,

233
00:13:21,290 --> 00:13:24,420
бидејќи тоа е само трчање еднаш,

234
00:13:24,420 --> 00:13:29,460
но тоа е пример за отстранување, ако сакате целосно да ги уништи елемент исклучите страница.

235
00:13:29,460 --> 00:13:33,180
>> Можете, исто така, може да запише, а јас ќе одам да изберете сите пасус на страната

236
00:13:33,180 --> 00:13:36,850
и да си одат во нив и да го замени она што текстот што ги имаат во нив

237
00:13:36,850 --> 00:13:39,690
само со зборот "тестирање."

238
00:13:39,690 --> 00:13:46,520
Ако го направите ова, ќе го замени секој став на страницата со ова тестирање.

239
00:13:46,520 --> 00:13:49,150
Да. Тие се сите заменети со тестирање.

240
00:13:49,150 --> 00:13:53,270
Па тоа е пример за пристапување на текст и пребрише тоа.

241
00:13:53,270 --> 00:13:57,490
Можете исто така да добијат информации, и ова е навистина кул за влез кутии.

242
00:13:57,490 --> 00:14:00,470
Ако имате влез кутија што луѓето се пишува нешто во,

243
00:14:00,470 --> 00:14:03,880
луѓето се пишува нешто во неа,

244
00:14:03,880 --> 00:14:09,030
тука ние изберете влез, секој влез таг со еден вид на текст.

245
00:14:09,030 --> 00:14:13,800
Во овој случај, има само еден влез кутија во целата презентација,

246
00:14:13,800 --> 00:14:17,260
па ние само ќе го изберете првиот, а потоа ние го нарекуваме функција на val на неа.

247
00:14:17,260 --> 00:14:19,570
Кој се враќа на вредноста, и за влез кутија,

248
00:14:19,570 --> 00:14:24,330
вредноста е само она што се случува да биде во него.

249
00:14:24,330 --> 00:14:31,880
Значи, ако го правиме тоа, тоа само се враќа стрингот нешта.

250
00:14:31,880 --> 00:14:36,860
И ако ние ја нарекуваме, повторно по пишувањето повеќе работи се претвора во повеќе нешта.

251
00:14:36,860 --> 00:14:40,760
Тоа е еден одличен начин за пристап до елементите на влез кутија, а потоа проверете,

252
00:14:40,760 --> 00:14:45,060
е ова валидна е-мејл адреса, дали е ова валиден датум, на пример.

253
00:14:45,060 --> 00:14:49,600
Можете само да се потсетите работи веднаш како што луѓето го пишувате,

254
00:14:49,600 --> 00:14:54,830
и потоа проверете дали тоа е валиден, го испрати назад до серверот, направи нешто што сакате со него.

255
00:14:54,830 --> 00:14:57,720
А тоа е како да пристапите она што е внатре оние кутии.

256
00:14:57,720 --> 00:15:00,090
>> Исто така можете да менувате CSS директно, па наместо за додавање на

257
00:15:00,090 --> 00:15:02,510
класа која има некои претходно дефинирани својства,

258
00:15:02,510 --> 00:15:08,120
можете само да додадете она што CSS дека сакате да ништо.

259
00:15:08,120 --> 00:15:10,350
Па ајде избери тело, која е целата презентација,

260
00:15:10,350 --> 00:15:14,370
и бојата е имотот што го дефинира она што боите на текстот е.

261
00:15:14,370 --> 00:15:19,420
Ако ние го промени на црвено, сите на текстот во страницата ќе се сврти кон црвено.

262
00:15:19,420 --> 00:15:26,310
Можеме да направиме нешто како боја на позадина сина,

263
00:15:26,310 --> 00:15:30,680
таму ќе одиме, тоа е убава.

264
00:15:30,680 --> 00:15:33,840
Можете да направите нешто што сакате со ова.

265
00:15:33,840 --> 00:15:39,250
Користење на имотот CSS, можете навистина да ги менувате како нешто изгледа во секое време.

266
00:15:39,250 --> 00:15:41,630
Следното нешто е ефекти.

267
00:15:41,630 --> 00:15:45,710
Ефекти се во основа истото што се промената на CSS,

268
00:15:45,710 --> 00:15:48,870
но тие всушност се обезбедат некои дополнителни анимација на него.

269
00:15:48,870 --> 00:15:53,380
Така, наместо на само покажува или крие нешто или промена на бојата,

270
00:15:53,380 --> 00:15:56,130
вие всушност може да направи анимиран.

271
00:15:56,130 --> 00:16:00,760
Тука е документација, ако сакате да ги погледне на обемна документација за тоа.

272
00:16:00,760 --> 00:16:04,760
Но јас ќе одам да се покријат главните оние.

273
00:16:04,760 --> 00:16:12,030
Постојат шоуто и се кријат својства.

274
00:16:12,030 --> 00:16:14,510
Прикажи / скриј проект всушност, соодветствува со целата оваа кутија,

275
00:16:14,510 --> 00:16:18,190
па ако јас го сокрие, тоа само ќе исчезне.

276
00:16:18,190 --> 00:16:24,210
И јас да ја прикажете повторно ако сакам да го направите да се врати.

277
00:16:24,210 --> 00:16:26,340
И тоа е назад. Тоа всушност не исчезне,

278
00:16:26,340 --> 00:16:30,670
Јас всушност не го отстраните од страница, јас само го поставите имотот CSS на видливост до скриени

279
00:16:30,670 --> 00:16:34,030
па не можете да го видите веќе.

280
00:16:34,030 --> 00:16:39,250
Исто така има слајд нагоре и слајд надолу; која ви овозможува да имаат овој ефект.

281
00:16:39,250 --> 00:16:47,050
Тоа слајдови до исчезне, и по таа исчезнува

282
00:16:47,050 --> 00:16:53,210
можете да го слајд надолу да се направи тоа се врати. И сега е назад.

283
00:16:53,210 --> 00:16:57,650
Тука е и оваа бледнеат ефект, кој - бледнеат проект одговара на ова поле.

284
00:16:57,650 --> 00:17:01,200
Ако ја снема, тогаш тоа полека ќе исчезне.

285
00:17:01,200 --> 00:17:04,490
Јас, исто така може да го бледнеат, и тоа ќе се врати.

286
00:17:04,490 --> 00:17:08,930
Исто така можете да го направите бледнеат да, која е специфична за бледнеат функција.

287
00:17:08,930 --> 00:17:12,589
Можете да го згаснат на било која специфична непроѕирноста што сакате.

288
00:17:12,589 --> 00:17:16,869
Па ако го снема полека да 0,5, тоа ќе стане половина видливи.

289
00:17:16,869 --> 00:17:22,630
Можам да се направи тоа оди во 0,1, и назад до 1 да се направи целосно видлива повторно.

290
00:17:22,630 --> 00:17:24,760
Тоа е само уште една анимација која можете да направите.

291
00:17:24,760 --> 00:17:26,750
>> Постојат, исто така, на вклучите ефекти.

292
00:17:26,750 --> 00:17:33,410
Па ќе одам да го изберете вклучите проект, што одговара на ова поле,

293
00:17:33,410 --> 00:17:38,970
и врз таа div можете да се јавите вклучите, ако е видливо тоа ќе стане невидлива,

294
00:17:38,970 --> 00:17:42,320
ако тоа е невидлив тоа ќе стане видлива повторно.

295
00:17:42,320 --> 00:17:44,440
Па јас само се нарекува овој вклучите функцијата двапати; првата беше

296
00:17:44,440 --> 00:17:48,380
истото како кријат, на вториот повик беше ист нешто како шоу.

297
00:17:48,380 --> 00:17:53,510
И исто така можете да го направите ова со бледеат вклучите,

298
00:17:53,510 --> 00:17:55,730
кој го прави истото, освен тоа всушност згаснува.

299
00:17:55,730 --> 00:17:59,410
И истото со слајд смениш.

300
00:17:59,410 --> 00:18:01,460
Постојат оковани ефекти, како и, што значи

301
00:18:01,460 --> 00:18:05,520
Ако одберете елемент и само се јавите еден куп на анимација методи на неа,

302
00:18:05,520 --> 00:18:07,400
ако ти сакаше тоа да ги снема, а потоа слајд надолу,

303
00:18:07,400 --> 00:18:11,040
а потоа се кријат а потоа исчезнат во, тоа ќе ги направи по ред.

304
00:18:11,040 --> 00:18:24,920
Така исчезнаа, се вратија - за некоја причина, кријат не се случи.

305
00:18:24,920 --> 00:18:30,030
Ајде да го испробаш. Да, па тоа избледени надвор, а потоа се лизна далеку.

306
00:18:30,030 --> 00:18:32,230
И има многу повеќе. Можете да го користите живи функција

307
00:18:32,230 --> 00:18:35,370
да се создаде свој анимации, која е прилично комплексна,

308
00:18:35,370 --> 00:18:38,790
но тоа ви обезбедува со бесконечна разтегаемост.

309
00:18:38,790 --> 00:18:40,630
Можете да направите било каков вид на анимација го сакате.

310
00:18:40,630 --> 00:18:44,230
Исто така можете да го користите задача да задача до повеќекратни анимации во исто време.

311
00:18:44,230 --> 00:18:47,340
Значи, ако сакате нешто да лета низ страница,

312
00:18:47,340 --> 00:18:49,860
слајд од горниот десен агол на долниот лев, можете да го направите тоа,

313
00:18:49,860 --> 00:18:55,240
и само имаат еден куп на акции случува една по друга.

314
00:18:55,240 --> 00:18:57,490
>> Следното нешто што се случува да се зборува за е настани.

315
00:18:57,490 --> 00:19:02,090
Настани ви овозможи - досега ние само се пишување работи во конзола

316
00:19:02,090 --> 00:19:04,870
и тоа е еден начин да се направи ова се случи,

317
00:19:04,870 --> 00:19:08,020
но на вистински страница, вие нема да бидете во можност да

318
00:19:08,020 --> 00:19:10,020
направи на корисникот тип работи во конзола.

319
00:19:10,020 --> 00:19:12,050
Сакате работите да се случи автоматски.

320
00:19:12,050 --> 00:19:18,060
За тоа, ќе треба да користите настани што ја раздвижуваат на некои одредени настан се случува.

321
00:19:18,060 --> 00:19:21,340
Можете да проверите на документацијата за целосна детали.

322
00:19:21,340 --> 00:19:24,030
Дали ќе видиме. Ние сакаме да се скрие или прикаже кутија,

323
00:19:24,030 --> 00:19:29,340
но токму сега на ова копче не прави ништо, бидејќи јас не го спроведе уште.

324
00:19:29,340 --> 00:19:35,420
Одам да се оди на вистински HTML страница.

325
00:19:35,420 --> 00:19:38,560
Тука е слајд. Има div за слајд.

326
00:19:38,560 --> 00:19:41,230
Таа има класата на слајд.

327
00:19:41,230 --> 00:19:46,890
Тука е и текстот. Сега, постојат ова поле и кутија копче.

328
00:19:46,890 --> 00:19:52,900
Како би ние всушност го прават овој исчезне?

329
00:19:52,900 --> 00:19:58,250
Прво на сите, ајде да се напише функција која го прави на полето проект исчезне.

330
00:19:58,250 --> 00:20:01,820
Ова е синтакса за funtion, ајде да го наречеме hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Тоа не презема никакви аргументи, бидејќи нема аргументи да се преземат.

332
00:20:06,130 --> 00:20:08,950
Можеме да изберете кутија проект.

333
00:20:08,950 --> 00:20:15,020
Па со користење на jQuery изберете, може да изберете кутија проект,

334
00:20:15,020 --> 00:20:17,700
а потоа само да исчезне.

335
00:20:17,700 --> 00:20:20,690
Ајде да го прават тоа ги снема.

336
00:20:20,690 --> 00:20:27,390
Ако ние трчаше оваа функција во конкретната конзола,

337
00:20:27,390 --> 00:20:33,380
ние би можеле да се дефинираат оваа функција, можеме да го наречеме hideTheBox, и тоа функционира.

338
00:20:33,380 --> 00:20:36,650
Но ние сакаме тоа да се случи кога копчето е всушност е притиснато.

339
00:20:36,650 --> 00:20:40,950
Да го стори тоа, ние мора да ја користи некој настан.

340
00:20:40,950 --> 00:20:45,500
Да се ​​поврзе со настан кој за некои специфични копче или некоја акција се случува,

341
00:20:45,500 --> 00:20:50,040
ние мора да го изберете елемент дека настанот ќе активира -

342
00:20:50,040 --> 00:20:52,650
или дека ќе активира настан, жал.

343
00:20:52,650 --> 00:20:57,220
>> Значи прво на сите, ајде да изберете кутија копчето проект

344
00:20:57,220 --> 00:20:59,610
затоа што тоа е копчето, и сега, за тоа копче,

345
00:20:59,610 --> 00:21:02,750
ние сакаме да се создаде анимација кога е кликнато.

346
00:21:02,750 --> 00:21:05,040
Така што овој клик функција.

347
00:21:05,040 --> 00:21:08,470
Тоа ви овозможува да се поврзе друга функција на него.

348
00:21:08,470 --> 00:21:12,320
Оваа функција е потребно уште една функција како аргумент

349
00:21:12,320 --> 00:21:14,310
ние може да го положат во функција hideTheBox,

350
00:21:14,310 --> 00:21:20,950
и кога ова копче е кликнато, таа функција автоматски ќе изврши.

351
00:21:20,950 --> 00:21:24,850
Па ова ќе работи ако ние ја зачувате оваа, јас ќе се освежи,

352
00:21:24,850 --> 00:21:33,460
и - една секунда, Жал ми е.

353
00:21:33,460 --> 00:21:44,770
Дозволете ми да го надминете овој навистина брзо.

354
00:21:44,770 --> 00:21:50,680
Во ред. Таму ќе одиме. Па сега на кутија исчезнува кога ќе кликнете на копчето.

355
00:21:50,680 --> 00:21:55,470
Ние, исто така, да го промените ова само fadeToggle,

356
00:21:55,470 --> 00:22:00,020
промени тоа само за да се скрие или прикаже кутија,

357
00:22:00,020 --> 00:22:03,850
и ова исто така ќе работат премногу, ако се одмориме.

358
00:22:03,850 --> 00:22:08,550
Можеме да го сокрие, ние исто така може да го покаже, и дека ќе продолжат да работат.

359
00:22:08,550 --> 00:22:12,210
Друга работа е што можеме да направиме е, ние не, всушност треба да се дефинира овој hideTheBox функција

360
00:22:12,210 --> 00:22:15,050
пред да се јавите на клик функција.

361
00:22:15,050 --> 00:22:17,640
Така, наместо на дефинирање на функција и повикувајќи hideTheBox,

362
00:22:17,640 --> 00:22:20,310
ние сме само ќе го наречеме ако тоа нешто е кликнато.

363
00:22:20,310 --> 00:22:22,310
Значи можеме да го дефинираме тоа анонимно овде,

364
00:22:22,310 --> 00:22:25,070
што е карактеристика што го вклучите Javascript-има.

365
00:22:25,070 --> 00:22:29,720
Можете да дефинирате функција; нормално, би рекле функција hideTheBox

366
00:22:29,720 --> 00:22:34,490
со аргументи, но наместо тоа, ние само може да се каже функционира без аргументи,

367
00:22:34,490 --> 00:22:36,870
започне кадрава голема заграда да се дефинира функција,

368
00:22:36,870 --> 00:22:40,780
затвори таа голема заграда кадрава, а потоа само се дефинира функција во тука,

369
00:22:40,780 --> 00:22:45,130
во рамките на првата заграда и последните загради

370
00:22:45,130 --> 00:22:47,860
кои одговараат на аргументите на клик функција.

371
00:22:47,860 --> 00:22:53,320
Па ние сме поминува во оваа функција, ние може да ја копирате на оваа линија код токму тука,

372
00:22:53,320 --> 00:22:55,450
и дека ќе се направи иста работа.

373
00:22:55,450 --> 00:22:57,290
И сега ние не ја имаат оваа случаен fadeTheBox функција

374
00:22:57,290 --> 00:22:59,960
што седи околу за да нема некоја очигледна причина.

375
00:22:59,960 --> 00:23:02,070
Функцијата беше дефинирана анонимно, тоа не да има име.

376
00:23:02,070 --> 00:23:08,060
Тоа само ќе се изврши кога ќе кликнете на полето копче.

377
00:23:08,060 --> 00:23:12,180
Па освежувачки уште еднаш, уште еднаш, и ќе видите дека се уште работи.

378
00:23:12,180 --> 00:23:16,700
И тоа како ќе се создаде настани.

379
00:23:16,700 --> 00:23:19,190
>> Постојат голем број на различни настани кои можеме да го користиме.

380
00:23:19,190 --> 00:23:23,540
Одам да се вратиш назад со користење на конзола само да ви покаже како овие работи.

381
00:23:23,540 --> 00:23:28,210
На ИД за секој од овие одговараат на секое поле.

382
00:23:28,210 --> 00:23:33,020
Значи ова поле е клик проект, овој е клучен проект, и ова е глувчето проект.

383
00:23:33,020 --> 00:23:36,120
Уште една работа е дека постои оваа акција функција; наместо пишување го ова секој пат,

384
00:23:36,120 --> 00:23:41,610
Јас всушност отиде напред и дефинирани оваа акција функција овде долу.

385
00:23:41,610 --> 00:23:46,860
Тоа го прави истото како hideTheBox функција.

386
00:23:46,860 --> 00:23:51,340
Станува ова поле и или тоа згаснува или згаснува внатре

387
00:23:51,340 --> 00:23:54,110
И тоа е причината зошто ние сме во можност да го користам тука.

388
00:23:54,110 --> 00:24:00,350
Значи, ако ние кликнете на овој клик проект, ние сакаме да се направи кутија исчезне или се појавува.

389
00:24:00,350 --> 00:24:03,610
Тоа е истото како на копчето што го имавме во последниот слајд.

390
00:24:03,610 --> 00:24:07,450
Сега, по што ние го нарекуваме тоа, ние може да кликнете на овој и кутија ќе исчезне,

391
00:24:07,450 --> 00:24:10,160
потоа кликнете на неа повторно и кутија ќе се појавува.

392
00:24:10,160 --> 00:24:12,480
Тоа е прилично едноставна. Двоен клик прави истото,

393
00:24:12,480 --> 00:24:15,660
освен тоа бара двоен клик.

394
00:24:15,660 --> 00:24:19,030
Па ако кликнете на неа еднаш и кликнете на неа повторно ништо нема да се случи,

395
00:24:19,030 --> 00:24:21,140
но ако сте двојно кликнете брзо, тоа ќе исчезне.

396
00:24:21,140 --> 00:24:23,310
Ако сте двојно кликнете повторно, ќе се врати.

397
00:24:23,310 --> 00:24:25,250
Па тоа е прилично едноставна.

398
00:24:25,250 --> 00:24:31,170
Тастатура за внес е вид на чудни, јас не мислам дека тоа всушност се работи во овој пример

399
00:24:31,170 --> 00:24:37,670
бидејќи клучот надолу, нагоре и притискање на копче и други клучни активности

400
00:24:37,670 --> 00:24:47,190
активирате без разлика што елементот што го врзуваат за.

401
00:24:47,190 --> 00:24:51,410
На пример, дури и ако јас обврзани клучните надолу на телото или нешто друго во целост,

402
00:24:51,410 --> 00:24:55,950
тогаш тоа, сепак, ќе го активира без разлика - тоа не е специфична.

403
00:24:55,950 --> 00:25:00,190
Јас не мора да биде кликнување на ова и притиснете на копчето да се направи нешто исчезне.

404
00:25:00,190 --> 00:25:04,470
Тоа ќе биде активирана без оглед на она елемент Јас сум во моментов внатре

405
00:25:04,470 --> 00:25:06,880
Па овие не се всушност работат во овој пример

406
00:25:06,880 --> 00:25:13,180
поради тоа што не ме препозна како влегуваат влез во тастатура за внес DIV.

407
00:25:13,180 --> 00:25:15,740
>> Но, ако се погледне на глувчето акции,

408
00:25:15,740 --> 00:25:19,620
првиот е лебди, и што може да направи некои од овие користење на CSS.

409
00:25:19,620 --> 00:25:24,280
Ако користите CSS, можете да го создаде, така што ако ти лебдиш над нешто,

410
00:25:24,280 --> 00:25:28,940
тогаш нејзиниот стил промени.

411
00:25:28,940 --> 00:25:32,170
Но со користење на jQuery можете да ги менувате стилови на други работи, како и.

412
00:25:32,170 --> 00:25:37,120
Така, на пример, ние ќе треба да се јавите акција ако ние лебдат над овој div.

413
00:25:37,120 --> 00:25:39,660
Тоа значи дека ако ние лебди над неа, тогаш поле ќе исчезне.

414
00:25:39,660 --> 00:25:42,430
Ако ние се движат подалеку од него, кутијата ќе се појавува.

415
00:25:42,430 --> 00:25:45,090
Ако ние го нарекуваме овој и лебдиш над неа, кутијата се исчезне,

416
00:25:45,090 --> 00:25:47,050
и веднаш штом ќе се движат подалеку, тоа доаѓа назад.

417
00:25:47,050 --> 00:25:49,750
Ако ние го нарекуваме оваа функција лебдиш на глувчето проект,

418
00:25:49,750 --> 00:25:54,380
што одговара на ова поле, а потоа, ако ние лебдат над кутијата,

419
00:25:54,380 --> 00:26:00,440
тогаш кутија, всушност, ќе исчезне - тоа е да се биде фанки токму сега, но -

420
00:26:00,440 --> 00:26:06,310
ако ние се движат подалеку од него, тоа ќе се појавува. Токму сега таа е наназад поради некоја причина.

421
00:26:06,310 --> 00:26:12,720
На глувчето да влезе и да глувчето потег функции се донекаде слични, но малку поинаква.

422
00:26:12,720 --> 00:26:16,470
Глувчето внесете активира само кога глувчето ќе влезе во кутија, како што се очекуваше.

423
00:26:16,470 --> 00:26:19,210
Па ако се преселат во него, тоа ќе исчезне.

424
00:26:19,210 --> 00:26:23,210
Но, тоа не ќе се појавува кога ќе се движат подалеку, вие ќе треба да се движи назад кон него за тој да се врати.

425
00:26:23,210 --> 00:26:25,590
Исто така на глувчето потег функција, која ќе го активира

426
00:26:25,590 --> 00:26:29,300
секогаш кога глувчето е дури и се присутни во кутија.

427
00:26:29,300 --> 00:26:32,430
Па тоа само ќе продолжи да оди, одѕвонуваше во и надвор.

428
00:26:32,430 --> 00:26:35,660
А тоа е всушност сеча - ми се чини дека тоа е само одѕвонуваше во и надвор,

429
00:26:35,660 --> 00:26:39,140
но тоа е всушност влезете многу повеќе акции од ова,

430
00:26:39,140 --> 00:26:43,550
па кога ќе се отселам тоа само ќе продолжи да оди затоа што логирани како илјада од нив.

431
00:26:43,550 --> 00:26:46,620
Можеби не илјада. Можеби пет.

432
00:26:46,620 --> 00:26:50,200
Тоа најавува повеќе од тоа.

433
00:26:50,200 --> 00:26:53,280
Поентата е, сите на глувчето активности, постојат многу од нив.

434
00:26:53,280 --> 00:26:55,480
Можете да прочитате на другите, но сите тие се малку различни,

435
00:26:55,480 --> 00:26:57,700
и можете да изберете кој било од нив оној што треба

436
00:26:57,700 --> 00:27:02,130
за кое одредена цел, ти се обидуваш да се направи.

437
00:27:02,130 --> 00:27:05,060
>> Следното нешто, ќе одам да се зборува за е AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, знам дека не покрие вклучите во колку длабочината на оваа година,

439
00:27:09,340 --> 00:27:11,770
па јас сум само ќе зборуваме за AJAX воопшто за една минута.

440
00:27:11,770 --> 00:27:15,210
AJAX залага за Асинхронни JavaScript и XML.

441
00:27:15,210 --> 00:27:19,030
Тоа е во основа, на пример, кога сте на Фејсбук и тоа ви турка известување,

442
00:27:19,030 --> 00:27:23,060
тоа е затоа што AJAX е се извршува на Вашиот веб пребарувач.

443
00:27:23,060 --> 00:27:25,800
На секои неколку секунди вашиот веб прелистувач е всушност

444
00:27:25,800 --> 00:27:29,420
ќе сервери на Фејсбук, барајќи од нив, дали имате нешто ново за мене,

445
00:27:29,420 --> 00:27:31,980
и тогаш тоа се враќа кон тебе.

446
00:27:31,980 --> 00:27:36,320
Ова ви овозможува да испратите барања за сервер

447
00:27:36,320 --> 00:27:38,660
без всушност морале да се вчита страната.

448
00:27:38,660 --> 00:27:42,040
Па нормално, и ако сте само користење на PHP и базата на податоци,

449
00:27:42,040 --> 00:27:45,480
ќе мора да се освежи страница пред да можат да добијат нови информации од серверот.

450
00:27:45,480 --> 00:27:48,770
Но со користење на AJAX, можете да се повлече за таа нови информации постојано,

451
00:27:48,770 --> 00:27:52,250
или повлечете за тоа кога ќе кликнете на копчето или нешто слично.

452
00:27:52,250 --> 00:27:56,140
Па ова ни овозможува да испрати барања без претовар на страницата,

453
00:27:56,140 --> 00:27:58,130
и ние може да го користи или GET или POST барањата.

454
00:27:58,130 --> 00:28:05,370
>> GET барања се, на пример, ако сте за да Google.com

455
00:28:05,370 --> 00:28:10,900
и не q = тест. Тоа е давајќи им барањето тест.

456
00:28:10,900 --> 00:28:15,890
И тоа е GET барањето, бидејќи тоа е поминува во тие параметри во URL-то себе.

457
00:28:15,890 --> 00:28:19,250
А пост барање е како да сте ги испраќа по пошта.

458
00:28:19,250 --> 00:28:22,500
Тоа е како да го стави во писмото и бродот го исклучувам со нив,

459
00:28:22,500 --> 00:28:25,140
но тие не се всушност ја видите содржината. Тие не се видливи во URL-то.

460
00:28:25,140 --> 00:28:31,040
Вие не може директно да го напишете, вие мора да го испрати речиси тајно.

461
00:28:31,040 --> 00:28:33,880
Тоа е во еден пост.

462
00:28:33,880 --> 00:28:38,660
Но со користење на jQuery, можете да направите GET и POST барањата

463
00:28:38,660 --> 00:28:42,740
многу полесно отколку што нормално би можело користејќи само обичен вклучите Javascript-.

464
00:28:42,740 --> 00:28:50,140
Можете да пребарување API-јата користење GET барања, и вие исто така може да се провери за информации за најава.

465
00:28:50,140 --> 00:28:54,400
На следната страница, јас ја создале оваа, која прашува, "Што има за ручек?"

466
00:28:54,400 --> 00:28:58,230
користење на Харвард храна API-то, па ајде да се повлече дека до.

467
00:28:58,230 --> 00:29:01,840
Ова е само еден пример за тоа како можете да го користите jQuery да се направи GET барањето на API

468
00:29:01,840 --> 00:29:04,200
и да добијат информации се врати од неа.

469
00:29:04,200 --> 00:29:07,090
Затоа сакаме да се види во менито за денес,

470
00:29:07,090 --> 00:29:10,560
и ние сакаме да видиме што е за ручек.

471
00:29:10,560 --> 00:29:16,500
Тука е рачно да се создаде GET барањето во jQuery.

472
00:29:16,500 --> 00:29:18,600
го користите $. добие функција.

473
00:29:18,600 --> 00:29:22,290
Првиот аргумент е URL-то, па токму она што сте доведување во прашање.

474
00:29:22,290 --> 00:29:27,200
Тогаш следниот аргумент е функција која извршува кога GET барањето е завршена.

475
00:29:27,200 --> 00:29:29,980
Па ви испратиме исклучи некои барање до серверот, ќе чека тој да се врати.

476
00:29:29,980 --> 00:29:33,770
Кога тоа не дојде назад, си оди за да се преземат некои мерки со податоците што се враќа од серверот.

477
00:29:33,770 --> 00:29:37,520
Ајде да одиме напред и кодот тоа како добро.

478
00:29:37,520 --> 00:29:42,110
Јас не го кодот на оваа или, намерно.

479
00:29:42,110 --> 00:29:46,660
Тука е НАПРАВИ. Прво на сите, ајде да го користите случај обврзувачки

480
00:29:46,660 --> 00:29:50,820
така што кога на ова копче е притиснато, ние испраќам GET барањето.

481
00:29:50,820 --> 00:29:53,410
И кога тоа GET барањето се враќа со некои податоци,

482
00:29:53,410 --> 00:29:57,290
ние ќе го запишам во овој оброк информации ID DIV.

483
00:29:57,290 --> 00:30:02,860
Прво на сите, ајде да изберете храна копчето проект.

484
00:30:02,860 --> 00:30:07,320
Кога е кликнато, ние сакаме тоа да се направи нешто.

485
00:30:07,320 --> 00:30:11,930
Ајде само да го направи анонимен fuction, како и досега.

486
00:30:11,930 --> 00:30:15,550
Може да заврши оние големите загради,

487
00:30:15,550 --> 00:30:18,530
и кога ова копче е притиснато, ние сакаме да се испрати GET барањето

488
00:30:18,530 --> 00:30:20,750
да се провери што е за ручек.

489
00:30:20,750 --> 00:30:24,970
Да го стори тоа, ние едноставно можете да напишете во $. Добие.

490
00:30:24,970 --> 00:30:28,850
Ова е jQuery функцијата, со користење на знакот за долар.

491
00:30:28,850 --> 00:30:31,430
Таа ги зема неколку аргументи. Првиот е URL-то,

492
00:30:31,430 --> 00:30:34,450
втората е повратен повик функција, функција што се вика

493
00:30:34,450 --> 00:30:37,740
кога тоа барање, всушност, се враќа.

494
00:30:37,740 --> 00:30:39,890
Ајде да се изгради на URL-то во прв план.

495
00:30:39,890 --> 00:30:44,650
Ние може да го добие од API, што Давид го напишал до.

496
00:30:44,650 --> 00:30:51,360
Случува тука, можеме да видиме дека тоа е food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
и можеш само помине во имињата на параметри кои вие би сакале.

498
00:30:54,140 --> 00:30:57,760
Па параметар 1 е вредност 1.

499
00:30:57,760 --> 00:31:00,910
Тоа изгледа како стандарден датум, датумот на почеток, стандардно денес

500
00:31:00,910 --> 00:31:03,110
ако не внесете ништо, и краен датум, исто така, стандардно

501
00:31:03,910 --> 00:31:05,930
до денес, ако не внесете ништо.

502
00:31:05,930 --> 00:31:10,790
Тоа е она што го сакаме. Ние сакаме само да добиете информации за денес.

503
00:31:10,790 --> 00:31:12,950
>> Ние сакаме форматот да биде во JSON.

504
00:31:12,950 --> 00:31:15,570
Тоа е само произволни; можете да го користите која било форма што сакате.

505
00:31:15,570 --> 00:31:18,950
Можете да го користите CSV, но JSON е да го вклучите Javascript Цел Нотација.

506
00:31:18,950 --> 00:31:24,150
Тоа е многу лесно за JavaScript за да разбере што значи тоа,

507
00:31:24,150 --> 00:31:27,110
и можеме да го испечатите полесно на тој начин.

508
00:31:27,110 --> 00:31:30,490
Па ајде да го побараат во JSON и барање на ручек ајде.

509
00:31:30,490 --> 00:31:37,660
Па оброк = ручек. Само за да пишуваат дека URL-то, ние одиме назад тука.

510
00:31:37,660 --> 00:31:41,290
Има менија. Првиот параметар е излез = JSON

511
00:31:41,290 --> 00:31:44,640
затоа што тоа е она што го сакаме, а вие се разделиме параметри со "и".

512
00:31:44,640 --> 00:31:48,940
Вториот параметар е - Јас не се сеќавам.

513
00:31:48,940 --> 00:31:52,170
Оброк. И ние сакаме оброк = ручек.

514
00:31:52,170 --> 00:31:57,390
Можете да ја тестирате оваа рачно со пишување во вашиот прелистувач и ќе го.

515
00:31:57,390 --> 00:32:03,120
Тој ќе ви даде некои излез. Тоа е само еден куп на работи кои за ручек.

516
00:32:03,120 --> 00:32:10,410
Тоа е во оваа грда формат. Ние сакаме да го испечатите врз нашата страница во подобра форма.

517
00:32:10,410 --> 00:32:12,580
Значи адресата е точна, сега ние само треба да напише функција

518
00:32:12,580 --> 00:32:18,300
да се јавиме кога барањето е успешна.

519
00:32:18,300 --> 00:32:20,430
Оваа функција, всушност, ќе преземе аргумент. Тоа ќе биде податоци.

520
00:32:20,430 --> 00:32:25,650
На податоците е она што се враќа од GET барањето по GET барањето е направено.

521
00:32:25,650 --> 00:32:28,860
Можеме да направиме големи загради; тука ние пишуваме на анонимен функција

522
00:32:28,860 --> 00:32:33,900
кој извршува, со користење на податоците кога ќе го добиеме информации назад.

523
00:32:33,900 --> 00:32:37,840
Така што податоците, кога ние ја внеле во овој URL,

524
00:32:37,840 --> 00:32:41,540
тоа е она што на податоци се случува да изгледа. Тоа се случува да биде оваа огромна низа.

525
00:32:41,540 --> 00:32:48,610
Но, добрата работа е, JavaScript може да го анализирам со користење на JSON.parse функција.

526
00:32:48,610 --> 00:32:54,950
Па ајде да се создаде нов променлива наречена анализирам податоци.

527
00:32:54,950 --> 00:32:57,060
И анализирам податоци е низа од објекти.

528
00:32:57,060 --> 00:33:04,200
Секој објект содржи информации како што се - добро, ајде да ги разгледаме.

529
00:33:04,200 --> 00:33:08,980
Таа има датум, оброк, категорија, рецепт, сето ова други нешта.

530
00:33:08,980 --> 00:33:10,860
Па да испечатите на име за секој од нив.

531
00:33:10,860 --> 00:33:13,790
Ајде да iterate во текот на цела низа на работи кои ние се вратам од него,

532
00:33:13,790 --> 00:33:17,570
и само печати од секоја една - печатење на името на секој од нив.

533
00:33:17,570 --> 00:33:22,670
Ова е за телефонска линија.

534
00:33:22,670 --> 00:33:26,030
>> Го вклучите Javascript-има оваа корисна синтакса каде што може да се создаде променлива и јамки низ низа,

535
00:33:26,030 --> 00:33:30,150
и var i е само на iterator, па наместо да се направи var i = 0,

536
00:33:30,150 --> 00:33:40,290
јас бев помал од должината, i + +, вие само може да го направи var i во разложени податоци.

537
00:33:40,290 --> 00:33:47,060
Во овој пример, разложени податоци (i) ќе одговара на тековниот елемент

538
00:33:47,060 --> 00:33:49,850
на низата, вистинската објект.

539
00:33:49,850 --> 00:33:51,720
И ние сакаме да го добиете името надвор од неа.

540
00:33:51,720 --> 00:33:54,170
Па да се направи име.

541
00:33:54,170 --> 00:33:57,000
И последното нешто што е, ние ќе треба да имаат некои jQuery повторно.

542
00:33:57,000 --> 00:34:02,660
Всушност го додадете на div, овој оброк инфо div кој во моментов е празна.

543
00:34:02,660 --> 00:34:05,430
Па ајде да го изберете тоа.

544
00:34:05,430 --> 00:34:13,870
Ќе искористиме jQuery и изберете оброк инфо div проект, или оброк информации ID, жалам.

545
00:34:13,870 --> 00:34:16,580
Ние сакаме да додадете на ова.

546
00:34:16,580 --> 00:34:21,030
Ако ние го сторивме тест, на пример, тоа само ќе ја пребришете секој време.

547
00:34:21,030 --> 00:34:29,190
Па ние само може да се додаваат ова.

548
00:34:29,190 --> 00:34:31,889
Тековниот елемент во низа, ние ќе добиете името надвор од неа,

549
00:34:31,889 --> 00:34:38,159
и ние ќе ја додадете на крајот од оброкот информации ID DIV.

550
00:34:38,159 --> 00:34:40,120
А потоа само да го направите да изгледа почиста,

551
00:34:40,120 --> 00:34:51,550
ние, исто така, ќе додаде линија пауза па тоа не е сите на една линија.

552
00:34:51,550 --> 00:34:55,280
Значи, ако се оди добро, тоа треба да биде добро да -

553
00:34:55,280 --> 00:34:57,220
Прво на сите, секогаш кога ова копче е кликнато,

554
00:34:57,220 --> 00:35:00,070
тоа ќе го испраќам GET барањето за оваа адреса.

555
00:35:00,070 --> 00:35:02,500
Кога податоците се враќа од него, ќе го анализирам,

556
00:35:02,500 --> 00:35:06,950
да ја претвори во JSON, јамка во текот на цела низа претставуваат дека податоците,

557
00:35:06,950 --> 00:35:10,310
и потоа додадете го името и линија пауза

558
00:35:10,310 --> 00:35:16,500
за секоја линија во овој оброк информации ID што беше претходно празна.

559
00:35:16,500 --> 00:35:18,910
Па ќе се вратам на оваа страница, ние ќе се освежи,

560
00:35:18,910 --> 00:35:23,690
клик, да дознаете - тоа не функционира. Тоа е жално.

561
00:35:23,690 --> 00:35:25,830
И ова е местото каде дебагирање влегува внатре

562
00:35:25,830 --> 00:35:30,070
Index.html, алинеја 1.

563
00:35:30,070 --> 00:35:57,210
Тоа е интересно.

564
00:35:57,210 --> 00:35:59,720
Добро, добро, наместо да трошат време го прават тоа, јас сум само ќе

565
00:35:59,720 --> 00:36:07,070
повлечете го направи датотека дека имам, кој е завршен верзија.

566
00:36:07,070 --> 00:36:13,710
Не сум сигурен дека она што разликата е, но ние само може да ја отворите оваа, наместо.

567
00:36:13,710 --> 00:36:19,740
И ние одиме на AJAX, и ова треба да работи коректно.

568
00:36:19,740 --> 00:36:21,730
Тоа е она што беше за ручек денес,

569
00:36:21,730 --> 00:36:24,870
во никој особено ред, со наводници околу неа, па тоа не е најубаво.

570
00:36:24,870 --> 00:36:27,090
Но, очигледно, ако се прави ова за финалниот проект,

571
00:36:27,090 --> 00:36:30,120
ќе го направите да изгледа подобро.

572
00:36:30,120 --> 00:36:32,530
Но тоа е само еден едноставен пример за тоа како вие го направите GET барањето.

573
00:36:32,530 --> 00:36:34,580
И ако се погледне на реалните код, јас сум Сомневајќи се, јас сум прилично сигурен

574
00:36:34,580 --> 00:36:39,690
тоа е сè уште прилично многу исти.

575
00:36:39,690 --> 00:37:04,990
О, јас заборавив да го конвертирате стринг, тоа е тоа.

576
00:37:04,990 --> 00:37:07,920
Не, тоа е сè уште не функционира. Без разлика, тука е вистински завршени код

577
00:37:07,920 --> 00:37:10,300
за она што овој треба да изгледа,

578
00:37:10,300 --> 00:37:16,400
и тоа го прави истото како и она што јас само реализира.

579
00:37:16,400 --> 00:37:22,760
Кога ќе кликнете на копчето, тоа го користи добијам JSON автоматски да се интерпретира на податоци.

580
00:37:22,760 --> 00:37:29,190
Се зема на податоци се врати од тоа и јамки низ целата низа

581
00:37:29,190 --> 00:37:32,770
и отпечатоци од - сé што е за ручек денес, името на тоа,

582
00:37:32,770 --> 00:37:38,020
и додава линија пауза по секоја линија.

583
00:37:38,020 --> 00:37:41,100
Тоа е како имате потреба при користење на GET функција.

584
00:37:41,100 --> 00:37:44,040
>> Исто така можете да го користите пост, кој јас немав време

585
00:37:44,040 --> 00:37:47,940
да пишуваат пример за тоа, но можеме да се погледне на документација.

586
00:37:47,940 --> 00:37:53,220
Ако се погледне на jquery.post,

587
00:37:53,220 --> 00:37:55,510
можете да видите дека тоа е речиси иста работа.

588
00:37:55,510 --> 00:38:01,650
Имате URL-то, но наместо за полагање параметри користејќи -

589
00:38:01,650 --> 00:38:03,990
само да ги стави во низа за URL-то себе,

590
00:38:03,990 --> 00:38:06,300
ќе мора да помине во овој податок променлива

591
00:38:06,300 --> 00:38:11,990
дека е во основа на низа, речникот што мапи параметри на вредностите.

592
00:38:11,990 --> 00:38:17,690
Ќе помине дека во, и дека ги праќа во користење на еден пост.

593
00:38:17,690 --> 00:38:20,790
И штом еднаш ќе го имаме тоа, тогаш ќе може да има успех функција

594
00:38:20,790 --> 00:38:23,930
кој извршува кога податоците се враќа.

595
00:38:23,930 --> 00:38:26,430
Инаку, тоа е токму истото. Па преку пошта,

596
00:38:26,430 --> 00:38:29,970
можеби ќе сакате да го користите POST, на пример, ако имате влезен форма

597
00:38:29,970 --> 00:38:35,780
сте ги споделите со луѓе внесување лозинки во неа, и испрати оние лозинки надвор

598
00:38:35,780 --> 00:38:41,850
на вашиот back-end сценариото, за да се провери во базата на податоци без разлика дали тој корисник е валиден или не.

599
00:38:41,850 --> 00:38:46,700
Можете да го направите сите користење jQuery наместо да се освежи страница на сите.

600
00:38:46,700 --> 00:38:52,160
Тоа е како јас спроведува во блог дека јас ти го покажав претходно.

601
00:38:52,160 --> 00:38:59,530
Ако одиме до крај порталот и одјавите, се одјавите,

602
00:38:59,530 --> 00:39:02,600
Одјавете се не функционира.

603
00:39:02,600 --> 00:39:13,360
Па, дозволете ми само да го отворат во нов прозорец.

604
00:39:13,360 --> 00:39:16,580
Тука постои лозинка, и јас требаше да напишеш во нешто случаен избор.

605
00:39:16,580 --> 00:39:18,590
Тоа не функционира, но може да се види дека ние не сме

606
00:39:18,590 --> 00:39:20,840
всушност треба да се освежи страница на сите.

607
00:39:20,840 --> 00:39:24,610
Го кодот, ако сакате да се погледне во него,

608
00:39:24,610 --> 00:39:37,460
е сите достапни тука.

609
00:39:37,460 --> 00:39:45,680
Па го кодот напишав минатата година некаде.

610
00:39:45,680 --> 00:39:47,790
Како што можете да ја видите тука, ние сме испраќање на POST побарување.

611
00:39:47,790 --> 00:39:50,400
Јас имам еден фајл наречен login.php во задниот крај,

612
00:39:50,400 --> 00:39:53,860
која проверува дали лозинка е валидна.

613
00:39:53,860 --> 00:39:56,000
На параметрите ние помине во се лозинка, одбележан со

614
00:39:56,000 --> 00:40:00,030
влезот тоа е во овој влез кутија во моментов.

615
00:40:00,030 --> 00:40:04,110
И кога податоците се враќа, ние се провери.

616
00:40:04,110 --> 00:40:07,680
Ако податоците се лажни, тогаш велиме погрешна лозинка, го слајд надолу,

617
00:40:07,680 --> 00:40:09,580
и само да исчезне после тоа.

618
00:40:09,580 --> 00:40:12,320
Инаку, можеме да се вчита на админ страницата.

619
00:40:12,320 --> 00:40:15,080
И ова е направено со користење JSON.

620
00:40:15,080 --> 00:40:18,510
Во овој многу линии на код, што само може да помине на податоци на задниот крај,

621
00:40:18,510 --> 00:40:21,020
проверете дали тоа е правилно, проверете дали сте најавени правилно,

622
00:40:21,020 --> 00:40:24,200
а всушност одговорат на тоа, ги пренасочува лицето на точната страница

623
00:40:24,200 --> 00:40:29,760
или не допуштајќи им да се најавите и им кажува дека тие имале погрешна лозинка.

624
00:40:29,760 --> 00:40:33,040
Па тоа е пример за тоа како можете да го користите jQuery пост

625
00:40:33,040 --> 00:40:37,010
да испрати POST барањето до вашите задниот крај,

626
00:40:37,010 --> 00:40:42,400
проверка дали некој ќе ме правилно.

627
00:40:42,400 --> 00:40:44,820
>> Сите во право, па тоа е сите примери имав, и сето останато што сакав да се покријат.

628
00:40:44,820 --> 00:40:47,110
Тоа се главните работи што jQuery ви овозможува да направите:

629
00:40:47,110 --> 00:40:52,640
изберете елементи, да ги измените користење на ДОМ манипулација,

630
00:40:52,640 --> 00:40:56,340
можете да додадете ефекти, активирајте работи за одредени настани,

631
00:40:56,340 --> 00:41:00,430
и исто така не AJAX барањата многу елегантно и лесно.

632
00:41:00,430 --> 00:41:02,840
Па ви се заблагодарам за доаѓаат или гледање,

633
00:41:02,840 --> 00:41:06,230
и ако имате било какви прашања, само да ме известите. Да?

634
00:41:06,230 --> 00:41:12,730
[Студентите] Назад кога ви покажа, ти мораше JSON по пост барање во наводници,

635
00:41:12,730 --> 00:41:15,170
а јас бев само се прашувам што тоа го правеше.

636
00:41:15,170 --> 00:41:20,070
>> Да, го гледам. Прашањето беше дека, во примерот, јас само покажа,

637
00:41:20,070 --> 00:41:25,790
таму беше зборот JSON во наводници околу -

638
00:41:25,790 --> 00:41:31,690
Јас само ќе го повлече повторно - околу POST функција.

639
00:41:31,690 --> 00:41:43,320
Јас сум само да го влече да се покаже.

640
00:41:43,320 --> 00:41:46,890
Па тука е овој пост барање, и таму е овој JSON во наводници.

641
00:41:46,890 --> 00:41:50,280
Дека само го дефинира она што ние го очекуваме на излез да биде.

642
00:41:50,280 --> 00:41:54,070
Значи, ако ние помине во JSON, како очекуваните тип на податоци,

643
00:41:54,070 --> 00:41:56,070
тоа не е услов, но ако ние го помине во,

644
00:41:56,070 --> 00:41:58,590
тогаш податоци автоматски ќе бидат разложени како JSON.

645
00:41:58,590 --> 00:42:00,600
Па ние не треба да се јавите на анализирам JSON функција на неа,

646
00:42:00,600 --> 00:42:02,620
тоа само ќе се случи автоматски.

647
00:42:02,620 --> 00:42:05,150
И ако погледнете во документацијата за пост,

648
00:42:05,150 --> 00:42:09,850
постои овој тип на податоци променлива, видот на податоците очекува од серверот.

649
00:42:09,850 --> 00:42:12,660
Тоа се поклопува со интелигентна претпоставка дека може да биде во ред,

650
00:42:12,660 --> 00:42:15,520
па можете да оставете го полето празно, но тоа е само видот на податоците

651
00:42:15,520 --> 00:42:21,680
во кодирање дека сте користење, без разлика дали тоа е JSON или XML или нешто друго.

652
00:42:21,680 --> 00:42:25,280
>> Било какви други прашања?

653
00:42:25,280 --> 00:42:27,300
Сите во право. Ако имате било какви други прашања, се чувствуваат слободни да ми мејл

654
00:42:27,300 --> 00:42:30,830
на vshekhawat@college.harvard.edu,

655
00:42:30,830 --> 00:42:34,860
и слајдови и кодот треба да биде достапен онлајн наскоро.

656
00:42:34,860 --> 00:42:42,810
Среќно со вашата конечна проекти, се надевам ќе го користите jQuery.

657
00:42:42,810 --> 00:42:46,810
[CS50.TV]