1
00:00:00,000 --> 00:00:07,440

2
00:00:07,440 --> 00:00:08,180
>> TOMAS Reimers: Živjo, vsi.

3
00:00:08,180 --> 00:00:09,250
Moje ime je Tomas Reimers.

4
00:00:09,250 --> 00:00:10,500
>> MIKE RIZZO: In jaz sem Mike Rizzo.

5
00:00:10,500 --> 00:00:12,990
>> TOMAS Reimers: Smo dve CS50s TS.

6
00:00:12,990 --> 00:00:18,910
In danes smo vodilni na seminar o
JavaScript in CSS za spletne aplikacije.

7
00:00:18,910 --> 00:00:22,140
Če želite slediti skupaj,
Povezava je tamle.

8
00:00:22,140 --> 00:00:25,190
In hočeš, da ga dajo gor
na računalniškem kratko?

9
00:00:25,190 --> 00:00:27,460
>> Tukaj je povezava.

10
00:00:27,460 --> 00:00:30,390
To je majhno mesto, ki ima povezave do
vsa sredstva, da bomo lahko

11
00:00:30,390 --> 00:00:36,490
si ogledamo danes in ima tudi veliko
koristne informacije, ki nam pisal

12
00:00:36,490 --> 00:00:39,680
preberi več v globino, ko greš nazaj,
in skušate spomniti, kaj

13
00:00:39,680 --> 00:00:42,166
točno to smo rekli, kaj ste bili
govoriš, et cetera.

14
00:00:42,166 --> 00:00:43,870
>> MIKE RIZZO: V redu.

15
00:00:43,870 --> 00:00:44,890
Torej, začnimo.

16
00:00:44,890 --> 00:00:45,700
>> TOMAS Reimers: Torej hočeš, da začnete?

17
00:00:45,700 --> 00:00:45,970
OK.

18
00:00:45,970 --> 00:00:47,170
>> MIKE RIZZO: Ja.

19
00:00:47,170 --> 00:00:51,730
Tako smo najprej želeli začeti s široko
Pregled o internetu in

20
00:00:51,730 --> 00:00:54,240
Pri načrtovanju spletne strani datoteko vrste.

21
00:00:54,240 --> 00:00:57,550
Medtem ko je ta predstavitev bomo želeli
priti vv JavaScript veliko veliko

22
00:00:57,550 --> 00:01:00,320
kasneje, smo želeli, da začnete s
samo, nekako tako kot ptičje oko

23
00:01:00,320 --> 00:01:03,270
Česa spletno stran in kako
da razmišljajo o oblikovanju

24
00:01:03,270 --> 00:01:04,800
Spletna stran za začetek.

25
00:01:04,800 --> 00:01:08,370
>> Torej fantje, na tej točki - z njim
pri čemer je v petek zvečer - morajo imeti

26
00:01:08,370 --> 00:01:11,000
predložila svoj CS50 finance
Problem določa.

27
00:01:11,000 --> 00:01:15,260
Upajmo, da je dobrega okusa
kaj spletno programiranje lahko.

28
00:01:15,260 --> 00:01:18,261
Ampak tukaj želimo, vrsta, daj
si drug okus, kot tudi.

29
00:01:18,261 --> 00:01:23,190
>> TOMAS Reimers: Torej, samo da povzamem, kaj
se zgodi, ko tip v URL za

30
00:01:23,190 --> 00:01:26,650
vaš spletni brskalnik, da URL dobi
pogledal v računalnik.

31
00:01:26,650 --> 00:01:28,590
In vaš računalnik je povezan
v drug računalnik,

32
00:01:28,590 --> 00:01:29,890
ki gosti to spletno stran.

33
00:01:29,890 --> 00:01:33,150
OK, tako da, ko greš na google.com, si
povezan z enim od Googla

34
00:01:33,150 --> 00:01:36,496
računalniki, ki jih ima
datoteke za google.com.

35
00:01:36,496 --> 00:01:38,750
>> Nato vpraša za določeno datoteko.

36
00:01:38,750 --> 00:01:40,020
Torej, če greš -

37
00:01:40,020 --> 00:01:41,550
Ne vem -

38
00:01:41,550 --> 00:01:48,170
example.com / index.html ali / test.html,
boš prosil za

39
00:01:48,170 --> 00:01:49,340
da posebno datoteko.

40
00:01:49,340 --> 00:01:52,780
In spletni strežnik dogaja
da se vrne k tebi.

41
00:01:52,780 --> 00:01:54,910
>> Potem, ko greš skozi te datoteke -

42
00:01:54,910 --> 00:01:57,750

43
00:01:57,750 --> 00:01:59,950
ko si enkrat računalnik dobi, ki
Datoteka - to se dogaja, da začnete

44
00:01:59,950 --> 00:02:00,820
za izgradnjo spletne strani.

45
00:02:00,820 --> 00:02:03,020
Torej, zdaj pa ima datoteko HTML,
ki je nekako kot

46
00:02:03,020 --> 00:02:05,170
Struktura spletne strani.

47
00:02:05,170 --> 00:02:08,620
HTML datoteka lahko tudi reference
CSS datoteke, ki opredeljujejo

48
00:02:08,620 --> 00:02:09,889
slog spletne strani.

49
00:02:09,889 --> 00:02:12,970
>> JavaScript datoteke, ki opredeljuje
interakcija s spletne strani.

50
00:02:12,970 --> 00:02:15,200
Slikovnih datotek, ki so samo slike.

51
00:02:15,200 --> 00:02:19,450
In morda povezave do drugih datotek HTML,
ki jih lahko nato obiskali.

52
00:02:19,450 --> 00:02:22,656

53
00:02:22,656 --> 00:02:24,380
>> MIKE RIZZO: OK, super.

54
00:02:24,380 --> 00:02:28,980
Torej, vi imate vse, morda,
skrbno nastaviti lokalnega gostitelja

55
00:02:28,980 --> 00:02:30,810
na navideznem računalniku.

56
00:02:30,810 --> 00:02:35,650
In da, nekako, je samo lokalna
domene, da vaš računalnik gosti le

57
00:02:35,650 --> 00:02:38,760
za vas na svoj IP-naslov.

58
00:02:38,760 --> 00:02:43,300
>> Tako, da v roku, nato pa lahko dodate
na njej lastne spletne strani.

59
00:02:43,300 --> 00:02:47,655
Mislim, da CS50 finance, bi morali imeti
dodanih nekaj strani HTML, ki so,

60
00:02:47,655 --> 00:02:49,410
nekako, zavit v PHP ovoj.

61
00:02:49,410 --> 00:02:54,690
Ampak na koncu, kakšne vaše strani PHP
so prikazovanje je HTML.

62
00:02:54,690 --> 00:02:58,210
>> Ampak razmišljanje nazaj na samem začetku
v PSET, smo morali določiti

63
00:02:58,210 --> 00:03:00,890
dovolilnice za vse, kajne?

64
00:03:00,890 --> 00:03:07,270
Torej je to samo v bistvu vemo,
ki lahko brati, pisati, in morda

65
00:03:07,270 --> 00:03:08,730
izvajanje vseh datotek.

66
00:03:08,730 --> 00:03:11,870
Torej bomo to hitro - hm?

67
00:03:11,870 --> 00:03:15,660
>> TOMAS Reimers: Torej gremo
storiti hitro demo.

68
00:03:15,660 --> 00:03:19,560
Torej samo, da vas spomnim, ko
povežete z Googlovim računalnik -

69
00:03:19,560 --> 00:03:20,690
kdor -

70
00:03:20,690 --> 00:03:24,060
in prosi za datoteko, računalnik najprej
mora zagotoviti ste pooblaščeni

71
00:03:24,060 --> 00:03:28,790
dejansko si ogledate datoteko ali prebral, da
datoteko, ker ne moreš kar vprašati

72
00:03:28,790 --> 00:03:30,430
za vsako datoteko na tem računalniku, kajne?

73
00:03:30,430 --> 00:03:32,260
To bi bilo nevarnosti za varnost.

74
00:03:32,260 --> 00:03:37,020
>> Torej datotek na sistemih, ki jih uporabljamo, kot so
to CS50 aparat, imajo tri

75
00:03:37,020 --> 00:03:39,200
Splošni ljudje, ki imajo lahko
Dovoljenja za nekaj.

76
00:03:39,200 --> 00:03:41,610
Prvi je dejanska
lastnik omenjene datoteke.

77
00:03:41,610 --> 00:03:43,820
Druga je skupina, ki
datoteka pripada.

78
00:03:43,820 --> 00:03:46,090
Mi ne bomo osredotočili
preveč na to.

79
00:03:46,090 --> 00:03:50,010
In zadnja stvar, ki je, nekako tako kot
svet ali kot vsi ostali, ki je

80
00:03:50,010 --> 00:03:54,130
ni specifičen do te datoteke in ne
imeli nobene lastniške pravice nad njim.

81
00:03:54,130 --> 00:04:05,650
>> Torej, če imamo lastnika, skupine,
in nato svet.

82
00:04:05,650 --> 00:04:10,510
In nato za vsako od teh skupin, ki jih
ima lahko eno izmed treh dovoljenj,

83
00:04:10,510 --> 00:04:13,010
OK, ali več od njih.

84
00:04:13,010 --> 00:04:15,070
Lahko imate dovoljenja za branje.

85
00:04:15,070 --> 00:04:16,560
Lahko imate ustrezna dovoljenja.

86
00:04:16,560 --> 00:04:18,880
In si lahko izvršitev dovoljenja.

87
00:04:18,880 --> 00:04:22,060
>> Tako v smislu dejanskih vrst datotek, preberite
Dovoljenje je kot dejansko branje

88
00:04:22,060 --> 00:04:23,250
vsebina datoteke.

89
00:04:23,250 --> 00:04:24,730
Pravica dovoljenje je pisno
na omenjeno datoteko.

90
00:04:24,730 --> 00:04:28,370
Izvršiti dovoljenje teče
datoteko, kot si ti, ko zaženete enega od

91
00:04:28,370 --> 00:04:29,620
Vaši CS50 projektov.

92
00:04:29,620 --> 00:04:32,190

93
00:04:32,190 --> 00:04:38,820
>> Torej, ko razmišljamo o datotekah
kot takrat, ko smo morali prebrati HTML

94
00:04:38,820 --> 00:04:41,790
Datoteka, da mora biti svet
berljivo, kajne?

95
00:04:41,790 --> 00:04:44,420
Verjetno tudi lastnik želi
da boste mogli urediti datoteko.

96
00:04:44,420 --> 00:04:46,610
Torej lastnik bo potrebno
brati in pisati dovoljenja.

97
00:04:46,610 --> 00:04:48,710
Oni ne potrebujejo izvršiti.

98
00:04:48,710 --> 00:04:50,950
>> Skupina, bomo zdravljenje
Enako kot v svetu, za zdaj.

99
00:04:50,950 --> 00:04:54,610
Zato potrebujejo dovoljenja za branje.

100
00:04:54,610 --> 00:04:57,310
Ampak oni ne potrebujejo pisati
ali izvršitev dovoljenja.

101
00:04:57,310 --> 00:05:01,920
In zdaj, če mislimo, nazaj v nekdanji
PSETs, kar smo spoznali, je te vrste

102
00:05:01,920 --> 00:05:03,360
od izgledal binarno, kajne?

103
00:05:03,360 --> 00:05:04,210
1 pomeni ja.

104
00:05:04,210 --> 00:05:05,040
0 za št.

105
00:05:05,040 --> 00:05:06,870
In bomo lahko dejansko prevesti
to binarno.

106
00:05:06,870 --> 00:05:10,478
>> Torej 110 v binarno bi bilo 6.

107
00:05:10,478 --> 00:05:13,270
100 bi bilo 4.

108
00:05:13,270 --> 00:05:14,690
Enako s svetom.

109
00:05:14,690 --> 00:05:20,846
Tako število, ki ga bo dobil za
Dovoljenja za to bi bilo 644.

110
00:05:20,846 --> 00:05:24,400
>> MIKE RIZZO: In če misliš nazaj
ko chmoded nekaj, menim

111
00:05:24,400 --> 00:05:28,980
so dali na problem nastaviti
Primer, kje bi lahko naredil

112
00:05:28,980 --> 00:05:36,470
nekaj podobnega chmod 644
in nato ime datoteke.

113
00:05:36,470 --> 00:05:39,980
644 Nato, zdaj lahko videli neposredno
če ta prihaja.

114
00:05:39,980 --> 00:05:42,840
Torej, upajmo, da se naredi, da
malo bolj jasno.

115
00:05:42,840 --> 00:05:45,600
>> In potem je zaradi jasnosti ste možakarja -

116
00:05:45,600 --> 00:05:48,200
oh ja, tukaj gre spet.

117
00:05:48,200 --> 00:05:53,260
Torej, 600 pa naj bi bili samo primer
smo dali gor, kjer ima lastnik

118
00:05:53,260 --> 00:05:56,360
branje in pravilna dovoljenja, medtem ko skupina
in svet nimajo nobenega dovoljenja

119
00:05:56,360 --> 00:05:58,145
dostop do datoteke.

120
00:05:58,145 --> 00:06:01,500
>> TOMAS Reimers: In potem imamo hiter
seznam skupnih dovoljenj.

121
00:06:01,500 --> 00:06:05,250
Torej imenikov, ki jih želite
dejansko chmod 711.

122
00:06:05,250 --> 00:06:08,930
Hitro prahi - za imenik, da imajo
izvršljiv dovoljenje pomeni, da se lahko

123
00:06:08,930 --> 00:06:11,680
, da odprete imenik.

124
00:06:11,680 --> 00:06:15,280
Slike, CSS, JavaScript, HTML potrebe
644, ker v bistvu, svet

125
00:06:15,280 --> 00:06:16,400
Potrebe dovoljenja za branje.

126
00:06:16,400 --> 00:06:20,960
>> In PHP, ki so videli vi
čeprav mi ne bo govoril o tem

127
00:06:20,960 --> 00:06:24,880
nujno je običajno chmoded z
Dovoljenje za 600, ker je teči z

128
00:06:24,880 --> 00:06:26,540
dovolilnice za lastnika.

129
00:06:26,540 --> 00:06:27,790
Vsaj na napravi.

130
00:06:27,790 --> 00:06:30,200

131
00:06:30,200 --> 00:06:36,870
>> MIKE RIZZO: Torej, če vam niso izrecno
opredeliti, kaj vrsta datoteke

132
00:06:36,870 --> 00:06:39,480
želite v dejansko določanje
do te predstavitve -

133
00:06:39,480 --> 00:06:43,490
smo imeli težave s tem, ker
vse, kar ni bilo chmoded pravilno -

134
00:06:43,490 --> 00:06:47,550
boš dobil, vrsta, A
Prepovedano je napaka, da je spletna stran

135
00:06:47,550 --> 00:06:49,700
dejansko ne imeti dovoljenje
dostop do karkoli datoteko

136
00:06:49,700 --> 00:06:51,370
si želim, da bi dostop.

137
00:06:51,370 --> 00:06:54,780
In seveda, da je mogoče določiti -
kot problem komplet - s spreminjanjem

138
00:06:54,780 --> 00:06:56,405
Dovoljenja za ustrezno.

