1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Seminārs: jQuery]

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, Harvard University]

3
00:00:04,790 --> 00:00:08,000
[Tas ir CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Ja jūs esat pēc gar mājās, jūs faktiski var piekļūt saviem slaidiem tiešsaistē

5
00:00:10,640 --> 00:00:13,310
, dodoties uz šo saiti.

6
00:00:13,310 --> 00:00:18,650
Tas ir TjjRWj, uz bit.ly.

7
00:00:18,650 --> 00:00:20,700
Jūs varat arī vienkārši doties uz URL tieši,

8
00:00:20,700 --> 00:00:27,300
kas ir cloud.cs50.net / ~ vshekhawat, kas ir mans vārds,

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

10
00:00:32,409 --> 00:00:34,920
Es ļoti iesakām jums sekot līdzi, ja jūs skatītos mājās,

11
00:00:34,920 --> 00:00:40,650
un, ja tu esi šeit, arī, jo tas ir diezgan interaktīva prezentācija.

12
00:00:40,650 --> 00:00:43,160
>> Tātad, šodien es esmu gatavojas runāt par jQuery, un pirmais jautājums ir,

13
00:00:43,160 --> 00:00:45,300
kas ir jQuery?

14
00:00:45,300 --> 00:00:47,090
Šogad, es zinu, ka jūs guys nav ietvertas JavaScript

15
00:00:47,090 --> 00:00:51,080
tik daudz sīkāk, kā mēs esam iepriekšējos gados.

16
00:00:51,080 --> 00:00:53,150
JavaScript ir, pirmkārt, vienkārši klienta puses valoda

17
00:00:53,150 --> 00:00:58,390
ka jūs izmantojat, lai palaistu skriptus un kodu uz katra lietotāja datorā.

18
00:00:58,390 --> 00:01:00,660
Tātad jums ir serveris, kas nodrošina mājas lapas, lai cilvēki,

19
00:01:00,660 --> 00:01:02,600
bet jūs varētu vēlēties darīt stuff par to mašīnu,

20
00:01:02,600 --> 00:01:08,060
lūdz to aparātu, lai nosūtītu pieprasījumus uz jūsu serveri ik pēc 30 sekundēm, vai kaut kas tamlīdzīgs.

21
00:01:08,060 --> 00:01:10,420
Jūs varat darīt, ka, izmantojot JavaScript.

22
00:01:10,420 --> 00:01:13,190
JQuery tikai nodrošina lielāku funkcionalitāti virsū JavaScript

23
00:01:13,190 --> 00:01:15,680
kas dara papildu stuff jums.

24
00:01:15,680 --> 00:01:17,710
Ja paskatās saturu uz augšu,

25
00:01:17,710 --> 00:01:21,410
, kas raksturo dažas no stuff, ka jūs varētu darīt.

26
00:01:21,410 --> 00:01:23,500
Tātad kopumā, tas tika izveidots 2006.gada janvārī.

27
00:01:23,500 --> 00:01:26,560
Tas pirmo reizi tika ieņemts no 2005.gada augustā.

28
00:01:26,560 --> 00:01:31,370
Tas ir apmēram uz pāris gadiem, un tas ir patiešām daļa no jaunā Web 2.0 kustība

29
00:01:31,370 --> 00:01:34,330
kas ir izgatavoti interneta tik spīdīgs.

30
00:01:34,330 --> 00:01:37,630
Tā ir visplašāk izmantotais JavaScript bibliotēka.

31
00:01:37,630 --> 00:01:41,450
Vairāk nekā 19,6 miljonu tīmekļa vietnes, izmantojot to, un izmantošana joprojām pieaug

32
00:01:41,450 --> 00:01:45,640
saskaņā ar builtwith.com, kas, acīmredzot, pēdējā gada laikā,

33
00:01:45,640 --> 00:01:49,710
tikko ir nepārtraukti pieaug diezgan lineāri.

34
00:01:49,710 --> 00:01:52,870
Starp top 10 miljoniem vietu, tur ir vēl -

35
00:01:52,870 --> 00:01:55,180
aptuveni 40% no tiem pašlaik to izmanto.

36
00:01:55,180 --> 00:01:58,540
Facebook to izmanto, daudz citas mājas lapas pašlaik to izmantot.

37
00:01:58,540 --> 00:02:01,540
Jūs varat ielūkoties tiem par savu statistiku, ja vēlaties.

38
00:02:01,540 --> 00:02:05,820
Un jūs varētu pateikt, tas ir legit, jo tas ir pamats, un 13 valdes locekļi,

39
00:02:05,820 --> 00:02:11,910
kopā ar komandu 20 cilvēku, kas strādā par to regulāri.

40
00:02:11,910 --> 00:02:16,110
Tātad, tas ir ļoti plaši izmantots, tā ir. Org URL, tas ir iedomātā,

41
00:02:16,110 --> 00:02:21,660
tas ir spin-off par citām lietām, tāpēc tas ir liels darījumu.

42
00:02:21,660 --> 00:02:24,510
>> Kādēļ Jums vajadzētu izmantot to? JQuery ir ļoti viegla.

43
00:02:24,510 --> 00:02:27,270
Tas nozīmē, ka tas nav milzīgs fails. Jūs varat lejupielādēt

44
00:02:27,270 --> 00:02:31,540
the minified fails, kas bez visām atstarpēm un komentārus, un tas ir tikai 32 kB.

45
00:02:31,540 --> 00:02:33,600
Tātad, tas ir viegli vienkārši mētāties uz jūsu mājas lapā

46
00:02:33,600 --> 00:02:35,910
un tikai, lai sāktu to lietot.

47
00:02:35,910 --> 00:02:39,630
Tas ir arī ļoti efektīvi rakstīts, tāpēc tas nav aizņem daudz -

48
00:02:39,630 --> 00:02:42,550
tas nav palēnināt jūsu mājas lapā ir daudz, ja jūs to izmantot.

49
00:02:42,550 --> 00:02:45,770
Tas ļauj īstenot lietas, kas iepriekš bija neiespējama.

50
00:02:45,770 --> 00:02:47,790
Ir daži funkcionalitāti aspekti,

51
00:02:47,790 --> 00:02:51,780
piemēram, izveidojot animācijas, kas parasti būtu ļoti, ļoti grūti to darīt.

52
00:02:51,780 --> 00:02:54,300
Bet jQuery viņi tiešām ir ļoti vienkārši.

53
00:02:54,300 --> 00:02:57,040
Un tur ir dažas lietas, kas ir kaitinošas, ko darīt,

54
00:02:57,040 --> 00:02:59,610
iespējams, JavaScript, piemēram, nosūtot POST pieprasījumu,

55
00:02:59,610 --> 00:03:02,190
bet nosūtīt pieprasījumu uz serveri, jums ir rakstīt

56
00:03:02,190 --> 00:03:04,320
piecas vai sešas vai septiņas rindiņas kodu.

57
00:03:04,320 --> 00:03:07,200
Tagad jūs varat vienkārši darīt to vienā rindā kodu, vienā funkciju zvanu.

58
00:03:07,200 --> 00:03:11,790
Tas patiešām vienkāršo daudz sīkumi, ka jūs darāt.

59
00:03:11,790 --> 00:03:15,950
Un visi cool kids izmanto to. Ar šo, es domāju mani.

60
00:03:15,950 --> 00:03:19,270
Manā pēdējā projekta pagājušajā gadā, kas ir news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
kas ir radio stacijas, es izveidojis šo blogu

62
00:03:22,530 --> 00:03:29,750
kas rīko visu rāda, ka mēs esam darīts, un MP3 failus uz tām.

63
00:03:29,750 --> 00:03:32,070
Jūs varat pārlūkot pagātnes liecina,

64
00:03:32,070 --> 00:03:34,130
un tas viss ir darīts, izmantojot jQuery. Jūs varat pateikt

65
00:03:34,130 --> 00:03:37,340
jo visiem šiem animāciju, būtībā.

66
00:03:37,340 --> 00:03:42,360
Tātad, ja jums ir - ja jūs izveidotu jaunu ziņu,

67
00:03:42,360 --> 00:03:45,980
jūs redzat šos maz slideDowns, tas viss ir darīts, izmantojot jQuery.

68
00:03:45,980 --> 00:03:49,140
Un tas izbalināt - tā, ka stuff veida tiek viss darīts, izmantojot jQuery,

69
00:03:49,140 --> 00:03:52,720
un jums nav pastāvīgi pārlādēt lapu, lai virzītos vietnē.

70
00:03:52,720 --> 00:03:57,220
Vēl viens atdzist lieta, kas ir veikti, izmantojot jQuery ir šī prezentācija.

71
00:03:57,220 --> 00:03:59,700
Es esmu, izmantojot šo atvērtā koda lieta, ko sauc scrolldeck,

72
00:03:59,700 --> 00:04:03,250
ko kāds rakstīja virsū jQuery.

73
00:04:03,250 --> 00:04:04,870
Ja jūs tiešām paskatās avota, jūs varat redzēt, ka

74
00:04:04,870 --> 00:04:07,830
viņi izmanto šo dolāra zīmi; dolāra zīmes

75
00:04:07,830 --> 00:04:12,110
izmanto jQuery, lai apzīmētu, ka funkcija ir jQuery funkcija.

76
00:04:12,110 --> 00:04:15,020
Tātad viņi definējot iesaiņojuma virsū jQuery

77
00:04:15,020 --> 00:04:18,570
, kas ļauj jums veikt prezentāciju, piemēram, tas,

78
00:04:18,570 --> 00:04:21,200
un jūs varat redzēt, ka šeit viņi arī sākotnējo jQuery failu,

79
00:04:21,200 --> 00:04:24,120
kas ir tas, kas jums ir jāiekļauj, ja vēlaties izmantot jQuery

80
00:04:24,120 --> 00:04:30,450
jūsu pašu mājas lapas.

81
00:04:30,450 --> 00:04:32,790
>> Pieskaroties uz to, kā jūs instalēt to?

82
00:04:32,790 --> 00:04:36,150
Jūs varat vienkārši doties uz jQuery.com un lejupielādēt failu,

83
00:04:36,150 --> 00:04:38,320
pievienojiet to, lai interneta katalogs un iekļaut to.

84
00:04:38,320 --> 00:04:42,200
Tātad tikai uz augšu, jo galvas tagu jūsu HTML failu

85
00:04:42,200 --> 00:04:45,400
Jūsu galvenais HTML failu, vienkārši ir, ka rindiņu kodu

86
00:04:45,400 --> 00:04:49,490
ar pareizo versiju, par kuru versiju jQuery jūs izmantojat.

87
00:04:49,490 --> 00:04:51,340
Jūs varat lejupielādēt to, dodoties uz jQuery.com,

88
00:04:51,340 --> 00:04:55,130
noklikšķiniet uz "download jQuery", un jūs esat ieguvuši to. Viss.

89
00:04:55,130 --> 00:04:58,880
Un patiesībā, mēs varam apskatīt, kā tas izskatās.

90
00:04:58,880 --> 00:05:01,080
Ja jūs noklikšķiniet uz lejupielādēt šeit, jQuery tas ir.

91
00:05:01,080 --> 00:05:05,260
Tas ir tikai viens liels JavaScript fails, kas dara visu burvju stuff jums.

92
00:05:05,260 --> 00:05:09,270
Tas ir minified variants, kas ir ne salasāms vispār.

93
00:05:09,270 --> 00:05:13,180
Jūs varat arī apskatīt attīstības versiju, kas ir lasāma

94
00:05:13,180 --> 00:05:15,370
bet joprojām ir ļoti, ļoti ilgstošs.

95
00:05:15,370 --> 00:05:17,980
Tas ir daudz stuff tur.

96
00:05:17,980 --> 00:05:20,240
Jūs varat arī saites uz Google hosted versiju.

97
00:05:20,240 --> 00:05:23,820
Tātad, kas jums ļauj jums, lai tikai paļauties uz Google, lai nodrošinātu to.

98
00:05:23,820 --> 00:05:29,310
Tie nodrošina katru versiju par to, kas ir pieejams visu laiku.

99
00:05:29,310 --> 00:05:31,530
Tātad, jūs varat droši paļauties uz Google uzņemt to you.

100
00:05:31,530 --> 00:05:33,270
Vai arī jūs varat saistīt ar jQuery pašu jaunāko versiju.

101
00:05:33,270 --> 00:05:36,400
Viņi ir URL, kas vienmēr ir atjaunināta ar jaunāko versiju.

102
00:05:36,400 --> 00:05:40,850
Tas ir jQuery jaunākais, un tur ir viena problēma ar to, ka

103
00:05:40,850 --> 00:05:44,350
, kas ir tāds, ka tad, ja atjaunošana jQuery un daži no iepriekšējā funkcionalitāti

104
00:05:44,350 --> 00:05:47,250
viņi kļūst retrograded vai novecojis,

105
00:05:47,250 --> 00:05:49,620
tā nevar - tas var sākt, lai nesaņemtu atbalstīta vairs.

106
00:05:49,620 --> 00:05:52,940
Tātad, ja jūs rakstīt mājas lapā, izmantojot versija 1.8.2,

107
00:05:52,940 --> 00:05:55,000
līdz tam laikam, versiju 2.7 nāk no

108
00:05:55,000 --> 00:05:57,000
dažas funkcijas jūs rakstījāt nedarbojas vairs.

109
00:05:57,000 --> 00:05:59,930
Tātad, tas ir labāk, lai tikai lejupielādēt 32 Kb failu,

110
00:05:59,930 --> 00:06:04,100
ielieciet to savā mājas lapā, un tas būs darbs visiem laikiem.

111
00:06:04,100 --> 00:06:07,450
>> Es iešu uz priekšu un sākt runāt par faktisko funkcionalitāti jQuery.

112
00:06:07,450 --> 00:06:13,090
Pirmā lieta ir pārslēdzējiem. Tas ir tas, ko jQuery bija sākotnēji iecerēts, lai nodrošinātu.

113
00:06:13,090 --> 00:06:15,500
Un jūs varat noklikšķināt uz dokumentāciju, lai apskatīt

114
00:06:15,500 --> 00:06:18,690
sīki izstrādātu dokumentāciju par šķirotāja es esmu būs segums.

115
00:06:18,690 --> 00:06:24,120
Aiz šķirotāja ideja ir, ka jūs varat izvēlēties HTML elementus lapā.

116
00:06:24,120 --> 00:06:28,790
Elementi lapā ir ID un nodarbības un citus identifikācijas aspekti uz tiem.

117
00:06:28,790 --> 00:06:30,500
Pastāv arī - tās ir bez dažādos pasūtījumus.

118
00:06:30,500 --> 00:06:32,570
Kādu laiku viņi ligzdotu iekšpusē viens otru.

119
00:06:32,570 --> 00:06:38,120
JQuery ļauj jums izveidot vienkāršus jautājumus, kas ielādētu elementus no lapas.

120
00:06:38,120 --> 00:06:41,890
Tad jūs varat manipulēt šos elementus, izmantojot jQuery funkcijas,

121
00:06:41,890 --> 00:06:43,990
kas ir manipulācija sadaļa, mēs sāksim vēlāk.

122
00:06:43,990 --> 00:06:46,040
Jūs varat mainīt HTML, mainīt CSS,

123
00:06:46,040 --> 00:06:50,500
Jūs varat arī animēt un pievienot funkcijas, kas aktivizē par dažiem notikumiem.

124
00:06:50,500 --> 00:06:52,710
Tātad, piemēram, ja kaut kas ir noklikšķinājuši, jūs vēlaties, lai kaut ko,

125
00:06:52,710 --> 00:06:55,210
jūs varat darīt, ka, izmantojot jQuery, kā arī.

126
00:06:55,210 --> 00:06:57,380
Un tur ir ļoti daudz veidi, lai izvēlētos elementus.

127
00:06:57,380 --> 00:07:00,310
Lielākā daļa no viņiem es nekad neesmu lietojis, bet ir pamata tie,

128
00:07:00,310 --> 00:07:02,340
kas ir diezgan svarīgi.

129
00:07:02,340 --> 00:07:05,750
Elements atlasītāju, piemēram, ja jūs vienkārši izvēloties kaut ko

130
00:07:05,750 --> 00:07:10,640
ka ir div - man tiešām ir kods atvērts šai prezentāciju.

131
00:07:10,640 --> 00:07:13,450
Tātad, piemēram, šeit ir pirmais slide.

132
00:07:13,450 --> 00:07:17,430
Šeit mums ir div. Ja mēs patiešām izvēlētos visus divs lapā,

133
00:07:17,430 --> 00:07:22,300
tas būs tikai dod mums masīvs visu divs, kas pastāv šajā lietā.

134
00:07:22,300 --> 00:07:27,040
ID selektors ļauj izvēlēties kaut ko ar norādīto ID.

135
00:07:27,040 --> 00:07:32,230
Tātad, ja tas, piemēram, šī lieta ir ID ", ko,"

136
00:07:32,230 --> 00:07:37,160
un, ja mēs to darījām ar # kāda nevis daži ID,

137
00:07:37,160 --> 00:07:42,920
tas būtu tikai atgriezties masīvu, kas ir kā atsevišķs elements, un ka ir tas, ka elements of the page.

138
00:07:42,920 --> 00:07:45,490
Mēs varam arī kombinēt pārslēdzējiem šādā veidā, ņemot

139
00:07:45,490 --> 00:07:48,260
tikai izvēlēties lietas ar ID, kas ir divs.

140
00:07:48,260 --> 00:07:51,810
Tātad yeah. Izvēlēties tikai divs, kas ir šo ID.

141
00:07:51,810 --> 00:07:55,260
Klasei jūs vienkārši izmantot punktu, tas ir tas pats, CSS.

142
00:07:55,260 --> 00:07:57,500
Pēcnācējs arī strādā, tādēļ, ja Jums ir dažas klases

143
00:07:57,500 --> 00:08:00,170
un tas ir nested elementus tās iekšienē - tā, piemēram,

144
00:08:00,170 --> 00:08:03,260
ir dažas klases, un tas ir enkura tagu saiti uz citu lapu,

145
00:08:03,260 --> 00:08:08,510
Jūs varat izmantot šo sintaksi, lai ielādētu saiti.

146
00:08:08,510 --> 00:08:12,420
Jūs varat izvēlēties arī vairākas lietas uzreiz, vienkārši atdalīt ar komatiem,

147
00:08:12,420 --> 00:08:17,360
izmantot jebkuru selektoru vēlaties, un jums būs izvēlēties tos visus uzreiz, vienā masīvā.

148
00:08:17,360 --> 00:08:19,650
Un tad tur arī nav atlasītāju, lai jūs varētu izvēlēties visus divs

149
00:08:19,650 --> 00:08:24,210
ka nav kāda īpaša klasē.

150
00:08:24,210 --> 00:08:28,790
Un tas ir tikai noderīgs veids, kā iegūt ieskatu par to, kā šī izvēle darbojas.

151
00:08:28,790 --> 00:08:32,270
Es jums parādīs dažus konkrētus piemērus sekundē.

152
00:08:32,270 --> 00:08:35,480
>> Advanced selektori ir - tie ir tikai daži piemēri.

153
00:08:35,480 --> 00:08:38,840
Ir desmitiem no tiem, bet, ja jūs vēlaties, lai atlasītu visus attēlu tagus

154
00:08:38,840 --> 00:08:42,799
ietvaros kādu elementu, tad jūs vienkārši darīt: attēlu.

155
00:08:42,799 --> 00:08:45,340
Ja jūs vēlaties, lai izvēlētos pat elementus, piemēram, ja ir 20 no tiem,

156
00:08:45,340 --> 00:08:48,290
Jūs vēlaties, lai izvēlētos 0, 2, 4, 6 un tā tālāk,

157
00:08:48,290 --> 00:08:51,630
jums: pat, vai arī jūs varat darīt: dīvaini.

158
00:08:51,630 --> 00:08:55,470
Tie ir pseido pārslēdzējiem, kas nozīmē, ka tās faktiski aprēķinātu

159
00:08:55,470 --> 00:09:00,960
katru otro elementu, nevis tikai iet, un izvēloties tos visus.

160
00:09:00,960 --> 00:09:05,510
Jūs varat arī - katrs elements var būt arī īpašas atribūtus.

161
00:09:05,510 --> 00:09:10,580
Tātad, piemēram, klase = centrs ir arī atribūts.

162
00:09:10,580 --> 00:09:16,500
Par šo enkura taga, href, hiperteksta atsauce, ir atribūts arī.

163
00:09:16,500 --> 00:09:21,150
Tātad, jūs varat izvēlēties kaut ko, kas saites uz konkrētu lapu vai vienkārši - tas ir ļoti vispārīgs.

164
00:09:21,150 --> 00:09:25,410
Jūs varat izvēlēties kaut ko ar kādu atribūtu, ko vēlaties.

165
00:09:25,410 --> 00:09:27,470
Un tad arī raksturlielums satur.

166
00:09:27,470 --> 00:09:30,420
Ja jūs, piemēram, vēlas, lai atlasītu visus ievades elementi

167
00:09:30,420 --> 00:09:32,700
, kas ir ietverts vārds "ieskaitīts" kā nosaukums no tiem,

168
00:09:32,700 --> 00:09:37,560
ja lapa ir ievades teksta bloku

169
00:09:37,560 --> 00:09:41,050
kas ir sauc par "parole", ka gribētu būt viens veids, kā jūs varētu izvēlēties to.

170
00:09:41,050 --> 00:09:43,020
Un tur ir daudz vairāk. Jūs varat iet uz priekšu un apskatīt dokumentācijā

171
00:09:43,020 --> 00:09:46,950
un redzēt konkrētus piemērus par to, kā tā darbojas.

172
00:09:46,950 --> 00:09:48,840
>> Nākamā lieta ir DOM manipulācijas.

173
00:09:48,840 --> 00:09:52,500
Pēc tam, kad mēs izvēlētos elementus, mēs vēlamies, lai faktiski darīt stuff ar tiem.

174
00:09:52,500 --> 00:09:55,500
Līdz šim mēs neesam paskatījās, ka vispār, bet, ja paskatās dokumentāciju,

175
00:09:55,500 --> 00:09:57,950
tur ir tiešām daudz, ka mēs varētu darīt.

176
00:09:57,950 --> 00:10:02,900
Šajā brīdī, mēs ejam, lai izvēlētos elementus šajā prezentācijā

177
00:10:02,900 --> 00:10:04,890
un manipulēt ar viņiem, izmantojot jQuery.

178
00:10:04,890 --> 00:10:08,290
Tā kā šis ir realizēts, izmantojot jQuery, mums ir pieeja jQuery bibliotēku,

179
00:10:08,290 --> 00:10:13,580
un mēs varam izmantot šīs funkcijas ar šo kodu.

180
00:10:13,580 --> 00:10:16,200
Viena noderīga lieta, kas jums nevar zināt par to ir konsole.

181
00:10:16,200 --> 00:10:19,340
Un Google Chrome ir tas, ko es esmu, izmantojot. Jūs varat nospiest alt komandu J

182
00:10:19,340 --> 00:10:21,720
vai alt kontroles J, lai atvērtu konsoli.

183
00:10:21,720 --> 00:10:26,130
Firefox Es domāju, ka ir komandas Shift K vai kontroles maiņu K.

184
00:10:26,130 --> 00:10:28,880
Safari jums ir jāiet mainīt dažus iestatījumus.

185
00:10:28,880 --> 00:10:35,460
Tur ir saite, ja vēlaties to darīt, bet es ieteiktu iegūt Chrome vai Firefox.

186
00:10:35,460 --> 00:10:37,750
Tātad, pieņemsim atvērt konsoli, tas ir uz leju šeit.

187
00:10:37,750 --> 00:10:41,170
Tas ļauj jums, lai būtībā vienkārši darīt kaut ko vēlaties.

188
00:10:41,170 --> 00:10:45,100
Tātad jūs varat vienkārši ierakstiet izveidot mainīgo sauc x,

189
00:10:45,100 --> 00:10:49,200
x = 5, pieņemsim redzēt, kas x + 2 ir.

190
00:10:49,200 --> 00:10:57,670
Jūs pat varat darīt kaut ko līdzīgu CS + pieņemsim redzēt, x + 45, kas būs CS50.

191
00:10:57,670 --> 00:11:00,530
Jūs varat vienkārši darīt dažas tipiskas JavaScript sīkumi.

192
00:11:00,530 --> 00:11:02,730
Bet jūs varat arī darīt jQuery šeit.

193
00:11:02,730 --> 00:11:06,200
>> Tātad, pieņemsim apskatīt šo pirmo aspektu šeit.

194
00:11:06,200 --> 00:11:09,500
Mēs ejam, lai izveidotu mainīgo sauc HTML, kas ir virkne.

195
00:11:09,500 --> 00:11:15,890
Tas ir punkts tag tajā, ka sauc kādu jaunu tekstu.

196
00:11:15,890 --> 00:11:19,420
Tātad mums ir šī HTML, tas ir dažas jaunas tekstu, kas rindkopas.

197
00:11:19,420 --> 00:11:21,800
Tagad mēs vēlamies, lai pievienotu to lapu.

198
00:11:21,800 --> 00:11:28,310
Es noteikt to uz augšu tā, ka šajā punktā HTML, šī sadaļa šeit ir pievienošana ID.

199
00:11:28,310 --> 00:11:32,320
Ja mēs izvēlamies pievienošanas ID, un pēc tam pievienot to

200
00:11:32,320 --> 00:11:34,560
HTML mainīgo Es tikko izveidoju,

201
00:11:34,560 --> 00:11:40,370
tā piebilst, ka HTML beigās, uzreiz pēc šī punkta tagu.

202
00:11:40,370 --> 00:11:43,730
Tātad, ja mēs to darām, ka - mēs izvēlējāmies šo punktu,

203
00:11:43,730 --> 00:11:47,590
un mēs esam sauc pievienošanas funkcija ar HTML mainīgā Es tikko pievienotās,

204
00:11:47,590 --> 00:11:50,960
tā piebilst, ka jaunu tekstu turpat lapā.

205
00:11:50,960 --> 00:11:54,970
Mēs var arī prepend, kas nozīmē, ka tas iet pirms, sākumā minētā elementa.

206
00:11:54,970 --> 00:11:58,290
Tātad ir dažas jaunas teksta sākumā un pēc tam.

207
00:11:58,290 --> 00:12:01,660
Es varu iet uz priekšu un atsvaidzināt, lai atbrīvotos no šī stuff es tikko darīts.

208
00:12:01,660 --> 00:12:05,280
Bet tas ir piemērs tam, kā jūs varat izmantot prepend un pievieno metodes

209
00:12:05,280 --> 00:12:08,910
manipulēt sīkumi lapā, pievienot dažas HTML.

210
00:12:08,910 --> 00:12:11,080
>> Jūs varat arī mainīt nodarbības.

211
00:12:11,080 --> 00:12:14,970
Atpakaļ šī stila lietas, es esmu izveidojis šo par win klasei

212
00:12:14,970 --> 00:12:19,990
kas ir teksta sarkano krāsu, dažas fona krāsu un teksta ēna.

213
00:12:19,990 --> 00:12:23,810
Tas izskatās pretīgs, bet es varu tiešām -

214
00:12:23,810 --> 00:12:26,410
Šī daļa atbilst klases ID.

215
00:12:26,410 --> 00:12:29,860
Lai es varētu pievienot klasi win.

216
00:12:29,860 --> 00:12:31,870
Es varu izpildīt šo konsole,

217
00:12:31,870 --> 00:12:35,480
un kas būs pievienot šo klasi, un tagad tas izskatās pretīgs, kā gaidīts.

218
00:12:35,480 --> 00:12:39,680
CSS automātiski tiek piemērots klasēm, kas jums -

219
00:12:39,680 --> 00:12:42,680
ja tur ir CSS klases, tas automātiski tiek piemērots

220
00:12:42,680 --> 00:12:44,680
ja maināt klases elementa.

221
00:12:44,680 --> 00:12:49,230
Tad mēs varam tikai noņemt to, izmantojot noņemt klasē.

222
00:12:49,230 --> 00:12:53,690
Tātad, ja jums ir kādas iepriekš klasēm, piemēram, sarkana vai iezīmēts,

223
00:12:53,690 --> 00:12:55,990
un tad jūs vēlaties pieteikties tiem elementiem,

224
00:12:55,990 --> 00:12:58,230
jums nav darīt visu CSS ieveidošanas katru reizi.

225
00:12:58,230 --> 00:13:01,510
Jūs varat vienkārši pievienot klasi uz elementu, un tad tas automātiski kļūs -

226
00:13:01,510 --> 00:13:05,580
tas automātiski meklēt piemērotas šai kategorijai.

227
00:13:05,580 --> 00:13:07,900
Mēs varam arī noņemt lietas, tāpēc es esmu gatavojas, lai atlasītu visus divs

228
00:13:07,900 --> 00:13:10,830
lapā un tos novērstu.

229
00:13:10,830 --> 00:13:13,990
Kas ir tas, ka gatavojas izskatās?

230
00:13:13,990 --> 00:13:16,170
Tas notiek, lai izskatās nekas, tāpēc tur tiešām nekas pa kreisi.

231
00:13:16,170 --> 00:13:18,170
Mana prezentācija ir pagājis.

232
00:13:18,170 --> 00:13:21,290
Es varu atsvaidzināt un dot to atpakaļ, par laimi,

233
00:13:21,290 --> 00:13:24,420
tāpēc, ka tas ir tikai darbojas vienu reizi,

234
00:13:24,420 --> 00:13:29,460
bet tas ir piemērs, kā novērst, ja jūs vēlaties, lai pilnīgi iznīcinātu elementu off lapā.

235
00:13:29,460 --> 00:13:33,180
>> Jūs varat arī pārrakstīt, un es esmu gatavojas, lai atlasītu visu rindkopu tagus lapā

236
00:13:33,180 --> 00:13:36,850
un iet iekšā tiem, un aizstāt neatkarīgi tekstu viņi ir ar tiem

237
00:13:36,850 --> 00:13:39,690
tikai ar vārdu "pārbaude".

238
00:13:39,690 --> 00:13:46,520
Ja jūs to izdarītu, jums ir aizstāt katru punktu uz lapas ar šo testu.

239
00:13:46,520 --> 00:13:49,150
Yep. Viņi visi aizstāts ar testēšanu.

240
00:13:49,150 --> 00:13:53,270
Tātad tas ir piemērs, kā piekļūt tekstu un pārrakstīt to.

241
00:13:53,270 --> 00:13:57,490
Jūs varat arī iegūt informāciju, un tas ir patiešām atdzist ievades lodziņos.

242
00:13:57,490 --> 00:14:00,470
Ja jums ir ievades lodziņā, ka cilvēki rakstāt stuff,

243
00:14:00,470 --> 00:14:03,880
cilvēki ir rakstīt sīkumi tajā,

244
00:14:03,880 --> 00:14:09,030
Šeit mēs izvēlamies ievadi, jebkuru ievades tag ar veida tekstu.

245
00:14:09,030 --> 00:14:13,800
Šajā gadījumā, tur ir tikai viens ievades lodziņš visā prezentācijas,

246
00:14:13,800 --> 00:14:17,260
tāpēc mēs vienkārši izvēlieties pirmo vienu, un tad mēs saucam val funkcijas par to.

247
00:14:17,260 --> 00:14:19,570
, Kas atgriež vērtību, un uz ievades lodziņā,

248
00:14:19,570 --> 00:14:24,330
vērtība ir tikai neatkarīgi notiek, ir tā iekšpusē.

249
00:14:24,330 --> 00:14:31,880
Tātad, ja mēs to darām, tas tikai atgriež virkni sīkumi.

250
00:14:31,880 --> 00:14:36,860
Un, ja mēs to saucam atkal pēc rakstīšanas vairāk stuff, tas pārvēršas vairāk stuff.

251
00:14:36,860 --> 00:14:40,760
Tas ir viens lielisks veids, kā piekļūt elementus ievades lodziņā, un pēc tam pārbaudiet,

252
00:14:40,760 --> 00:14:45,060
tas ir derīga e-pasta adrese, tas ir derīgs datums, piem.

253
00:14:45,060 --> 00:14:49,600
Jūs varat vienkārši paņemt sīkumi uzreiz, jo cilvēki ir rakstīt to,

254
00:14:49,600 --> 00:14:54,830
un pēc tam pārbaudiet, vai tas ir derīgs, nosūtīt to atpakaļ uz serveri, darīt kaut ko vēlaties ar to.

255
00:14:54,830 --> 00:14:57,720
Un tas, kā jūs varat piekļūt, kas ir iekšā tās kastes.

256
00:14:57,720 --> 00:15:00,090
>> Jūs varat arī mainīt CSS tieši, tā vietā, pievienojot

257
00:15:00,090 --> 00:15:02,510
klase, kas ir dažas iepriekš īpašības,

258
00:15:02,510 --> 00:15:08,120
jūs varat vienkārši pievienot neatkarīgi CSS jūs vēlaties kaut ko.

259
00:15:08,120 --> 00:15:10,350
Tātad, pieņemsim izvēlēties struktūra, kas ir visa prezentācija,

260
00:15:10,350 --> 00:15:14,370
un krāsa ir īpašums, kas nosaka to, ko krāsas teksts ir.

261
00:15:14,370 --> 00:15:19,420
Ja mēs mainīt to uz sarkanu, visi šajā lapā teksts kļūs sarkans.

262
00:15:19,420 --> 00:15:26,310
Mēs varam kaut ko darīt, piemēram, fona krāsu zila,

263
00:15:26,310 --> 00:15:30,680
tur mēs ejam, tas ir skaisti.

264
00:15:30,680 --> 00:15:33,840
Jūs varat darīt kaut ko vēlaties ar to.

265
00:15:33,840 --> 00:15:39,250
Izmantojot CSS īpašuma, jūs tiešām var mainīt to, kā kaut kas izskatās jebkurā laikā.

266
00:15:39,250 --> 00:15:41,630
Nākamā lieta, ir sekas.

267
00:15:41,630 --> 00:15:45,710
Ietekme ir būtībā tas pats, modificējot CSS,

268
00:15:45,710 --> 00:15:48,870
bet viņi faktiski sniedz dažas papildu animāciju, lai to.

269
00:15:48,870 --> 00:15:53,380
Tātad, nevis tikai parādot vai slēpjas kaut vai mainot krāsu,

270
00:15:53,380 --> 00:15:56,130
Jūs faktiski var padarīt animācijas.

271
00:15:56,130 --> 00:16:00,760
Lūk dokumentāciju, ja jūs vēlaties veikt apskatīt plašu dokumentāciju par to.

272
00:16:00,760 --> 00:16:04,760
Bet es esmu gatavojas segt galvenās ones.

273
00:16:04,760 --> 00:16:12,030
Ir parādīt un paslēpt īpašības.

274
00:16:12,030 --> 00:16:14,510
Rādīt / slēpt ID faktiski atbilst šo visu lodziņā,

275
00:16:14,510 --> 00:16:18,190
tāpēc, ja es slēpt to, tas vienkārši pazudīs.

276
00:16:18,190 --> 00:16:24,210
Un es varu parādīt to vēlreiz, ja es gribu, lai tā nāk atpakaļ.

277
00:16:24,210 --> 00:16:26,340
Un tas ir atpakaļ. Tas nav faktiski pazūd,

278
00:16:26,340 --> 00:16:30,670
Man nav faktiski izņemt no lapas, es tikko noteikts CSS īpašums redzamību slēptās

279
00:16:30,670 --> 00:16:34,030
tāpēc jūs nevarat redzēt vairs.

280
00:16:34,030 --> 00:16:39,250
Tur ir arī slaidu uz augšu un leju, kas ļauj jums, lai šo efektu.

281
00:16:39,250 --> 00:16:47,050
Tā slaidi līdz izzūd, un pēc tam pazūd

282
00:16:47,050 --> 00:16:53,210
Jūs varat bīdiet to uz leju, lai tā atgriezties. Un tagad tas ir atpakaļ.

283
00:16:53,210 --> 00:16:57,650
Tur ir arī tas izbalināt sekas, kas - fade ID atbilst šajā lodziņā.

284
00:16:57,650 --> 00:17:01,200
Ja es fade to ārā, tad tas būs lēnām izzūd.

285
00:17:01,200 --> 00:17:04,490
Es varu arī izbalināt to, un tas nāks atpakaļ.

286
00:17:04,490 --> 00:17:08,930
Jūs varat arī darīt izbalināt ar, kas ir raksturīgi izbalināt funkciju.

287
00:17:08,930 --> 00:17:12,589
Jūs varat to izbalināt uz kādu konkrētu necaurredzamību, kuru vēlaties.

288
00:17:12,589 --> 00:17:16,869
Tātad, ja jūs izbalināt lēnām līdz 0,5, tas būs kļuvis pusi redzamas.

289
00:17:16,869 --> 00:17:22,630
Es varu darīt to iet uz 0,1, un atpakaļ uz 1 lai tas būtu pilnībā redzami no jauna.

290
00:17:22,630 --> 00:17:24,760
Tas ir tikai vēl viens animācijas, ka jūs varat darīt.

291
00:17:24,760 --> 00:17:26,750
>> Ir arī pārslēgšanas sekas.

292
00:17:26,750 --> 00:17:33,410
Tāpēc es esmu gatavojas, lai izvēlētos pārslēgšanas ID, kas atbilst šo lodziņu,

293
00:17:33,410 --> 00:17:38,970
un par šo div jūs varat zvanīt pārslēgšanas, ja tas ir redzams tas kļūs neredzams,

294
00:17:38,970 --> 00:17:42,320
ja tas ir neredzams, tas kļūs redzams atkal.

295
00:17:42,320 --> 00:17:44,440
Tāpēc es tikai sauc šo pārslēgšanas funkciju divreiz, pirmais bija

296
00:17:44,440 --> 00:17:48,380
tas pats, kas slēpt, otrais zvans ir tas pats, kā šovs.

297
00:17:48,380 --> 00:17:53,510
Un jūs varat arī darīt to ar izbalināt pārslēgšanas,

298
00:17:53,510 --> 00:17:55,730
kas nav tas pats, izņemot tā faktiski zūd.

299
00:17:55,730 --> 00:17:59,410
Un tas pats ar slaidu pārslēgšanas.

300
00:17:59,410 --> 00:18:01,460
Ir virknes sekas, kā arī, kas nozīmē,

301
00:18:01,460 --> 00:18:05,520
ja izvēlaties elements un tikai zvanu ķekars animācijas metodes par to,

302
00:18:05,520 --> 00:18:07,400
ja jūs vēlaties, lai izbalināt out, tad slaidu uz leju,

303
00:18:07,400 --> 00:18:11,040
un pēc tam slēpt un pēc tam izbalināt, tas darīs tos pēc kārtas.

304
00:18:11,040 --> 00:18:24,920
Tātad pazuda, atnāca atpakaļ - kādu iemeslu dēļ, tad paslēpt nenotika.

305
00:18:24,920 --> 00:18:30,030
Let 's to izmēģinātu. Jā, tā tas izbalējis, un tad slīdot uz leju prom.

306
00:18:30,030 --> 00:18:32,230
Un tur ir daudz vairāk. Jūs varat izmantot animēt funkciju

307
00:18:32,230 --> 00:18:35,370
, lai izveidotu savu animācijas, kas ir diezgan sarežģīts,

308
00:18:35,370 --> 00:18:38,790
bet tā nodrošina jūs ar bezgalīgu paplašināšanas.

309
00:18:38,790 --> 00:18:40,630
Jūs varat veikt jebkāda veida animāciju, kuru vēlaties.

310
00:18:40,630 --> 00:18:44,230
Jūs varat izmantot arī rindā, lai rindā līdz vairākiem animācijas laikā.

311
00:18:44,230 --> 00:18:47,340
Tātad, ja jūs vēlaties kaut ko lidot pāri lapā,

312
00:18:47,340 --> 00:18:49,860
slaidu no augšējā labajā stūrī uz apakšējā kreisajā pusē, jūs varat darīt, ka,

313
00:18:49,860 --> 00:18:55,240
un vienkārši ir ķekars rīcībām, kas viens pēc otra.

314
00:18:55,240 --> 00:18:57,490
>> Nākamā lieta, mēs nokļūsim līdz runāt par ir notikumi.

315
00:18:57,490 --> 00:19:02,090
Notikumi ļauj jums - līdz šim mēs esam tikko rakstīt lietas vērā konsole

316
00:19:02,090 --> 00:19:04,870
un tas ir viens no veidiem, lai tas notiktu,

317
00:19:04,870 --> 00:19:08,020
bet gan uz faktisko lapu, jūs neesat gatavojas, lai varētu

318
00:19:08,020 --> 00:19:10,020
padarīt lietotāja tipa lietas vērā konsole.

319
00:19:10,020 --> 00:19:12,050
Jūs vēlaties, lai lietas notiktu automātiski.

320
00:19:12,050 --> 00:19:18,060
Šim, jums ir nepieciešams, lai izmantotu pasākumus, kas aktivizē uz kādu konkrētu notikumu notiek.

321
00:19:18,060 --> 00:19:21,340
Jūs varat pārbaudīt dokumentāciju attiecībā uz pilnīgu informāciju.

322
00:19:21,340 --> 00:19:24,030
Tātad, pieņemsim redzēt. Mēs vēlamies, lai paslēptu vai rādītu lodziņu,

323
00:19:24,030 --> 00:19:29,340
bet tagad šī poga nedara neko, jo man nav īstenot vēl.

324
00:19:29,340 --> 00:19:35,420
Es iešu uz faktisko HTML lapu.

325
00:19:35,420 --> 00:19:38,560
Šeit ir slaids. Tur uz slaida div.

326
00:19:38,560 --> 00:19:41,230
Tā ir klasi slaida.

327
00:19:41,230 --> 00:19:46,890
Tur ir teksts. Tagad tur ir šis lodziņā un kaste pogu.

328
00:19:46,890 --> 00:19:52,900
Kā mēs faktiski padara šo pazūd?

329
00:19:52,900 --> 00:19:58,250
Pirmkārt, pieņemsim uzrakstīt funkciju, kas padara kaste ID pazūd.

330
00:19:58,250 --> 00:20:01,820
Tas ir sintakse funtion, pieņemsim tikai sauc to hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Tā nepieņem nekādus argumentus, jo nav argumentu, kas jāveic.

332
00:20:06,130 --> 00:20:08,950
Mēs varam izvēlēties lodziņā ID.

333
00:20:08,950 --> 00:20:15,020
Tātad, izmantojot jQuery izvēlēties, mēs varam izvēlēties kaste ID,

334
00:20:15,020 --> 00:20:17,700
un tad tikai padarītu to izzūd.

335
00:20:17,700 --> 00:20:20,690
Lai tas fade out.

336
00:20:20,690 --> 00:20:27,390
Ja mums bija šo funkciju faktisko konsole,

337
00:20:27,390 --> 00:20:33,380
mēs varētu definēt šo funkciju, mēs varam zvanīt hideTheBox, un tā darbojas.

338
00:20:33,380 --> 00:20:36,650
Bet mēs vēlamies, lai tas notiktu, ja poga ir faktiski nospiests.

339
00:20:36,650 --> 00:20:40,950
Lai to izdarītu, mums ir jāizmanto notikumu.

340
00:20:40,950 --> 00:20:45,500
Saistīt notikumu, lai kādu konkrētu pogu vai kādu darbību, kas notiek,

341
00:20:45,500 --> 00:20:50,040
mums ir, lai izvēlētos elementu, ka pasākums būs iedarbinātu -

342
00:20:50,040 --> 00:20:52,650
vai kas liks notikums, piedodiet.

343
00:20:52,650 --> 00:20:57,220
>> Tātad, pirmkārt, pieņemsim izvēlieties box pogu ID

344
00:20:57,220 --> 00:20:59,610
jo tas ir poga, un tagad, par šo pogu,

345
00:20:59,610 --> 00:21:02,750
mēs vēlamies izveidot animāciju, kad tas ir uzklikšķināt.

346
00:21:02,750 --> 00:21:05,040
Tātad tur ir tas klikšķis funkcija.

347
00:21:05,040 --> 00:21:08,470
Tas ļauj jums, lai uzliktu citu funkciju uz to.

348
00:21:08,470 --> 00:21:12,320
Šī funkcija pieņem citu funkciju kā argumentu

349
00:21:12,320 --> 00:21:14,310
mēs var iet uz hideTheBox funkciju,

350
00:21:14,310 --> 00:21:20,950
un kad šī poga ir noklikšķinājuši, ka funkcija automātiski izpildīt.

351
00:21:20,950 --> 00:21:24,850
Tātad, tas darbosies, ja mēs saglabājam to, es atsvaidzināt,

352
00:21:24,850 --> 00:21:33,460
un - vienu sekundi, es esmu sorry.

353
00:21:33,460 --> 00:21:44,770
Ļaujiet man noteikt šo tiešām ātri.

354
00:21:44,770 --> 00:21:50,680
Labi. Tur mēs ejam. Tātad tagad kaste ir izzūd, kad mēs noklikšķiniet uz pogas.

355
00:21:50,680 --> 00:21:55,470
Mēs varam arī mainīt to tikai fadeToggle,

356
00:21:55,470 --> 00:22:00,020
mainīt to tikai, lai paslēptu vai parādītu lodziņu,

357
00:22:00,020 --> 00:22:03,850
un tas arī strādās arī, ja mēs atsvaidzināt.

358
00:22:03,850 --> 00:22:08,550
Mēs varam paslēpt to, mēs varam arī parādīt to, un turpinās strādāt.

359
00:22:08,550 --> 00:22:12,210
Vēl viena lieta, ko mēs varam darīt, ir, mums nav tiešām ir definēt šo hideTheBox funkciju

360
00:22:12,210 --> 00:22:15,050
Pirms mēs saucam par klikšķi funkciju.

361
00:22:15,050 --> 00:22:17,640
Tā vietā, lai definētu funkciju un aicinot hideTheBox,

362
00:22:17,640 --> 00:22:20,310
mēs esam tikai gatavojas, lai izsauktu to, ja šī lieta ir uzklikšķināt.

363
00:22:20,310 --> 00:22:22,310
Tātad, mēs varam definēt anonīmi šeit,

364
00:22:22,310 --> 00:22:25,070
kas ir iezīme, ka JavaScript ir.

365
00:22:25,070 --> 00:22:29,720
Jūs varat definēt funkciju, parasti mēs teiktu funkciju hideTheBox

366
00:22:29,720 --> 00:22:34,490
ar argumentiem, bet tā vietā, mēs varam tikai teikt darboties nekādus argumentus,

367
00:22:34,490 --> 00:22:36,870
sākt cirtaini lencēm, lai definētu funkciju,

368
00:22:36,870 --> 00:22:40,780
aizvērt šo cirtaini lencēm, un tad tikai definēt funkciju šeit,

369
00:22:40,780 --> 00:22:45,130
pirmajā iekavās un pēdējā iekavām

370
00:22:45,130 --> 00:22:47,860
kas atbilst ar klikšķi funkcijas argumentiem.

371
00:22:47,860 --> 00:22:53,320
Tāpēc mēs esam iet šo funkciju, mēs varam kopēt šo līniju kodu tieši šeit,

372
00:22:53,320 --> 00:22:55,450
un kas darīs tieši to pašu.

373
00:22:55,450 --> 00:22:57,290
Un tagad mums nav šīs izlases fadeTheBox funkciju

374
00:22:57,290 --> 00:22:59,960
kas sēž bez redzama iemesla.

375
00:22:59,960 --> 00:23:02,070
Funkcija ir definēta anonīmi, tai nav vārdu.

376
00:23:02,070 --> 00:23:08,060
Tas būs tikai izpildīt, kad mēs noklikšķiniet uz kastes pogas.

377
00:23:08,060 --> 00:23:12,180
Tik atsvaidzinoša vēlreiz, vēl vienu reizi, un jūs varat redzēt, ka tas joprojām darbojas.

378
00:23:12,180 --> 00:23:16,700
Un tas, kā jūs izveidot notikumus.

379
00:23:16,700 --> 00:23:19,190
>> Ir dažādi notikumi, ko mēs varam izmantot daudz.

380
00:23:19,190 --> 00:23:23,540
Es esmu gatavojas, lai pārslēgtos atpakaļ, izmantojot konsole, lai tikai parādītu, kā tie strādā.

381
00:23:23,540 --> 00:23:28,210
Par katru no šiem ID atbilst katrā kastē.

382
00:23:28,210 --> 00:23:33,020
Tātad šī kaste ir klikšķis ID, šī ir atslēga ID, un šī ir pele ID.

383
00:23:33,020 --> 00:23:36,120
Vēl viena lieta ir, ka tur ir šī rīcība funkcija, nevis ierakstot to ārā katru reizi,

384
00:23:36,120 --> 00:23:41,610
Es faktiski devās uz priekšu un kas definēta šo darbību funkciju leju šeit.

385
00:23:41,610 --> 00:23:46,860
Tas nav tas pats, kā hideTheBox funkciju.

386
00:23:46,860 --> 00:23:51,340
Tas izpaužas šo lodziņu, un vai nu zūd to ārā vai zūd to iekšā

387
00:23:51,340 --> 00:23:54,110
Un tas ir iemesls, kāpēc mēs esam spējīgi to izmantot šeit.

388
00:23:54,110 --> 00:24:00,350
Tātad, ja mēs noklikšķiniet uz šo klikšķi ID, mēs vēlamies, lai lodziņā pazūd vai atkal parādās.

389
00:24:00,350 --> 00:24:03,610
Tas ir tas pats, pogas, kas mums bija pēdējā slaida.

390
00:24:03,610 --> 00:24:07,450
Tagad, kad mēs to saucam, ka mēs varam noklikšķiniet uz šo un kaste izzudīs,

391
00:24:07,450 --> 00:24:10,160
pēc tam noklikšķiniet uz to vēlreiz, un logs atkal parādās.

392
00:24:10,160 --> 00:24:12,480
Tas ir diezgan vienkārši. Dubultklikšķi nav tas pats,

393
00:24:12,480 --> 00:24:15,660
izņemot, tas prasa dubultu klikšķi.

394
00:24:15,660 --> 00:24:19,030
Tātad, ja jūs noklikšķiniet uz tā vienu reizi, un noklikšķiniet uz tā atkal nekas nenotiks,

395
00:24:19,030 --> 00:24:21,140
bet, ja jūs dubultklikšķi ātri, tas pazudīs.

396
00:24:21,140 --> 00:24:23,310
Ja jūs dubultklikšķi atkal, tas nāks atpakaļ.

397
00:24:23,310 --> 00:24:25,250
Tātad tas ir diezgan vienkārši.

398
00:24:25,250 --> 00:24:31,170
Tastatūru ir sava veida dīvaini, es nedomāju, ka tas tiešām darbojas šajā piemērā

399
00:24:31,170 --> 00:24:37,670
jo galvenais leju, taustiņu uz augšu un nospiežot taustiņu un citas galvenās darbības

400
00:24:37,670 --> 00:24:47,190
aktivizēt vienalga, ko elements, jums saistīt to.

401
00:24:47,190 --> 00:24:51,410
Piemēram, pat tad, ja man saistās taustiņu uz leju, lai iestādei vai kaut kas cits pilnīgi,

402
00:24:51,410 --> 00:24:55,950
tad tā tomēr aktivizēt vienalga - tas nav īpašs.

403
00:24:55,950 --> 00:25:00,190
Man nav jābūt noklikšķinot uz šo un nospiediet taustiņu, lai padarītu kaut ko izzūd.

404
00:25:00,190 --> 00:25:04,470
Būtu aktivizēta neatkarīgi no tā, ko elements es esmu šobrīd iekšā

405
00:25:04,470 --> 00:25:06,880
Tātad tie nav faktiski strādā šajā piemērā

406
00:25:06,880 --> 00:25:13,180
tāpēc, ka tā neatzīst mani, kā ienāk ieguldījumu tastatūras ievades div.

407
00:25:13,180 --> 00:25:15,740
>> Bet, ja paskatās peli darbībām,

408
00:25:15,740 --> 00:25:19,620
pirmais ir lidināties, un to var darīt kaut ko no tā, izmantojot CSS.

409
00:25:19,620 --> 00:25:24,280
Ja jūs izmantojat CSS, jūs varat to izveidot tā, ka, ja jūs lidināties pār kaut ko,

410
00:25:24,280 --> 00:25:28,940
tad tās stila izmaiņas.

411
00:25:28,940 --> 00:25:32,170
Bet izmantojot jQuery jūs varat mainīt stilu citas lietas, kā arī.

412
00:25:32,170 --> 00:25:37,120
Tā, piemēram, mēs ejam, lai izsauktu rīcību, ja mēs lidināties virs šīs div.

413
00:25:37,120 --> 00:25:39,660
Tas nozīmē, ja mēs lidināties pār to, tad lodziņā pazudīs.

414
00:25:39,660 --> 00:25:42,430
Ja mēs virzāmies prom no tā, kaste atkal parādīsies.

415
00:25:42,430 --> 00:25:45,090
Ja mēs to saucam, un lidināties pār to, kaste tas pazūd,

416
00:25:45,090 --> 00:25:47,050
un tiklīdz mēs virzāmies prom, tas nāk atpakaļ.

417
00:25:47,050 --> 00:25:49,750
Ja mēs saucam lidināties funkciju peles ID,

418
00:25:49,750 --> 00:25:54,380
kas atbilst šo lodziņu, tad, ja mēs lidināties virs kastes,

419
00:25:54,380 --> 00:26:00,440
tad kaste tiešām pazudīs - tas ir bailīgs tieši tagad, bet -

420
00:26:00,440 --> 00:26:06,310
ja mēs virzāmies prom no tā, tas atkal parādīsies. Labais tagad tas ir atpakaļ kāda iemesla dēļ.

421
00:26:06,310 --> 00:26:12,720
Pele ieiet un peles pārvietot funkcijas ir nedaudz līdzīgs, bet nedaudz atšķiras.

422
00:26:12,720 --> 00:26:16,470
Pele ievadīt tikai aktivizēts, kad pele ieiet kastē, kā plānots.

423
00:26:16,470 --> 00:26:19,210
Tātad, ja jūs pārvietot uz to, tas būs izzūd.

424
00:26:19,210 --> 00:26:23,210
Bet tas nebūs atkal parādīties, kad jūs pārvietot prom, jums ir, lai pārvietotos atpakaļ uz to, lai tā atgriezties.

425
00:26:23,210 --> 00:26:25,590
Pastāv arī peles kustības funkcija, kas aktivizēs

426
00:26:25,590 --> 00:26:29,300
kad pele ir pat klāt kastē.

427
00:26:29,300 --> 00:26:32,430
Tātad tas būs tikai glabāt uz notiekošo, izgaist iekšā un ārā.

428
00:26:32,430 --> 00:26:35,660
Un tas ir faktiski mežizstrāde - šķiet, tāpat kā tas ir vienkārši izgaist iekšā un ārā,

429
00:26:35,660 --> 00:26:39,140
bet tas ir faktiski piesakoties daudz vairāk darbību, nekā tas,

430
00:26:39,140 --> 00:26:43,550
Tātad, kad jūs attālināties tas būs tikai glabāt notiek tāpēc, ka pieteicies kā tūkstotis no tiem.

431
00:26:43,550 --> 00:26:46,620
Varbūt ne tūkstošus. Varbūt pieci.

432
00:26:46,620 --> 00:26:50,200
Tas logs vairāk.

433
00:26:50,200 --> 00:26:53,280
Punkts ir, visas peles darbību, tur ir daudz no tiem.

434
00:26:53,280 --> 00:26:55,480
Jūs varat lasīt līdzi citiem uzņēmumiem, bet tie visi ir nedaudz atšķirīgs,

435
00:26:55,480 --> 00:26:57,700
un jūs varat izvēlēties to, kas jums nepieciešams

436
00:26:57,700 --> 00:27:02,130
lai atkarībā no konkrētam mērķim jūs mēģināt darīt.

437
00:27:02,130 --> 00:27:05,060
>> Nākamā lieta, es esmu gatavojas runāt par ir AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, es zinu, ka mēs nesedza JavaScript tik daudz dziļums šogad,

439
00:27:09,340 --> 00:27:11,770
tāpēc es esmu tikai gatavojas runāt par AJAX kopumā par minūti.

440
00:27:11,770 --> 00:27:15,210
AJAX stendi Asynchronous JavaScript un XML.

441
00:27:15,210 --> 00:27:19,030
Tas ir būtībā, piemēram, kad jūs esat par Facebook, un tas liek jums paziņojumu,

442
00:27:19,030 --> 00:27:23,060
tas ir tāpēc, AJAX darbojas savā interneta pārlūkprogrammā.

443
00:27:23,060 --> 00:27:25,800
Ik pēc pāris sekundēm jūsu interneta pārlūkprogramma ir faktiski

444
00:27:25,800 --> 00:27:29,420
dodas uz Facebook serveriem, lūdzot viņiem, jums ir kaut ko jaunu par mani,

445
00:27:29,420 --> 00:27:31,980
un tad tas nāk atpakaļ uz jums.

446
00:27:31,980 --> 00:27:36,320
Tas ļauj jums nosūtīt pieprasījumus uz serveri

447
00:27:36,320 --> 00:27:38,660
bez faktiski ielādēt lapu.

448
00:27:38,660 --> 00:27:42,040
Tātad normāli, ja jūs tikai, izmantojot PHP un datubāzes,

449
00:27:42,040 --> 00:27:45,480
Jums ir, lai atsvaidzinātu lapu, pirms jūs varat saņemt jaunu informāciju no servera.

450
00:27:45,480 --> 00:27:48,770
Bet izmantojot AJAX, jūs varat pull šo jauno informāciju pastāvīgi,

451
00:27:48,770 --> 00:27:52,250
vai pull par to, kad jūs noklikšķiniet uz pogas vai, piemēram, ka neko.

452
00:27:52,250 --> 00:27:56,140
Tātad tas ļauj mums nosūtīt pieprasījumu bez pārkraušanas lapu,

453
00:27:56,140 --> 00:27:58,130
un mēs varam izmantot vai nu GET vai POST pieprasījumus.

454
00:27:58,130 --> 00:28:05,370
>> GET pieprasījumu, ir, piemēram, ja jūs, lai uz Google.com

455
00:28:05,370 --> 00:28:10,900
un darīt q = testu. Tas ir dodot viņiem vaicājumu testu.

456
00:28:10,900 --> 00:28:15,890
Un tas ir GET pieprasījumu, jo tas iet šajos parametros uz URL pati.

457
00:28:15,890 --> 00:28:19,250
POST pieprasījums ir kā tad, ja jūs nosūtot tos pa pastu.

458
00:28:19,250 --> 00:28:22,500
Tas ir tāpat kā jūs nodot to vēstuli un nosūtīt to off uz tiem,

459
00:28:22,500 --> 00:28:25,140
bet tie nav faktiski redzēt saturu. Viņi nav redzams URL.

460
00:28:25,140 --> 00:28:31,040
Jūs nevarat tieši ierakstīt to, jums ir, lai to nosūtītu gandrīz slepeni.

461
00:28:31,040 --> 00:28:33,880
Tas ir post.

462
00:28:33,880 --> 00:28:38,660
Bet izmantojot jQuery, jūs varat darīt, GET un POST pieprasījumus

463
00:28:38,660 --> 00:28:42,740
daudz vieglāk, nekā jūs parasti var izmantot tikai plain JavaScript.

464
00:28:42,740 --> 00:28:50,140
Jūs varat vaicājumu API, izmantojot GET pieprasījumus, un jūs varat arī pārbaudīt pieteikšanās informāciju.

465
00:28:50,140 --> 00:28:54,400
Uz nākamo lapu, es izveidojis to, ko jautā: "Kas būs pusdienās?"

466
00:28:54,400 --> 00:28:58,230
izmantojot Harvard pārtikas API, tāpēc pieņemsim pull, ka līdz.

467
00:28:58,230 --> 00:29:01,840
Tas ir tikai piemērs, kā jūs varat izmantot jQuery darīt GET pieprasījumu uz API

468
00:29:01,840 --> 00:29:04,200
un saņemt informāciju atpakaļ no tā.

469
00:29:04,200 --> 00:29:07,090
Tāpēc mēs vēlamies redzēt izvēlni šodien,

470
00:29:07,090 --> 00:29:10,560
un mēs gribam, lai redzētu, kas ir par pusdienām.

471
00:29:10,560 --> 00:29:16,500
Lūk URL, lai izveidotu GET pieprasījumu jQuery.

472
00:29:16,500 --> 00:29:18,600
Jūs lietojat $. get funkciju.

473
00:29:18,600 --> 00:29:22,290
Pirmais arguments ir URL, lai tieši to, ko jūs esat vaicājumiem.

474
00:29:22,290 --> 00:29:27,200
Tad nākamais arguments ir funkcija, kas izpilda tad, kad GET pieprasījums ir pabeigta.

475
00:29:27,200 --> 00:29:29,980
Tātad jums nosūtīt off daži pieprasījumu uz serveri, gaidīt, lai tā nāk atpakaļ.

476
00:29:29,980 --> 00:29:33,770
Kad tas nāk atpakaļ, jūs gatavojas veikt kādu darbību ar datiem, kas ir atpakaļ no servera.

477
00:29:33,770 --> 00:29:37,520
Iesim uz priekšu un kodētu to kā labi.

478
00:29:37,520 --> 00:29:42,110
Man nav kodu, vai nu, uz mērķi.

479
00:29:42,110 --> 00:29:46,660
Lūk TODO. Pirmkārt, pieņemsim izmantot notikuma saistošs

480
00:29:46,660 --> 00:29:50,820
tā, ka tad, kad šī poga tiek nospiesta, mēs nosūtām off GET pieprasījumu.

481
00:29:50,820 --> 00:29:53,410
Un, kad tas GET pieprasījumu atgriežas ar dažiem datiem,

482
00:29:53,410 --> 00:29:57,290
mēs ejam, lai rakstīt to šajā maltīti info ID div.

483
00:29:57,290 --> 00:30:02,860
Pirmkārt, pieņemsim izvēlēties pārtikas pogu ID.

484
00:30:02,860 --> 00:30:07,320
Kad tas ir uzklikšķināt, mēs gribam, lai kaut ko darīt.

485
00:30:07,320 --> 00:30:11,930
Pieņemsim tikai padarītu to anonīmu fuction, kā iepriekš.

486
00:30:11,930 --> 00:30:15,550
Varat wrap šos cirtaini bikšturi,

487
00:30:15,550 --> 00:30:18,530
un, kad šī poga tiek nospiesta, mēs vēlamies, lai nosūtītu GET pieprasījumu

488
00:30:18,530 --> 00:30:20,750
lai pārbaudītu to, kas ir par pusdienām.

489
00:30:20,750 --> 00:30:24,970
Lai to izdarītu, mēs varam vienkārši ierakstiet $. Saņemt.

490
00:30:24,970 --> 00:30:28,850
Tas ir jQuery funkcija, izmantojot dolāra zīmi.

491
00:30:28,850 --> 00:30:31,430
Tas aizņem pāris argumentus. Pirmais ir URL,

492
00:30:31,430 --> 00:30:34,450
otrs ir atzvanīšanas funkcija, funkcija, kas saucas

493
00:30:34,450 --> 00:30:37,740
ja šis lūgums faktiski atgriežas.

494
00:30:37,740 --> 00:30:39,890
Let 's vienkārši veidot URL pirmās.

495
00:30:39,890 --> 00:30:44,650
Mēs varam iegūt no API, ka Dāvids rakstīja augšu.

496
00:30:44,650 --> 00:30:51,360
Dodoties šeit, mēs varam redzēt, ka tas ir food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
un tad jūs vienkārši iet kas par parametriem, kas jūs vēlētos nosaukumiem.

498
00:30:54,140 --> 00:30:57,760
Tātad parametrs 1 ir vērtība 1.

499
00:30:57,760 --> 00:31:00,910
Izskatās, ka standarta datumu, sākuma datumu, noklusējumus līdz mūsdienām

500
00:31:00,910 --> 00:31:03,110
ja jums nav ievadīt kaut ko, un beigu datumu arī noklusējumus

501
00:31:03,910 --> 00:31:05,930
lai šodien, ja jūs neienāk neko.

502
00:31:05,930 --> 00:31:10,790
Tas, ko mēs gribam. Mēs vēlamies, lai tikai iegūt informāciju par šodienu.

503
00:31:10,790 --> 00:31:12,950
>> Mēs vēlamies formāts būt JSON.

504
00:31:12,950 --> 00:31:15,570
Tas ir tikai patvaļīgi, jūs varat izmantot jebkuru formu, kuru vēlaties.

505
00:31:15,570 --> 00:31:18,950
Jūs varat izmantot, CSV, bet JSON ir JavaScript Object notāciju.

506
00:31:18,950 --> 00:31:24,150
Tas ir ļoti viegli JavaScript lai saprastu, ko tas nozīmē,

507
00:31:24,150 --> 00:31:27,110
un mēs varam izdrukāt daudz vieglāk, ka veidā.

508
00:31:27,110 --> 00:31:30,490
Tātad, pieņemsim to pieprasa JSON, un pieņemsim pieprasījums pusdienas.

509
00:31:30,490 --> 00:31:37,660
Tātad milti = pusdienas. Vienkārši rakstīt šo URL, mēs ejam atpakaļ šeit.

510
00:31:37,660 --> 00:31:41,290
Tur ir izvēlnes. Pirmais parametrs ir izeja = JSON

511
00:31:41,290 --> 00:31:44,640
jo tas, ko mēs vēlamies, un jūs atsevišķi parametrus, ar 'un. "

512
00:31:44,640 --> 00:31:48,940
Otrais parametrs ir - es neatceros.

513
00:31:48,940 --> 00:31:52,170
Maltīti. Un mēs gribam maltīti = pusdienas.

514
00:31:52,170 --> 00:31:57,390
Jūs varat pārbaudīt šo vietrādi URL, ierakstot to savā pārlūkprogrammā, un iet uz to.

515
00:31:57,390 --> 00:32:03,120
Tas dos jums dažas produkciju. Tas ir tikai ķekars sīkumi, kas ir par pusdienām.

516
00:32:03,120 --> 00:32:10,410
Tas ir šajā neglīts formātā. Mēs vēlamies, lai izdrukātu to uz mūsu lapu labāku formātā.

517
00:32:10,410 --> 00:32:12,580
Tātad URL ir pareizs, tagad mums ir nepieciešams, lai rakstītu funkciju

518
00:32:12,580 --> 00:32:18,300
atzvanīt, kad pieprasījums ir veiksmīga.

519
00:32:18,300 --> 00:32:20,430
Šī funkcija tiks faktiski veikt arguments. Tas būs dati.

520
00:32:20,430 --> 00:32:25,650
Dati ir tas, kas nāk atpakaļ no GET pieprasījumu pēc GET pieprasījums tiek darīts.

521
00:32:25,650 --> 00:32:28,860
Mēs varam darīt cirtaini bikšturi, jo šeit mēs rakstīt anonīmu funkciju

522
00:32:28,860 --> 00:32:33,900
kas izpilda, izmantojot šos datus, kad mēs saņemam informāciju atpakaļ.

523
00:32:33,900 --> 00:32:37,840
Tātad datiem, kad mēs drukāti šo URL,

524
00:32:37,840 --> 00:32:41,540
tas ir tas, dati ir gatavojas izskatās. Tas būs šo milzīgo virkne.

525
00:32:41,540 --> 00:32:48,610
Bet laba lieta ir, JavaScript var apstrādāt to, izmantojot JSON.parse funkciju.

526
00:32:48,610 --> 00:32:54,950
Tātad, pieņemsim izveidot jaunu mainīgo sauc izanalizēt datus.

527
00:32:54,950 --> 00:32:57,060
Un apstrādāt datu masīvs objektiem.

528
00:32:57,060 --> 00:33:04,200
Katrs objekts satur informāciju, piemēram, - labi, pieņemsim to apskatīt.

529
00:33:04,200 --> 00:33:08,980
Tas ir datums, ar maltīti, kategoriju, recepte, visu šo citi sīkumi.

530
00:33:08,980 --> 00:33:10,860
Tāpēc pieņemsim tikai izdrukāt nosaukumu katram vienu.

531
00:33:10,860 --> 00:33:13,790
Pieņemsim atkārtot visā masīvs sīkumi, ka mēs saņemam atpakaļ no tā,

532
00:33:13,790 --> 00:33:17,570
un vienkārši izdrukāt katrs - izdrukā vārdu katra vienu.

533
00:33:17,570 --> 00:33:22,670
Tas ir uz cilpas.

534
00:33:22,670 --> 00:33:26,030
>> JavaScript ir šo noderīgi sintakse, kur jūs varat izveidot mainīgo un cilpas pār masīva,

535
00:33:26,030 --> 00:33:30,150
un var i ir tikai iteratora, tāpēc tā vietā, lai darīt, var i = 0,

536
00:33:30,150 --> 00:33:40,290
man bija mazāk nekā garumu, i + +, jūs varat darīt, var i ar parsēt datus.

537
00:33:40,290 --> 00:33:47,060
Šajā piemērā, parsēt dati (i), kas atbilst uz pašreizējo elementa

538
00:33:47,060 --> 00:33:49,850
masīva, faktisko objekts.

539
00:33:49,850 --> 00:33:51,720
Un mēs gribam, lai saņemtu vārdu no tā.

540
00:33:51,720 --> 00:33:54,170
Tāpēc pieņemsim tikai darīt nosaukums.

541
00:33:54,170 --> 00:33:57,000
Un pēdējā lieta ir, mēs ejam, lai ir dažas jQuery vēlreiz.

542
00:33:57,000 --> 00:34:02,660
Faktiski pievienot to div, šo maltīti info div, kas ir tukšs.

543
00:34:02,660 --> 00:34:05,430
Tātad, pieņemsim, izvēlieties to.

544
00:34:05,430 --> 00:34:13,870
Mēs izmantosim jQuery un izvēlieties maltīti info div ID, vai miltus Info ID, sorry.

545
00:34:13,870 --> 00:34:16,580
Mēs vēlamies pievienot šim.

546
00:34:16,580 --> 00:34:21,030
Ja mēs tests, piemēram, tas būtu vienkārši pārrakstīt to katru reizi.

547
00:34:21,030 --> 00:34:29,190
Tātad, mēs varam vienkārši pievienot šo.

548
00:34:29,190 --> 00:34:31,889
Pašreizējā elements masīva, mēs iegūt vārdu no tā,

549
00:34:31,889 --> 00:34:38,159
un mēs pievienot to līdz beigām maltīti info ID div.

550
00:34:38,159 --> 00:34:40,120
Un tad tikai, lai tas izskatās tīrāka,

551
00:34:40,120 --> 00:34:51,550
mēs arī pievienot rindiņas pārtraukumu, lai tas vēl nav viss vienā rindiņā.

552
00:34:51,550 --> 00:34:55,280
Tātad, ja viss noritēs labi, ka būtu labi -

553
00:34:55,280 --> 00:34:57,220
pirmkārt, ja šī poga ir noklikšķinājuši,

554
00:34:57,220 --> 00:35:00,070
tā nosūtīs pie GET pieprasījumu uz šo URL.

555
00:35:00,070 --> 00:35:02,500
Ja dati nāk atpakaļ no tā, tas būs izanalizēt to,

556
00:35:02,500 --> 00:35:06,950
pārvērst to JSON, cilpa pāri visai masīvs, kas pārstāv šos datus,

557
00:35:06,950 --> 00:35:10,310
un pēc tam pievienot vārdu un rindiņas pārtraukumu

558
00:35:10,310 --> 00:35:16,500
uz katru līnijas šajā maltīti info ID, kas iepriekš bija tukšs.

559
00:35:16,500 --> 00:35:18,910
Tā iet atpakaļ uz šo lapu, mēs atsvaidzināt,

560
00:35:18,910 --> 00:35:23,690
klikšķis, uzzināt - tas nedarbojas. Tas ir žēl.

561
00:35:23,690 --> 00:35:25,830
Un tas ir, ja debugging nāk collas

562
00:35:25,830 --> 00:35:30,070
Index.html, līnija 1.

563
00:35:30,070 --> 00:35:57,210
Tas ir interesanti.

564
00:35:57,210 --> 00:35:59,720
Labi, labi, nevis tērēt laiku darot to, es esmu tikai gatavojas

565
00:35:59,720 --> 00:36:07,070
uzvilkt darīts failu, kas man ir, kas ir pabeigta versija.

566
00:36:07,070 --> 00:36:13,710
Es neesmu pārliecināts, kāda atšķirība ir, bet mēs varam tikai atvērt šo augšu vietā.

567
00:36:13,710 --> 00:36:19,740
Un mēs ejam uz AJAX, un tam vajadzētu strādāt pareizi.

568
00:36:19,740 --> 00:36:21,730
Tas ir tas, kas bija pusdienas šodien,

569
00:36:21,730 --> 00:36:24,870
jo nav īpaši secībā, ar pēdiņām ap to, tāpēc tas nav prettiest.

570
00:36:24,870 --> 00:36:27,090
Bet, protams, ja jūs darāt to, lai gala projektu,

571
00:36:27,090 --> 00:36:30,120
Jūs varētu darīt to izskatīties labāk.

572
00:36:30,120 --> 00:36:32,530
Bet tas ir tikai vienkāršs piemērs tam, kā jūs darīt GET pieprasījumu.

573
00:36:32,530 --> 00:36:34,580
Un, ja mēs skatāmies faktisko kodu, es esmu guessing, es esmu diezgan pārliecināts, ka

574
00:36:34,580 --> 00:36:39,690
tas joprojām ir diezgan daudz to pašu.

575
00:36:39,690 --> 00:37:04,990
Ak, es aizmirsu, lai pārvērstu to par virkni, tas arī viss.

576
00:37:04,990 --> 00:37:07,920
Nē, tas joprojām nedarbojas. Neatkarīgi, šeit ir faktiski pabeigta kodu

577
00:37:07,920 --> 00:37:10,300
par to, kas tas izskatās,

578
00:37:10,300 --> 00:37:16,400
un tas nav tas pats, kā tas, ko es tikko īstenots.

579
00:37:16,400 --> 00:37:22,760
Kad jūs noklikšķiniet uz pogas, tā izmanto GET JSON, lai automātiski apstrādāt datus.

580
00:37:22,760 --> 00:37:29,190
Tā ņem datus atpakaļ no tā un cilpas cauri visai masīvs

581
00:37:29,190 --> 00:37:32,770
un izdrukas, ka ir - kāda ir pusdienās šodien, nosaukumu no tā,

582
00:37:32,770 --> 00:37:38,020
un pievieno līnijas pārtraukumu pēc katra līnija.

583
00:37:38,020 --> 00:37:41,100
Tas ir, kā jūs izmantojat GET funkciju.

584
00:37:41,100 --> 00:37:44,040
>> Jūs varat arī izmantot POST, kas man nav laika

585
00:37:44,040 --> 00:37:47,940
rakstīt piemēru par to, taču mēs varam apskatīt dokumentus.

586
00:37:47,940 --> 00:37:53,220
Ja paskatās jquery.post,

587
00:37:53,220 --> 00:37:55,510
Jūs varat redzēt, ka tas ir gandrīz tas pats.

588
00:37:55,510 --> 00:38:01,650
Jums ir URL, bet tā vietā iet parametrus, izmantojot -

589
00:38:01,650 --> 00:38:03,990
tikai liekot tos virknes URL pati,

590
00:38:03,990 --> 00:38:06,300
Jums jānokārto šajā datu mainīgā

591
00:38:06,300 --> 00:38:11,990
ka būtībā masīvs, vārdnīcu, kas kartes parametru vērtībām.

592
00:38:11,990 --> 00:38:17,690
Jums iet, ka, un nosūta tos, izmantojot POST.

593
00:38:17,690 --> 00:38:20,790
Un, kad jums ir, ka, tad jums var būt veiksmes funkcija

594
00:38:20,790 --> 00:38:23,930
ka izpilda tad, kad dati nāk atpakaļ.

595
00:38:23,930 --> 00:38:26,430
Pretējā gadījumā, tas ir tieši tas pats. Tātad, izmantojot POST,

596
00:38:26,430 --> 00:38:29,970
jūs varētu vēlēties izmantot POST, piemēram, ja jums ir ievades forma

597
00:38:29,970 --> 00:38:35,780
jūs ļaujiet cilvēkiem ievades paroles tajā, kā arī nosūtīt tās paroles off

598
00:38:35,780 --> 00:38:41,850
Jūsu back-end skriptu, lai pārbaudītu datu bāzē, vai šis lietotājs ir derīgs vai nav.

599
00:38:41,850 --> 00:38:46,700
Jūs varat darīt, ka visi izmanto jQuery tā vietā, lai atsvaidzinātu lapu vispār.

600
00:38:46,700 --> 00:38:52,160
Tas ir, kā es īstenota blogā, ka es parādīja jums agrāk.

601
00:38:52,160 --> 00:38:59,530
Ja mēs ejam uz gala portālā un atteiktos, atteiktos,

602
00:38:59,530 --> 00:39:02,600
Iziet nedarbojas.

603
00:39:02,600 --> 00:39:13,360
Nu, ļaujiet man vienkārši atvērt to jaunā logā.

604
00:39:13,360 --> 00:39:16,580
Šeit ir parole, un es biju gatavojas rakstīt kaut ko izlases.

605
00:39:16,580 --> 00:39:18,590
Tas nedarbojas, bet jūs varat redzēt, ka mēs neesam

606
00:39:18,590 --> 00:39:20,840
faktiski ir, lai atsvaidzinātu lapu vispār.

607
00:39:20,840 --> 00:39:24,610
Kodu, ja jūs vēlaties skatīties uz to,

608
00:39:24,610 --> 00:39:37,460
ir viss pieejams šeit.

609
00:39:37,460 --> 00:39:45,680
Tāpēc kodu es uzrakstīju pagājušajā gadā dažkārt.

610
00:39:45,680 --> 00:39:47,790
Kā jūs varat redzēt šeit, mēs esam nosūtot POST pieprasījumu.

611
00:39:47,790 --> 00:39:50,400
Man ir failu ar nosaukumu login.php uz muguras beigās,

612
00:39:50,400 --> 00:39:53,860
kas pārbauda, ​​ja parole ir derīga.

613
00:39:53,860 --> 00:39:56,000
Parametri, mēs caurlaide ir parole, plānots

614
00:39:56,000 --> 00:40:00,030
ievades, kas ir šajā ievades lodziņā pašlaik.

615
00:40:00,030 --> 00:40:04,110
Un, kad dati nāk atpakaļ, mēs pārbaudām.

616
00:40:04,110 --> 00:40:07,680
Ja dati ir nepatiesi, tad mēs sakām nepareizu paroli, bīdiet to uz leju,

617
00:40:07,680 --> 00:40:09,580
un tikai padarītu to izzūd pēc tam.

618
00:40:09,580 --> 00:40:12,320
Pretējā gadījumā, mēs slodze admin lapu.

619
00:40:12,320 --> 00:40:15,080
Un tas viss bija darīts, izmantojot JSON.

620
00:40:15,080 --> 00:40:18,510
Šajā Daudzos rindiņas kodu, jūs varat nodot datus atpakaļ beigām,

621
00:40:18,510 --> 00:40:21,020
pārbaudīt, vai tas ir pareizi, pārbaudiet, vai jums ir pieteicies pareizi,

622
00:40:21,020 --> 00:40:24,200
un faktiski reaģēt uz to, novirzot personu uz pareizo lapu

623
00:40:24,200 --> 00:40:29,760
vai neļaujot tiem ieiet, un stāsta, ka viņiem bijusi nepareiza parole.

624
00:40:29,760 --> 00:40:33,040
Tātad tas ir piemērs tam, kā jūs varētu izmantot jQuery POST

625
00:40:33,040 --> 00:40:37,010
nosūtīt POST pieprasījumu, lai jūsu atpakaļ beigām,

626
00:40:37,010 --> 00:40:42,400
pārbaudot, vai kāds ir pieteicies pareizi.

627
00:40:42,400 --> 00:40:44,820
>> Labi, tā ka visi piemēri man bija, un visi sīkumi, es gribēju, lai segtu.

628
00:40:44,820 --> 00:40:47,110
Tie ir galvenās lietas, kas jQuery ļauj jums darīt:

629
00:40:47,110 --> 00:40:52,640
atlasīt elementus, mainīt tos, izmantojot DOM manipulācijām,

630
00:40:52,640 --> 00:40:56,340
Jūs varat pievienot efektus, aktivizējiet lietas par konkrētiem notikumiem,

631
00:40:56,340 --> 00:41:00,430
un arī darīt AJAX pieprasījumus ļoti nemanāmi un viegli.

632
00:41:00,430 --> 00:41:02,840
Tātad, paldies par ierašanos vai skatoties,

633
00:41:02,840 --> 00:41:06,230
un, ja jums ir kādi jautājumi, tikai ļaujiet man zināt. Yeah?

634
00:41:06,230 --> 00:41:12,730
[Studentu] Atpakaļ, kad parādīja, jums bija JSON pēc POST pieprasījuma citātus,

635
00:41:12,730 --> 00:41:15,170
un man bija tikai jautājums, ko tas darīja.

636
00:41:15,170 --> 00:41:20,070
>> Jā, es redzu. Jautājums bija, ka, piemēram, es tikko parādīja,

637
00:41:20,070 --> 00:41:25,790
tur bija vārds JSON pēdiņās ap -

638
00:41:25,790 --> 00:41:31,690
Es ņemšu tikai atkal izvelciet to - ap POST funkciju.

639
00:41:31,690 --> 00:41:43,320
Es esmu tikai velkot to uz augšu, lai parādītu.

640
00:41:43,320 --> 00:41:46,890
Tātad, šeit ir tas POST pieprasījums, un tur tas ir pēdiņās JSON.

641
00:41:46,890 --> 00:41:50,280
Ka tikai nosaka, ko mēs sagaidām, lai produkcija būtu.

642
00:41:50,280 --> 00:41:54,070
Tātad, ja mēs pāriet JSON kā paredzamo datu tipu,

643
00:41:54,070 --> 00:41:56,070
tas nav, bet, ja mēs caurlaide to,

644
00:41:56,070 --> 00:41:58,590
tad dati tiks automātiski parsēt kā JSON.

645
00:41:58,590 --> 00:42:00,600
Tāpēc mums nav, lai izsauktu JSON parsēt funkciju par to,

646
00:42:00,600 --> 00:42:02,620
tas būs tikai notikt automātiski.

647
00:42:02,620 --> 00:42:05,150
Un, ja jūs to apskatīt dokumentāciju POST,

648
00:42:05,150 --> 00:42:09,850
ir šī datu tipa mainīgais, datu veidu gaidīt no servera.

649
00:42:09,850 --> 00:42:12,660
Tā noklusējuma viedo uzminēt, kas var būt nepareizi,

650
00:42:12,660 --> 00:42:15,520
lai jūs varat atstāt to tukšu, bet tas ir tikai datu veidu

651
00:42:15,520 --> 00:42:21,680
kodēšanas, ka jūs izmantojat, vai tas ir JSON vai XML, vai kaut kas cits.

652
00:42:21,680 --> 00:42:25,280
>> Jebkādi citi jautājumi?

653
00:42:25,280 --> 00:42:27,300
Labi. Ja jums ir kādi citi jautājumi, lūdzu, rakstiet man

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

655
00:42:30,830 --> 00:42:34,860
un slaidi un kodi būtu pieejami tiešsaistē diezgan drīz.

656
00:42:34,860 --> 00:42:42,810
Good luck ar savu gala projektiem, ceru, ka jūs izmantojat jQuery.

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