1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Семинар: ЈКУЕРИ]

2
00:00:02,690 --> 00:00:04,790
[Випул Схекхават, Универзитет Харвард]

3
00:00:04,790 --> 00:00:08,000
[Ово је ЦС50.] [ЦС50.ТВ]

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
То је ТјјРВј, на бит.ли.

7
00:00:18,650 --> 00:00:20,700
Такође можете само идите на УРЛ директно,

8
00:00:20,700 --> 00:00:27,300
што је цлоуд.цс50.нет / ~ всхекхават, што је моје име,

9
00:00:27,300 --> 00:00:32,409
и јКуери.

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
>> Дакле, данас ћу говорити о јКуери, а прво питање је,

13
00:00:43,160 --> 00:00:45,300
шта је јКуери?

14
00:00:45,300 --> 00:00:47,090
Ове године, знам да ви момци нису покривени ЈаваСцрипт

15
00:00:47,090 --> 00:00:51,080
у што више детаља као што смо у последњих неколико година.

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

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
То можете учинити помоћу ЈаваСцрипт.

22
00:01:10,420 --> 00:01:13,190
ЈКуери само омогући већу функционалност на врху ЈаваСцрипт

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
То је најраспрострањенији ЈаваСцрипт библиотека.

31
00:01:37,630 --> 00:01:41,450
Преко 19,6 милиона сајтова га користе, а употреба је и даље у порасту

32
00:01:41,450 --> 00:01:45,640
према буилтвитх.цом, који, очигледно, током прошле године,

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
И можете да кажете да је то легално, јер има темељ и 13 чланова одбора,

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

40
00:02:11,910 --> 00:02:16,110
Тако да је веома широко користи, има орг УРЛ адресу., То је фенси,

41
00:02:16,110 --> 00:02:21,660
има спин-офф за друге ствари, тако да је то велика ствар.

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

43
00:02:24,510 --> 00:02:27,270
То значи да то није велики фајл. Можете преузети

44
00:02:27,270 --> 00:02:31,540
тхе минифиед фајл, који је без свих беле површине и коментара, а то је само 32 МБ.

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
Али у јКуери они заправо врло једноставна.

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

54
00:02:57,040 --> 00:02:59,610
могуће у ЈаваСцрипт, као што је слање ПОСТ захтев,

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
У свом завршном пројекту прошле године, што је невс.вхрб.орг,

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

62
00:03:22,530 --> 00:03:29,750
који је домаћин све показује да смо урадили и МП3 датотеке за њих.

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
Видите ове мале слидеДовнс, да је све урађено помоћу јКуери.

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
Још једна сјајна ствар која је направљена помоћу јКуери је ово презентација.

71
00:03:57,220 --> 00:03:59,700
Ја користим опен соурце ствар звану сцроллдецк,

72
00:03:59,700 --> 00:04:03,250
који је неко написао на врху јКуери.

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
се користе у јКуери да значи да је функција јКуери функција.

76
00:04:12,110 --> 00:04:15,020
Дакле, они дефинисање омотач изнад јКуери

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

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

79
00:04:21,200 --> 00:04:24,120
што је оно што ћете морати да укључите ако желите да користите јКуери

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
Потребно је само да одете на јКуери.цом и свалите,

83
00:04:36,150 --> 00:04:38,320
додајте га на веб сајту и да их укључи.

84
00:04:38,320 --> 00:04:42,200
Дакле, само на врху, у ХЕАД таг у ХТМЛ датотеке

85
00:04:42,200 --> 00:04:45,400
вашег главног ХТМЛ фајл, само имају ту линију кода

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

87
00:04:49,490 --> 00:04:51,340
Можете га преузети ако одете на јКуери.цом,

88
00:04:51,340 --> 00:04:55,130
кликните на "Преузми јКуери," а ви сте га добили. То је то.

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

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

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

92
00:05:05,260 --> 00:05:09,270
Ово је минифиед верзија, која се не може прочитати уопште.

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
Такође можете да се повежете домаћин верзију Гоогле тога.

97
00:05:20,240 --> 00:05:23,820
Тако да ће вам омогућити да се само ослањају на Гоогле-у да га обезбеди.

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

99
00:05:29,310 --> 00:05:31,530
Тако да вероватно могу да се ослоне на Гоогле-у да га домаћин за вас.

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

101
00:05:33,270 --> 00:05:36,400
Они имају УРЛ који је увек ажуриран на најновију верзију.

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

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

104
00:05:44,350 --> 00:05:47,250
су постаје ретроградед или застареле,

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 Кб,

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