139
00:06:56,405 --> 00:06:59,620
>> TOMAS Reimers: In zadnji komentar za
Hitro lokalni razvoj - smo

140
00:06:59,620 --> 00:07:02,000
to odraščali, vendar smo le želeli
še enkrat bruhati -

141
00:07:02,000 --> 00:07:06,230
če vprašate za strežnik - tako lokalnega gostitelja,
na primer, com ali karkoli. -

142
00:07:06,230 --> 00:07:09,170
in ne podate določeno datoteko,
datoteka, ki vaš računalnik se bo

143
00:07:09,170 --> 00:07:11,540
zaprositi za se imenuje index.html.

144
00:07:11,540 --> 00:07:12,790
Ali če to ne obstaja, index.php.

145
00:07:12,790 --> 00:07:15,560

146
00:07:15,560 --> 00:07:16,350
>> Cool.

147
00:07:16,350 --> 00:07:19,560
Torej to je samo Rekapitulacija vsega,
upajmo, da smo zajeti v

148
00:07:19,560 --> 00:07:22,800
oddelek, in predavanje,
in doslej v CS50.

149
00:07:22,800 --> 00:07:26,110
In zdaj bomo začeli govoriti
o posebej knjižnic.

150
00:07:26,110 --> 00:07:30,270
JavaScript in CSS knjižnice
za spletne aplikacije.

151
00:07:30,270 --> 00:07:36,350
>> Torej en hiter razlog, zakaj imamo
knjižnice je programiranje -

152
00:07:36,350 --> 00:07:39,000
tam je veliko težav v
programiranje, ki vodijo popping up

153
00:07:39,000 --> 00:07:40,570
spet in spet in spet.

154
00:07:40,570 --> 00:07:43,870
Morda boste opazili, da je veliko spletnih strani
potrebujejo možnost, da imajo padec navzdol

155
00:07:43,870 --> 00:07:49,100
meniji, na primer, ali potrebujejo možnost
da imajo zelo standardno gumb

156
00:07:49,100 --> 00:07:51,400
slog, ki ne sme biti
Najlažje.

157
00:07:51,400 --> 00:07:54,670
Zdaj, ko ste začeli, da bi dobili v HTML, si
Zavedam se, da gumbi lahko dejansko

158
00:07:54,670 --> 00:07:57,720
poglej res grda, če ti
Ne storiti ničesar.

159
00:07:57,720 --> 00:08:00,830
>> Tako so veliko pisali
imenovane knjižnice.

160
00:08:00,830 --> 00:08:02,990
In v tem smislu, da si
imenovana tudi okvire.

161
00:08:02,990 --> 00:08:04,790
Bomo uporabili
dve sopomenki.

162
00:08:04,790 --> 00:08:07,360
In kaj so se oni v bistvu
premade deli kode -

163
00:08:07,360 --> 00:08:09,130
bodisi CSS in JavaScript -

164
00:08:09,130 --> 00:08:13,240
da odnese veliko
Team imate v kodiranja.

165
00:08:13,240 --> 00:08:17,290
>> Tako so vnaprej določiti kup razredov ali
vnaprej določiti kup funkcij za

166
00:08:17,290 --> 00:08:20,110
Primer Javascript, ki
lahko pokličete kasneje.

167
00:08:20,110 --> 00:08:22,690
In potem si lahko, nekako, dobili
Dostop do te kode, ne da bi

168
00:08:22,690 --> 00:08:23,710
da bi morali storiti ničesar.

169
00:08:23,710 --> 00:08:27,750
Primer Knjižnico CS50.H.
To je bila knjižnica smo dal tebi nazaj

170
00:08:27,750 --> 00:08:32,090
v enem tednu, kar je omogočilo, da narediš
stvari, kot je ta GetInt in GetString

171
00:08:32,090 --> 00:08:35,237
ne da pisati
vsaka koda sami.

172
00:08:35,237 --> 00:08:36,179
>> MIKE RIZZO: V redu.

173
00:08:36,179 --> 00:08:40,299
Torej, tukaj, tako kot smo se morali vključiti
V naše c datoteke drugačna

174
00:08:40,299 --> 00:08:46,570
knjižnice, smo prav tako morali vključiti v
naša HTML files različnih knjižnic.

175
00:08:46,570 --> 00:08:50,310
Na primer, če smo želeli vključiti
specifična JavaScript knjižnico tukaj,

176
00:08:50,310 --> 00:08:52,850
morda tisti, ki smo pisno
sami, kot je to lokalno gostila

177
00:08:52,850 --> 00:08:56,000
imenovane script.js, smo pravkar
uporabite ta zapis.

178
00:08:56,000 --> 00:08:59,500
>> Torej imamo tipa scenarij je enak
JavaScript vir Enako

179
00:08:59,500 --> 00:09:01,260
JavaScript.js.

180
00:09:01,260 --> 00:09:05,190
In če mislite, da nazaj v svojo CS50
finance problem določiti, če si pogledal v

181
00:09:05,190 --> 00:09:09,190
header.php v mapi s predlogami,
Moral bi videti

182
00:09:09,190 --> 00:09:10,970
Nekatere od teh vključeni.

183
00:09:10,970 --> 00:09:13,250
Torej, ta prvi - skripte -

184
00:09:13,250 --> 00:09:16,080
je tudi v knjižnici JavaScript.

185
00:09:16,080 --> 00:09:18,760
Vključno s knjižnico CSS
malo drugačen.

186
00:09:18,760 --> 00:09:21,430
>> Tu, namesto scenarija
Tag morate link tag.

187
00:09:21,430 --> 00:09:27,110
In potem, vnesite besedilo CSS
je malo drugačna.

188
00:09:27,110 --> 00:09:29,270
Vam ni treba vedno vključiti
rel slogi.

189
00:09:29,270 --> 00:09:30,970
Ampak mislim, da je, na splošno,
dobra praksa.

190
00:09:30,970 --> 00:09:35,810
>> In potem končno, HREF, ki ga
verjetno videli v vaših ATAGs za povezovanje

191
00:09:35,810 --> 00:09:39,440
v različnih povezavah le določa,
povezava kje najti to.

192
00:09:39,440 --> 00:09:42,250
Na primer, če smo želeli povezati
drugačna knjižnica - reciva -

193
00:09:42,250 --> 00:09:49,330
, ki je živel na styles.css.

194
00:09:49,330 --> 00:09:54,030
In smo želeli povezati, da s tem, da je
gostuje na spletu, bi kopirali, da je.

195
00:09:54,030 --> 00:09:58,834
In ga nato prilepite v karkoli
tukaj imamo namesto tega.

196
00:09:58,834 --> 00:10:01,340
>> TOMAS Reimers: OK, upajmo, da
Fantje so že seznanjeni

197
00:10:01,340 --> 00:10:02,410
s tem, kako povezati CSS.

198
00:10:02,410 --> 00:10:04,000
Imeli ste za to, da na
tvoja zadnja rjava set.

199
00:10:04,000 --> 00:10:07,110
JavaScript, nekateri od vas morda
imajo nekaj izkušenj s.

200
00:10:07,110 --> 00:10:07,980
Nekateri od vas morda ne.

201
00:10:07,980 --> 00:10:12,190
>> Torej za zdaj, veš, da datoteka JavaScript
je zelo podobno kot CSS datoteko v

202
00:10:12,190 --> 00:10:15,640
Občutek, da se lahko povežete z njim ali
, ki jo lahko vključite interno.

203
00:10:15,640 --> 00:10:17,360
In to vam omogoča, da scenarij stvari.

204
00:10:17,360 --> 00:10:21,820
In bomo sprehod skozi
Malo JavaScript kasneje.

205
00:10:21,820 --> 00:10:23,560
>> Torej, z uporabo knjižnice -

206
00:10:23,560 --> 00:10:26,150
ko ste ga vključili, to je kot
enostavno, kot dobesedno kliče

207
00:10:26,150 --> 00:10:29,640
funkcij ali dodajanje
Razred imena na njem.

208
00:10:29,640 --> 00:10:32,220
Zadnja stvar, ki želimo govoriti
o v smislu knjižnici -

209
00:10:32,220 --> 00:10:34,180
in to je bolj tehnične note -

210
00:10:34,180 --> 00:10:35,860
je licenciranje open source.

211
00:10:35,860 --> 00:10:41,550
Torej, ko boste našli te dejanske knjižnice,
boste morda razmišljate o

212
00:10:41,550 --> 00:10:47,630
Vprašanja, kot je to v redu, da sem pravkar
s kodo nekoga drugega, še posebej,

213
00:10:47,630 --> 00:10:51,970
ker je to nekaj, kar je zelo
ti rekel, da ne delaj tega tečaja.

214
00:10:51,970 --> 00:10:55,790
>> Torej, v primeru odprte licenciranja izvor,
Veliko razvijalcev -

215
00:10:55,790 --> 00:10:57,540
ko so napisali knjižnico,
ki mislijo, da bi lahko

216
00:10:57,540 --> 00:10:59,450
koristna za druge ljudi -

217
00:10:59,450 --> 00:11:02,420
ga bo objavila na spletu
in ji dati dovoljenje.

218
00:11:02,420 --> 00:11:06,620
In licenco v bistvu pravi, da sem se
izdajo dovoljenja za druge

219
00:11:06,620 --> 00:11:11,250
ljudje uporabljajo ta kos programske opreme
z naslednjo vrsto

220
00:11:11,250 --> 00:11:13,230
določila.

221
00:11:13,230 --> 00:11:16,100
>> Dodali smo povezavo do dobre spletne strani za
pomagale razumeti licenc v

222
00:11:16,100 --> 00:11:17,720
primeru, da naletite na njih.

223
00:11:17,720 --> 00:11:21,680
Skupna določila so stvari, kot
ste dobrodošli, da uporabite svojo knjižnico, tako

224
00:11:21,680 --> 00:11:23,000
Dokler mi dali kredit.

225
00:11:23,000 --> 00:11:25,670
Ste dobrodošli, da uporabite svojo knjižnico
tako dolgo, kot takrat, ko se pokvari

226
00:11:25,670 --> 00:11:26,790
me ne zamerim.

227
00:11:26,790 --> 00:11:30,310
Ste dobrodošli, da uporabite svojo knjižnico tako dolgo
saj ga ne uporabljate, da bi denar

228
00:11:30,310 --> 00:11:31,910
za sebe.

229
00:11:31,910 --> 00:11:34,130
To so vrste skupnih
določila.

230
00:11:34,130 --> 00:11:37,780
>> Za ta CS50 končni projekt, so
ne bi smelo biti super pomembna, ker

231
00:11:37,780 --> 00:11:41,440
projekti, ki uporabljajo vidva sta
verjetno bolje, nekako znan.

232
00:11:41,440 --> 00:11:44,170
Toda, ko boste dejansko šel ven v
svet in začeti uporabljati knjižnice, ki

233
00:11:44,170 --> 00:11:48,100
lahko ali pa tudi ne, kot tudi izvajati
nekateri bolj pogosti pa smo

234
00:11:48,100 --> 00:11:49,780
bodo šli skozi.

235
00:11:49,780 --> 00:11:53,310
To je dobro, da bi lahko razumeli
ta dovoljenja in da

236
00:11:53,310 --> 00:11:54,560
razumeli, kaj pomenijo.

237
00:11:54,560 --> 00:11:58,120

238
00:11:58,120 --> 00:11:58,586
In grem nazaj.

239
00:11:58,586 --> 00:12:00,960
>> MIKE RIZZO: OK.

240
00:12:00,960 --> 00:12:04,850
Torej, zdaj gibljejo na primere
dejanskega CSS.

241
00:12:04,850 --> 00:12:07,770
Na tej točki doslej, boste morda
ne bi naleteli na to.

242
00:12:07,770 --> 00:12:10,300
Ampak, ste morda naleteli na
vaše vsakdanje življenje, kjer je nekaj

243
00:12:10,300 --> 00:12:13,160
, ki je videti v eno smer na eni brskalniku
ne bo videti enako

244
00:12:13,160 --> 00:12:14,880
Način, na drugem brskalniku.

245
00:12:14,880 --> 00:12:17,400
>> To se imenuje brskalnik brskalnik
združljivost.

246
00:12:17,400 --> 00:12:20,780
In vse to je vse bolj in
večji problem, zlasti ker

247
00:12:20,780 --> 00:12:25,260
brskalniki bo več in več svoboščin
izvajati stvari, kot hočejo.

248
00:12:25,260 --> 00:12:28,440
Tako, da premaga to, da je dejansko
velika knjižnica se imenuje Normalize.CSS.

249
00:12:28,440 --> 00:12:32,236

250
00:12:32,236 --> 00:12:33,770
>> TOMAS Reimers: Smo vključili povezave.

251
00:12:33,770 --> 00:12:36,210
Na tej točki, da je koristno, če
imate svoj laptop tam

252
00:12:36,210 --> 00:12:38,740
pogledate na spletni strani.

253
00:12:38,740 --> 00:12:42,580
In mi smo prav daje to za vas
Zdaj preprosto zato, ker CS50 končni

254
00:12:42,580 --> 00:12:44,370
Projekt se dejansko dogaja, da
Vas prosimo, da ga bodo izvedli

255
00:12:44,370 --> 00:12:45,860
podobno in preko brskalnikov.

256
00:12:45,860 --> 00:12:49,250
>> Torej, samo, da v zadnjem delu vašega
glava, to je čudovita knjižnica

257
00:12:49,250 --> 00:12:51,170
saj bo nekako,
standardizirati stvari.

258
00:12:51,170 --> 00:12:54,230
V Firefoxu lahko nekaj pokazati
kot eno slikovno točko v levo.

259
00:12:54,230 --> 00:12:58,390
In potem se lahko odloči, Chrome, ki dejansko
kaj si mislil je 10 točk

260
00:12:58,390 --> 00:12:59,380
levo.

261
00:12:59,380 --> 00:13:01,030
In želite standardizirati to.

262
00:13:01,030 --> 00:13:05,360
Normalizirati bo dejansko narediti res dober
Naloga pazite, da vaša stran

263
00:13:05,360 --> 00:13:08,070
videti enako na različnih brskalnikih.

264
00:13:08,070 --> 00:13:10,660
>> MIKE RIZZO: Torej, če smo želeli samo
kliknite na povezavo res hitro in predstava

265
00:13:10,660 --> 00:13:13,140
si kaj, da izgleda kot, vas
Prenesete ga lahko s pomočjo

266
00:13:13,140 --> 00:13:14,670
Velikan gumb Download.

267
00:13:14,670 --> 00:13:18,520
Ali pa vas pozivam, da preberete več o tem
s klikom na to povezavo v spodnji

268
00:13:18,520 --> 00:13:19,310
desnem kotu strani.

269
00:13:19,310 --> 00:13:22,420
>> TOMAS Reimers: In če ste dejansko
kliknite Preberite več tam -

270
00:13:22,420 --> 00:13:24,340
kliknite vir na GitHub -

271
00:13:24,340 --> 00:13:31,720
boste dejansko videli odprto kodo
licence na LICENSE.md tam.

272
00:13:31,720 --> 00:13:35,740
In videli boste, tukaj je
Zelo priljubljena licenca MIT.

273
00:13:35,740 --> 00:13:38,940
Še enkrat, če ste prebrali besedilo,
boste lahko našli na spletni strani

274
00:13:38,940 --> 00:13:42,550
smo se sklicujemo pred in biti sposoben
razumeti, ne da bi morali prebrati

275
00:13:42,550 --> 00:13:45,920
prek pravnega žargona.

276
00:13:45,920 --> 00:13:46,850
>> MIKE RIZZO: OK, super.

277
00:13:46,850 --> 00:13:47,940
Tako da je normalizirati.

278
00:13:47,940 --> 00:13:49,190
Želeli smo, da bi vam
da res hitro.

279
00:13:49,190 --> 00:13:50,030
Oh, imaš vprašanje?

280
00:13:50,030 --> 00:13:53,013
>> PUBLIKA: Torej, ko si jo naložite, boste
sledite te kode, ki jih imajo

281
00:13:53,013 --> 00:13:54,098
pod gumbom Prenesi?

282
00:13:54,098 --> 00:13:55,860
>> TOMAS Reimers: Ja, tako
ko prenesete -

283
00:13:55,860 --> 00:13:58,130
>> MIKE RIZZO: Oh, to je velika točka.

284
00:13:58,130 --> 00:14:00,700
Torej, vprašanje je bilo, kako
smo dejansko jo prenesete?

285
00:14:00,700 --> 00:14:03,260
Torej, če kliknete na povezavo, vidimo,
da je dejansko pops up

286
00:14:03,260 --> 00:14:05,030
v izvorni kodi.

287
00:14:05,030 --> 00:14:08,550
Torej za to, kar smo lahko
to je samo kliknite Shrani kot.

288
00:14:08,550 --> 00:14:10,830
Save As in da bi morala
bruhati datoteko.

289
00:14:10,830 --> 00:14:14,160
In potem bomo lahko shranite
je kot normalize.CSS.

290
00:14:14,160 --> 00:14:15,810
In potem bi morali povezati v -

291
00:14:15,810 --> 00:14:18,660
>> TOMAS Reimers: ti enak način
povezati v druge datoteke.

292
00:14:18,660 --> 00:14:22,250
In ko ga povezati in, kar je super
O normalizirati je, da bo dejansko

293
00:14:22,250 --> 00:14:25,920
poskrbel za vse trdo
delo samo po sebi.

294
00:14:25,920 --> 00:14:27,730
Kar pomeni, da nimate
dodate kateri koli skupini.

295
00:14:27,730 --> 00:14:29,690
>> Vam ni treba storiti ničesar čudnega.

296
00:14:29,690 --> 00:14:34,590
To bo normalizirala brez tebe
še naprej počne karkoli.

297
00:14:34,590 --> 00:14:36,083
Ja, imate, da ga vključite.

298
00:14:36,083 --> 00:14:38,990

299
00:14:38,990 --> 00:14:40,240
Google Chrome se ne odziva.

300
00:14:40,240 --> 00:14:43,270

301
00:14:43,270 --> 00:14:44,860
>> Samo hitro razveljaviti -

302
00:14:44,860 --> 00:14:46,800
Opazil sem, da sva skočila v to.

303
00:14:46,800 --> 00:14:49,010
Preostali del te predstavitve je
bo hiter pregled.

304
00:14:49,010 --> 00:14:50,380
Raziskava knjižnic.

305
00:14:50,380 --> 00:14:52,710
>> V bistvu, kaj so.

306
00:14:52,710 --> 00:14:53,350
Kaj počnejo.

307
00:14:53,350 --> 00:14:54,060
Kako oni koristno.

308
00:14:54,060 --> 00:14:56,540
Kako bi lahko njihovo izvajanje.

309
00:14:56,540 --> 00:14:59,730
Če želite, da začnete iskati na njih,
po skupaj in prebiranju

310
00:14:59,730 --> 00:15:01,990
njih, jaz bi zelo spodbudilo, da.

311
00:15:01,990 --> 00:15:07,620
>> Druga možnost je, da ste dobrodošli tudi
začetek jih prenesete in vključno

312
00:15:07,620 --> 00:15:11,400
jim v očeh, samo da bi videli, kaj so
izgledal in kaj storiti, če imate

313
00:15:11,400 --> 00:15:12,270
vaš prenosnik pred vami.

314
00:15:12,270 --> 00:15:14,650
Če ne, ste dobrodošli, da
Posluša nas govoriti.

315
00:15:14,650 --> 00:15:15,500
Bomo še naprej govorijo.

316
00:15:15,500 --> 00:15:18,680
In imamo čas, na koncu, upajmo
bomo dejansko dobili v vas, ki prikazuje

317
00:15:18,680 --> 00:15:20,946
kar nekaj teh knjižnic
izgledal.

318
00:15:20,946 --> 00:15:22,320
>> MIKE RIZZO: Cool.

319
00:15:22,320 --> 00:15:25,466
V redu, zdaj pa se pogovorimo
O pisave Awesome.

320
00:15:25,466 --> 00:15:30,480
>> TOMAS Reimers: Awesome tako Font je
res lepo spletno stran, še posebej za tiste,

321
00:15:30,480 --> 00:15:32,450
od nas, ki so manj umetniško
nadarjena.

322
00:15:32,450 --> 00:15:36,330

323
00:15:36,330 --> 00:15:38,880
Ignoriranje ime pisave Awesome, daje
ti kup ikon, ki so

324
00:15:38,880 --> 00:15:41,050
zelo koristno.

325
00:15:41,050 --> 00:15:45,950
Torej, veliko krat boste izvajati
icon boste morda želeli, tako kot lepo X,

326
00:15:45,950 --> 00:15:47,170
da lahko zaprete nekaj.

327
00:15:47,170 --> 00:15:49,910
>> Ali pa morda želite nekakšno gumb Edit
z risbe s svinčnikom, kot

328
00:15:49,910 --> 00:15:50,940
vsi ostali ima.

329
00:15:50,940 --> 00:15:53,850
In da je, ko ste izvedeli, da
risba te ikone so lahko

330
00:15:53,850 --> 00:15:55,510
zelo mučen in težko.

331
00:15:55,510 --> 00:15:59,160
Font Awesome - če ste dejansko
pojdite na spletno stran -

332
00:15:59,160 --> 00:16:02,892
vam daje veliko ikon pod
ikone na vrhu.

333
00:16:02,892 --> 00:16:06,980
Ja, samo top.

334
00:16:06,980 --> 00:16:09,030
To vam bo dala veliko
ikon brezplačno.

335
00:16:09,030 --> 00:16:15,210
>> Torej, tukaj vidite imamo stvari, kot so
zvezdica, bari, strele,

336
00:16:15,210 --> 00:16:19,750
koledar, bug, knjiga, et cetera.

337
00:16:19,750 --> 00:16:21,110
To je lahko zelo koristen.

338
00:16:21,110 --> 00:16:24,290
Tako boste vključili to si ti vključujejo
dobesedno datoteke CSS.

339
00:16:24,290 --> 00:16:29,760
In ko ste vključeni datoteko CSS,
kaj lahko naredite, je, da ustvarite

340
00:16:29,760 --> 00:16:33,430
tag imenovano I. satands za
icon z razredom FA

341
00:16:33,430 --> 00:16:34,460
stati Font super.

342
00:16:34,460 --> 00:16:36,330
In potem, ne glede na razred, kar želite.

343
00:16:36,330 --> 00:16:41,220
>> Torej, če sem hotel ikono to plus
kvadratni tukaj, jaz bi dal

344
00:16:41,220 --> 00:16:43,290
je razred FA.

345
00:16:43,290 --> 00:16:46,230
In potem FA vezaj plus vezaj kvadrat.

346
00:16:46,230 --> 00:16:50,325

347
00:16:50,325 --> 00:16:53,710
>> MIKE RIZZO: Cool, OK.

348
00:16:53,710 --> 00:16:56,980
>> TOMAS Reimers: In potem, zadnja CSS
Knjižnica želimo priti skozi smo

349
00:16:56,980 --> 00:16:59,950
poskuša obdržati minimalno na CSS
knjižnice, saj se zavedamo,

350
00:16:59,950 --> 00:17:03,660
Naslov te predstavitve
je JavaScript knjižnice.

351
00:17:03,660 --> 00:17:07,089
Mislili smo, da smo lahko tudi
vam predstavil drugih knjižnicah

352
00:17:07,089 --> 00:17:09,569
medtem ko smo govorili o knjižnicah.

353
00:17:09,569 --> 00:17:11,400
>> To je Google Web Fonts.

354
00:17:11,400 --> 00:17:17,040
In kaj Google Web Fonts vam omogoča
storiti, je dodati pisave na vaši spletni strani,

355
00:17:17,040 --> 00:17:22,079
kar je zelo preprost način, da bi ga
lepa in razlikovati svoj nabor

356
00:17:22,079 --> 00:17:24,460
vsakdo, ki je drugega, če ima
lepo pisavo, ali če je lepo

357
00:17:24,460 --> 00:17:27,790
Zbirka pisav.

358
00:17:27,790 --> 00:17:31,410
Google Web Fonts je lepo, za razliko od drugih
knjižnice v smislu, da je

359
00:17:31,410 --> 00:17:33,490
Res vodena namestitev.

360
00:17:33,490 --> 00:17:38,680
>> Torej, če sledite povezavi, je
google.com / pisave, verjamem.

361
00:17:38,680 --> 00:17:41,100
Če upoštevate, da vas
Lahko izberete svojo pisavo.

362
00:17:41,100 --> 00:17:44,410
Izbirate lahko na levi od
debelina, postrani, et cetera.

363
00:17:44,410 --> 00:17:48,970
In potem, ko ste izbrali eno,
lahko kliknete na hitro uporabo.

364
00:17:48,970 --> 00:17:49,820
Točno tam.

365
00:17:49,820 --> 00:17:51,590
Spodaj desno škatle.

366
00:17:51,590 --> 00:17:54,380

367
00:17:54,380 --> 00:17:56,700
>> In potem, se pomaknite navzdol.

368
00:17:56,700 --> 00:17:59,600

369
00:17:59,600 --> 00:18:02,650
Najprej se vam CSS, da
morate dejansko povezati z njo.

370
00:18:02,650 --> 00:18:03,330
To je tam.

371
00:18:03,330 --> 00:18:05,170
Lahko samo kopiraj in prilepi, da noter

372
00:18:05,170 --> 00:18:07,250
In lepo stvar je ta,
ti dejansko ne potrebujete niti za

373
00:18:07,250 --> 00:18:08,340
prenos datoteke.

374
00:18:08,340 --> 00:18:11,170
>> Kaj se pa dogaja, da storiti, je, da se dogaja
za povezavo na različico Googlovega njo.

375
00:18:11,170 --> 00:18:14,130
Torej nazaj na kaj to pomeni.

376
00:18:14,130 --> 00:18:18,270
To pomeni, da ko uporabnik
prenese datoteko -

377
00:18:18,270 --> 00:18:22,300
prenese svoje HTML strani - vaš HTML
Stran se bo reference to datoteko.

378
00:18:22,300 --> 00:18:26,790
>> Torej, računalnik bo videti,
oh, to je gostuje na google.com namesto

379
00:18:26,790 --> 00:18:28,170
kot na theirsite.com.

380
00:18:28,170 --> 00:18:30,370
Pusti me, da Google za to datoteko.

381
00:18:30,370 --> 00:18:32,800
In potem se dogaja, da se vključi
je skoraj tako, kot če bi bilo

382
00:18:32,800 --> 00:18:35,584
del vaše lastne strani.

383
00:18:35,584 --> 00:18:36,540
>> TOMAS Reimers: Cool.

384
00:18:36,540 --> 00:18:40,980
In ko tega ni, potem
ga vključite v svoj CSS, da vam

385
00:18:40,980 --> 00:18:41,830
dejanska linija.

386
00:18:41,830 --> 00:18:45,188
Torej ste nastavili druľino nepremičnine
enako ime vaše pisave.

387
00:18:45,188 --> 00:18:47,936

388
00:18:47,936 --> 00:18:50,440
>> MIKE RIZZO: OK.

389
00:18:50,440 --> 00:18:52,220
Tako smo pravkar končali s CSS.

390
00:18:52,220 --> 00:18:57,230
In nekateri od vas morda mislil, dobro,
smo imeli nekaj CSS na CS50 finance.

391
00:18:57,230 --> 00:19:00,390
Ampak CSS Knjižnica je bila bootstrap.

392
00:19:00,390 --> 00:19:05,190
Mi dejansko vključuje Bootstrap malo
kasneje pod JavaScript saj s

393
00:19:05,190 --> 00:19:09,660
Knjižnica Bootstrap CSS prav tako prihaja
z veliko JavaScript tem

394
00:19:09,660 --> 00:19:12,060
Bootstrap ali Twitter -
kdo je Bootstrapa -

395
00:19:12,060 --> 00:19:15,426
uporablja za upravljanje vseh svojih CSS.

396
00:19:15,426 --> 00:19:19,592
>> TOMAS Reimers: Ali ima kdo katerokoli
Vprašanja doslej o CSS nasploh?

397
00:19:19,592 --> 00:19:20,723
Dobro smo?

398
00:19:20,723 --> 00:19:21,216
Super.

399
00:19:21,216 --> 00:19:22,495
>> MIKE RIZZO: Awesome.

400
00:19:22,495 --> 00:19:25,136
>> TOMAS Reimers: Torej se gibljejo
na JavaScript.

401
00:19:25,136 --> 00:19:27,900
>> MIKE RIZZO: Torej smo želeli govoriti
o jQuery za začetek.

402
00:19:27,900 --> 00:19:30,780
Je kdo slišal za jQuery
pred ali ga uporablja?

403
00:19:30,780 --> 00:19:32,180
Ja, par?

404
00:19:32,180 --> 00:19:36,000
Torej, če ste le delo z materni
JavaScript, sami ste našli

405
00:19:36,000 --> 00:19:41,000
tipkanje veliko dolgih selektorjev veliko.

406
00:19:41,000 --> 00:19:44,400
Torej, kaj jQuery pa je, da zagotavlja
lepo ovoj za JavaScript

407
00:19:44,400 --> 00:19:48,180
jezik, ki vam omogoča, da preprosto izberete
in manipulirati različne elemente

408
00:19:48,180 --> 00:19:52,470
v objektni model dokumenta
Spletna stran ali DOM, kar mislim, da

409
00:19:52,470 --> 00:19:54,290
vi ste slišali v
predavanje na tej točki.

410
00:19:54,290 --> 00:19:57,550
>> TOMAS Reimers: Če še niste slišali
je ali če niste gledali predavanje

411
00:19:57,550 --> 00:20:01,870
še, Document Object Model je
v bistvu, kako so zastopani stvari.

412
00:20:01,870 --> 00:20:05,290
Torej HTML nekako izgleda kot drevo
ko jo dejansko potegnili.

413
00:20:05,290 --> 00:20:06,850
Imate HTML element na vrhu.

414
00:20:06,850 --> 00:20:07,560
Imate glavo in telo.

415
00:20:07,560 --> 00:20:09,500
>> In potem, v roku, ki ga
še vse ostalo.

416
00:20:09,500 --> 00:20:10,660
To se imenuje DOM -

417
00:20:10,660 --> 00:20:12,120
Document Object Model.

418
00:20:12,120 --> 00:20:16,090
Torej model, ki predstavlja predmetov
Dokument je preprost način, da razmišljajo