111
00:06:04,100 --> 00:06:07,450
>> Ја ћу ићи напред и почну да говоре о стварном функционалности јКуери.

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

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
Идеја иза селектора је да можете да изаберете ХТМЛ елементе на страници.

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

117
00:06:28,790 --> 00:06:30,500
Ту је - они су у различитим налозима.

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

119
00:06:32,570 --> 00:06:38,120
ЈКуери вам омогућава да изгради једноставне упите које преузимају елементе из страници.

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
Можете да промените, промените ХТМЛ, ЦСС

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
да је див - Ја имам код отворен за овај слајд презентације.

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

132
00:07:13,450 --> 00:07:17,430
Овде имамо див. Ако смо заиста изабрали све дивови на страници,

133
00:07:17,430 --> 00:07:22,300
Само ће нам дати низ свих дива који постоје у овом фајлу.

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
Само изаберите оно са личним картама које су ДИВС.

140
00:07:48,260 --> 00:07:51,810
Тако да. Само изаберите дивови који имају тај ИД.

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

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
А онда ту је и није селектор, тако да можете да изаберете све дивови

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
За овај таг сидро, хреф, хипертекст референца, такође атрибут.

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
и манипулишу их користи јКуери.

178
00:10:04,890 --> 00:10:08,290
Јер ово је имплементиран помоћу јКуери, имамо приступ јКуери библиотеку,

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
И Гоогле Цхроме је оно што ја користим. Можете да притиснете алт команду Ј

182
00:10:19,340 --> 00:10:21,720
или алт контрола Ј да бисте отворили конзолу.

183
00:10:21,720 --> 00:10:26,130
У Фирефок-Мислим да је команду Схифт к или контролни схифт К.

184
00:10:26,130 --> 00:10:28,880
У Сафари морате ићи промените неке поставке.

185
00:10:28,880 --> 00:10:35,460
Постоји веза ако бисте желели да се то уради, али ја препоручујем добијање Цхроме или Фирефок.

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
Дакле, можете само укуцати у створити променљиву зове к,

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

190
00:10:49,200 --> 00:10:57,670
Можете чак и да урадите нешто ЦС + Да видимо, к + 45, то ће бити ЦС50.

191
00:10:57,670 --> 00:11:00,530
Ви само можете да урадите неке типичне ствари ЈаваСцрипт.

192
00:11:00,530 --> 00:11:02,730
Али, можете да урадите јКуери овде.

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

194
00:11:06,200 --> 00:11:09,500
Ми ћемо створити променљиву зове ХТМЛ, што је ниска.

195
00:11:09,500 --> 00:11:15,890
Има ознаку пасуса у томе, да се зове неки нови текст.

196
00:11:15,890 --> 00:11:19,420
Дакле, имамо овај ХТМЛ, то је неки нови текст, у параграфа додају.

197
00:11:19,420 --> 00:11:21,800
Сада смо заиста желите да га додате у страну.

198
00:11:21,800 --> 00:11:28,310
Поставио сам га, тако да ХТМЛ за овог става, овај наслов овде, се придружује број.

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

200
00:11:32,320 --> 00:11:34,560
ХТМЛ променљива Управо сам направио,

201
00:11:34,560 --> 00:11:40,370
то ће додати да је ХТМЛ на крају, после овог става ознаке.

202
00:11:40,370 --> 00:11:43,730
Дакле, ако то урадимо - ми смо изабрали овај пасус,

203
00:11:43,730 --> 00:11:47,590
и ми смо се зове додавање функцију са ХТМЛ променљиву Управо сам додао,

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
да манипулишу ствари на страници, додајте мало ХТМЛ.

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
ЦСС аутоматски добија применити на часове које сте -

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

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
не морате да урадите све ЦСС стил сваки пут.

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
Такође можете да уклоните ствари, па ћу да изаберете све дивови

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
па ћемо само изаберите најпре једну, а онда позвати Вал функцију на њему.

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
>> Такође можете да измените ЦСС директно, тако да уместо додавања

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

258
00:15:02,510 --> 00:15:08,120
можете само да додате шта год ЦСС желите да било шта.

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
Коришћење ЦСС имовине, заиста можете изменити како нешто изгледа у било ком тренутку.

266
00:15:39,250 --> 00:15:41,630
Следећа ствар је ефекте.

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

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
Нисам заправо извадите из странице сам подесите ЦСС својство видљивости сакривен

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
Дакле, ако је полако да бледи .5, то ће постати видљива пола.

289
00:17:16,869 --> 00:17:22,630
Ја могу да се иде на .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
и на тај див можете позвати пребацивање, ако се то види да ће постати невидљив,

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
Ја ћу да идем у стварном ХТМЛ страницу.