419
00:20:16,090 --> 00:20:18,560
o tem.

420
00:20:18,560 --> 00:20:22,520
In ena velika stvar o jQuery
je to res naredi, ki bodo vozili

421
00:20:22,520 --> 00:20:26,460
da in manipulacijo elementov znotraj
da je zelo preprosta.

422
00:20:26,460 --> 00:20:30,300
>> Tako preprosto, v dejstvu, da je večina
JavaScript knjižnice ali če ne

423
00:20:30,300 --> 00:20:34,200
Večina, velika večina tistih
boste videli dejansko zahtevajo jQuery tako

424
00:20:34,200 --> 00:20:37,530
da so se lahko vodijo le
ker če niste imeli jQuery, vas

425
00:20:37,530 --> 00:20:40,540
bi zapravljajo veliko časa poskuša
ugotovimo, kako izbrati nekatere

426
00:20:40,540 --> 00:20:43,660
elemente in kako to storiti druge stvari.

427
00:20:43,660 --> 00:20:47,950
In druga velika stvar o jQuery
je, da je navzkrižno brskalnik združljive.

428
00:20:47,950 --> 00:20:51,550
>> Torej, se spomnite nazaj, ko smo rekli, da
niso vsi brskalniki izvajati

429
00:20:51,550 --> 00:20:53,100
stvari na enak način?

430
00:20:53,100 --> 00:20:55,120
To velja tudi v JavaScript.

431
00:20:55,120 --> 00:20:58,220
In ena od velikih stvari o jQuery
je, da bo zaznal

432
00:20:58,220 --> 00:21:00,300
brskalnik in odkrivanje
primerno metodo.

433
00:21:00,300 --> 00:21:03,420
>> Torej, če boste morali izbrati element,
Internet Explorer lahko rekli, da ste

434
00:21:03,420 --> 00:21:05,770
naj bi naredil na ta način.

435
00:21:05,770 --> 00:21:08,300
Firefox lahko rekli pravilna
Tako je v tej smeri.

436
00:21:08,300 --> 00:21:09,710
jQuery ne skrbi.

437
00:21:09,710 --> 00:21:12,550
Ko si povedal, jQuery, da izberete
element bo ugotoviti, kako je

438
00:21:12,550 --> 00:21:16,290
naj to stori v brskalniku
Uporabnik je trenutno, in naredite

439
00:21:16,290 --> 00:21:18,584
je na ta način.

440
00:21:18,584 --> 00:21:22,650
>> MIKE RIZZO: Torej ne govorimo o
Uporaba jQuery malo.

441
00:21:22,650 --> 00:21:27,670
Tako kot so PHP, jQuery je zlasti
ljubček za znak za dolar.

442
00:21:27,670 --> 00:21:30,880
Tako boste ugotovili, da nobene jQuery -

443
00:21:30,880 --> 00:21:32,060
No, ne vsi.

444
00:21:32,060 --> 00:21:35,210
Včasih lahko zamenjate dolar
prijavite z besedo jQuery.

445
00:21:35,210 --> 00:21:38,980
Ampak na splošno, samo zato, ker je
krajša, ko boste videli jQuery pa

446
00:21:38,980 --> 00:21:41,420
uporablja se bo z znak za dolar.

447
00:21:41,420 --> 00:21:47,030
>> Tako da tukaj smo samo kaže na začetek
selektor za element v DOM.

448
00:21:47,030 --> 00:21:52,850
Tukaj imamo sledil znak za dolar
z odprtimi oklepajih in nato kotacije.

449
00:21:52,850 --> 00:21:56,130
In znotraj narekovajev gredo naše selektorje
za različne elemente.

450
00:21:56,130 --> 00:21:59,810
Tako kot v CSS, smo potrebovali za selektorje
lahko slog različne elemente

451
00:21:59,810 --> 00:22:00,840
v stran.

452
00:22:00,840 --> 00:22:06,555
Te različne selektorji translate
točno v jQuery in JavaScript,

453
00:22:06,555 --> 00:22:07,820
večinoma.

454
00:22:07,820 --> 00:22:10,120
>> Torej, tukaj imamo dot foo.

455
00:22:10,120 --> 00:22:14,780
Torej, če se spomnite iz predavanj,
pika pomeni le razred.

456
00:22:14,780 --> 00:22:18,850
Torej smo izbiro elementa
z razredom foo.

457
00:22:18,850 --> 00:22:22,670
Torej, če sem šel naprej in odprla naša
Konzola JavaScript tukaj res hitro

458
00:22:22,670 --> 00:22:26,830
samo dokazati, če sem samo tip
znak za dolar, vidimo, da je to nekaj

459
00:22:26,830 --> 00:22:28,090
funkcija, ki pride gor.

460
00:22:28,090 --> 00:22:29,420
In to je samo opredeljeno z jQuery.

461
00:22:29,420 --> 00:22:32,120
>> TOMAS Reimers: Za tiste, ki ste
ne poznajo, konzola je orodje

462
00:22:32,120 --> 00:22:35,430
v Chrome, ki vam omogoča,
v bistvu, izvajanje JavaScripta na

463
00:22:35,430 --> 00:22:36,450
trenutna stran.

464
00:22:36,450 --> 00:22:39,420
To boste našli izjemno koristna, ko
ste dejansko razhroščevanje in si

465
00:22:39,420 --> 00:22:42,400
morajo biti kot so, kaj je trenutna
vrednost neke globalne spremenljivke ali kaj

466
00:22:42,400 --> 00:22:43,910
je kaj drugega?

467
00:22:43,910 --> 00:22:47,620
To je nekako tako kot GDB z izjemo
da lahko dejansko

468
00:22:47,620 --> 00:22:51,600
manipulacijo elementov na strani s
je v veliko lažji način.

469
00:22:51,600 --> 00:22:55,080
In tudi to ne, v bistvu, preverite
s tabo, preden se to zgodi karkoli.

470
00:22:55,080 --> 00:22:58,660
>> Zato ker bi GDB bilo všeč, kajne
prepričani, da želite teči naslednji korak?

471
00:22:58,660 --> 00:22:59,830
Konzola je v real.

472
00:22:59,830 --> 00:23:03,690
Tako kot spletna stran je upodabljanje in
počne karkoli že počne,

473
00:23:03,690 --> 00:23:05,720
Svet je prav tako teče ob njej.

474
00:23:05,720 --> 00:23:08,330
In lahko pripisala kodo v
da je konzola, ki bo

475
00:23:08,330 --> 00:23:09,260
se vodijo na strani.

476
00:23:09,260 --> 00:23:12,190
>> MIKE RIZZO: Torej, za vstop v konzolo,
Mislim, da bi morala na kratko

477
00:23:12,190 --> 00:23:13,750
omenjam, kako to storiti.

478
00:23:13,750 --> 00:23:17,850
V zadnjih težave, ki jih imate lahko
rabljeni Chrome je pregledati element

479
00:23:17,850 --> 00:23:20,440
funkcij ali pogleda stran vira -

480
00:23:20,440 --> 00:23:23,870
in tistih, ki so dostopne samo z desno
klikom na stran, ali posebnega

481
00:23:23,870 --> 00:23:28,430
element in delaš ali preglejte
element ali pogleda stran vir.

482
00:23:28,430 --> 00:23:31,190
Mi lahko dostopate tudi JavaScript
konzola neposredno

483
00:23:31,190 --> 00:23:33,630
izbiri pregledati element.

484
00:23:33,630 --> 00:23:37,930
Torej ste pravkar udaril konzole
na skrajni desni strani.

485
00:23:37,930 --> 00:23:41,900
>> Druga možnost je, lahko bi tudi šla
v zgornjem desnem kotu

486
00:23:41,900 --> 00:23:46,820
ki je odrezan na tem zaslonu, kjer
ima tri vodoravne palice.

487
00:23:46,820 --> 00:23:52,010
In greš dol z orodji in
potem JavaScript konzola

488
00:23:52,010 --> 00:23:53,240
tukaj, kjer lahko vidite -

489
00:23:53,240 --> 00:23:54,370
vsaj na Windows -

490
00:23:54,370 --> 00:23:59,680
bližnjica Control Shift J. Torej
če bi želeli, da izberete element

491
00:23:59,680 --> 00:24:06,060
na tej strani, kot sem pokazala,
preden smo storili znak za dolar odprtih parens

492
00:24:06,060 --> 00:24:08,180
in potem citira.

493
00:24:08,180 --> 00:24:11,750
>> Zanimivo je, na splošno,
enojnih narekovajih in dvojne kotacije so

494
00:24:11,750 --> 00:24:12,370
zamenljiv.

495
00:24:12,370 --> 00:24:16,050
Torej, veliko ljudi samo uporabo single
citati, ker oni so hitreje na vrsto

496
00:24:16,050 --> 00:24:19,780
kot narekovajih zato, ker jih ne
morali držite Shift.

497
00:24:19,780 --> 00:24:21,770
Torej bom naredil, da prav zdaj.

498
00:24:21,770 --> 00:24:24,510
>> Torej, želim, da izberete nekaj
z razredom.

499
00:24:24,510 --> 00:24:27,200
Kontejner, samo zato, ker vem, da je
nekaj, kar je v naši

500
00:24:27,200 --> 00:24:28,740
spletna stran zdaj.

501
00:24:28,740 --> 00:24:29,520
In sem zadeti nastopiti.

502
00:24:29,520 --> 00:24:31,670
In smo lahko videli, da je izbrana.

503
00:24:31,670 --> 00:24:34,990
Tako se pokaže, da je
vrnil ta cilj.

504
00:24:34,990 --> 00:24:36,620
Tako da je osnovni izbor.

505
00:24:36,620 --> 00:24:40,080
Če bi želeli, da ga dejansko manipulirajo,
bi morali poklicati nekaj

506
00:24:40,080 --> 00:24:43,925
na ta izbor, ki
bomo dobili v kasneje.

507
00:24:43,925 --> 00:24:49,030
>> TOMAS Reimers: Torej, samo gledati, da
bolj v globino, to ni nič drugače

508
00:24:49,030 --> 00:24:52,245
kot klici funkcij smo jih naredili v C.
Ime funkcije tukaj je

509
00:24:52,245 --> 00:24:52,580
malo čudno.

510
00:24:52,580 --> 00:24:55,640
To je znak za dolar.

511
00:24:55,640 --> 00:24:57,010
To je samo ime za funkcijo.

512
00:24:57,010 --> 00:24:58,810
Ni nič posebnega o njem.

513
00:24:58,810 --> 00:25:00,450
>> Imamo odprte oklepaje.

514
00:25:00,450 --> 00:25:03,880
Potem pa imamo en argument, ki
v tem primeru zgodi, da bo niz,

515
00:25:03,880 --> 00:25:05,680
ki je selektor za to.

516
00:25:05,680 --> 00:25:08,130
In potem imamo naše
zaprti oklepaj.

517
00:25:08,130 --> 00:25:09,960
To je to.

518
00:25:09,960 --> 00:25:11,500
>> Saj ne, da povsem drugačna.

519
00:25:11,500 --> 00:25:12,900
Kljub temu, da se ti zdi zelo čudno.

520
00:25:12,900 --> 00:25:17,220
In da se lahko, nekako, lepljenje
točka za veliko ljudi.

521
00:25:17,220 --> 00:25:21,460
>> MIKE RIZZO: Torej podobno, če smo želeli
Izberite element, ki ima ID,

522
00:25:21,460 --> 00:25:23,470
Zdaj želimo, da izberete z
ID namesto razreda.

523
00:25:23,470 --> 00:25:28,080
To bi bilo podobno stvar, kjer smo
samo naredi oster znak za ID.

524
00:25:28,080 --> 00:25:33,576
Tako da smo tukaj, da izberete vse
Elementi, ki imajo ID bar.

525
00:25:33,576 --> 00:25:35,400
>> TOMAS Reimers: In to podaljšuje.

526
00:25:35,400 --> 00:25:36,450
To CSS razširja.

527
00:25:36,450 --> 00:25:42,260
Tako kot v CSS, lahko izberete vse
povezave, ki imajo razred foo.

528
00:25:42,260 --> 00:25:43,420
Tukaj gre za isto stvar.

529
00:25:43,420 --> 00:25:52,750
>> Lahko bi naredil a.foo, ki bi izbiral
vse povezave z razredom foo.

530
00:25:52,750 --> 00:25:58,860
Lahko bi naredil oster bar, ki bi
izberite povezavo z ID-bar in tako

531
00:25:58,860 --> 00:25:59,770
naprej in tako naprej.

532
00:25:59,770 --> 00:26:02,120
Koli selektor CSS je veljavna
Selektor jQuery.

533
00:26:02,120 --> 00:26:03,370
>> MIKE RIZZO: Ja.

534
00:26:03,370 --> 00:26:07,996

535
00:26:07,996 --> 00:26:11,460
OK, zdaj gremo v malo
manipulacija, ki bi lahko storimo z

536
00:26:11,460 --> 00:26:12,870
naša jQuery.

537
00:26:12,870 --> 00:26:19,280
Torej jQuery ima poseben tip
za zapis ko smo izkoristili

538
00:26:19,280 --> 00:26:20,170
pika na koncu.

539
00:26:20,170 --> 00:26:23,340
In lahko si misliš o tem, kot v
C, kako smo imeli različne struktur struct.

540
00:26:23,340 --> 00:26:27,110
In da gredo v teh konstruktov, bi si
uporabite piko, da se v njih.

541
00:26:27,110 --> 00:26:28,480
>> To je, vrsta, podobno stvar.

542
00:26:28,480 --> 00:26:33,570
Šele zdaj imamo funkcij znotraj tega
selektor, ki jih lahko pokličete na njej.

543
00:26:33,570 --> 00:26:38,640
Torej, tukaj, zelo prvi primer
lahko vidite, je selektor CSS.

544
00:26:38,640 --> 00:26:45,290
In v bistvu, kaj to počne, je to
velja prvi element CSS na to

545
00:26:45,290 --> 00:26:46,230
stvar, ki ste jo izbrali -

546
00:26:46,230 --> 00:26:47,720
Ta element, ki ste ga izbrali -

547
00:26:47,720 --> 00:26:49,290
z vrednostjo tega.

548
00:26:49,290 --> 00:26:55,390
>> TOMAS Reimers: Tako enostavno prevod
da bi bilo, če jQuery, v bistvu,

549
00:26:55,390 --> 00:26:57,790
Pravkar se je foo.

550
00:26:57,790 --> 00:27:05,480
In nato v CSS je dejal,
obarvajo rdeče in blizu.

551
00:27:05,480 --> 00:27:06,670
To je ista ideja.

552
00:27:06,670 --> 00:27:08,800
Kaj pa je naredil, je, da je izbrana
vsi foo elementi.

553
00:27:08,800 --> 00:27:10,170
In potem je uporabljena.

554
00:27:10,170 --> 00:27:15,884
Nekako, barva nepremičnine
je enako rdeče.

555
00:27:15,884 --> 00:27:21,070
>> MIKE RIZZO: Podobno lahko tudi spremeni
dejanska vsebina tega, kar je

556
00:27:21,070 --> 00:27:24,870
kaže na HTML strani, ki
je res kul, ker to pomeni, da

557
00:27:24,870 --> 00:27:28,095
spletne strani, sedaj lahko popolnoma dinamično
in ne bi bilo treba biti statična

558
00:27:28,095 --> 00:27:31,660
, ki ga natisnete z uporabo PHP
na samem začetku

559
00:27:31,660 --> 00:27:33,320
Stran se nalaga.

560
00:27:33,320 --> 00:27:36,810
Torej tukaj, če bomo želeli spremeniti
Dejanska HTML strani, bi zdaj smo

561
00:27:36,810 --> 00:27:43,550
klic funkcije HTML, ki potem samo
vložki karkoli bomo podate v

562
00:27:43,550 --> 00:27:45,390
ta element, da smo izbrali.

563
00:27:45,390 --> 00:27:49,810
Tako da tukaj smo, da izberete element s
Razred foo in nato rekel, da je HTML

564
00:27:49,810 --> 00:27:52,200
to je zdaj zdravo svet.

565
00:27:52,200 --> 00:27:55,600
>> TOMAS Reimers: In če pomislite
kaj so uporabne aplikacije

566
00:27:55,600 --> 00:28:00,800
to je to CSS ena, prva stvar, ki
lahko začnete razmišljati o tem je

567
00:28:00,800 --> 00:28:03,070
v smislu celo padajočega menija.

568
00:28:03,070 --> 00:28:08,350
Lahko bi začeli delati stvari, kot so, ko
uporabnik lebdi nad zgornji del

569
00:28:08,350 --> 00:28:11,970
iz padajočega, si želijo, da bi
Spodnji del vidna.

570
00:28:11,970 --> 00:28:12,540
Kajne?

571
00:28:12,540 --> 00:28:15,610
>> Torej v CSS, imamo lastnosti
da bi nekaj vidnega.

572
00:28:15,610 --> 00:28:19,330
Stvari, kot so zaslon na debelem črevesu none
bi bilo nevidno.

573
00:28:19,330 --> 00:28:21,190
Display blok bi bilo vidno.

574
00:28:21,190 --> 00:28:25,860
Ali celo, če želite iti enostavnejši, vas
imajo stvari, kot vidljivosti, enakovrednih

575
00:28:25,860 --> 00:28:27,520
vidna in vidljivost enaka skriti.

576
00:28:27,520 --> 00:28:30,330

577
00:28:30,330 --> 00:28:34,780
>> In lahko začnete izvajati stvari
kot padajočega menija pravice

578
00:28:34,780 --> 00:28:38,410
ko prideš skozi idejo o tem, kako
lahko ugotovimo, ko se to odpre,

579
00:28:38,410 --> 00:28:39,850
katere bomo prišli skozi zelo na kratko.

580
00:28:39,850 --> 00:28:42,160
Lahko pa smo začeli videti
aplikacije za to.

581
00:28:42,160 --> 00:28:45,540
V podobnem smislu, če ste bili, da poskusite
in izvajati, recimo, klepetu

582
00:28:45,540 --> 00:28:48,620
motorja in želite, da bi malo
oblačka pridejo kadarkoli ste

583
00:28:48,620 --> 00:28:52,880
dobil novo sporočilo, ko boste dobili
novo sporočilo, si lahko malo

584
00:28:52,880 --> 00:28:55,890
oblačka prišel gor s spreminjanjem
HTML strani, kajne?

585
00:28:55,890 --> 00:29:00,540
Z dodatkom, da dodatne oblačka
z dodatnim besedilom tam.

586
00:29:00,540 --> 00:29:01,140
Ja?

587
00:29:01,140 --> 00:29:07,750
>> PUBLIKA: Torej bi to vgradili v
HTML kodo v nekaj podobnega

588
00:29:07,750 --> 00:29:10,534
[Neslišno]?

589
00:29:10,534 --> 00:29:12,940
>> MIKE RIZZO: Right.

590
00:29:12,940 --> 00:29:16,190
Ja, bomo prišli do, da
v malo.

591
00:29:16,190 --> 00:29:18,810
Ja, to je podobno
malo za PHP.

592
00:29:18,810 --> 00:29:21,240
Ni ravno podobno.

593
00:29:21,240 --> 00:29:24,730
>> Dober razlikovanje, da je tisto, kar ta
je dejansko urejanje ko smo urejati

594
00:29:24,730 --> 00:29:28,480
stran, ker je ne bo
urejanjem dejansko datoteko, da se

595
00:29:28,480 --> 00:29:31,380
hranijo na strežniku, ker svet
ne sme imeti dovoljenja

596
00:29:31,380 --> 00:29:32,610
za urejanje datotek.

597
00:29:32,610 --> 00:29:36,080
To je le urejanje, kaj je na strani
in kaj se prikaže v

598
00:29:36,080 --> 00:29:36,950
brskalnik.

599
00:29:36,950 --> 00:29:40,340
Torej, če ste bili, ko osvežite stran,
pravijo, brisanje nekaj, kot smo

600
00:29:40,340 --> 00:29:44,730
glej, kar lahko storimo z odstranite klic,
ta stvar bi potem znova pojavijo.

601
00:29:44,730 --> 00:29:48,590
>> TOMAS Reimers: Torej en način, da razmišljajo o
To je, če sem računalnik in

602
00:29:48,590 --> 00:29:50,170
Mike je, nekako, strežnik.

603
00:29:50,170 --> 00:29:53,850
Kaj se bo zgodilo, je, da bom
vprašajte Mike, hej, lahko dobim kopijo

604
00:29:53,850 --> 00:29:54,630
ta spletna stran?

605
00:29:54,630 --> 00:29:56,190
In on mi daste njegovo kopijo.

606
00:29:56,190 --> 00:29:57,430
>> Ne, to ni originalna stvar.

607
00:29:57,430 --> 00:29:58,620
To je samo kopija.

608
00:29:58,620 --> 00:30:00,450
In potem bi bilo všeč, oh,
tam je JavaScript tukaj.

609
00:30:00,450 --> 00:30:02,450
Jasno je, da bi moral urejati
stran, da je tako.

610
00:30:02,450 --> 00:30:04,250
In jaz urejanje svojega izvoda.

611
00:30:04,250 --> 00:30:05,920
>> Ampak to ni bila izvedba
dejanska kopija.

612
00:30:05,920 --> 00:30:08,480
In če bi bil, da bi ga še enkrat vprašati
osvežite stran, -

613
00:30:08,480 --> 00:30:10,060
hej, lahko dobim še eno čistopis -

614
00:30:10,060 --> 00:30:11,440
on se dogaja, da mi
drugo Čistopis.

615
00:30:11,440 --> 00:30:14,240
In potem ti bom naredil isto
kot so, oh, to sem js, ki pravi,

616
00:30:14,240 --> 00:30:14,866
da se to uredi.

617
00:30:14,866 --> 00:30:17,460
In grem naprej s tem.

618
00:30:17,460 --> 00:30:20,930
>> MIKE RIZZO: Torej res kul stvar
ki jih lahko naredite s jQuery je

619
00:30:20,930 --> 00:30:24,350
dejansko dodali različne vrste
animacij na vaši strani.

620
00:30:24,350 --> 00:30:27,440
Ne vem, če ste že kdaj videli, če
skušate s izpolnite obrazec

621
00:30:27,440 --> 00:30:31,250
na spletu in ne izpolnite
stvari pravilno.

622
00:30:31,250 --> 00:30:33,440
Tako majhna stvar drsi navzdol
na vrhu in si reče

623
00:30:33,440 --> 00:30:34,820
ni to narejeno pravilno.

624
00:30:34,820 --> 00:30:36,260
Prosimo, poskusite znova.

625
00:30:36,260 --> 00:30:37,890
In potem, morda celo samo potisnite navzgor.

626
00:30:37,890 --> 00:30:40,710
>> Izkazalo se je, jQuery je zgrajena v funkcijah
da bi vse to

627
00:30:40,710 --> 00:30:44,180
animacija zelo, zelo enostavno.

628
00:30:44,180 --> 00:30:46,750
Tako da je prvi fade
določeno funkcijo, ki

629
00:30:46,750 --> 00:30:47,710
lahko pokličete na nekaj.

630
00:30:47,710 --> 00:30:55,650
In to je način, da spremenite CSS o
ta element v animirani.

631
00:30:55,650 --> 00:30:58,480
Torej je potrebno, ne glede na element
pokličeš to fade out naprej.

632
00:30:58,480 --> 00:31:03,990
In potem se počasi spreminja, da je motnosti
dokler ne gre popolnoma transparentno.

633
00:31:03,990 --> 00:31:07,330
>> TOMAS Reimers: druga priljubljen
je potisnite navzdol, kar bo

634
00:31:07,330 --> 00:31:08,800
nekaj, kar se zdi, da jo potisnete navzdol.

635
00:31:08,800 --> 00:31:12,840
Torej, v primeru meniju drop down,
še enkrat, ko smo se naučili, kako odkriti

636
00:31:12,840 --> 00:31:15,310
ko je bil ta gibala nad,
si lahko samo povem to dno

637
00:31:15,310 --> 00:31:16,910
del potisnite navzdol zdaj.

638
00:31:16,910 --> 00:31:19,270
In potem se zdi,
z drsenjem navzdol.

639
00:31:19,270 --> 00:31:22,042

640
00:31:22,042 --> 00:31:26,590
>> MIKE RIZZO: In potem, če boste morali
neke vrste animacije v mislih, da

641
00:31:26,590 --> 00:31:29,080
jQuery ne pomeni nujno zagotoviti.

642
00:31:29,080 --> 00:31:32,690
Na primer, recimo jQuery
pa vam zagotavlja s toboganom

643
00:31:32,690 --> 00:31:33,750
navzdol in ga potisnite navzgor.

644
00:31:33,750 --> 00:31:36,740
No, recimo, da si je želel, da ga potisnite
nekaj iz levega ali iz

645
00:31:36,740 --> 00:31:39,880
Pravica nekako kot CS50
Glavna stran počne kadarkoli

646
00:31:39,880 --> 00:31:42,080
greš na novo ploščo.

647
00:31:42,080 --> 00:31:45,030
Nato bi verjetno morali
izvedete sami z uporabo

648
00:31:45,030 --> 00:31:49,310
funkcijo animirati v jQuery.

649
00:31:49,310 --> 00:31:51,350
>> Torej podobno, si animirati.

650
00:31:51,350 --> 00:31:55,850
In potem, v njem je potrebno
Slovar različnih vrednostih

651
00:31:55,850 --> 00:31:57,340
da si moral prenesti.

652
00:31:57,340 --> 00:32:06,960
Torej tukaj, če smo želeli animirati
element foo tako da njegova širina bodisi

653
00:32:06,960 --> 00:32:10,880
raztegniti ali pogodbe do 80 pik,
odvisno od tega, kaj trenutno je.

654
00:32:10,880 --> 00:32:14,100
Mi bi samo mimo, da kot
argument v njem.

655
00:32:14,100 --> 00:32:18,060
>> Animirati tudi še nekatere druge argumente
da bi ga prenese, na primer,

656
00:32:18,060 --> 00:32:21,150
hitrost animacije
, ki ga želite dati.

657
00:32:21,150 --> 00:32:26,220
In za to, da bi jaz samo povem,
hitro Google jQuery animacijo.

658
00:32:26,220 --> 00:32:31,710
In potem vzgajajo te strani, lahko
glej to je dobil kup različnih

659
00:32:31,710 --> 00:32:33,560
lastnosti, ki jo lahko mimo.

660
00:32:33,560 --> 00:32:35,990
>> In sem Spodbujam vas - kadarkoli prideš
čez nekaj, ki jih ne

661
00:32:35,990 --> 00:32:40,390
vem, ali pa samo želite izvedeti več o tem
Zlasti metoda, ki jo lahko pokličete

662
00:32:40,390 --> 00:32:41,270
na nekaj -

663
00:32:41,270 --> 00:32:44,440
samo Google. jQuery je izredno
dobro dokumentirana.

664
00:32:44,440 --> 00:32:49,140
In pogosto krat obstaja veliko
Primeri, ki jih ponujajo za vas.

665
00:32:49,140 --> 00:32:52,470
Če smo se pomaknite navzdol -

666
00:32:52,470 --> 00:32:53,720
pot navzdol -

667
00:32:53,720 --> 00:32:57,660

668
00:32:57,660 --> 00:32:59,190
da lahko uporabimo, kot tudi.

669
00:32:59,190 --> 00:33:02,480
>> Še enkrat, ko razvijalec dejansko gre
skozi težave pisanja

670
00:33:02,480 --> 00:33:05,810
Knjižnica, ki jih običajno želijo
nekoga, da jo uporabite.

671
00:33:05,810 --> 00:33:09,400
Torej skupaj se dogaja, da
biti dokumentacija.

672
00:33:09,400 --> 00:33:12,270
In da je dokumentacija običajno lahko
dostopne na spletni strani projekta, ki je

673
00:33:12,270 --> 00:33:14,970
zakaj ti je pa to prvotno mesto v
začetek, ki vas povezuje z

674
00:33:14,970 --> 00:33:18,080
Projekt strani, tako da lahko
glej to dokumentacijo.

675
00:33:18,080 --> 00:33:22,670
>> Značilno je, da stran projekta v primeru
z dne [neslišno], da ti je povedal,

676
00:33:22,670 --> 00:33:23,940
Imena razredov.

677
00:33:23,940 --> 00:33:27,250
Pri JavaScript, daje
vam ime funkcij.

678
00:33:27,250 --> 00:33:35,310
Mimogrede, če smo pomikanje do vrha,
hitro side note na funkcije, je

679
00:33:35,310 --> 00:33:39,080
ko boste videli funkcijo izvaja
kot je ta s trdo

680
00:33:39,080 --> 00:33:43,800
oklepaj v sredini, kar pomeni,
da je ta lastnost ni obvezno.

681
00:33:43,800 --> 00:33:44,750
Samo glave gor.

682
00:33:44,750 --> 00:33:47,350
Videl sem veliko vprašanj
o tem.

683
00:33:47,350 --> 00:33:50,370
>> Tako da tukaj lahko vidimo, da
oživljeno traja lastnosti

684
00:33:50,370 --> 00:33:51,800
kot nujni argument.

685
00:33:51,800 --> 00:33:54,870
In vse ostalo je neobvezno.

686
00:33:54,870 --> 00:33:56,136
Side note -

687
00:33:56,136 --> 00:33:58,090
lahko si misliš o tem, razvrščanje
o, kot so strani man.

688
00:33:58,090 --> 00:34:04,275
Man strani so dokumentacija za C in
za veliko drugih stvari, kot dobro.

689
00:34:04,275 --> 00:34:11,020
>> MIKE RIZZO: Zato smo se naučili, kako
spremenite drugačen CSS na strani

690
00:34:11,020 --> 00:34:14,040
ga animirati, in odstranite dodajte HTML.

691
00:34:14,040 --> 00:34:16,889
Toda eden izmed resnično najmočnejši
Stvari okoli JavaScript

692
00:34:16,889 --> 00:34:18,270
in zlasti jQuery -

693
00:34:18,270 --> 00:34:22,570
kar vam omogoča, da storiti, je odgovoriti na
različni elementi, ki se zgodijo.

694
00:34:22,570 --> 00:34:25,380
Na primer, tukaj imamo
obravnavo dogodkov.