325
00:19:35,420 --> 00:19:38,560
Ево слајд. Постоји див за слајд.

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
Ово је синтакса за фунтион, назовимо га хидеТхеБок.

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
Дакле, помоћу јКуери изаберете, можемо изабрати ИД бок,

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
можемо дефинисати ову функцију, можемо назвати хидеТхеБок, и то ради.

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
можемо проћи у хидеТхеБок функцији,

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
Такође можете променити ово само фадеТоггле,

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
Још једна ствар коју можемо да урадимо јесте, ми у ствари не морају да дефинишу ову функцију хидеТхеБок

360
00:22:12,210 --> 00:22:15,050
пре него што позовете клик функцију.

361
00:22:15,050 --> 00:22:17,640
Дакле, уместо дефинисања функције и позива хидеТхеБок,

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
што је функција која има Јава.

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

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
И сада немамо ту функцију рандом фадеТхеБок

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
Она ради исту ствар као и хидеТхеБок функцију.

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
јер ме не препознају као улазак улаз у див улаз са тастатуре.

407
00:25:13,180 --> 00:25:15,740
>> Али, ако се осврнемо на акције миша,

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

409
00:25:19,620 --> 00:25:24,280
Ако користите ЦСС, можете да га направите тако да ако пређете преко нечега,

410
00:25:24,280 --> 00:25:28,940
затим њен стил мења.

411
00:25:28,940 --> 00:25:32,170
Али користи јКуери можете да промените стилове других ствари као добро.

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

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
>> Следеће што ћу говорити о је Ајакс.

438
00:27:05,060 --> 00:27:09,340
АЈАКС, знам да нисмо покривају ЈаваСцрипт за што веће дубине ове године,

439
00:27:09,340 --> 00:27:11,770
па ја ћу говорити о АЈАКС уопште на минут.

440
00:27:11,770 --> 00:27:15,210
АЈАКС је скраћеница за асинхрони ЈаваСцрипт и КСМЛ.

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

442
00:27:19,030 --> 00:27:23,060
то је зато што АЈАКС је покренут на Вашем бровсеру.

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
Па нормално, ако сте само помоћу ПХП и базе података,

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

450
00:27:45,480 --> 00:27:48,770
Али користећи АЈАКС, можете повући за ту стално новим информацијама,

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
и можемо да користимо или ГЕТ или ПОСТ захтеве.

454
00:27:58,130 --> 00:28:05,370
>> ГЕТ захтеви су, на пример, ако се на Гоогле.цом

455
00:28:05,370 --> 00:28:10,900
и до К = тест. То им даје упита тест.

456
00:28:10,900 --> 00:28:15,890
И то је ГЕТ захтев, јер је то пролази у оним параметрима у самом УРЛ.

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
али они заправо не виде садржај. Они нису видљиви у адресу.

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
Али користи јКуери, можете да урадите ГЕТ и ПОСТ захтева

463
00:28:38,660 --> 00:28:42,740
много лакше него што би иначе могли да користите једноставно ЈаваСцрипт.

464
00:28:42,740 --> 00:28:50,140
Можете претраживати помоћу АПИ ГЕТ захтева, а такође можете да проверите информације за пријављивање.

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

466
00:28:54,400 --> 00:28:58,230
коришћењем АПИ Харварду хране, па хајде да се повуче.

467
00:28:58,230 --> 00:29:01,840
Ово је само пример како можете да користите јКуери да ГЕТ захтев на АПИ

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
Ево УРЛ адреса да креирате ГЕТ захтев за јКуери.

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

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

474
00:29:22,290 --> 00:29:27,200
Онда следећи аргумент је функција која се извршава када ГЕТ захтев потпун.

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
тако да када се притисне ово дугме, можемо испратити ГЕТ захтев.

481
00:29:50,820 --> 00:29:53,410
А када се то враћа ГЕТ захтев са неким подацима,

482
00:29:53,410 --> 00:29:57,290
ћемо написати у овај оброк див ИД информација.

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
Хајде само да направи анонимну Фуцтион, као и раније.

486
00:30:11,930 --> 00:30:15,550
Да завршимо те витичасте заграде,

487
00:30:15,550 --> 00:30:18,530
а када се притисне дугме, желимо да пошаље ГЕТ захтев

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
Ово је јКуери функција, користећи знак за долар.

491
00:30:28,850 --> 00:30:31,430
Потребно је неколико аргумената. Први је УРЛ адреса,

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
Хајде да прво изгради УРЛ.

495
00:30:39,890 --> 00:30:44,650
Можемо добити од АПИ Написао сам да је Давид.