695
00:34:25,380 --> 00:34:28,210
In to samo pomeni, da vsakič, ko je to
Dogodek se zgodi, jih uporabljamo v

696
00:34:28,210 --> 00:34:29,280
določen način.

697
00:34:29,280 --> 00:34:35,159
>> Torej, tukaj, generično jQuery dogodek
Vodnik je pika na.

698
00:34:35,159 --> 00:34:42,949
In potem prva stvar, ki jo pod pogojem,
je tisto, dogodek bi morala

699
00:34:42,949 --> 00:34:43,810
se posluša.

700
00:34:43,810 --> 00:34:45,610
Torej, tukaj je, da klik
čakamo.

701
00:34:45,610 --> 00:34:49,250
>> TOMAS Reimers: Druga možnost je, da imate
na lebdenje, ki je zelo priljubljen.

702
00:34:49,250 --> 00:34:52,000
Torej nazaj na moj spustnega menija idejo.

703
00:34:52,000 --> 00:34:54,239
Ti bi morali zgornjo eno na lebdenja.

704
00:34:54,239 --> 00:34:56,096
In potem se lahko spremeni.

705
00:34:56,096 --> 00:34:56,830
>> MIKE RIZZO: Right.

706
00:34:56,830 --> 00:35:01,680
In potem, ko se to zgodi, je samo
izvaja te funkcije, ki smo ji dali

707
00:35:01,680 --> 00:35:05,080
kot argument in da
opozori zdravo ali hi.

708
00:35:05,080 --> 00:35:08,900
>> TOMAS Reimers: Torej, v primeru
JavaScript, to je mesto moramo

709
00:35:08,900 --> 00:35:12,970
odstranite sami od C. Mi lahko dejansko
sprejmejo funkcij kot argumente.

710
00:35:12,970 --> 00:35:15,940
In obstaja veliko res
zapletenih načinov, da to storijo.

711
00:35:15,940 --> 00:35:17,940
Bomo spodbujali v eno smer,
ki je lahko določite

712
00:35:17,940 --> 00:35:19,270
deluje tam.

713
00:35:19,270 --> 00:35:22,540
>> Torej, če ste prosi za funkciji
parameter, ti si v bistvu samo

714
00:35:22,540 --> 00:35:24,500
bo opredeliti funkcijo
o samem.

715
00:35:24,500 --> 00:35:27,090
In način, kako definiramo funkcijo
v JavaScript je vas

716
00:35:27,090 --> 00:35:28,820
dobesedno pravijo funkcijo.

717
00:35:28,820 --> 00:35:30,130
Nato je običajno, ime
funkcije.

718
00:35:30,130 --> 00:35:32,510
Ampak mi nikoli ne bo reference
ta funkcija še enkrat.

719
00:35:32,510 --> 00:35:34,040
Zato smo ga pustite brez imena.

720
00:35:34,040 --> 00:35:40,440
>> Potem oklepaji, potem kodrasti
naramnice, nato pa kodo v to.

721
00:35:40,440 --> 00:35:42,540
Tako smo razumeli to pločevinko
je malo zmedeno.

722
00:35:42,540 --> 00:35:45,180
Torej smo vam na splošno obliko
kaj obravnavo dogodkov izgleda

723
00:35:45,180 --> 00:35:47,790
spodaj, ki je na dogodkih.

724
00:35:47,790 --> 00:35:50,598
In potem, kodo znotraj tega.

725
00:35:50,598 --> 00:35:52,478
>> MIKE RIZZO: Ali obstajajo
Vprašanja o tem?

726
00:35:52,478 --> 00:35:54,818
To je lahko malo zmedeno
prvič, ko ga vidim.

727
00:35:54,818 --> 00:35:57,550
>> TOMAS Reimers: Si res želiš
odpreti datoteko in jim pokazati nekaj

728
00:35:57,550 --> 00:35:58,155
jQuery prav zdaj?

729
00:35:58,155 --> 00:35:59,853
>> MIKE RIZZO: Ja, kaj je to.

730
00:35:59,853 --> 00:36:00,256
OK.

731
00:36:00,256 --> 00:36:02,490
>> TOMAS Reimers: Do sedaj smo
v aparatu.

732
00:36:02,490 --> 00:36:07,730
In tisto, kar smo naredili, je, da smo zavzeli
svoboda ustvarjanja oboje, tako index.html

733
00:36:07,730 --> 00:36:10,100
slika, ki se povezuje z
Datoteka JavaScript.

734
00:36:10,100 --> 00:36:12,880
In lahko se nam odpirajo -

735
00:36:12,880 --> 00:36:15,170
ja.

736
00:36:15,170 --> 00:36:16,630
No, to počne dve stvari.

737
00:36:16,630 --> 00:36:18,350
>> Prvi je, da se povezuje z
Datoteka JavaScript.

738
00:36:18,350 --> 00:36:21,250
In bomo videli, da tu gor.

739
00:36:21,250 --> 00:36:25,340
Vidimo, da v glavi
HTML dokument, še posebej.

740
00:36:25,340 --> 00:36:28,260
Tako da boste tam videli, da
smo, v bistvu, pravijo SRC,

741
00:36:28,260 --> 00:36:29,590
ki stoji za vir.

742
00:36:29,590 --> 00:36:30,630
In to je URL.

743
00:36:30,630 --> 00:36:32,700
>> Torej, tukaj lahko rekli, da smo že
vključeni jQuery.

744
00:36:32,700 --> 00:36:34,290
In smo tudi skripte.

745
00:36:34,290 --> 00:36:40,630
Drug način, da vključuje JavaScript je
da lahko vključujejo inline script

746
00:36:40,630 --> 00:36:44,600
priponka imamo na dnu, kjer je
pravi tip skript je besedilo JavaScript.

747
00:36:44,600 --> 00:36:46,960
>> Tako smo si rekel, poslušaj, smo
o tem, da vključuje scenarij.

748
00:36:46,960 --> 00:36:51,890
In tip te skripte
JavaScript, ki je vrsta besedila.

749
00:36:51,890 --> 00:36:52,550
Zelo preprosto.

750
00:36:52,550 --> 00:36:56,490
>> MIKE RIZZO: Torej to, vrsta, pride do
vaše vprašanje o tem, kako vključiti

751
00:36:56,490 --> 00:37:02,340
JavaScript v naših datotek, ker ko smo
so PHP, naredimo nekaj takega.

752
00:37:02,340 --> 00:37:07,570
In potem imamo PHP funkcije -
recimo zaloge storiti

753
00:37:07,570 --> 00:37:09,150
Nekaj ​​s tem, da -

754
00:37:09,150 --> 00:37:10,490
gre tja.

755
00:37:10,490 --> 00:37:13,860
Vendar, sedaj imamo skript oznake
, ki smo jo dal, ki so dejansko

756
00:37:13,860 --> 00:37:19,470
del HTML sama, ker to ni
pretvarja da HTML datoteka všeč

757
00:37:19,470 --> 00:37:25,070
je v PHP, ker če si dejansko šel v
in pogled na vir strani,

758
00:37:25,070 --> 00:37:28,430
boste videli te scenaristov oznake tam
z JavaScript povezana z

759
00:37:28,430 --> 00:37:29,800
jim pri tem.

760
00:37:29,800 --> 00:37:31,760
>> Torej, če smo želeli
napisati nekaj JavaScript -

761
00:37:31,760 --> 00:37:37,110
recimo, da smo želeli spremeniti telo
ker zdaj nimam

762
00:37:37,110 --> 00:37:40,020
katere koli druge oznake, da sem lahko res
Urejanje poleg telesa.

763
00:37:40,020 --> 00:37:42,450
Reciva, da sem hotel
spremenite CSS tega.

764
00:37:42,450 --> 00:37:46,190
Torej, gremo naprej in spremembe
barva tega do rdeče.

765
00:37:46,190 --> 00:37:47,380
>> Zato sem shranite.

766
00:37:47,380 --> 00:37:52,700
Vrnimo se k naši spletni strani, osveževanja,
in to počne avtomatsko

767
00:37:52,700 --> 00:37:55,920
saj ni videti, kot da čakala
Sploh zato, ker nismo poslušali

768
00:37:55,920 --> 00:37:59,450
za dogodek ali kaj podobnega.

769
00:37:59,450 --> 00:38:02,800
>> TOMAS Reimers: Torej, če se vrnemo na to
vložiti predvsem - HTML

770
00:38:02,800 --> 00:38:04,710
datoteko - kaj boš
videti je, da smo imeli -

771
00:38:04,710 --> 00:38:06,810
pozabiti, da je ta vstavljen,
nekako, kronološko.

772
00:38:06,810 --> 00:38:09,910
Torej imamo prvo glavo.
to obilje teh dveh datotek.

773
00:38:09,910 --> 00:38:10,800
Potem gremo na telo.

774
00:38:10,800 --> 00:38:11,640
In vidimo Hello World.

775
00:38:11,640 --> 00:38:13,030
Tako smo render Hello World.

776
00:38:13,030 --> 00:38:15,240
>> In potem zadnja stvar, ki jo imajo
se imamo scenarij oznako.

777
00:38:15,240 --> 00:38:20,880
Tako da teče scenarij oznako, ker je
Ne govorim čakati za nič.

778
00:38:20,880 --> 00:38:24,700
In to je najbolj osnovna
način za vodenje JavaScript.

779
00:38:24,700 --> 00:38:29,200
>> S tem je dejal, lahko si dal scenarij
tag v glavi samo

780
00:38:29,200 --> 00:38:31,240
pokazati to točko?

781
00:38:31,240 --> 00:38:34,450

782
00:38:34,450 --> 00:38:35,700
In vodijo to.

783
00:38:35,700 --> 00:38:38,880

784
00:38:38,880 --> 00:38:41,070
Bomo opazili, da
ni spremenil barvo.

785
00:38:41,070 --> 00:38:44,210
In to je eden od problemov
JavaScript je, da so stvari naložen

786
00:38:44,210 --> 00:38:45,930
v kronološkem vrstnem redu.

787
00:38:45,930 --> 00:38:49,750
>> Torej v času, ki koda
je bilo tekmovanje v teku, smo izbrali -

788
00:38:49,750 --> 00:38:52,530
vrniti -

789
00:38:52,530 --> 00:38:53,670
tag telo.

790
00:38:53,670 --> 00:38:57,560
Tag telo še ne obstaja, ker
JavaScript je v skladu s HTML.

791
00:38:57,560 --> 00:39:01,790
Torej brskalnik je kot izberite telesu.

792
00:39:01,790 --> 00:39:02,760
Nekaj ​​takega še ni.

793
00:39:02,760 --> 00:39:03,600
Tako bomo lahko prezreti, da je.

794
00:39:03,600 --> 00:39:05,330
In smo naprej.

795
00:39:05,330 --> 00:39:07,200
>> In potem smo definirati telo oznako.

796
00:39:07,200 --> 00:39:09,670
Ampak to nikoli ne dobi posodobljen.

797
00:39:09,670 --> 00:39:12,560
Torej, če ste za izvajanje skript
oznake, poskrbite, da boste mesto

798
00:39:12,560 --> 00:39:15,502
po telesu oznako.

799
00:39:15,502 --> 00:39:16,820
Naslednji posnetek.

800
00:39:16,820 --> 00:39:17,830
>> MIKE RIZZO: OK.

801
00:39:17,830 --> 00:39:19,330
Tako da smo spremenili nekaj.

802
00:39:19,330 --> 00:39:21,910
Ampak to ni bilo videti, kot da odgovorila na
nas sploh zato, ker je nekako

803
00:39:21,910 --> 00:39:24,150
Uspelo takoj, ko bo naložen na stran.

804
00:39:24,150 --> 00:39:27,700
Torej sedaj, namesto da bi to sprejel, zakaj
ne bomo dodali obravnavo dogodkov.

805
00:39:27,700 --> 00:39:31,020
>> Torej dajmo nekaj narediti
na telo znova.

806
00:39:31,020 --> 00:39:33,490
In recimo, da to počnemo na -

807
00:39:33,490 --> 00:39:34,500
kliknite.

808
00:39:34,500 --> 00:39:35,750
Mi bomo dodali funkcijo.

809
00:39:35,750 --> 00:39:38,270

810
00:39:38,270 --> 00:39:39,690
>> Sprememba Debatni: Tomas Reimers
to je barva rdeča znova.

811
00:39:39,690 --> 00:39:40,000
Zakaj pa ne?

812
00:39:40,000 --> 00:39:41,680
>> MIKE RIZZO: Ja, dajmo spremembe
njegova "barva rdeče znova.

813
00:39:41,680 --> 00:39:46,310

814
00:39:46,310 --> 00:39:46,900
Vse je v redu.

815
00:39:46,900 --> 00:39:48,480
Torej, kaj je osvežite stran.

816
00:39:48,480 --> 00:39:49,530
OK, bomo videli -

817
00:39:49,530 --> 00:39:52,290
kot je bilo pričakovano, da se ne vklopijo še rdeče.

818
00:39:52,290 --> 00:39:53,610
Ampak potem lahko gremo naprej in ga kliknite.

819
00:39:53,610 --> 00:39:54,270
>> TOMAS Reimers: In še to obarva rdeče.

820
00:39:54,270 --> 00:39:56,090
>> MIKE RIZZO: In to ne
obarva rdeče, kot je bilo pričakovano.

821
00:39:56,090 --> 00:39:59,010
>> TOMAS Reimers: In bomo lahko videli, kako
lahko začnemo graditi zelo osnovna

822
00:39:59,010 --> 00:40:00,170
interakcija.

823
00:40:00,170 --> 00:40:03,850
Druge stvari, ki jih morda želeli storiti, je,
če ne želimo, da bi telo

824
00:40:03,850 --> 00:40:07,230
obarvajo rdeče, naredimo HTML
ozadje rdeče barve.

825
00:40:07,230 --> 00:40:08,480
Samo, da je to ista CSS.

826
00:40:08,480 --> 00:40:19,960

827
00:40:19,960 --> 00:40:23,320
>> In ko smo ga spremenili, bomo lahko videli
zelo dramatičen učinek spreminjanja

828
00:40:23,320 --> 00:40:25,510
celotno stran.

829
00:40:25,510 --> 00:40:29,100
Torej še enkrat, če ste v izvajanju stvari,
lahko imate eno komponento

830
00:40:29,100 --> 00:40:30,150
, ki naj bi se kliknili.

831
00:40:30,150 --> 00:40:32,710
Recimo gumb Exit in
celotna druga komponenta,

832
00:40:32,710 --> 00:40:33,830
, ki je mišljen, da se odzove.

833
00:40:33,830 --> 00:40:35,755
Tako da bi odstranili okno
ko se to zgodi.

834
00:40:35,755 --> 00:40:39,341

835
00:40:39,341 --> 00:40:40,700
>> MIKE RIZZO: OK.

836
00:40:40,700 --> 00:40:42,200
Tako kot na primer -

837
00:40:42,200 --> 00:40:44,400
niste dobili, da vidim to prej -

838
00:40:44,400 --> 00:40:47,500
Jaz ti bom pokazal, kaj je videti
všeč, ko smo nekaj prikriti.

839
00:40:47,500 --> 00:40:52,220
Torej bom šel naprej in ne potisnite navzgor.

840
00:40:52,220 --> 00:40:54,440
>> TOMAS Reimers: Želite zaviti, da je v
Vrsta odstavek, preden bomo to storili?