496
00:30:44,650 --> 00:30:51,360
Одлазак овде, можемо видети да је то фоод.цс50.нет/апи/1.3/менус,

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
>> Желимо формат да буде у ЈСОН.

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

505
00:31:15,570 --> 00:31:18,950
Можете да користите ЦСВ, ЈСОН али је ЈаваСцрипт Објецт Нотатион.

506
00:31:18,950 --> 00:31:24,150
То је врло лако за ЈаваСкрипт да схвате шта то значи,

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

508
00:31:27,110 --> 00:31:30,490
Па хајде да га тражи у ЈСОН, па хајде да захтев ручак.

509
00:31:30,490 --> 00:31:37,660
Дакле, оброк = ручак. Само да напишем ту УРЛ адресу, да се вратимо овде.

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

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
Подаци су оно што се враћа из ГЕТ захтев након ГЕТ захтев се врши.

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
Дакле података, када смо уписали у овом УРЛ,

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

525
00:32:41,540 --> 00:32:48,610
Али добра ствар је, Јава се може га анализирати помоћу ЈСОН.парсе функције.

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
Да прелазили преко читавог низа ствари које се вратимо из ње,

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
>> Јава је ово било корисно синтаксу, где можете да креирате променљиву и петље преко низа,

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

536
00:33:30,150 --> 00:33:40,290
И била је мања од дужине, и + +, можете једноставно да урадите вар и рашчлањен у подацима.

537
00:33:40,290 --> 00:33:47,060
У овом примеру, изврсавају подаци (и) ће одговарати тренутној елемент

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
Још једна ствар је, да ћемо опет имати неки јКуери.

542
00:33:57,000 --> 00:34:02,660
Заправо додајте је у ДИВ, овај оброк Информације див који је тренутно празна.

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

544
00:34:05,430 --> 00:34:13,870
Ми ћемо користити јКуери и изаберите оброк ИД инфо ДИВ, или оброк ИД информација, извини.

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
и ми ћемо га додати на крају оброка див ИД информација.

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
то ће испратити ГЕТ захтев на овај УРЛ.

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

556
00:35:02,500 --> 00:35:06,950
претворити га у ЈСОН, петља по целом низу заступа те податке,

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

558
00:35:10,310 --> 00:35:16,500
за сваки ред у овој ИД инфо оброк који је претходно празан.

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
Индек.хтмл, линија 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
И идемо на АЈАКС, а то би требало да исправно ради.

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
Али, то је само једноставан пример како да урадите ГЕТ захтев.

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
Када кликнете на дугме, она користи ГЕТ ЈСОН да аутоматски анализирам податке.

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
Тако можете користити ГЕТ функцију.

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
Ако погледате јкуери.пост,

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

588
00:37:55,510 --> 00:38:01,650
Имате УРЛ адресу, али уместо доношења параметре помоћу -

589
00:38:01,650 --> 00:38:03,990
само их стављајући у низу за самог УРЛ,

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
можда ћете желети да користите ПОСТ, на пример, уколико имате форму за унос

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

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

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

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
Као што можете видети овде, ми слање ПОСТ захтев.

611
00:39:47,790 --> 00:39:50,400
Имам фајл под називом логин.пхп у задњем крају,

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
И то је све урађено помоћу ЈСОН.

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
Дакле, то је пример како можете да користите јКуери ПОСТ

625
00:40:33,040 --> 00:40:37,010
да пошаљете захтев постављали на задњем крају,

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
То су главне ствари које јКуери омогућава да урадите:

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
и такође не АЈАКС захтеве врло лако и једноставно.

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
[Студент] Назад кад си се појавила, имали ЈСОН после ПОСТ захтева у наводницима,

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
ту је била реч ЈСОН наводницима око -

638
00:41:25,790 --> 00:41:31,690
Ја ћу га поново подићи - око ПОСТ функције.

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

640
00:41:43,320 --> 00:41:46,890
Дакле, ево овај пост захтев, а ту је тај ЈСОН наводницима.

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

642
00:41:50,280 --> 00:41:54,070
Дакле, ако прођемо у ЈСОН као очекивани тип података,

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

644
00:41:56,070 --> 00:41:58,590
затим подаци ће аутоматски бити анализирати као ЈСОН.

645
00:41:58,590 --> 00:42:00,600
Тако да не морате да позовете ЈСОН парсати функцију на њему,

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
у кодирање које користите, да ли је ЈСОН или КСМЛ или нешто друго.

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
на всхекхават@цоллеге.харвард.еду,

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

656
00:42:34,860 --> 00:42:42,810
Срећно са завршних пројеката, надам се да користите јКуери.

657
00:42:42,810 --> 00:42:46,810
[ЦС50.ТВ]