841
00:40:54,440 --> 00:40:55,132
>> MIKE RIZZO: OK.

842
00:40:55,132 --> 00:40:59,135
Ja, zakaj ne bomo storili, da samo zato,
jo lahko izberete malo več.

843
00:40:59,135 --> 00:41:00,490
>> TOMAS Reimers: in kaj je
izročiti to razred.

844
00:41:00,490 --> 00:41:01,740
>> MIKE RIZZO: Ja.

845
00:41:01,740 --> 00:41:06,575

846
00:41:06,575 --> 00:41:09,920
OK, pa poglejmo.

847
00:41:09,920 --> 00:41:14,820
Namesto izbiri priklic
zdaj, jaz bom samo izbrati vse z

848
00:41:14,820 --> 00:41:18,780
Razred hello, ki je tu
samo še eno stvar.

849
00:41:18,780 --> 00:41:20,900
Tako da ne bi bilo treba
skrbi.

850
00:41:20,900 --> 00:41:23,080
>> Torej bom osvežiti.

851
00:41:23,080 --> 00:41:24,230
Jaz grem naprej in ga kliknite.

852
00:41:24,230 --> 00:41:27,890
In to, nekako, kajne čudno slide
up stvar, ki ni videti, da

853
00:41:27,890 --> 00:41:29,580
privlačna.

854
00:41:29,580 --> 00:41:31,060
Na splošno pa so videti zelo lepo.

855
00:41:31,060 --> 00:41:32,720
Mislim, da je to - za nekatere
Razlog - ni.

856
00:41:32,720 --> 00:41:36,640
Jaz bom samo to fade out, tako
si lahko ogledate tudi to.

857
00:41:36,640 --> 00:41:38,100
Veliko lepše.

858
00:41:38,100 --> 00:41:41,150
>> In potem, če sem odprla JavaScript
spet tolažil in želimo videti, kaj

859
00:41:41,150 --> 00:41:43,900
zgleda, ko smo ga zbledi prijavite

860
00:41:43,900 --> 00:41:46,920
Zdaj sem poklical zbledi na njem.

861
00:41:46,920 --> 00:41:48,830
In to zbledi nazaj noter

862
00:41:48,830 --> 00:41:56,150
>> Podobno bi lahko dejansko tudi mimo
Trditev, da zbledi ali fade out,

863
00:41:56,150 --> 00:41:57,640
ki je vrsta, hitrost njega.

864
00:41:57,640 --> 00:42:02,220
Torej, gremo naprej in rekli, da smo želeli
da bi šel počasi zbledi prijavite

865
00:42:02,220 --> 00:42:04,250
Zato mislim, da je še vedno zdelo,
precej hitro.

866
00:42:04,250 --> 00:42:06,180
Vendar je bilo počasneje kot prej.

867
00:42:06,180 --> 00:42:10,340
>> TOMAS Reimers: In če želite, da bi našli
Več o teh stvareh, še enkrat,

868
00:42:10,340 --> 00:42:13,410
pojdite na dokumentacijo jQuery,
ki smo vam ga je dal, in branje

869
00:42:13,410 --> 00:42:13,735
z njimi.

870
00:42:13,735 --> 00:42:15,790
Dokumentirajo svoje funkcije
neverjetno dobro.

871
00:42:15,790 --> 00:42:18,622

872
00:42:18,622 --> 00:42:19,570
>> MIKE RIZZO: OK.

873
00:42:19,570 --> 00:42:21,560
Torej, mislim, da gremo nazaj v to.

874
00:42:21,560 --> 00:42:23,490
In potem lahko govorimo o naši zadnji strani.

875
00:42:23,490 --> 00:42:24,690
No, lahko končamo z Bootstrap.

876
00:42:24,690 --> 00:42:27,140
In potem jo bomo odprli
pri nekaterih vprašanjih.

877
00:42:27,140 --> 00:42:30,180
In če imate vi kakšno idejo, da
bi radi, da bi poskušali bruhal in videli

878
00:42:30,180 --> 00:42:34,150
če jih bomo lahko izvajajo z
JavaScript hitro.

879
00:42:34,150 --> 00:42:37,890
>> Torej res hitro o Bootstrap, ki
je samodejno vključena v

880
00:42:37,890 --> 00:42:41,700
tvoj zadnji problem nastavite v mapi CSS
in dejansko povezana v vašem

881
00:42:41,700 --> 00:42:43,190
header.php.

882
00:42:43,190 --> 00:42:46,740
Torej lahko ste dodali razrede, ki
so opredeljene v Bootstrapa njej.

883
00:42:46,740 --> 00:42:50,490
In to bi avtomatično stil
zato mora te stvari.

884
00:42:50,490 --> 00:42:54,550
>> TOMAS Reimers: Torej Bootstrap je zelo
čarobna stvar, ki jih ljudje razvili

885
00:42:54,550 --> 00:42:55,340
na Twitterju.

886
00:42:55,340 --> 00:42:57,230
In kaj je bilo mišljeno, da storiti, je bilo -

887
00:42:57,230 --> 00:43:00,740
preden so spletne strani res težko, da bi
videti lepo, še posebej, ko smo imeli

888
00:43:00,740 --> 00:43:02,200
veliko skupnih sestavnih delov.

889
00:43:02,200 --> 00:43:04,770
Torej, veliko gumbov na
Spletna videti enako.

890
00:43:04,770 --> 00:43:08,960
>> Veliko besedilna polja se lahko na
videti bolje kot standardnega besedila

891
00:43:08,960 --> 00:43:13,620
Polje verjetno veste iz zares
Stare spletne strani ali res slabo postavil

892
00:43:13,620 --> 00:43:18,210
spletne strani, ki samo izgledajo kot literal
polja z besedilom brez kakršne koli obliki besedila

893
00:43:18,210 --> 00:43:21,190
Senca ali kakršno koli lepo obris.

894
00:43:21,190 --> 00:43:24,540
Torej, kaj Bootstrap naredil je to rekel, dobro,
imamo skupno stilov veliko.

895
00:43:24,540 --> 00:43:28,210
Zakaj ne naredimo en skupen nabor CSS
ter skupen niz JavaScript kot

896
00:43:28,210 --> 00:43:32,210
dobro, ki ga lahko stilu, kot je, in ki
mogoče dati ljudem stvari, kot so padec

897
00:43:32,210 --> 00:43:34,610
navzdol menijev, ki lahko ljudem
stvari, kot modals.

898
00:43:34,610 --> 00:43:38,580
>> Modal je tisto, kar pops preko strani
kadar je strogo gledano

899
00:43:38,580 --> 00:43:41,090
nekaj, kar še dodatno zavira
interakcija, dokler vas

900
00:43:41,090 --> 00:43:43,110
interakcijo z njim.

901
00:43:43,110 --> 00:43:45,820
Nekaj ​​takega je, ste prepričani,
želite izbrisati to zadevo?

902
00:43:45,820 --> 00:43:49,100
Saj ne morem storiti ničesar drugega
dokler ne boste rekli, da ali ne.

903
00:43:49,100 --> 00:43:52,720
>> Trajalo je vse to in jo zapakirati
skupaj in rekel, gremo.

904
00:43:52,720 --> 00:43:54,630
Ljudje lahko zdaj to.

905
00:43:54,630 --> 00:43:56,830
In vse to najdete preko
na getbootstrap.com.

906
00:43:56,830 --> 00:44:00,480
Samodejno ki je bila vključena v
tvoj zadnji problem nastaviti.

907
00:44:00,480 --> 00:44:04,160
In ste več kot dobrodošli, da
ga lahko uporabljate v končni projekt.

908
00:44:04,160 --> 00:44:06,950
In če želite, da bi izhajalo, da
povezavo, da bi dobili Bootstrapa.

909
00:44:06,950 --> 00:44:10,590

910
00:44:10,590 --> 00:44:15,700
>> Videli boste tu
Bootstrap CSS mesto.

911
00:44:15,700 --> 00:44:16,860
Boste videli Bootstrapa.

912
00:44:16,860 --> 00:44:20,450
In če se premaknete navzdol, boste videli
kako jo naložite, kako

913
00:44:20,450 --> 00:44:21,900
ga namestite, et cetera.

914
00:44:21,900 --> 00:44:24,700
>> MIKE RIZZO: In lahko tudi,
Zanimivo je, da ga prilagoditi

915
00:44:24,700 --> 00:44:27,770
je ne glede na vrsto teme
, ki ga želite.

916
00:44:27,770 --> 00:44:31,270
Vem, da je to nekaj, kar sem naredil za mojo
končni projekt, ko sem prevzel razred

917
00:44:31,270 --> 00:44:32,050
je bila po vaših željah.

918
00:44:32,050 --> 00:44:34,540
Drugačna različica Bootstrap, da
imel drugačno barvno shemo in

919
00:44:34,540 --> 00:44:36,700
različne oblike nekaterih
različni stvari.

920
00:44:36,700 --> 00:44:38,250
Zato vas pozivam, da igrajo s tem.

921
00:44:38,250 --> 00:44:39,440
To je nekako zabavno delati.

922
00:44:39,440 --> 00:44:43,230
>> TOMAS Reimers: Če pogledamo na vrhu
še enkrat, to je zelo podobna pisave

923
00:44:43,230 --> 00:44:44,970
Awesome spletno stran.

924
00:44:44,970 --> 00:44:47,810
Veliko dokumentacije se bo začel
da se zdi podobno, ko ste

925
00:44:47,810 --> 00:44:48,940
videl dovolj.

926
00:44:48,940 --> 00:44:51,260
Torej, tukaj imamo CSS
sestavni del tega.

927
00:44:51,260 --> 00:44:53,540
In boste videli, kako
Lahko slog stvari.

928
00:44:53,540 --> 00:44:56,780
Torej, če boste kliknili na mizah, na primer,
lahko takoj narediti

929
00:44:56,780 --> 00:45:01,710
tabela precej preprosto z dodajanjem
razred miza z njo.

930
00:45:01,710 --> 00:45:03,150
>> Iste stvari za gumbe.

931
00:45:03,150 --> 00:45:12,140
Če ste preprosto dodate razred in btn btn
privzeto ali BTN primarni, lahko

932
00:45:12,140 --> 00:45:16,240
dobil enega od teh gumbov
s tem že izdelanih stilov.

933
00:45:16,240 --> 00:45:18,570
In potem, če iščete
Nekaj ​​bolj zapletena kot zgolj

934
00:45:18,570 --> 00:45:24,100
Prenova kaj w že imajo, kot na
Kartica JavaScript po zgornjem smo

935
00:45:24,100 --> 00:45:25,120
imajo kup komponent.

936
00:45:25,120 --> 00:45:30,410
>> Torej, tukaj imamo prehodi, modals,
spustnem meniju, zavihki in namigi.

937
00:45:30,410 --> 00:45:35,530
Namig je tisto, kar izskoči pod vašim
miš, ko hover na nekaj.

938
00:45:35,530 --> 00:45:40,280
Popovers, opozorila, gumbi, zložljivi
harmonike je tisto,

939
00:45:40,280 --> 00:45:41,190
oni so ponavadi imenujemo.

940
00:45:41,190 --> 00:45:43,045
Vrtiljaki, ki flip
skozi, kot so slike.

941
00:45:43,045 --> 00:45:52,190

942
00:45:52,190 --> 00:45:54,840
>> Torej tistih, ki so sestavni deli
Bootstrapa.

943
00:45:54,840 --> 00:45:57,620
Jaz bi vas spodbujamo, da
visoko gredo pogled na njih.

944
00:45:57,620 --> 00:46:01,780
Tam je sestavni JavaScript
in sestavni del CSS.

945
00:46:01,780 --> 00:46:03,880
Vas prosimo, da jih uporabljajo kot boste.

946
00:46:03,880 --> 00:46:06,730
Mi ne bo šel preveč v njih
ker menimo dokumentacijo

947
00:46:06,730 --> 00:46:09,360
je res dobro opravljeno.

948
00:46:09,360 --> 00:46:10,540
In ja.

949
00:46:10,540 --> 00:46:14,500
Ali imate kakršna koli vprašanja o tem?

950
00:46:14,500 --> 00:46:19,430
>> MIKE RIZZO: Tako kot so res hitro
strani, oblikovanje te spletne strani, ki

951
00:46:19,430 --> 00:46:21,830
smo se hitro pripravili za
Ta predstavitev je

952
00:46:21,830 --> 00:46:24,290
dejansko opravi s pomočjo Bootstrapa.

953
00:46:24,290 --> 00:46:27,810
Kot lahko vidite, ko smo kliknite na njih
različnimi zavihki, nismo nikoli dejansko

954
00:46:27,810 --> 00:46:30,750
zapusti to trenutno stran index.html.

955
00:46:30,750 --> 00:46:36,400
Torej, kaj imamo, je različna divs
v tem index.html.

956
00:46:36,400 --> 00:46:39,610
In potem, ko smo kliknite drugačni
kartici, to je samo spreminjanje

957
00:46:39,610 --> 00:46:41,590
Katera je prikazovanje.

958
00:46:41,590 --> 00:46:47,390
>> Torej, o tem jih postavi,
spreminja HTML strani, tako da

959
00:46:47,390 --> 00:46:52,330
Trenutna zavihek je označena kot aktivna tako
se zdi drugače in izgled

960
00:46:52,330 --> 00:46:52,820
res lepo.

961
00:46:52,820 --> 00:46:57,260
>> TOMAS Reimers: Tako, da je bilo vse narejeno
ne da bi mi pisanje skoraj vsako CSS.

962
00:46:57,260 --> 00:47:01,440
Vidimo tudi glavo na vrhu,
katere barve so z nami.

963
00:47:01,440 --> 00:47:04,800
Ampak dejansko ga je dala na
nazaj na vrh strani in izdelavo

964
00:47:04,800 --> 00:47:06,660
se pomaknite bil Bootstrap.

965
00:47:06,660 --> 00:47:09,720
In potem še za drugo knjižnico - to
ni eden smo se pogovarjali o ampak ena

966
00:47:09,720 --> 00:47:11,580
vam lahko Google, če želite.

967
00:47:11,580 --> 00:47:15,130
To se imenuje prettify.js.

968
00:47:15,130 --> 00:47:20,650
In bo skladnje označite kodo
za vas, ki uporabljajo tako CSS in JavaScript.

969
00:47:20,650 --> 00:47:23,480

970
00:47:23,480 --> 00:47:27,070
>> Zadnja stvar, ki jo želim govoriti o
preden vas izpustijo ven v

971
00:47:27,070 --> 00:47:30,620
svet pogledati v knjižnicah, da ugotovimo,
kako jih uporabljati in, upajmo,

972
00:47:30,620 --> 00:47:34,640
preberite dokumentacijo in najti tisto, kar
Potreba je, kako najti knjižnice.

973
00:47:34,640 --> 00:47:37,000
Torej, prvi je, da smo pravkar
gre za potiskanje Google.

974
00:47:37,000 --> 00:47:37,810
Pojdi Google.

975
00:47:37,810 --> 00:47:41,150
>> To je dobesedno tisto, kar počnemo, ko smo
morate storiti, je, da smo nekaj, kar Google.

976
00:47:41,150 --> 00:47:44,730
Ali obstaja JavaScript knjižnico, ki
mi omogoča, da manipulira čas

977
00:47:44,730 --> 00:47:45,400
koristen način?

978
00:47:45,400 --> 00:47:49,510
Torej, če vem, da nekateri uporabniku ustvarjanje
račun tukaj, in to

979
00:47:49,510 --> 00:47:53,010
trenutni čas, kako je mogoče izračunati
Razlika s tem, ne da bi

980
00:47:53,010 --> 00:47:55,020
izračuna sam?

981
00:47:55,020 --> 00:47:59,630
Torej, to je pravzaprav običajna stvar,
JavaScript čas knjižnice.

982
00:47:59,630 --> 00:48:02,440
In tukaj smo Moment.js--
Najbolj priljubljen.

983
00:48:02,440 --> 00:48:06,530
>> Če bomo morali knjižnico manipulirati
nekaj podobnega barve, da bi lahko

984
00:48:06,530 --> 00:48:08,650
ustvarjajo kup naključnih barv -

985
00:48:08,650 --> 00:48:10,660
po možnosti, da se ustvari
slog ali kaj podobnega -

986
00:48:10,660 --> 00:48:13,480
smo lahko Google je nekaj podobnega
JavaScript barva knjižnico.

987
00:48:13,480 --> 00:48:15,620
In prepričan sem, da bo pop up z
tisoč in ena izmed njih.

988
00:48:15,620 --> 00:48:18,290

989
00:48:18,290 --> 00:48:21,410
Vabljeni, da se glasi skozi njih.

990
00:48:21,410 --> 00:48:24,610
>> Torej, večina stvari - ko ste jih našli -
se bo gostovala v eni od

991
00:48:24,610 --> 00:48:25,920
strani, ki je koda gostitelj.

992
00:48:25,920 --> 00:48:26,960
Oni so nekaj pogosti.

993
00:48:26,960 --> 00:48:30,870
Najbolj priljubljen, ki ga
sedaj je github.com.

994
00:48:30,870 --> 00:48:35,300
In če greš na GitHub da je dejansko
kjer je bil normalizirati gosti.

995
00:48:35,300 --> 00:48:36,950
Torej, če želite, da se vrnete na tem.

996
00:48:36,950 --> 00:48:38,135
Jim pokazati, da je.

997
00:48:38,135 --> 00:48:40,516
>> MIKE RIZZO: In to je pravzaprav to, da
to je gostil tudi, če ste opazili.

998
00:48:40,516 --> 00:48:41,000
>> TOMAS Reimers: Ja.

999
00:48:41,000 --> 00:48:49,078
Torej, če greš čez normalizirati
in pojdite na GitHub.

1000
00:48:49,078 --> 00:48:51,936
Je bilo to?

1001
00:48:51,936 --> 00:48:54,620
>> MIKE RIZZO: Tista mačka stvar
je simbol GitHub.

1002
00:48:54,620 --> 00:48:56,330
>> TOMAS Reimers: Oh.

1003
00:48:56,330 --> 00:49:02,180
Torej GitHub uporablja metodo, imenovano
Git za shranjevanje kode.

1004
00:49:02,180 --> 00:49:05,150
Ali ne veste, kaj je to, ali
vas je strah, da je v redu.

1005
00:49:05,150 --> 00:49:16,100
Vam ni treba vedeti, kaj je Git
ker GitHub ima gumb Prenos

1006
00:49:16,100 --> 00:49:17,200
V spodnjem desnem kotu.

1007
00:49:17,200 --> 00:49:21,350
>> Druga uporabna stvar vedeti
O GitHub je večina izdelkov

1008
00:49:21,350 --> 00:49:23,200
bodo imeli preberi me.

1009
00:49:23,200 --> 00:49:25,400
In če nimajo spletne strani,
preberi me bo govoril o tem, kako

1010
00:49:25,400 --> 00:49:28,310
ga namestite, kako ga uporabljate, kakšna je
ne, et cetera, et cetera, et cetera.

1011
00:49:28,310 --> 00:49:31,033
Kaj smo v bistvu že
vam sprehod skozi.

1012
00:49:31,033 --> 00:49:32,326
>> MIKE RIZZO: Internet je odpoved.

1013
00:49:32,326 --> 00:49:34,020
>> TOMAS Reimers: To je v redu.

1014
00:49:34,020 --> 00:49:36,980
Zadnji dve stvari, ki smo želeli
govoriti o -

1015
00:49:36,980 --> 00:49:38,750
smo se pogovarjali o Git -

1016
00:49:38,750 --> 00:49:40,290
je težav.

1017
00:49:40,290 --> 00:49:43,020
In to ni tako pomembno za
Končni produkt saj

1018
00:49:43,020 --> 00:49:44,870
ko odideš 50.

1019
00:49:44,870 --> 00:49:48,310
In ko naletite izdelkov
izvajanje knjižnice ali izvajanje

1020
00:49:48,310 --> 00:49:50,230
svoj projekt, boste
da imajo vprašanja ali ste

1021
00:49:50,230 --> 00:49:51,660
gre iskati vprašanja.

1022
00:49:51,660 --> 00:49:53,060
>> Again, je Google.

1023
00:49:53,060 --> 00:49:54,630
To je dobesedno tisto, kar počnemo.

1024
00:49:54,630 --> 00:49:56,400
To se dogaja, da zveni neumno.

1025
00:49:56,400 --> 00:49:58,310
Ampak dobesedno, smo ga Google.

1026
00:49:58,310 --> 00:50:01,810
In še ena od prvih stvari
boste ponavadi vodijo v je

1027
00:50:01,810 --> 00:50:06,550
stackoverflow.com, ki je čudovito
vprašanje in odgovor vid.

1028
00:50:06,550 --> 00:50:10,530
>> Lepo je tako zato, ker lahko
post vprašanja in iskati

1029
00:50:10,530 --> 00:50:12,760
odgovori, ampak tudi zato, ker
ima že veliko

1030
00:50:12,760 --> 00:50:14,590
pre-poseljena vsebine tam.

1031
00:50:14,590 --> 00:50:18,510
Torej ponavadi, ko ste Google programski
Vprašanje v prvi

1032
00:50:18,510 --> 00:50:22,620
par zadetkov, ki ste jih morda že teče
vanj v tvoj problem sprejemnikov.

1033
00:50:22,620 --> 00:50:27,840
>> In potem, zadnja stvar, ki res kratek
je JSFIDDLE, ki je - Danes so z nami

1034
00:50:27,840 --> 00:50:32,110
počel veliko dela z
JavaScript HTML CSS.

1035
00:50:32,110 --> 00:50:39,820
JSFIDDLE je spletna aplikacija, ki v bistvu
vam omogoča, da vaše HTML, YOUR

1036
00:50:39,820 --> 00:50:42,820
JavaScript levo spodaj, in
vaš CSS zgoraj desno.

1037
00:50:42,820 --> 00:50:47,840
In potem lahko ustvarite hitro postanejo
ga in videli, kako je povezana.

1038
00:50:47,840 --> 00:50:50,500
To je zelo koristno, ko ljudje poskušajo
opraviti preizkus koncepta, kot so

1039
00:50:50,500 --> 00:50:52,910
to je, kako bi jo
narediti spustnega menija.

1040
00:50:52,910 --> 00:50:54,980
Morda hitro Odkriti ali karkoli.

1041
00:50:54,980 --> 00:50:56,560
>> MIKE RIZZO: Torej, pojdimo
naprej in kliknite na to.

1042
00:50:56,560 --> 00:50:57,820
Quick note -

1043
00:50:57,820 --> 00:51:00,430
ker preden smo bili
delaš na klik.

1044
00:51:00,430 --> 00:51:04,380
Izkazalo se je, JCorey Koreja ima tudi vgrajeno
na klik obravnavo dogodkov, ki jih

1045
00:51:04,380 --> 00:51:07,020
uporablja samo zato, ker je si
dogaja, da želijo narediti veliko stvari

1046
00:51:07,020 --> 00:51:08,410
če želite, da kliknete nekaj.

1047
00:51:08,410 --> 00:51:09,690
>> Prav tako ima tudi lebdenje.

1048
00:51:09,690 --> 00:51:12,850
Ampak da bi dobili celoten obseg
tiste, pogled na jQuery

1049
00:51:12,850 --> 00:51:15,320
dokumentacijo in jo naredil.

1050
00:51:15,320 --> 00:51:18,760
Storil sem nekaj neumnega tukaj.

1051
00:51:18,760 --> 00:51:21,490
>> TOMAS Reimers: Torej imam res hitro
Program prav tukaj, ki pravi,

1052
00:51:21,490 --> 00:51:22,640
gumb na klik.

1053
00:51:22,640 --> 00:51:23,890
Potem imamo za zanko.

1054
00:51:23,890 --> 00:51:26,810
Za i manj kot 404.

1055
00:51:26,810 --> 00:51:29,530
To je le, da bo pop up
ti opozorilnih sporočil.

1056
00:51:29,530 --> 00:51:33,425
>> MIKE RIZZO: In kaj je bilo
Koda 404 je stal v HTML?

1057
00:51:33,425 --> 00:51:34,145
Ali kdo spomnite?

1058
00:51:34,145 --> 00:51:35,450
Ni bilo mogoče najti, ali ne.

1059
00:51:35,450 --> 00:51:38,640

1060
00:51:38,640 --> 00:51:40,885
Chrome dodal tudi to urejeno
stvar, kjer si lahko -

1061
00:51:40,885 --> 00:51:43,430
>> TOMAS Reimers: Ker ljudje kot
Mike začel delaš to veliko in

1062
00:51:43,430 --> 00:51:47,230
siten uporabniki, ki omogočajo
da vidiš info.

1063
00:51:47,230 --> 00:51:48,286
>> MIKE RIZZO: Ja.

1064
00:51:48,286 --> 00:51:50,690
>> TOMAS Reimers: Ali imamo vsa vprašanja
o tem, o JavaScriptu

1065
00:51:50,690 --> 00:51:53,420
knjižnice, poiskati knjižnice ali
kaj razvoj spletnih videz

1066
00:51:53,420 --> 00:51:55,400
tako kot v resničnem svetu?

1067
00:51:55,400 --> 00:51:56,880
Mi smo teče proti času.

1068
00:51:56,880 --> 00:52:00,400
Tako da nisem prepričan, da gremo
imeti čas za izvedbo

1069
00:52:00,400 --> 00:52:02,290
razen če je to res hitro.

1070
00:52:02,290 --> 00:52:04,580
Smo dobri?

1071
00:52:04,580 --> 00:52:08,110
>> MIKE RIZZO: Karkoli vi bi radi
videti res hitro, čez dva

1072
00:52:08,110 --> 00:52:09,556
minut ali manj?

1073
00:52:09,556 --> 00:52:10,870
>> TOMAS Reimers: Karkoli
lahko pojasni?

1074
00:52:10,870 --> 00:52:12,500
Kako pisati v -

1075
00:52:12,500 --> 00:52:13,260
>> PUBLIKA: [neslišno]?

1076
00:52:13,260 --> 00:52:16,070
>> MIKE RIZZO: Ja, tako that -

1077
00:52:16,070 --> 00:52:18,065
>> TOMAS Reimers: Lahko samo zadeti
Control-U na spletni strani.

1078
00:52:18,065 --> 00:52:19,275
>> MIKE RIZZO: Oh, nisem vedel, da je.

1079
00:52:19,275 --> 00:52:22,290
>> TOMAS Reimers: Mislim, da ja.

1080
00:52:22,290 --> 00:52:23,300
Control-U. Ja.

1081
00:52:23,300 --> 00:52:25,970
>> MIKE RIZZO: Oh, tako da je
koda za spletno stran.

1082
00:52:25,970 --> 00:52:29,580
Ampak, če si dejansko želijo, da prenesete našo
datoteke in vse, kar se je gostila

1083
00:52:29,580 --> 00:52:32,650
na github.com

1084
00:52:32,650 --> 00:52:34,850
>> TOMAS Reimers: slash moje ime -

1085
00:52:34,850 --> 00:52:38,504
Tomas Reimers - poševnica
CS50 vezaj seminar.

1086
00:52:38,504 --> 00:52:40,710
>> MIKE RIZZO: In lahko
našli vse, kar obstaja.

1087
00:52:40,710 --> 00:52:42,310
>> TOMAS Reimers: To je tisto, kar GitHub
Izgleda, mimogrede.

1088
00:52:42,310 --> 00:52:44,910
Torej še enkrat, ko vidite odprte kode
Projekt, običajno, bodo lahko branje

1089
00:52:44,910 --> 00:52:45,950
mi je, da si lahko preberete.

1090
00:52:45,950 --> 00:52:50,200
In če greš nazaj, boste opazili, da
imate download zip, ki bo

1091
00:52:50,200 --> 00:52:52,130
omogočajo prenos vira
Koda za vključitev

1092
00:52:52,130 --> 00:52:53,666
proizvod v svojem stvar.

1093
00:52:53,666 --> 00:52:56,890
>> MIKE RIZZO: Ja, in če bomo samo kliknite
na index.html res hitro -

1094
00:52:56,890 --> 00:52:59,180
>> TOMAS Reimers: Videli boste tukaj
Izvorna koda za našo spletno stran.

1095
00:52:59,180 --> 00:53:02,016

1096
00:53:02,016 --> 00:53:06,070
>> MIKE RIZZO: Prav, sem pozabil pritisniti desno
prej z veliko mizo je

1097
00:53:06,070 --> 00:53:09,860
vključeni, vendar pa je tudi tabela
od chmods, da smo vključeni

1098
00:53:09,860 --> 00:53:13,210
Samo za vaše jasnosti.

1099
00:53:13,210 --> 00:53:16,940
Ampak, če se pomaknete vse tja do
dno, nismo dejansko narediti zelo

1100
00:53:16,940 --> 00:53:21,160
veliko z JavaScript
stvari sploh s tem.

1101
00:53:21,160 --> 00:53:26,610
To je izključno iz vsega
ostalo, kar smo imeli.

1102
00:53:26,610 --> 00:53:28,730
>> Torej, hvala fantje za prihod
in poslušanje.

1103
00:53:28,730 --> 00:53:29,830
Upamo, da je to zelo koristno.

1104
00:53:29,830 --> 00:53:33,020
Če imate kakršnokoli JavaScript povezanega
vprašanja ali pa samo želim govoriti o

1105
00:53:33,020 --> 00:53:36,240
kaj je všeč, kar druge kul stvari
lahko to storite z JavaScript, bi radi

1106
00:53:36,240 --> 00:53:37,186
govoriti s tabo.

1107
00:53:37,186 --> 00:53:40,010
>> TOMAS Reimers: Če imate vprašanje
o vašem projektu, ali če je to mogoče

1108
00:53:40,010 --> 00:53:42,740
pomembno, bomo verjetno ostal
Malo po tem.

1109
00:53:42,740 --> 00:53:44,640
Ampak razen, da imajo
dober vikend.

1110
00:53:44,640 --> 00:53:45,845
>> MIKE RIZZO: Ja, uživajte.

1111
00:53:45,845 --> 00:53:46,120
Se vidimo.

1112
00:53:46,120 --> 00:53:47,370
>> TOMAS Reimers: Se vidimo.

1113
00:53:47,370 --> 00:53:47,926