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

2
00:00:07,440 --> 00:00:08,180
>> TOMAS REIMERS: Здраво, сите.

3
00:00:08,180 --> 00:00:09,250
Моето име Томас Reimers.

4
00:00:09,250 --> 00:00:10,500
>> МАЈК Rizzo: И јас сум Мајк Rizzo.

5
00:00:10,500 --> 00:00:12,990
>> TOMAS REIMERS: Ние сме две од CS50s ТС.

6
00:00:12,990 --> 00:00:18,910
И денес ние сме водечки семинар за
JavaScript и CSS за веб апликации.

7
00:00:18,910 --> 00:00:22,140
Ако сакате да го следат заедно, на
линк е во право таму.

8
00:00:22,140 --> 00:00:25,190
И сакаш да го стави
на компјутерот кратко?

9
00:00:25,190 --> 00:00:27,460
>> Тука е линк.

10
00:00:27,460 --> 00:00:30,390
Тоа е мал сајт, кој има линкови до
сите ресурси ние ќе биде

11
00:00:30,390 --> 00:00:36,490
показни вас денес, а исто така има многу
корисни информации напишани од страна на нас да

12
00:00:36,490 --> 00:00:39,680
прочитате повеќе во длабочина кога ќе се вратиш,
и ти се обидуваш да се сетиш што

13
00:00:39,680 --> 00:00:42,166
точно се се каже, она што сте биле
зборуваме, и така натаму.

14
00:00:42,166 --> 00:00:43,870
>> МАЈК Rizzo: Во ред.

15
00:00:43,870 --> 00:00:44,890
Па ајде да започне.

16
00:00:44,890 --> 00:00:45,700
>> TOMAS REIMERS: Значи сакате да започнете?

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

18
00:00:45,970 --> 00:00:47,170
>> МАЈК Rizzo: Да.

19
00:00:47,170 --> 00:00:51,730
Па ние прво сакав да се започне со широка
Преглед за интернет и

20
00:00:51,730 --> 00:00:54,240
Типови на датотеки при дизајнирање веб-сајтови.

21
00:00:54,240 --> 00:00:57,550
Додека оваа презентација ние сакаме да
добие во во вклучите Javascript многу многу

22
00:00:57,550 --> 00:01:00,320
подоцна, сакавме да започнете со
само, вид на, како птичја перспектива е

23
00:01:00,320 --> 00:01:03,270
на она што веб-сајт е и како
да се размислува за дизајнирање на

24
00:01:03,270 --> 00:01:04,800
веб-сајт за почеток.

25
00:01:04,800 --> 00:01:08,370
>> Па вие момци, во овој момент - со тоа
се петокот вечерта - треба да има

26
00:01:08,370 --> 00:01:11,000
поднесени вашиот CS50 финансии
Проблемот поставува.

27
00:01:11,000 --> 00:01:15,260
Се надевам, дека беше добар вкус
на она што веб програмирање може да биде.

28
00:01:15,260 --> 00:01:18,261
Но тука ние сакаме да, вид на, даде
ти, друг вкус, како и.

29
00:01:18,261 --> 00:01:23,190
>> TOMAS REIMERS: Значи само да повториме она што
се случува, кога ќе напишете вашиот URL, за да

30
00:01:23,190 --> 00:01:26,650
вашиот веб пребарувач, кој рачно добива
погледна во компјутер.

31
00:01:26,650 --> 00:01:28,590
И на вашиот компјутер поврзани
на друг компјутер,

32
00:01:28,590 --> 00:01:29,890
кој е домаќин на овој вебсајт.

33
00:01:29,890 --> 00:01:33,150
Добро, така што кога одите на google.com, ти си
поврзани со еден на Google

34
00:01:33,150 --> 00:01:36,496
компјутер, кој има
додадени фајлови: за google.com.

35
00:01:36,496 --> 00:01:38,750
>> Таа потоа бара одредена датотека.

36
00:01:38,750 --> 00:01:40,020
Значи, ако одите на -

37
00:01:40,020 --> 00:01:41,550
Не знам -

38
00:01:41,550 --> 00:01:48,170
example.com / index.html или / test.html,
сте ќе треба да побара

39
00:01:48,170 --> 00:01:49,340
таа специфична датотека.

40
00:01:49,340 --> 00:01:52,780
И на веб-серверот ќе
да се врати за вас.

41
00:01:52,780 --> 00:01:54,910
>> Потоа, откако ќе поминат низ таа датотека -

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

43
00:01:57,750 --> 00:01:59,950
еднаш сте компјутер добива дека
датотека - тоа се случува да се започне

44
00:01:59,950 --> 00:02:00,820
да се изгради веб-страница.

45
00:02:00,820 --> 00:02:03,020
Па сега тоа го има HTML датотека,
кој е вид на како

46
00:02:03,020 --> 00:02:05,170
структура на веб-страница.

47
00:02:05,170 --> 00:02:08,620
HTML датотека, исто така, би можеле да референца
CSS фајлови, кои го дефинираат

48
00:02:08,620 --> 00:02:09,889
стилот на веб-страница.

49
00:02:09,889 --> 00:02:12,970
>> JavaScript датотеки, со кој се дефинира
интеракција со веб-страница.

50
00:02:12,970 --> 00:02:15,200
Датотеки со слики, кои се само слики.

51
00:02:15,200 --> 00:02:19,450
И евентуално водат до други HTML датотеки,
кои можете да ги посетите.

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

53
00:02:22,656 --> 00:02:24,380
>> МАЈК Rizzo: Добро, одлично.

54
00:02:24,380 --> 00:02:28,980
Па вие момци имаат сите, можеби,
внимателно го поставите вашиот локален домаќин

55
00:02:28,980 --> 00:02:30,810
на вашата виртуелна машина.

56
00:02:30,810 --> 00:02:35,650
И дека само, вид на, е локалната
домен дека вашиот компјутер е домаќин на само

57
00:02:35,650 --> 00:02:38,760
за тебе во вашата IP адреса.

58
00:02:38,760 --> 00:02:43,300
>> Тоа во рок од тоа, тогаш можете да додадете
да ја направат своја веб страници.

59
00:02:43,300 --> 00:02:47,655
Мислам, во CS50 финансии, треба да имаат
додадени некои HTML страници, кои се,

60
00:02:47,655 --> 00:02:49,410
вид на, завиткани во обвивка PHP.

61
00:02:49,410 --> 00:02:54,690
Но на крајот, она што вашите PHP страници
беа Ставање беше HTML.

62
00:02:54,690 --> 00:02:58,210
>> Но мислејќи назад кон почетокот
на PSET, моравме да го поставите

63
00:02:58,210 --> 00:03:00,890
на дозволи за сè, нели?

64
00:03:00,890 --> 00:03:07,270
Значи ова само во основа ни овозможува да знаете
кој може да чита, пишува, и најверојатно

65
00:03:07,270 --> 00:03:08,730
изврши секој на датотеки.

66
00:03:08,730 --> 00:03:11,870
Па ние ќе да се направи брзо - hm?

67
00:03:11,870 --> 00:03:15,660
>> TOMAS REIMERS: Така ние ќе
да се направи брзо демо.

68
00:03:15,660 --> 00:03:19,560
Па само да ве потсетам, кога ќе
се поврзете со компјутер на Google -

69
00:03:19,560 --> 00:03:20,690
кој -

70
00:03:20,690 --> 00:03:24,060
и да побарате за некоја датотека, на компјутерот прво
треба да бидете сигурни дека сте овластени

71
00:03:24,060 --> 00:03:28,790
за да всушност ја видите таа датотека или прочита дека
поднесе затоа што не може само да прашам

72
00:03:28,790 --> 00:03:30,430
за секоја датотека на тој компјутер, нели?

73
00:03:30,430 --> 00:03:32,260
Тоа би било безбедносен ризик.

74
00:03:32,260 --> 00:03:37,020
>> Па датотеки на системи ние ги користиме, како
овој CS50 апаратот, имаат три

75
00:03:37,020 --> 00:03:39,200
општи луѓе кои можат да имаат
дозволи за да нешто.

76
00:03:39,200 --> 00:03:41,610
Првиот е вистински
сопственик на изјави датотека.

77
00:03:41,610 --> 00:03:43,820
Вториот е група која
датотеката припаѓа.

78
00:03:43,820 --> 00:03:46,090
Ние нема да се фокусира
премногу за тоа.

79
00:03:46,090 --> 00:03:50,010
И последното нешто што е, на некој начин, како
светот или како и секој друг кој е

80
00:03:50,010 --> 00:03:54,130
не се специфични за таа датотека и не
сопственички права врз неа.

81
00:03:54,130 --> 00:04:05,650
>> Значи, ако имаме сопственик, група,
а потоа светот.

82
00:04:05,650 --> 00:04:10,510
А потоа, за секоја од овие групи, ќе
може да има една од трите дозволи,

83
00:04:10,510 --> 00:04:13,010
Добро, или повеќе од нив.

84
00:04:13,010 --> 00:04:15,070
Можете да ги прочитате дозволи.

85
00:04:15,070 --> 00:04:16,560
Можете да имаат право на дозволите.

86
00:04:16,560 --> 00:04:18,880
И може да имаат изврши дозволи.

87
00:04:18,880 --> 00:04:22,060
>> Значи во однос на вистинските типови на датотеки, да се прочита
дозвола е како всушност читање

88
00:04:22,060 --> 00:04:23,250
на содржината на датотеката.

89
00:04:23,250 --> 00:04:24,730
Право дозвола е пишување
да изјави датотека.

90
00:04:24,730 --> 00:04:28,370
На извршување дозвола е водење на
датотеки како што го правите кога ќе ја стартувате една од

91
00:04:28,370 --> 00:04:29,620
Вашиот CS50 проекти.

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

93
00:04:32,190 --> 00:04:38,820
>> Па кога ќе се размислува за датотеки
како кога ние треба да го прочитате на HTML

94
00:04:38,820 --> 00:04:41,790
датотека, која треба да биде свет
може да се чита, нели?

95
00:04:41,790 --> 00:04:44,420
Веројатно, исто така, сопственикот сака
да бидат во можност да ги уредувате таа датотека.

96
00:04:44,420 --> 00:04:46,610
Па сопственикот се случува да треба
читаат и пишуваат дозволи.

97
00:04:46,610 --> 00:04:48,710
Тие навистина не треба да се изврши.

98
00:04:48,710 --> 00:04:50,950
>> Група, ние ќе треба да се третираат на
исто како светот за сега.

99
00:04:50,950 --> 00:04:54,610
Па тие треба прочитал дозволи.

100
00:04:54,610 --> 00:04:57,310
Но, тие не треба запишување
или изврши дозволи.

101
00:04:57,310 --> 00:05:01,920
И сега, ако се сетам на поранешната
PSETs, она што се реализира е овие вид

102
00:05:01,920 --> 00:05:03,360
на изгледаат како бинарни, нели?

103
00:05:03,360 --> 00:05:04,210
1 залага за Да.

104
00:05:04,210 --> 00:05:05,040
0 за да нема.

105
00:05:05,040 --> 00:05:06,870
И ние всушност може да се преведе
ова на бинарни.

106
00:05:06,870 --> 00:05:10,478
>> Па 110 во бинарна ќе биде 6.

107
00:05:10,478 --> 00:05:13,270
100 ќе биде 4.

108
00:05:13,270 --> 00:05:14,690
Истото со светот.

109
00:05:14,690 --> 00:05:20,846
Па бројот ќе добиете за
дозволи за ова ќе биде 644.

110
00:05:20,846 --> 00:05:24,400
>> МАЈК Rizzo: И ако мислите назад кон
кога ќе chmoded нешто, верувам

111
00:05:24,400 --> 00:05:28,980
тие дадоа во проблемот поставите
пример каде што можете да направите

112
00:05:28,980 --> 00:05:36,470
нешто како chmod 644
а потоа името на датотеката.

113
00:05:36,470 --> 00:05:39,980
На 644 тогаш, сега можете да видите директно
каде што доаѓа.

114
00:05:39,980 --> 00:05:42,840
Па се надевам дека го прави тоа
малку повеќе јасно.

115
00:05:42,840 --> 00:05:45,600
>> А потоа за јасност сте човек е -

116
00:05:45,600 --> 00:05:48,200
Oh yeah, тука ова е повторно.

117
00:05:48,200 --> 00:05:53,260
Па 600, тогаш само ќе биде пример
ние се откажа тука каде што сопственикот има

118
00:05:53,260 --> 00:05:56,360
прочитате и десно дозволи, додека група
и светот немаат никакви дозволи

119
00:05:56,360 --> 00:05:58,145
за пристап до датотеката.

120
00:05:58,145 --> 00:06:01,500
>> TOMAS REIMERS: И тогаш имаме брзо
листа на заеднички дозволи.

121
00:06:01,500 --> 00:06:05,250
Па директориуми, сакате
всушност chmod 711.

122
00:06:05,250 --> 00:06:08,930
Брзи настрана - за директориум да имаат
извршна дозвола значи да се биде во можност

123
00:06:08,930 --> 00:06:11,680
да се отвори директориумот.

124
00:06:11,680 --> 00:06:15,280
Слики, CSS, JavaScript, HTML потреби
644, бидејќи, во основа, светот

125
00:06:15,280 --> 00:06:16,400
потреби прочитал дозволи.

126
00:06:16,400 --> 00:06:20,960
>> И PHP, кои вие момци го виделе
иако ние нема да се зборува за тоа

127
00:06:20,960 --> 00:06:24,880
строго е обично chmoded со
дозвола 600, бидејќи тоа е се кандидира со

128
00:06:24,880 --> 00:06:26,540
дозволите на сопственикот.

129
00:06:26,540 --> 00:06:27,790
Барем на апаратот.

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

131
00:06:30,200 --> 00:06:36,870
>> МАЈК Rizzo: Значи не ако не конкретно
наведете каков тип на датотека

132
00:06:36,870 --> 00:06:39,480
сакаш во всушност поставување
до оваа презентација -

133
00:06:39,480 --> 00:06:43,490
имавме проблем со тоа затоа што
сè што не беше chmoded правилно -

134
00:06:43,490 --> 00:06:47,550
си оди за да се добие, вид на,
забрането грешка дека веб-сајтот

135
00:06:47,550 --> 00:06:49,700
не, всушност, имаат дозвола
пристап до она што датотека

136
00:06:49,700 --> 00:06:51,370
што сакате да пристапите.

137
00:06:51,370 --> 00:06:54,780
И, се разбира, тоа може да биде фиксна -
како и во проблем постави - со промена на

138
00:06:54,780 --> 00:06:56,405
дозволи соодветно.

139
00:06:56,405 --> 00:06:59,620
>> TOMAS REIMERS: И последниот коментар за
брзо локалниот развој е - ние

140
00:06:59,620 --> 00:07:02,000
уште нагоре, но ние само сакав
за да го донесе повторно -

141
00:07:02,000 --> 00:07:06,230
ако прашате за сервер - па локалниот компјутер,
на пример, com или whatever. -

142
00:07:06,230 --> 00:07:09,170
и не се определи одредена датотека,
на датотеката што вашиот компјутер ќе

143
00:07:09,170 --> 00:07:11,540
да побара се нарекува index.html.

144
00:07:11,540 --> 00:07:12,790
Или ако тоа не постои, index.php.

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

146
00:07:15,560 --> 00:07:16,350
>> Кул.

147
00:07:16,350 --> 00:07:19,560
Па тоа е само реприза на сè,
Се надевам, дека сме покриени во

148
00:07:19,560 --> 00:07:22,800
секција, а предавање,
и досега во CS50.

149
00:07:22,800 --> 00:07:26,110
И сега ние ќе треба да почнам да зборувам
за специјално библиотеки.

150
00:07:26,110 --> 00:07:30,270
JavaScript и CSS библиотеки
за веб апликации.

151
00:07:30,270 --> 00:07:36,350
>> Па еден брз причината зошто имаме
библиотеки е програмирање -

152
00:07:36,350 --> 00:07:39,000
има многу проблеми во
програмирање, кој постојано никнуваат

153
00:07:39,000 --> 00:07:40,570
повторно, и повторно, и повторно.

154
00:07:40,570 --> 00:07:43,870
Може да забележите дека многу веб-сајтови
треба способноста да имаат паѓачкото

155
00:07:43,870 --> 00:07:49,100
менија, на пример, или треба способност
да имаат многу стандард копчето

156
00:07:49,100 --> 00:07:51,400
стил, кој не може да биде
најлесната работа.

157
00:07:51,400 --> 00:07:54,670
Сега дека ќе почнете да се влезе во HTML,
сфатат дека копчиња може да всушност

158
00:07:54,670 --> 00:07:57,720
изгледа навистина грди ако
не прават ништо.

159
00:07:57,720 --> 00:08:00,830
>> Толку многу луѓе го имаат напишано
наречен библиотеки.

160
00:08:00,830 --> 00:08:02,990
И во овој контекст, тие се
исто така, повика рамки.

161
00:08:02,990 --> 00:08:04,790
Ние ќе се користат
две мешаат.

162
00:08:04,790 --> 00:08:07,360
И што се е дека тие се во основа
premade парчиња на код -

163
00:08:07,360 --> 00:08:09,130
или CSS или го вклучите Javascript -

164
00:08:09,130 --> 00:08:13,240
кои се далеку многу од
тимот што го имате во кодирање.

165
00:08:13,240 --> 00:08:17,290
>> Па тие пред-дефинира еден куп на класи или
пред-дефинира еден куп на функции за

166
00:08:17,290 --> 00:08:20,110
Случај го вклучите Javascript-, која
можете да се јавите подоцна.

167
00:08:20,110 --> 00:08:22,690
А потоа можете да, на некој начин, се
пристап до овој код без

168
00:08:22,690 --> 00:08:23,710
ништо да не направи.

169
00:08:23,710 --> 00:08:27,750
Еден пример на библиотеката беше CS50.H.
Тоа беше една библиотека дадовме да ви се врати

170
00:08:27,750 --> 00:08:32,090
во една недела, што е дозволено да се направи
работи како што GetInt и GetString

171
00:08:32,090 --> 00:08:35,237
без да се напише
било код себе.

172
00:08:35,237 --> 00:08:36,179
>> МАЈК Rizzo: Во ред.

173
00:08:36,179 --> 00:08:40,299
Значи тука, исто како и моравме да вклучуваат
во нашите в фајлови на различни

174
00:08:40,299 --> 00:08:46,570
библиотеки, ние исто така треба да се вклучат во
нашите HTML датотеки различни библиотеки.

175
00:08:46,570 --> 00:08:50,310
На пример, ако сакавме да го вклучите
одредена JavaScript библиотека тука,

176
00:08:50,310 --> 00:08:52,850
можеби, оној што ние го напишав
себеси како тоа е локално домаќин

177
00:08:52,850 --> 00:08:56,000
наречен script.js, ние само
го користите овој нотација.

178
00:08:56,000 --> 00:08:59,500
>> Значи ние треба скрипта тип еднаквите
Го вклучите Javascript-извор еднаквите

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

180
00:09:01,260 --> 00:09:05,190
И ако мислите дека назад кон вашиот CS50
финансии проблем постави, ако погледна во

181
00:09:05,190 --> 00:09:09,190
header.php во папката со шаблони,
треба да го виделе

182
00:09:09,190 --> 00:09:10,970
некои од овие се вклучени.

183
00:09:10,970 --> 00:09:13,250
Значи ова првиот - на скрипти -

184
00:09:13,250 --> 00:09:16,080
е вклучувајќи JavaScript библиотека.

185
00:09:16,080 --> 00:09:18,760
Вклучувајќи CSS библиотека е
малку поинаква.

186
00:09:18,760 --> 00:09:21,430
>> Тука, наместо на сценариото
таг треба врската таг.

187
00:09:21,430 --> 00:09:27,110
А потоа, внесете го текстот CSS
е малку поинаква.

188
00:09:27,110 --> 00:09:29,270
Вие не секогаш треба да вклучуваат
rel стил на состојба.

189
00:09:29,270 --> 00:09:30,970
Но, мислам дека тоа е, генерално,
добра пракса.

190
00:09:30,970 --> 00:09:35,810
>> А потоа, конечно, HREF, кои можете
веројатно виде во својата ATAGs за поврзување

191
00:09:35,810 --> 00:09:39,440
во различни линкови само Одредува
линк од каде да се најде тоа.

192
00:09:39,440 --> 00:09:42,250
На пример, ако сакаме да се поврзе
различни библиотека - да речеме -

193
00:09:42,250 --> 00:09:49,330
кои живееле на styles.css.

194
00:09:49,330 --> 00:09:54,030
И сакавме да се поврзе дека во тоа е
хостирана на интернет, ние ќе копија од тоа.

195
00:09:54,030 --> 00:09:58,834
И потоа вметнете го во она што
имаме токму тука, наместо.

196
00:09:58,834 --> 00:10:01,340
>> TOMAS REIMERS: Добро, се надевам дека
момци се веќе запознаени

197
00:10:01,340 --> 00:10:02,410
со тоа како да се поврзе на CSS.

198
00:10:02,410 --> 00:10:04,000
Ти мораше да го направи тоа на
вашата последна кафеава сет.

199
00:10:04,000 --> 00:10:07,110
JavaScript, некои од вас можеби
имаат некакво искуство со.

200
00:10:07,110 --> 00:10:07,980
Некои од вас може да не.

201
00:10:07,980 --> 00:10:12,190
>> Па за сега, знам дека го вклучите Javascript-датотека
е многу слично на CSS датотека во

202
00:10:12,190 --> 00:10:15,640
смисла дека може да водат до неа, или
дека можете да ја вклучите внатрешно.

203
00:10:15,640 --> 00:10:17,360
И тоа ви овозможува да скрипта работи.

204
00:10:17,360 --> 00:10:21,820
И ние ќе ти прошетка низ
малку на JavaScript подоцна.

205
00:10:21,820 --> 00:10:23,560
>> Па со користење на библиотека -

206
00:10:23,560 --> 00:10:26,150
еднаш сте го вклучени, тоа е како
едноставно како што буквално се јавите на

207
00:10:26,150 --> 00:10:29,640
функции или додавање на
имиња на класи на него.

208
00:10:29,640 --> 00:10:32,220
Последното нешто што сакате да разговарате
за во однос на библиотека -

209
00:10:32,220 --> 00:10:34,180
и ова е повеќе од техничка белешка -

210
00:10:34,180 --> 00:10:35,860
е со отворен код за лиценцирање.

211
00:10:35,860 --> 00:10:41,550
Па кога ќе се најдат овие вистински библиотеки,
може да се размислува на

212
00:10:41,550 --> 00:10:47,630
прашања се допаѓа е тоа во ред дека јас сум само
користење на кодот на некој друг, особено

213
00:10:47,630 --> 00:10:51,970
бидејќи тоа е нешто што многу
ти реков да не се направи во овој курс.

214
00:10:51,970 --> 00:10:55,790
>> Значи во случај на отворен код за лиценцирање,
многу програмери -

215
00:10:55,790 --> 00:10:57,540
откако тие го напишале библиотека,
кој тие мислат дека би можело да биде

216
00:10:57,540 --> 00:10:59,450
корисни за други луѓе -

217
00:10:59,450 --> 00:11:02,420
ќе го објави на веб
и го даде дозвола.

218
00:11:02,420 --> 00:11:06,620
И дозвола во основа вели дека јас сум со ова
доделување дозвола за други

219
00:11:06,620 --> 00:11:11,250
луѓето да користат ова парче софтвер
со следниве вид на

220
00:11:11,250 --> 00:11:13,230
одредби.

221
00:11:13,230 --> 00:11:16,100
>> Ние сме вклучени линк до добар сајт за да
помогне да се разбере лиценци

222
00:11:16,100 --> 00:11:17,720
случај да наидат на нив.

223
00:11:17,720 --> 00:11:21,680
Заеднички одредби се работи како
вие сте добредојдени да ги користат во мојата библиотека, па

224
00:11:21,680 --> 00:11:23,000
додека ти ме даде кредит.

225
00:11:23,000 --> 00:11:25,670
Вие сте добредојдени да ги користат во мојата библиотека
толку долго како и кога тоа се распаѓа

226
00:11:25,670 --> 00:11:26,790
не ме обвинуваат.

227
00:11:26,790 --> 00:11:30,310
Вие сте добредојдени да го користам мојот библиотека толку долго
како што не го користат да заработат пари

228
00:11:30,310 --> 00:11:31,910
за себе.

229
00:11:31,910 --> 00:11:34,130
Овие се видови на заеднички
одредби.

230
00:11:34,130 --> 00:11:37,780
>> За ова CS50 финалниот проект, тие
не треба да биде супер важно бидејќи

231
00:11:37,780 --> 00:11:41,440
проекти кои вие момци користи се
веројатно, а, на некој начин, позната.

232
00:11:41,440 --> 00:11:44,170
Но, кога всушност ќе излезе во
светот и започнете да го користите библиотеки, кои

233
00:11:44,170 --> 00:11:48,100
може или не може да се спроведуваат како
некои на повеќе популарни оние сме

234
00:11:48,100 --> 00:11:49,780
ќе треба да се поминува.

235
00:11:49,780 --> 00:11:53,310
Добро е да се биде во можност да се разбере
овие дозволи и да

236
00:11:53,310 --> 00:11:54,560
се разбере она што тие значат.

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

238
00:11:58,120 --> 00:11:58,586
И ќе се вратам.

239
00:11:58,586 --> 00:12:00,960
>> МАЈК Rizzo: OK.

240
00:12:00,960 --> 00:12:04,850
Па сега се движи кон примери
на реалните CSS.

241
00:12:04,850 --> 00:12:07,770
Во овој момент досега, можеби ќе
не се соочуваат со овој.

242
00:12:07,770 --> 00:12:10,300
Но можеби ќе го сретнал во
вашиот секојдневен живот, каде што нешто

243
00:12:10,300 --> 00:12:13,160
што изгледа еден начин на еден интернет пребарувач
не може да изгледа исто

244
00:12:13,160 --> 00:12:14,880
Начинот на друг интернет пребарувач.

245
00:12:14,880 --> 00:12:17,400
>> Ова се нарекува пребарувач пребарувачот
компатибилност.

246
00:12:17,400 --> 00:12:20,780
И се повеќе тоа е да стане повеќе и
поголем проблем, особено како

247
00:12:20,780 --> 00:12:25,260
прелистувачи се повеќе и повеќе слободи
за спроведување на работите како што тие сакаат.

248
00:12:25,260 --> 00:12:28,440
Така да се надмине тоа, таму всушност е
голема библиотека наречена Normalize.CSS.

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

250
00:12:32,236 --> 00:12:33,770
>> TOMAS REIMERS: Ние се вклучени линк.

251
00:12:33,770 --> 00:12:36,210
Во овој момент, тоа е корисно ако
имате вашиот лаптоп во таму

252
00:12:36,210 --> 00:12:38,740
во потрага на местото.

253
00:12:38,740 --> 00:12:42,580
И ние се даваат ова за да ви право
сега едноставно затоа што конечната CS50

254
00:12:42,580 --> 00:12:44,370
Проектот е всушност ќе
ќе побара од вас да се имплементира

255
00:12:44,370 --> 00:12:45,860
Слично и преку прелистувачи.

256
00:12:45,860 --> 00:12:49,250
>> Па само да се задржи во задниот дел на вашиот
главата, ова е прекрасен библиотека

257
00:12:49,250 --> 00:12:51,170
затоа што тоа ќе, на некој начин,
стандардизираат работи.

258
00:12:51,170 --> 00:12:54,230
Во Firefox, нешто може да се покаже
како еден пиксел на лево.

259
00:12:54,230 --> 00:12:58,390
А потоа Хром може да одлучи дека всушност
она што мислев 10 пиксели

260
00:12:58,390 --> 00:12:59,380
на левата страна.

261
00:12:59,380 --> 00:13:01,030
И сакате да се стандардизираат ова.

262
00:13:01,030 --> 00:13:05,360
Нормализира, всушност, ќе се направи навистина добра
работа за правење на сигурни дека вашиот сајт

263
00:13:05,360 --> 00:13:08,070
изгледа исто преку прелистувачи.

264
00:13:08,070 --> 00:13:10,660
>> МАЈК Rizzo: Значи, ако сакавме само да
кликнете на копчето навистина брзо и шоу

265
00:13:10,660 --> 00:13:13,140
вас она што изгледа како,
може да го симнете со помош на

266
00:13:13,140 --> 00:13:14,670
гигант копчето Download.

267
00:13:14,670 --> 00:13:18,520
Или јас ве охрабруваме да ги прочитате повеќе за него
со кликање на овој линк во долниот

268
00:13:18,520 --> 00:13:19,310
агол во право.

269
00:13:19,310 --> 00:13:22,420
>> TOMAS REIMERS: И ако навистина
кликнете Прочитај Повеќе право таму -

270
00:13:22,420 --> 00:13:24,340
клик на изворот на GitHub -

271
00:13:24,340 --> 00:13:31,720
вие всушност ќе се види со отворен код
лиценца за LICENSE.md право таму.

272
00:13:31,720 --> 00:13:35,740
И ќе видите тука е
многу популарна МИТ лиценца.

273
00:13:35,740 --> 00:13:38,940
Повторно, ако се чита преку текст,
Вие ќе бидете во можност да го најдете на сајтот

274
00:13:38,940 --> 00:13:42,550
ние референцирани пред и да биде во можност да
сфатам тоа без да се читаат

275
00:13:42,550 --> 00:13:45,920
преку правни жаргон.

276
00:13:45,920 --> 00:13:46,850
>> МАЈК Rizzo: Добро, одлично.

277
00:13:46,850 --> 00:13:47,940
Па тоа е се нормализираат.

278
00:13:47,940 --> 00:13:49,190
Сакавме да ви даде
дека навистина брзо.

279
00:13:49,190 --> 00:13:50,030
Ох, имате прашање?

280
00:13:50,030 --> 00:13:53,013
>> ПУБЛИКАТА: Значи кога ќе го симнете, можете
само следете кој код кој тие имаат

281
00:13:53,013 --> 00:13:54,098
под копчето Превземи?

282
00:13:54,098 --> 00:13:55,860
>> TOMAS REIMERS: Да, така
кога ќе преземете -

283
00:13:55,860 --> 00:13:58,130
>> МАЈК Rizzo: О, тоа е голема точка.

284
00:13:58,130 --> 00:14:00,700
Значи, прашањето беше како да
ние всушност го преземете?

285
00:14:00,700 --> 00:14:03,260
Значи, ако ние кликнете на линкот, гледаме
тоа што всушност се појавува

286
00:14:03,260 --> 00:14:05,030
на изворниот код.

287
00:14:05,030 --> 00:14:08,550
Па да го направите ова, што би можеле да
направите е само да кликнете на Save As.

288
00:14:08,550 --> 00:14:10,830
Зачувај како и дека треба да
донесе до датотеката.

289
00:14:10,830 --> 00:14:14,160
А потоа ние може да избере да се спаси
како normalize.CSS.

290
00:14:14,160 --> 00:14:15,810
А потоа ќе треба да ја водат во -

291
00:14:15,810 --> 00:14:18,660
>> TOMAS REIMERS: На ист начин ќе се
врската во која било друга датотека.

292
00:14:18,660 --> 00:14:22,250
И штом ќе ја водат во она што е одлично
за нормализација тоа е, всушност, ќе

293
00:14:22,250 --> 00:14:25,920
се грижи за сите напорна
работат само по себе.

294
00:14:25,920 --> 00:14:27,730
Што значи дека не мора
за додавање која било класа.

295
00:14:27,730 --> 00:14:29,690
>> Вие не треба да се направи нешто чудно.

296
00:14:29,690 --> 00:14:34,590
Тоа ќе се нормализира без тебе
прави ништо повеќе.

297
00:14:34,590 --> 00:14:36,083
Да, мора да го вклучат.

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

299
00:14:38,990 --> 00:14:40,240
Гугл Хром не реагира.

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

301
00:14:43,270 --> 00:14:44,860
>> Само брз настрана -

302
00:14:44,860 --> 00:14:46,800
Јас забележав ние скокна во ова.

303
00:14:46,800 --> 00:14:49,010
Остатокот од оваа презентација е
ќе биде брз преглед.

304
00:14:49,010 --> 00:14:50,380
Истражувањето на библиотеки.

305
00:14:50,380 --> 00:14:52,710
>> Во суштина, она што се.

306
00:14:52,710 --> 00:14:53,350
Она што го прават.

307
00:14:53,350 --> 00:14:54,060
Како тие се корисни.

308
00:14:54,060 --> 00:14:56,540
Како може да ги спроведе.

309
00:14:56,540 --> 00:14:59,730
Ако сакате да почнете да барате во нив,
следниве заедно, и читање преку

310
00:14:59,730 --> 00:15:01,990
нив, Јас високо ќе ги охрабри тоа.

311
00:15:01,990 --> 00:15:07,620
>> Алтернативно, вие сте добредојдени, исто така, да се
започне симнувањето нив, вклучувајќи и

312
00:15:07,620 --> 00:15:11,400
нив во поглед само да видите што тие
изгледаат како или она што го прават, ако имате

313
00:15:11,400 --> 00:15:12,270
вашиот лаптоп пред вас.

314
00:15:12,270 --> 00:15:14,650
Ако не, вие сте добредојдени да се задржи
слушање да ни зборува.

315
00:15:14,650 --> 00:15:15,500
Ние ќе продолжат да преговараат.

316
00:15:15,500 --> 00:15:18,680
И ние имаме време на крајот, се надевам
ние всушност ќе влезе во кои Ви прикажуваат

317
00:15:18,680 --> 00:15:20,946
што некои од овие библиотеки
изгледа.

318
00:15:20,946 --> 00:15:22,320
>> МАЈК Rizzo: Кул.

319
00:15:22,320 --> 00:15:25,466
Добро, па сега ајде да разговараме
за фонт Прекрасно.

320
00:15:25,466 --> 00:15:30,480
>> TOMAS REIMERS: па фонт Прекрасно е
навистина уредни сајт, особено за оние

321
00:15:30,480 --> 00:15:32,450
од нас кои се помалку уметнички
талентиран.

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

323
00:15:36,330 --> 00:15:38,880
Игнорирање на име на фонт Прекрасно, тоа му дава
сте еден куп на икони, кои се

324
00:15:38,880 --> 00:15:41,050
многу корисно.

325
00:15:41,050 --> 00:15:45,950
Толку многу пати ќе се имплементира
икона можеби ќе сакате како убаво x така

326
00:15:45,950 --> 00:15:47,170
дека можете да го затворите нешто.

327
00:15:47,170 --> 00:15:49,910
>> Или можеби ќе сакате некој вид на копчето Уреди
со молив цртеж како

328
00:15:49,910 --> 00:15:50,940
секој друг има.

329
00:15:50,940 --> 00:15:53,850
И тоа е кога ќе научат дека
цртање оние икони може да биде

330
00:15:53,850 --> 00:15:55,510
многу досаден и тешко.

331
00:15:55,510 --> 00:15:59,160
Фонт страшно - ако навистина
отидете на сајтот -

332
00:15:59,160 --> 00:16:02,892
ви дава многу икони под
иконите на врвот.

333
00:16:02,892 --> 00:16:06,980
Да, само на врвот.

334
00:16:06,980 --> 00:16:09,030
Тоа ќе ви даде многу
на бесплатно икони.

335
00:16:09,030 --> 00:16:15,210
>> Па тука ќе видите имаме работи како
ѕвездичка, барови, гром, а

336
00:16:15,210 --> 00:16:19,750
календар, бубачка, книга, итн.

337
00:16:19,750 --> 00:16:21,110
Ова може да биде многу корисно.

338
00:16:21,110 --> 00:16:24,290
Начинот на кој вклучува ова е да го вклучите
буквално на CSS датотека.

339
00:16:24,290 --> 00:16:29,760
И откако сте вклучени на CSS фајл,
она што можете да направите е да се создаде

340
00:16:29,760 --> 00:16:33,430
таг наречен I. Тоа satands за
икона со класа ФА

341
00:16:33,430 --> 00:16:34,460
стои за фонт Прекрасно.

342
00:16:34,460 --> 00:16:36,330
А потоа, без оглед на класата што го сакате.

343
00:16:36,330 --> 00:16:41,220
>> Значи, ако сакав икона на ова, плус
плоштад токму тука, јас ќе им даде

344
00:16:41,220 --> 00:16:43,290
Дали тоа била класна ФА.

345
00:16:43,290 --> 00:16:46,230
А потоа ФА цртичка плус тире плоштад.

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

347
00:16:50,325 --> 00:16:53,710
>> МАЈК Rizzo: Кул, ОК.

348
00:16:53,710 --> 00:16:56,980
>> TOMAS REIMERS: И тогаш, последниот CSS
библиотека сакаме да се добие преку сме

349
00:16:56,980 --> 00:16:59,950
се обидува да го задржи минимална на CSS
библиотеки, бидејќи ние ја сфаќаат

350
00:16:59,950 --> 00:17:03,660
Насловот на оваа презентација
е да го вклучите Javascript библиотеки.

351
00:17:03,660 --> 00:17:07,089
Но ние сметавме дека може и да
ве запознаам со други библиотеки

352
00:17:07,089 --> 00:17:09,569
додека ние се зборува за библиотеки.

353
00:17:09,569 --> 00:17:11,400
>> Тоа е Google Веб Фонтови.

354
00:17:11,400 --> 00:17:17,040
И она што Google Веб Фонтови ви овозможува
да направите е да додадете фонтови на вашиот сајт,

355
00:17:17,040 --> 00:17:22,079
што е навистина лесен начин да се направи тоа
убава и да се направи разлика на вашиот сет

356
00:17:22,079 --> 00:17:24,460
од секој друг е ако има
убав фонт, или ако има убав

357
00:17:24,460 --> 00:17:27,790
колекција на фонтови.

358
00:17:27,790 --> 00:17:31,410
Google Веб Фонтови е убаво за разлика од другите
библиотеки, во смисла дека тоа е

359
00:17:31,410 --> 00:17:33,490
навистина водени инсталација.

360
00:17:33,490 --> 00:17:38,680
>> Значи, ако го следите линкот, тоа е
google.com / фонтови, верувам.

361
00:17:38,680 --> 00:17:41,100
Ако го следите тоа, можете
може да ги собереш вашиот фонт.

362
00:17:41,100 --> 00:17:44,410
Можете да изберете на левата од
дебелина, аранжман, и така натаму.

363
00:17:44,410 --> 00:17:48,970
И тогаш, откога сте ја одбрале еден,
можете да кликнете брзо употреба.

364
00:17:48,970 --> 00:17:49,820
Право таму.

365
00:17:49,820 --> 00:17:51,590
Долниот десен дел од прозорецот.

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

367
00:17:54,380 --> 00:17:56,700
>> А потоа, скролувајте надолу.

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

369
00:17:59,600 --> 00:18:02,650
Прво на сите, тие ви даде CSS дека
што треба да всушност водат до него.

370
00:18:02,650 --> 00:18:03,330
Тоа е право таму.

371
00:18:03,330 --> 00:18:05,170
Можете само да копирате и залепите дека внатре

372
00:18:05,170 --> 00:18:07,250
И убаво нешто за ова е
не, всушност дури и не треба да се

373
00:18:07,250 --> 00:18:08,340
преземете датотеката.

374
00:18:08,340 --> 00:18:11,170
>> Што е тоа се случува да направите е да се случува
да се поврзат со верзија на Google на неа.

375
00:18:11,170 --> 00:18:14,130
Па назад кон она што значи тоа.

376
00:18:14,130 --> 00:18:18,270
Тоа значи дека кога корисникот
преземања вашето досие -

377
00:18:18,270 --> 00:18:22,300
повлече вашиот HTML страница - вашиот HTML
страница се случува да референца оваа датотека.

378
00:18:22,300 --> 00:18:26,790
>> Па тогаш, вашиот компјутер нема да видите,
О, тоа е хостирана на google.com, а

379
00:18:26,790 --> 00:18:28,170
отколку на theirsite.com.

380
00:18:28,170 --> 00:18:30,370
Пушти ме побарате на Google за таа датотека.

381
00:18:30,370 --> 00:18:32,800
И тогаш, тоа се случува да се вклучат
тоа е речиси како да е

382
00:18:32,800 --> 00:18:35,584
дел од вашиот сопствен сајт.

383
00:18:35,584 --> 00:18:36,540
>> TOMAS REIMERS: Кул.

384
00:18:36,540 --> 00:18:40,980
И штом еднаш ќе вклучуваат тоа, тогаш да
вклучат во вашата CSS, тоа ви дава

385
00:18:40,980 --> 00:18:41,830
вистинската линија.

386
00:18:41,830 --> 00:18:45,188
Така ќе се постави на имотот на фонтот на семејството
еднаква на името на вашиот фонт.

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

388
00:18:47,936 --> 00:18:50,440
>> МАЈК Rizzo: OK.

389
00:18:50,440 --> 00:18:52,220
Па ние само што заврши со CSS.

390
00:18:52,220 --> 00:18:57,230
И некои од вас може да се размислува, добро,
имавме некои CSS за CS50 финансии.

391
00:18:57,230 --> 00:19:00,390
Но CSS библиотека беше подигање.

392
00:19:00,390 --> 00:19:05,190
Ние всушност вклучуваат подигање малку
подоцна под вклучите бидејќи со

393
00:19:05,190 --> 00:19:09,660
библиотеката подигање CSS, исто така доаѓа
со многу JavaScript за кои

394
00:19:09,660 --> 00:19:12,060
Bootstrap или Твитер -
кој подигање -

395
00:19:12,060 --> 00:19:15,426
користи да управуваат со сите нивни CSS.

396
00:19:15,426 --> 00:19:19,592
>> TOMAS REIMERS: Дали некој има било
прашања досега за CSS воопшто?

397
00:19:19,592 --> 00:19:20,723
Ние сме добри?

398
00:19:20,723 --> 00:19:21,216
Страшни.

399
00:19:21,216 --> 00:19:22,495
>> МАЈК Rizzo: Прекрасно.

400
00:19:22,495 --> 00:19:25,136
>> TOMAS REIMERS: Значи движат
за да го вклучите Javascript-.

401
00:19:25,136 --> 00:19:27,900
>> МАЈК Rizzo: Значи сакаме да се зборува
за jQuery да почне.

402
00:19:27,900 --> 00:19:30,780
Дали некој слушнал за jQuery
пред или користи тоа?

403
00:19:30,780 --> 00:19:32,180
Да, неколку?

404
00:19:32,180 --> 00:19:36,000
Значи, ако само работа со мајчин
JavaScript, ќе се најдете

405
00:19:36,000 --> 00:19:41,000
пишување многу долго селектори многу.

406
00:19:41,000 --> 00:19:44,400
Па што jQuery го прави е тоа што обезбедува
убав обвивка за вклучите Javascript-

407
00:19:44,400 --> 00:19:48,180
јазик, кој ви овозможува лесно да изберете
и манипулираат со различни елементи

408
00:19:48,180 --> 00:19:52,470
во рамките на документ објект модел на
веб-страница или на ДОМ, што мислам дека

409
00:19:52,470 --> 00:19:54,290
вие момци сте слушнале за во
Предавање на оваа точка.

410
00:19:54,290 --> 00:19:57,550
>> TOMAS REIMERS: Ако не сте слушнале за
или ако не сте го гледале предавање

411
00:19:57,550 --> 00:20:01,870
Сепак, документ Object Model е
во основа тоа како работите се претставени.

412
00:20:01,870 --> 00:20:05,290
Па HTML вид на личи на дрво
кога всушност сте го извлече.

413
00:20:05,290 --> 00:20:06,850
Имате HTML елемент на врвот.

414
00:20:06,850 --> 00:20:07,560
Имате главата и телото.

415
00:20:07,560 --> 00:20:09,500
>> А потоа, во рок од што
имаат сè друго.

416
00:20:09,500 --> 00:20:10,660
Тоа е познато како на ДОМ -

417
00:20:10,660 --> 00:20:12,120
Документ Object Model.

418
00:20:12,120 --> 00:20:16,090
Значи модел кој претставува објекти во
документот е лесен начин да се размислува

419
00:20:16,090 --> 00:20:18,560
за тоа.

420
00:20:18,560 --> 00:20:22,520
И една од големо нешто за jQuery
е тоа навистина го прави traversing

421
00:20:22,520 --> 00:20:26,460
дека и манипулирање со елементи во рамките на
дека неверојатно едноставна.

422
00:20:26,460 --> 00:20:30,300
>> Толку едноставно, всушност, дека мнозинството од
Го вклучите Javascript-библиотеки или ако не

423
00:20:30,300 --> 00:20:34,200
Мнозинството, големото мнозинство на оние
ќе видите всушност бараат jQuery така

424
00:20:34,200 --> 00:20:37,530
дека тие можат да се кандидира едноставно
бидејќи ако не имаат jQuery, можете

425
00:20:37,530 --> 00:20:40,540
ќе потроши многу време обидувајќи се да
да дознаам како да изберете одредени

426
00:20:40,540 --> 00:20:43,660
елементи и како да прават други работи.

427
00:20:43,660 --> 00:20:47,950
И друга голема работа за jQuery
е дека тоа е крстот прелистувач компатибилни.

428
00:20:47,950 --> 00:20:51,550
>> Значи се сеќавам назад кога ќе рече дека
не сите прелистувачи се спроведе

429
00:20:51,550 --> 00:20:53,100
работи на ист начин?

430
00:20:53,100 --> 00:20:55,120
Тоа е точно дури во JavaScript.

431
00:20:55,120 --> 00:20:58,220
И еден од големите нешта за jQuery
е дека тоа ќе се открие

432
00:20:58,220 --> 00:21:00,300
пребарувач и откривање на
соодветен метод.

433
00:21:00,300 --> 00:21:03,420
>> Па ако ви треба за да изберете елемент,
Internet Explorer може да се каже дека си

434
00:21:03,420 --> 00:21:05,770
требало да се направи на овој начин.

435
00:21:05,770 --> 00:21:08,300
Firefox може да се каже точниот
начин е на овој начин.

436
00:21:08,300 --> 00:21:09,710
jQuery не се грижи.

437
00:21:09,710 --> 00:21:12,550
Кога ќе каже jQuery да изберете
елемент ќе дознаам колку тоа е

438
00:21:12,550 --> 00:21:16,290
би требало да го направи во рамките на прелистувачот на
корисникот е моментално во, а потоа направи

439
00:21:16,290 --> 00:21:18,584
на тој начин.

440
00:21:18,584 --> 00:21:22,650
>> МАЈК Rizzo: Значи, да не зборуваме за
користење на jQuery малку.

441
00:21:22,650 --> 00:21:27,670
Само како PHP, jQuery има особено
склоност кон доларот знак.

442
00:21:27,670 --> 00:21:30,880
Па ќе најдете дека секој jQuery -

443
00:21:30,880 --> 00:21:32,060
добро, не сите.

444
00:21:32,060 --> 00:21:35,210
Вие понекогаш може да го замени доларот
потпише со зборот jQuery.

445
00:21:35,210 --> 00:21:38,980
Но, генерално, само затоа што е
пократко, секогаш кога ќе види jQuery е

446
00:21:38,980 --> 00:21:41,420
користи тоа ќе биде со знак за долар.

447
00:21:41,420 --> 00:21:47,030
>> Па еве ние сме само покажува почетокот
Селектор за елемент во ДОМ.

448
00:21:47,030 --> 00:21:52,850
Тука, имаме знакот за долар проследено
со отворен загради, а потоа цитати.

449
00:21:52,850 --> 00:21:56,130
И во рамките на цитати одат нашите селектори
за различни елементи.

450
00:21:56,130 --> 00:21:59,810
Исто како и во CSS, ние потребни селектори да
да биде во можност да стил различни елементи

451
00:21:59,810 --> 00:22:00,840
рамките на страната.

452
00:22:00,840 --> 00:22:06,555
Оние кои се различни селектори се преведе
токму во jQuery и JavaScript,

453
00:22:06,555 --> 00:22:07,820
во најголем дел.

454
00:22:07,820 --> 00:22:10,120
>> Значи тука имаме точка foo.

455
00:22:10,120 --> 00:22:14,780
Значи, ако се потсетиме од предавање,
дот само значи класата.

456
00:22:14,780 --> 00:22:18,850
Па ние сме изборот елемент
со класа foo.

457
00:22:18,850 --> 00:22:22,670
Значи, ако јас одам напред и да отворат нашите
Го вклучите Javascript-конзола тука навистина брзо

458
00:22:22,670 --> 00:22:26,830
само да го покажат, ако јас само внесете ја
знакот за долар, гледаме дека тоа е некој

459
00:22:26,830 --> 00:22:28,090
функција која доаѓа до.

460
00:22:28,090 --> 00:22:29,420
И тоа е само дефинирани со jQuery.

461
00:22:29,420 --> 00:22:32,120
>> TOMAS REIMERS: За оние од вас
непознато, конзола е алатка

462
00:22:32,120 --> 00:22:35,430
во Хром, кој ви овозможува да,
во основа, да го стартуваш JavaScript на

463
00:22:35,430 --> 00:22:36,450
тековната страница.

464
00:22:36,450 --> 00:22:39,420
Ова ќе најдете неверојатно корисна кога
ти си, всушност дебагирање и вие

465
00:22:39,420 --> 00:22:42,400
треба да биде како, каква е моменталната
вредноста на некои глобални променливи или она што

466
00:22:42,400 --> 00:22:43,910
е нешто друго?

467
00:22:43,910 --> 00:22:47,620
Тоа е вид на како GDB со исклучок
дека всушност можете да

468
00:22:47,620 --> 00:22:51,600
манипулира елементи на страницата со
тоа во многу полесно модата.

469
00:22:51,600 --> 00:22:55,080
И, исто така, не е така, во основа, проверете
во со вас пред тоа го прави ништо.

470
00:22:55,080 --> 00:22:58,660
>> Па со оглед на GDB може да биде како, дали сте
сигурни дека сакате да го стартува следниот чекор?

471
00:22:58,660 --> 00:22:59,830
Конзола е во реално.

472
00:22:59,830 --> 00:23:03,690
Така што на веб-страница е рендерирање и
прави она што таа го прави, на

473
00:23:03,690 --> 00:23:05,720
Советот, исто така, работи заедно со него.

474
00:23:05,720 --> 00:23:08,330
И може да се стави импутира кодот во
дека конзола, која ќе

475
00:23:08,330 --> 00:23:09,260
да се работи на оваа страница.

476
00:23:09,260 --> 00:23:12,190
>> МАЈК Rizzo: Значи да влезат во конзола,
Претпоставувам дека треба накратко

477
00:23:12,190 --> 00:23:13,750
се спомене како да го направите тоа.

478
00:23:13,750 --> 00:23:17,850
Во последните проблеми кои може да имаат
користи Хром увид елемент

479
00:23:17,850 --> 00:23:20,440
функции или да ја видите изворниот -

480
00:23:20,440 --> 00:23:23,870
и оние кои се достапни само со десен
кликнување на страница или специфични

481
00:23:23,870 --> 00:23:28,430
елемент и прави или увид
елемент или да ја видите страницата извор.

482
00:23:28,430 --> 00:23:31,190
Ние, исто така, може да пристапите до го вклучите Javascript-
конзола директно од

483
00:23:31,190 --> 00:23:33,630
изборот увид елемент.

484
00:23:33,630 --> 00:23:37,930
Така, тогаш само кликнете на конзола
на екстремната десница страна.

485
00:23:37,930 --> 00:23:41,900
>> Алтернативно, може да имаат исто така помина
на горниот десен агол,

486
00:23:41,900 --> 00:23:46,820
кој е отсечен на овој екран каде што
што има три хоризонтални шипки.

487
00:23:46,820 --> 00:23:52,010
И ќе оди до алатки и
потоа го вклучите Javascript-конзола

488
00:23:52,010 --> 00:23:53,240
тука, каде што може да се види -

489
00:23:53,240 --> 00:23:54,370
најмалку на Windows -

490
00:23:54,370 --> 00:23:59,680
кратенка е за контрола на Shift Ј Па тогаш
ако сакавме да изберете елемент

491
00:23:59,680 --> 00:24:06,060
во рамките на оваа страница, исто како и јас покажа
пред, тоа го правиме знакот за долар отворен parens

492
00:24:06,060 --> 00:24:08,180
а потоа цитира.

493
00:24:08,180 --> 00:24:11,750
>> Интересна работа е, генерално,
единечен наводник и двојни наводници се

494
00:24:11,750 --> 00:24:12,370
разменливи.

495
00:24:12,370 --> 00:24:16,050
Па многу луѓе само користење една
наводници, бидејќи тие се побрзо да напишеш

496
00:24:16,050 --> 00:24:19,780
од двојни наводници затоа што не
мора да го држите Shift.

497
00:24:19,780 --> 00:24:21,770
Па јас само ќе го направи тоа сега.

498
00:24:21,770 --> 00:24:24,510
>> Па сакам да го изберете нешто
со класа.

499
00:24:24,510 --> 00:24:27,200
Сад, само затоа што знам дека
нешто што е на нашата

500
00:24:27,200 --> 00:24:28,740
веб-страница веднаш.

501
00:24:28,740 --> 00:24:29,520
И јас притиснете Enter.

502
00:24:29,520 --> 00:24:31,670
И можеме да видиме дека тоа го избрале.

503
00:24:31,670 --> 00:24:34,990
Па тоа покажува дека
врати тој објект.

504
00:24:34,990 --> 00:24:36,620
Па тоа е основен избор.

505
00:24:36,620 --> 00:24:40,080
Ако сакавме да всушност го манипулираат,
ќе треба да се јавите нешто

506
00:24:40,080 --> 00:24:43,925
на тој избор, кој
ние ќе се влезе во подоцна.

507
00:24:43,925 --> 00:24:49,030
>> TOMAS REIMERS: Значи само да се погледне во тоа
повеќе во длабочина, ова не е поинаку

508
00:24:49,030 --> 00:24:52,245
од функциски повици што ги направивме во В
Името на функцијата тука е

509
00:24:52,245 --> 00:24:52,580
малку чудно.

510
00:24:52,580 --> 00:24:55,640
Тоа е знакот за долар.

511
00:24:55,640 --> 00:24:57,010
Тоа е само име на функција.

512
00:24:57,010 --> 00:24:58,810
Нема ништо посебно за неа.

513
00:24:58,810 --> 00:25:00,450
>> Имаме отворена заграда.

514
00:25:00,450 --> 00:25:03,880
Тогаш, ние имаме еден аргумент, кој
во овој случај се случува да биде стринг,

515
00:25:03,880 --> 00:25:05,680
кој е селектор за тоа.

516
00:25:05,680 --> 00:25:08,130
А потоа, ние имаме
затворена заграда.

517
00:25:08,130 --> 00:25:09,960
Тоа е тоа.

518
00:25:09,960 --> 00:25:11,500
>> Тоа не е дека многу различни.

519
00:25:11,500 --> 00:25:12,900
Иако, тоа изгледа многу чудно.

520
00:25:12,900 --> 00:25:17,220
И дека може да биде, на некој начин, камен
точка за многу луѓе.

521
00:25:17,220 --> 00:25:21,460
>> МАЈК Rizzo: Значи Слично на тоа, ако сакаме
за да изберете елемент кој има проект,

522
00:25:21,460 --> 00:25:23,470
сега ние сакаме да изберете од
Проект, наместо на класа.

523
00:25:23,470 --> 00:25:28,080
Тоа би било нешто слично каде што
само го прават остар знак за проект.

524
00:25:28,080 --> 00:25:33,576
Па ние сме изборот тука сите
елементи кои имаат проект бар.

525
00:25:33,576 --> 00:25:35,400
>> TOMAS REIMERS: И ова се протега.

526
00:25:35,400 --> 00:25:36,450
Дека CSS се протега.

527
00:25:36,450 --> 00:25:42,260
Исто како и во CSS, можете да ги изберете сите
врски, кои имаат класа foo.

528
00:25:42,260 --> 00:25:43,420
Тука, тоа е иста работа.

529
00:25:43,420 --> 00:25:52,750
>> Можете да го направите a.foo, која ќе изберете
сите врски со класа foo.

530
00:25:52,750 --> 00:25:58,860
Можете да го направите остар бар, што би
одберете го линкот со ID бар и така

531
00:25:58,860 --> 00:25:59,770
натаму и така натаму.

532
00:25:59,770 --> 00:26:02,120
Секое CSS селектор е валидна
jQuery селектор.

533
00:26:02,120 --> 00:26:03,370
>> МАЈК Rizzo: Да.

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

535
00:26:07,996 --> 00:26:11,460
Добро, па сега ајде да се влезе малку
на манипулација дека можеме да направиме со

536
00:26:11,460 --> 00:26:12,870
нашите jQuery.

537
00:26:12,870 --> 00:26:19,280
Па jQuery има одреден тип
на нотација, каде што само користење

538
00:26:19,280 --> 00:26:20,170
точка на крајот.

539
00:26:20,170 --> 00:26:23,340
И можете да мислам на ова како во
C Како имавме различни structs.

540
00:26:23,340 --> 00:26:27,110
И да одат во оние structs, ќе
го користите точка да се влезе во нив.

541
00:26:27,110 --> 00:26:28,480
>> Ова е, вид на, нешто слично.

542
00:26:28,480 --> 00:26:33,570
Само сега имаме функции во рамките на оваа
селектор, кој можеме да го наречеме на неа.

543
00:26:33,570 --> 00:26:38,640
Па еве, првиот пример
можете да видите е CSS селектор.

544
00:26:38,640 --> 00:26:45,290
И во основа, она што го прави тоа е
се однесува на првиот елемент на CSS за ова

545
00:26:45,290 --> 00:26:46,230
нешто што сте го избрале -

546
00:26:46,230 --> 00:26:47,720
овој елемент, кој сте го избрале -

547
00:26:47,720 --> 00:26:49,290
со вредноста што.

548
00:26:49,290 --> 00:26:55,390
>> TOMAS REIMERS: Значи лесен превод на
што ќе биде ако jQuery, во основа,

549
00:26:55,390 --> 00:26:57,790
само зеде foo.

550
00:26:57,790 --> 00:27:05,480
А потоа во CSS, рече,
Црвената боја и блиски.

551
00:27:05,480 --> 00:27:06,670
Тоа е истата идеја.

552
00:27:06,670 --> 00:27:08,800
Она што е направено е тоа е одбран
сите foo елементи.

553
00:27:08,800 --> 00:27:10,170
И тогаш тоа е применет.

554
00:27:10,170 --> 00:27:15,884
Вид на, имотот боја
е еднаков на црвено.

555
00:27:15,884 --> 00:27:21,070
>> МАЈК Rizzo: Слично на тоа, ние исто така може да ја смени
со содржината на она што е

556
00:27:21,070 --> 00:27:24,870
покажува на HTML кодот на страницата, која
е навистина кул, бидејќи тоа значи дека вашиот

557
00:27:24,870 --> 00:27:28,095
веб страници сега може да биде целосно динамичен
и не мора да бидат статични

558
00:27:28,095 --> 00:27:31,660
дека ќе печати од користење на PHP
на самиот почеток на

559
00:27:31,660 --> 00:27:33,320
на страницата се вчита.

560
00:27:33,320 --> 00:27:36,810
Па еве, ако сакаме да ги промените
Крај на HTML кодот на страницата, ние би сега

561
00:27:36,810 --> 00:27:43,550
јавете се на HTML функција, која потоа само
инсерти што и да се определи во

562
00:27:43,550 --> 00:27:45,390
тој елемент што ги избрале.

563
00:27:45,390 --> 00:27:49,810
Значи тука сме изборот елемент со
класа foo а потоа велејќи дека тоа е HTML

564
00:27:49,810 --> 00:27:52,200
тоа е сега Здраво светот.

565
00:27:52,200 --> 00:27:55,600
>> TOMAS REIMERS: А кога ќе размислите околу
кои се корисни апликации на

566
00:27:55,600 --> 00:28:00,800
ова, ова CSS еден, првото нешто што
можете да почнете да се размислува за е

567
00:28:00,800 --> 00:28:03,070
во однос на дури паѓачкото мени.

568
00:28:03,070 --> 00:28:08,350
Можете да почнете да ги правите нештата како, кога
корисникот лебди над горниот дел

569
00:28:08,350 --> 00:28:11,970
на паѓачкото, вие сакате да бидете
долниот дел видливи.

570
00:28:11,970 --> 00:28:12,540
Нели?

571
00:28:12,540 --> 00:28:15,610
>> Па во CSS, имаме својства
да се направи нешто видливо.

572
00:28:15,610 --> 00:28:19,330
Работи како прикажување на дебелото никој
ќе го направи невидливи.

573
00:28:19,330 --> 00:28:21,190
Дисплеј блок ќе ја направат видлива.

574
00:28:21,190 --> 00:28:25,860
Или дури и ако сакате да одите поедноставно, можете
се работи како видливост еднаквите

575
00:28:25,860 --> 00:28:27,520
видливи, и видливоста еднаква скриени.

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

577
00:28:30,330 --> 00:28:34,780
>> И може да започне да го имплементира работи
како паѓачкото мени право

578
00:28:34,780 --> 00:28:38,410
откако ќе го добиете преку идејата за тоа како
може да дознаам кога тоа се отвора,

579
00:28:38,410 --> 00:28:39,850
кој ќе се добие преку многу кратко.

580
00:28:39,850 --> 00:28:42,160
Но, ние може да почнат да се види
апликации од овој.

581
00:28:42,160 --> 00:28:45,540
Во слична смисла, ако сте биле за да се обиде
и спроведување на, да речеме, разговор

582
00:28:45,540 --> 00:28:48,620
моторот и дека сакате да се направи малку
говор меур излезе, кога сте

583
00:28:48,620 --> 00:28:52,880
доби нова порака, откако ќе го добиете
нова порака, можете да направите малку

584
00:28:52,880 --> 00:28:55,890
говор меур излезе со менување
HTML кодот на страницата, нели?

585
00:28:55,890 --> 00:29:00,540
Од додавајќи дека дополнителни говор меур
со екстра текст во таму.

586
00:29:00,540 --> 00:29:01,140
Да?

587
00:29:01,140 --> 00:29:07,750
>> Публика: Значи вие ќе го вградите овој во рамките на
HTML кодот во нешто налик на

588
00:29:07,750 --> 00:29:10,534
[Нечујни]?

589
00:29:10,534 --> 00:29:12,940
>> МАЈК Rizzo: Право.

590
00:29:12,940 --> 00:29:16,190
Да, ние ќе дојдеме до тоа
во малку.

591
00:29:16,190 --> 00:29:18,810
Да, тоа е слично на
малку во PHP.

592
00:29:18,810 --> 00:29:21,240
Не е точно слично.

593
00:29:21,240 --> 00:29:24,730
>> Еден добар разлика да направи е она што овој
е, всушност, уредување, кога ние ги менувате

594
00:29:24,730 --> 00:29:28,480
на страница, бидејќи тоа не се случува да биде
уредување на вистинскиот фајл, која е

595
00:29:28,480 --> 00:29:31,380
се чуваат на серверот, бидејќи светот
не треба да има дозвола

596
00:29:31,380 --> 00:29:32,610
да ги уредувате вашите датотеки.

597
00:29:32,610 --> 00:29:36,080
Ова е само уредување она што е на страната
и она што се прикажани во рамките

598
00:29:36,080 --> 00:29:36,950
прелистувачот.

599
00:29:36,950 --> 00:29:40,340
Значи, ако сте во ситуација да ја превчитате страница по,
велат, бришење нешто што ние

600
00:29:40,340 --> 00:29:44,730
види можеме да направиме со отстранување повик,
дека нешто тогаш ќе се појавува.

601
00:29:44,730 --> 00:29:48,590
>> TOMAS REIMERS: Значи еден од начините да се размислува за
ова е ако сум вашиот компјутер и

602
00:29:48,590 --> 00:29:50,170
Мајк е, на некој начин, на серверот.

603
00:29:50,170 --> 00:29:53,850
Што ќе се случи е јас ќе одам да
побара Мајк, еј, можам да имам копија од

604
00:29:53,850 --> 00:29:54,630
оваа веб-страница?

605
00:29:54,630 --> 00:29:56,190
И тој ќе ми даде копија од него.

606
00:29:56,190 --> 00:29:57,430
>> Не, тоа не е оригиналниот работа.

607
00:29:57,430 --> 00:29:58,620
Тоа е само копија.

608
00:29:58,620 --> 00:30:00,450
И тогаш тоа ќе биде како, ох,
има вклучите Javascript тука.

609
00:30:00,450 --> 00:30:02,450
Јасно, јас треба да ја уреди
страница да биде вака.

610
00:30:02,450 --> 00:30:04,250
И јас сум уредување на вашиот примерок.

611
00:30:04,250 --> 00:30:05,920
>> Но тоа не е реализирање на
вистинските копија.

612
00:30:05,920 --> 00:30:08,480
И ако јас се да го прашам повторно
обновите страницата, -

613
00:30:08,480 --> 00:30:10,060
еј, можам да имам друг чиста копија -

614
00:30:10,060 --> 00:30:11,440
тој се случува да ми даде
друг чиста копија.

615
00:30:11,440 --> 00:30:14,240
И тогаш, јас ќе одам да го прават истото
како, ох, ова js тука кој се вели дека

616
00:30:14,240 --> 00:30:14,866
да ја уредувате оваа.

617
00:30:14,866 --> 00:30:17,460
И јас одам да се задржи тоа го прават.

618
00:30:17,460 --> 00:30:20,930
>> МАЈК Rizzo: Значи навистина кул работа
што можете да направите со jQuery е

619
00:30:20,930 --> 00:30:24,350
всушност додадете различни видови
на анимации на вашата страница.

620
00:30:24,350 --> 00:30:27,440
Јас не знам дали некогаш сте виделе каде
ти се обидуваш да пополни формулар

621
00:30:27,440 --> 00:30:31,250
онлајн и да не се пополни
работите правилно.

622
00:30:31,250 --> 00:30:33,440
Па малку нешто слајдови надолу
на врвот и вели дека

623
00:30:33,440 --> 00:30:34,820
не сте го направиле тоа правилно.

624
00:30:34,820 --> 00:30:36,260
Ве молиме обидете се повторно.

625
00:30:36,260 --> 00:30:37,890
И тогаш, тоа би можело да дури и само слајд.

626
00:30:37,890 --> 00:30:40,710
>> Излегува jQuery има изградено во функции
кои го прават сето тоа

627
00:30:40,710 --> 00:30:44,180
анимација, навистина, навистина лесно.

628
00:30:44,180 --> 00:30:46,750
Па таму е првиот бледеат
од функција, која

629
00:30:46,750 --> 00:30:47,710
можете да се јавите на нешто.

630
00:30:47,710 --> 00:30:55,650
И тоа е начин да се промени CSS на
тој елемент во анимиран начин.

631
00:30:55,650 --> 00:30:58,480
Така што е потребно она што елементот
вие го викате снема натаму.

632
00:30:58,480 --> 00:31:03,990
А потоа, полека се менува тоа е непроѕирноста
додека таа оди целосно транспарентен.

633
00:31:03,990 --> 00:31:07,330
>> TOMAS REIMERS: Од друга популарна една
е слајд надолу, која ќе го направи

634
00:31:07,330 --> 00:31:08,800
нешто се појави со лизгање надолу.

635
00:31:08,800 --> 00:31:12,840
Така што во случај на менито паѓачкото,
повторно, кога дознавме како да се открие

636
00:31:12,840 --> 00:31:15,310
кога ова е лебдел над,
може само да го кажам ова дното

637
00:31:15,310 --> 00:31:16,910
дел слајд надолу сега.

638
00:31:16,910 --> 00:31:19,270
А потоа, се чини
од лизгање надолу.

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

640
00:31:22,042 --> 00:31:26,590
>> МАЈК Rizzo: И тогаш, ако само има
некој вид на анимација на ум дека

641
00:31:26,590 --> 00:31:29,080
jQuery не мора да се обезбеди.

642
00:31:29,080 --> 00:31:32,690
На пример, да речеме jQuery
не ви овозможи со слајд

643
00:31:32,690 --> 00:31:33,750
надолу и слајд нагоре.

644
00:31:33,750 --> 00:31:36,740
Добро, ајде да речеме дека сакав да слајд
нешто од левата страна или од

645
00:31:36,740 --> 00:31:39,880
право вид на како CS50
главна страница не секогаш

646
00:31:39,880 --> 00:31:42,080
да одите на нова комисија.

647
00:31:42,080 --> 00:31:45,030
Ќе потоа најверојатно треба да
спроведување го тоа сами со користење на

648
00:31:45,030 --> 00:31:49,310
анимираат функција во рамките на jQuery.

649
00:31:49,310 --> 00:31:51,350
>> Па слично, само се анимираат.

650
00:31:51,350 --> 00:31:55,850
А потоа, во рамките на тоа што е потребно
речникот на различни вредности

651
00:31:55,850 --> 00:31:57,340
дека си требал да помине.

652
00:31:57,340 --> 00:32:06,960
Па еве, ако сакаме да се анимираат
елемент foo така што неговата ширина или

653
00:32:06,960 --> 00:32:10,880
проширува или договори за 80 пиксели,
во зависност од она што во моментов е.

654
00:32:10,880 --> 00:32:14,100
Ние само ќе мине како
аргумент во неа.

655
00:32:14,100 --> 00:32:18,060
>> Анимираат, исто така, има некои други аргументи
кои би можеле да го помине, на пример,

656
00:32:18,060 --> 00:32:21,150
на брзината на анимацијата
кој сакате да го даде.

657
00:32:21,150 --> 00:32:26,220
И да го направат тоа, јас само би рекол
брзо Google jQuery анимира.

658
00:32:26,220 --> 00:32:31,710
А потоа, носат до оваа страница, можете да
види тоа доби еден куп на различни

659
00:32:31,710 --> 00:32:33,560
својства кои можете да го помине.

660
00:32:33,560 --> 00:32:35,990
>> И јас ве охрабруваме - кога ќе дојдеш
среќаваме со нешто што не го направите

661
00:32:35,990 --> 00:32:40,390
знаете или само сакате да дознаете повеќе за
особено метод кој можете да се јавите

662
00:32:40,390 --> 00:32:41,270
на нешто -

663
00:32:41,270 --> 00:32:44,440
само го Google. jQuery е исклучително
добро документирани.

664
00:32:44,440 --> 00:32:49,140
И често пати има многу
примери кои тие ги обезбедуваат за вас.

665
00:32:49,140 --> 00:32:52,470
Ако ние движете надолу -

666
00:32:52,470 --> 00:32:53,720
начин надолу -

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

668
00:32:57,660 --> 00:32:59,190
дека можеме да го користиме, како и.

669
00:32:59,190 --> 00:33:02,480
>> Повторно, кога инвеститорот всушност оди
низ проблеми на пишување

670
00:33:02,480 --> 00:33:05,810
библиотека, тие најчесто сакаат
некој да го користите.

671
00:33:05,810 --> 00:33:09,400
Па заедно ќе
биде документација.

672
00:33:09,400 --> 00:33:12,270
И таа документација обично може да биде
наоѓаат на проектот страница, која е

673
00:33:12,270 --> 00:33:14,970
зошто ние би ти дал дека оригиналниот сајт во
на почетокот, кој ви линкови до

674
00:33:14,970 --> 00:33:18,080
Проектот страници, така што можете да
види дека документација.

675
00:33:18,080 --> 00:33:22,670
>> Типично, страница на проектот во случај
на [нечујни], тоа ви го кажа

676
00:33:22,670 --> 00:33:23,940
имињата на класите.

677
00:33:23,940 --> 00:33:27,250
Во случај на JavaScript, тоа му дава
можете името на функции.

678
00:33:27,250 --> 00:33:35,310
Патем, ако ние дојдете до врвот,
брз белешка страна на функции е

679
00:33:35,310 --> 00:33:39,080
секогаш кога ќе видите функција имплементирана
вака со хард

680
00:33:39,080 --> 00:33:43,800
загради во средината, тоа значи дека
дека тој имот не е задолжително.

681
00:33:43,800 --> 00:33:44,750
Само на главите нагоре.

682
00:33:44,750 --> 00:33:47,350
Сум видел многу прашања
за тоа.

683
00:33:47,350 --> 00:33:50,370
>> Па тука може да се види дека
живи зема својства

684
00:33:50,370 --> 00:33:51,800
како неопходен аргумент.

685
00:33:51,800 --> 00:33:54,870
И сè друго не е задолжително.

686
00:33:54,870 --> 00:33:56,136
Страна белешка -

687
00:33:56,136 --> 00:33:58,090
можете да мислам на тоа, вид
на, како човек страници.

688
00:33:58,090 --> 00:34:04,275
Човекот страници се документацијата за C и
за многу други работи, како и.

689
00:34:04,275 --> 00:34:11,020
>> МАЈК Rizzo: Значи сме научиле како да се
промена на различни CSS на страницата,

690
00:34:11,020 --> 00:34:14,040
анимираат тоа, и отстранете го додадете HTML.

691
00:34:14,040 --> 00:34:16,889
Но, еден од навистина најмоќните
работи во врска со вклучите Javascript-

692
00:34:16,889 --> 00:34:18,270
а особено jQuery -

693
00:34:18,270 --> 00:34:22,570
што ви овозможува да направите е да се одговори на
различните елементи што се случуваат.

694
00:34:22,570 --> 00:34:25,380
На пример, тука имаме
управувачот настан.

695
00:34:25,380 --> 00:34:28,210
И дека само значи дека секогаш кога овој
Настанот се случи, ние се справи со неа во

696
00:34:28,210 --> 00:34:29,280
одреден начин.

697
00:34:29,280 --> 00:34:35,159
>> Па еве, генерички jQuery настан
управувачот е точка натаму.

698
00:34:35,159 --> 00:34:42,949
И тогаш, прво нешто што се предвидени
е она што настанот што треба

699
00:34:42,949 --> 00:34:43,810
се слуша за.

700
00:34:43,810 --> 00:34:45,610
Па еве, тоа е клик, која
ние чекаме.

701
00:34:45,610 --> 00:34:49,250
>> TOMAS REIMERS: Алтернативно, имате
на лебдат, која е многу популарна една.

702
00:34:49,250 --> 00:34:52,000
Па се враќам на паѓачкото мени идеја.

703
00:34:52,000 --> 00:34:54,239
Ќе има на врвот еден на лебдиш.

704
00:34:54,239 --> 00:34:56,096
А потоа можете да го промени тоа.

705
00:34:56,096 --> 00:34:56,830
>> МАЈК Rizzo: Право.

706
00:34:56,830 --> 00:35:01,680
И тогаш, кога тоа се случи, тоа само
извршува оваа функција која ја даде

707
00:35:01,680 --> 00:35:05,080
како аргумент и дека
тоа предупредува здраво или hi.

708
00:35:05,080 --> 00:35:08,900
>> TOMAS REIMERS: Значи во случај на
JavaScript, ова е место што треба да се

709
00:35:08,900 --> 00:35:12,970
отстрани се од C. Ние може да всушност
земе функции како аргументи.

710
00:35:12,970 --> 00:35:15,940
И постојат многу навистина
комплексни начини да го направите тоа.

711
00:35:15,940 --> 00:35:17,940
Ние ќе се промовира еден начин,
кој е може да се дефинира

712
00:35:17,940 --> 00:35:19,270
функционираат право таму.

713
00:35:19,270 --> 00:35:22,540
>> Значи, кога сте прашува за функцијата
параметар, ти си во основа, само

714
00:35:22,540 --> 00:35:24,500
ќе се дефинира функција
на самото место.

715
00:35:24,500 --> 00:35:27,090
И начинот на кој се дефинира функција
во JavaScript е што

716
00:35:27,090 --> 00:35:28,820
буквално се каже функција.

717
00:35:28,820 --> 00:35:30,130
Потоа, обично, името
на функција.

718
00:35:30,130 --> 00:35:32,510
Но, ние никогаш нема да референца
оваа функција повторно.

719
00:35:32,510 --> 00:35:34,040
Па ние го напушти безимени.

720
00:35:34,040 --> 00:35:40,440
>> Тогаш заграда, тогаш кадрава
загради, а потоа го кодот во рамките на тоа.

721
00:35:40,440 --> 00:35:42,540
Па ние го разбираме ова може
да биде малку збунувачки.

722
00:35:42,540 --> 00:35:45,180
Па ние ви даде општа форма на
што е настан управувачот личи

723
00:35:45,180 --> 00:35:47,790
подолу, која се наоѓа на настани.

724
00:35:47,790 --> 00:35:50,598
И тогаш, вашиот код во внатрешноста тоа.

725
00:35:50,598 --> 00:35:52,478
>> МАЈК Rizzo: Дали има некои
прашања во врска со ова?

726
00:35:52,478 --> 00:35:54,818
Ова може да биде малку збунувачки
првиот пат кога ќе го видите.

727
00:35:54,818 --> 00:35:57,550
>> TOMAS REIMERS: Вие всушност сакате да го
отвори документот и да им покаже некои

728
00:35:57,550 --> 00:35:58,155
jQuery во моментов?

729
00:35:58,155 --> 00:35:59,853
>> МАЈК Rizzo: Да, да го направите тоа.

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

731
00:36:00,256 --> 00:36:02,490
>> TOMAS REIMERS: Значи сега сме
во апаратот.

732
00:36:02,490 --> 00:36:07,730
И она што ние го направивме е ние сме земени на
слобода на создавање двете index.html

733
00:36:07,730 --> 00:36:10,100
датотека, која ја поврзува
го вклучите Javascript-датотека.

734
00:36:10,100 --> 00:36:12,880
И можеме да се отвори -

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

736
00:36:15,170 --> 00:36:16,630
Па, тоа се две нешта.

737
00:36:16,630 --> 00:36:18,350
>> Првиот е линкови до
го вклучите Javascript-датотека.

738
00:36:18,350 --> 00:36:21,250
И ние ќе се види дека тука горе.

739
00:36:21,250 --> 00:36:25,340
Гледаме дека во главата на
HTML документ, особено.

740
00:36:25,340 --> 00:36:28,260
Па ќе видите таму дека
ние, во основа, велат СРЦ,

741
00:36:28,260 --> 00:36:29,590
која се залага за извор.

742
00:36:29,590 --> 00:36:30,630
И тоа е URL-то.

743
00:36:30,630 --> 00:36:32,700
>> Па тука може да се каже ние сме
вклучени jQuery.

744
00:36:32,700 --> 00:36:34,290
И ние исто така се вклучени скрипти.

745
00:36:34,290 --> 00:36:40,630
На друг начин да се вклучат JavaScript е
дека можете да го вклучите РЕГИСТРАЦИЈА скрипта

746
00:36:40,630 --> 00:36:44,600
таг како што ние имаме на дното, каде што
вели сценариото тип е текстот го вклучите Javascript-.

747
00:36:44,600 --> 00:36:46,960
>> Па ние велиме, да слуша, ние сме
за да го вклучите скрипта.

748
00:36:46,960 --> 00:36:51,890
И видот на таа скрипта е
JavaScript, која е еден вид на текст.

749
00:36:51,890 --> 00:36:52,550
Многу едноставна.

750
00:36:52,550 --> 00:36:56,490
>> МАЈК Rizzo: Значи ова, вид на, добива да
вашето прашање за тоа како ние го вклучите

751
00:36:56,490 --> 00:37:02,340
JavaScript за нашите додадени фајлови, бидејќи кога ние
се PHP, правиме нешто како ова.

752
00:37:02,340 --> 00:37:07,570
И тогаш, имаме PHP функции -
да речеме акции направите

753
00:37:07,570 --> 00:37:09,150
нешто со тоа -

754
00:37:09,150 --> 00:37:10,490
оди таму.

755
00:37:10,490 --> 00:37:13,860
Меѓутоа, сега имаме скрипта тагови
дека ние ја даде, кои се всушност

756
00:37:13,860 --> 00:37:19,470
дел од HTML себе, бидејќи тоа не е
faking тоа што е датотека HTML допаѓа

757
00:37:19,470 --> 00:37:25,070
е во PHP, бидејќи ако навистина да сте одат во
и се погледне на изворот на страницата,

758
00:37:25,070 --> 00:37:28,430
ќе видите овие скрипта тагови таму
со вклучите Javascript-се поврзани со

759
00:37:28,430 --> 00:37:29,800
нив во тоа.

760
00:37:29,800 --> 00:37:31,760
>> Па тогаш, ако сакаме да
пишуваат некои го вклучите Javascript -

761
00:37:31,760 --> 00:37:37,110
да речеме ние сакаме да се промени на телото
бидејќи сега јас немам

762
00:37:37,110 --> 00:37:40,020
било која друга тагови дека јас навистина може да
ги уредувате покрај телото.

763
00:37:40,020 --> 00:37:42,450
Да речеме јас сакав да
промена на CSS за тоа.

764
00:37:42,450 --> 00:37:46,190
Па ќе одиме напред и промена
бојата на тоа на црвено.

765
00:37:46,190 --> 00:37:47,380
>> Па јас ја зачувам датотеката.

766
00:37:47,380 --> 00:37:52,700
Да се ​​вратиме на нашата веб страница, освежи,
и тоа го прави автоматски

767
00:37:52,700 --> 00:37:55,920
поради тоа што не изгледа како тоа го чекаше
на сите, бидејќи ние не се слуша

768
00:37:55,920 --> 00:37:59,450
за еден настан или нешто слично.

769
00:37:59,450 --> 00:38:02,800
>> TOMAS REIMERS: Значи, ако ние се вратиме на таквиот
поднесе особено - на HTML

770
00:38:02,800 --> 00:38:04,710
Датотека - она ​​што се случува
да се види е имаме -

771
00:38:04,710 --> 00:38:06,810
Запомнете дека ова е вчитан,
вид на, хронолошки.

772
00:38:06,810 --> 00:38:09,910
Значи ние треба прво главата.
го товари овие две датотеки.

773
00:38:09,910 --> 00:38:10,800
Потоа одиме на телото.

774
00:38:10,800 --> 00:38:11,640
И гледаме Здраво светот.

775
00:38:11,640 --> 00:38:13,030
Па ние ја даде Здраво светот.

776
00:38:13,030 --> 00:38:15,240
>> А потоа последното нешто што имаме
е имаме сценариото таг.

777
00:38:15,240 --> 00:38:20,880
Така што тече сценариото таг, бидејќи тоа е
не го кажувам за да чекаат за ништо.

778
00:38:20,880 --> 00:38:24,700
И тоа е најосновна
начин да се кандидира вклучите Javascript-.

779
00:38:24,700 --> 00:38:29,200
>> Со тоа, вели, можат да ви стават на сценариото
таг во насловот само

780
00:38:29,200 --> 00:38:31,240
да се покаже овој момент?

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

782
00:38:34,450 --> 00:38:35,700
И да ја стартувате тоа.

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

784
00:38:38,880 --> 00:38:41,070
Ние ќе забележите дека тоа
не се промени бојата.

785
00:38:41,070 --> 00:38:44,210
И ова е еден од проблемите на
JavaScript е дека работите се натоварени

786
00:38:44,210 --> 00:38:45,930
по хронолошки редослед.

787
00:38:45,930 --> 00:38:49,750
>> Па во тоа време дека овој код
трчав, ние избрани -

788
00:38:49,750 --> 00:38:52,530
Оди назад -

789
00:38:52,530 --> 00:38:53,670
телото таг.

790
00:38:53,670 --> 00:38:57,560
Телото таг сеуште не постои, бидејќи
JavaScript е во согласност со HTML.

791
00:38:57,560 --> 00:39:01,790
Така прелистувачот е како избери тело.

792
00:39:01,790 --> 00:39:02,760
Нема такво нешто уште.

793
00:39:02,760 --> 00:39:03,600
За да можеме да го игнорираме тоа.

794
00:39:03,600 --> 00:39:05,330
И ние продолжувам да одам.

795
00:39:05,330 --> 00:39:07,200
>> А потоа ние се дефинира телото таг.

796
00:39:07,200 --> 00:39:09,670
Но, тоа никогаш не добива ажурирани.

797
00:39:09,670 --> 00:39:12,560
Значи, кога сте спроведување скрипта
тагови, бидете сигурни дека ќе го поставите

798
00:39:12,560 --> 00:39:15,502
по телото таг.

799
00:39:15,502 --> 00:39:16,820
Следниот слајд.

800
00:39:16,820 --> 00:39:17,830
>> МАЈК Rizzo: OK.

801
00:39:17,830 --> 00:39:19,330
Па ние го променивме нешто.

802
00:39:19,330 --> 00:39:21,910
Но тоа не изгледа како да одговори на
ни на сите, бидејќи тоа само вид на

803
00:39:21,910 --> 00:39:24,150
направи го тоа веднаш штом е вчитан страната.

804
00:39:24,150 --> 00:39:27,700
Па сега, наместо тоа, зошто
не можеме додадете настан управувачот.

805
00:39:27,700 --> 00:39:31,020
>> Па ајде да направиме нешто
на телото повторно.

806
00:39:31,020 --> 00:39:33,490
И да речеме ние го направи тоа на -

807
00:39:33,490 --> 00:39:34,500
кликнете.

808
00:39:34,500 --> 00:39:35,750
Ние ќе додадеме функција.

809
00:39:35,750 --> 00:39:38,270

810
00:39:38,270 --> 00:39:39,690
>> Промена Ајде: Tomas REIMERS
тоа е боја на црвена повторно.

811
00:39:39,690 --> 00:39:40,000
Зошто да не?

812
00:39:40,000 --> 00:39:41,680
>> МАЈК Rizzo: Да, да промена
нејзините "боја на црвена повторно.

813
00:39:41,680 --> 00:39:46,310

814
00:39:46,310 --> 00:39:46,900
Во ред е.

815
00:39:46,900 --> 00:39:48,480
Па ајде вчитување на страната.

816
00:39:48,480 --> 00:39:49,530
Добро, ќе видиме -

817
00:39:49,530 --> 00:39:52,290
како што се очекуваше, тоа не се претвори црвено уште.

818
00:39:52,290 --> 00:39:53,610
Но, тогаш можеме да одиме напред и да кликнете на неа.

819
00:39:53,610 --> 00:39:54,270
>> TOMAS REIMERS: И тоа се претвори црвено.

820
00:39:54,270 --> 00:39:56,090
>> МАЈК Rizzo: И тоа го прави
претвори црвено како што се очекуваше.

821
00:39:56,090 --> 00:39:59,010
>> TOMAS REIMERS: И ние може да се види како
ние може да почнат да се изгради многу основни

822
00:39:59,010 --> 00:40:00,170
интеракција.

823
00:40:00,170 --> 00:40:03,850
Други работи ние можеби ќе сакате да направите е,
ако ние не сакаме да се направи на телото

824
00:40:03,850 --> 00:40:07,230
Црвената боја, ајде да се направи HTML
позадина црвената боја.

825
00:40:07,230 --> 00:40:08,480
Само така тоа е истиот CSS.

826
00:40:08,480 --> 00:40:19,960

827
00:40:19,960 --> 00:40:23,320
>> И кога ќе ја промените, може да се види ова
многу драматичен ефект на менување на

828
00:40:23,320 --> 00:40:25,510
целата страница.

829
00:40:25,510 --> 00:40:29,100
Па уште еднаш, ако сте спроведување на работите,
ќе може да има една компонента

830
00:40:29,100 --> 00:40:30,150
кој треба да се кликне на.

831
00:40:30,150 --> 00:40:32,710
Да речеме копчето Exit и
цела друга компонента,

832
00:40:32,710 --> 00:40:33,830
која е наменета да одговори.

833
00:40:33,830 --> 00:40:35,755
Па ќе се отстрани прозорецот
кога тоа се случи.

834
00:40:35,755 --> 00:40:39,341

835
00:40:39,341 --> 00:40:40,700
>> МАЈК Rizzo: OK.

836
00:40:40,700 --> 00:40:42,200
Само како пример -

837
00:40:42,200 --> 00:40:44,400
ви не се за да ја видите оваа порано -

838
00:40:44,400 --> 00:40:47,500
Јас само ќе ви покажам она што изгледа
како кога ние се скрие нешто.

839
00:40:47,500 --> 00:40:52,220
Па јас ќе одам напред и да се слајд.

840
00:40:52,220 --> 00:40:54,440
>> TOMAS REIMERS: Сакате да заврши што во
став тип, пред да го направите тоа?

841
00:40:54,440 --> 00:40:55,132
>> МАЈК Rizzo: OK.

842
00:40:55,132 --> 00:40:59,135
Да, зошто да не го правиме тоа само така
можеме да го изберете малку повеќе.

843
00:40:59,135 --> 00:41:00,490
>> TOMAS REIMERS: И ајде да
даде една класа.

844
00:41:00,490 --> 00:41:01,740
>> МАЈК Rizzo: Да.

845
00:41:01,740 --> 00:41:06,575

846
00:41:06,575 --> 00:41:09,920
Добро, па ајде да видиме.

847
00:41:09,920 --> 00:41:14,820
Наместо на изборот на вистинскиот тело
сега, јас само ќе одберете сè со

848
00:41:14,820 --> 00:41:18,780
класа здраво, кои тука ќе
само треба една работа.

849
00:41:18,780 --> 00:41:20,900
Па ние не треба да
се грижи за тоа.

850
00:41:20,900 --> 00:41:23,080
>> Па јас ќе го освежи.

851
00:41:23,080 --> 00:41:24,230
Јас ќе одам напред и кликнете на него.

852
00:41:24,230 --> 00:41:27,890
И тоа, на некој начин, не е чудно слајд
до нешто, што не изгледа дека

853
00:41:27,890 --> 00:41:29,580
атрактивен.

854
00:41:29,580 --> 00:41:31,060
Општо земено, тие изгледаат убаво.

855
00:41:31,060 --> 00:41:32,720
Претпоставувам, ова - за некои
причина - не.

856
00:41:32,720 --> 00:41:36,640
Јас само ќе се направи снема така
може да се погледне во тоа премногу.

857
00:41:36,640 --> 00:41:38,100
Многу поубав.

858
00:41:38,100 --> 00:41:41,150
>> А потоа, ако јас отвори вклучите Javascript-
конзола повторно и ние сакаме да видиме што

859
00:41:41,150 --> 00:41:43,900
тоа изгледа како кога ќе го снема внатре

860
00:41:43,900 --> 00:41:46,920
Сега, јас само повик бледнеат во на неа.

861
00:41:46,920 --> 00:41:48,830
И згаснува назад внатре

862
00:41:48,830 --> 00:41:56,150
>> Слично на тоа, ние би можеле да всушност исто така, поминуваат
аргумент за да избледее или ги снема,

863
00:41:56,150 --> 00:41:57,640
кој е, вид, брзината на него.

864
00:41:57,640 --> 00:42:02,220
Па ајде да одиме напред и да каже сакаме
таа да оди полека бледнеат внатре

865
00:42:02,220 --> 00:42:04,250
Па претпоставувам дека се уште се чинеше
прилично брзо.

866
00:42:04,250 --> 00:42:06,180
Но, тоа беше побавно отколку порано.

867
00:42:06,180 --> 00:42:10,340
>> TOMAS REIMERS: И ако сакате да го најдете
дознаете повеќе за овие работи, повторно,

868
00:42:10,340 --> 00:42:13,410
само отидете на jQuery документација,
кои ние сме ви даде и да ги чита

869
00:42:13,410 --> 00:42:13,735
преку овие.

870
00:42:13,735 --> 00:42:15,790
Тие се документира нивните функции
неверојатно добро.

871
00:42:15,790 --> 00:42:18,622

872
00:42:18,622 --> 00:42:19,570
>> МАЈК Rizzo: OK.

873
00:42:19,570 --> 00:42:21,560
Па претпоставувам да се вратиме на ова.

874
00:42:21,560 --> 00:42:23,490
И можеме да зборуваме за нашите последната страница.

875
00:42:23,490 --> 00:42:24,690
Па, ние може да се заврши со подигање.

876
00:42:24,690 --> 00:42:27,140
А потоа ние ќе го отвори
за некои прашања.

877
00:42:27,140 --> 00:42:30,180
И ако вие момци имате било какви идеи кои
што би сакал да се обиде да се фрли и да видиме

878
00:42:30,180 --> 00:42:34,150
ако можеме да ги спроведе со
Го вклучите Javascript-брзо.

879
00:42:34,150 --> 00:42:37,890
>> Па навистина брзо за подигање, што
беше автоматски вклучени во

880
00:42:37,890 --> 00:42:41,700
вашиот последен проблем во собата во CSS папка
а всушност поврзани со во вашиот

881
00:42:41,700 --> 00:42:43,190
header.php.

882
00:42:43,190 --> 00:42:46,740
Па може да се додаде класи кои
се дефинирани во подигање на него.

883
00:42:46,740 --> 00:42:50,490
И тоа ќе се автоматски стилизирана
тие работи соодветно.

884
00:42:50,490 --> 00:42:54,550
>> TOMAS REIMERS: Значи подигање е многу
магичен нешто развиена од страна на луѓе

885
00:42:54,550 --> 00:42:55,340
на Твитер.

886
00:42:55,340 --> 00:42:57,230
И она што требаше да направам е -

887
00:42:57,230 --> 00:43:00,740
пред веб-сајтови беа навистина тешко да се направи
изгледаат убаво, особено кога имавме

888
00:43:00,740 --> 00:43:02,200
многу заеднички компоненти.

889
00:43:02,200 --> 00:43:04,770
Толку многу копчиња на
веб изгледаше исто.

890
00:43:04,770 --> 00:43:08,960
>> А многу текст полиња може да се направи
изгледаат подобро од стандард текст

891
00:43:08,960 --> 00:43:13,620
поле што веројатно знаете од навистина
стара веб-сајтови или навистина лошо направени

892
00:43:13,620 --> 00:43:18,210
веб-сајтови, кои само изгледаат како буквално
текст кутии без било каква форма на текст

893
00:43:18,210 --> 00:43:21,190
сенка или било каков вид на убаво контури.

894
00:43:21,190 --> 00:43:24,540
Па што подигање направив беше тоа го рече, добро,
имаме многу заеднички стилови.

895
00:43:24,540 --> 00:43:28,210
Зошто да не се направи еден заеднички сет на CSS
и заеднички сет на JavaScript како

896
00:43:28,210 --> 00:43:32,210
и, кој може да го стил како што е и кој
може да им даде на луѓето работи како капка

897
00:43:32,210 --> 00:43:34,610
down менија, кои можат да им даде на луѓето
работи како modals.

898
00:43:34,610 --> 00:43:38,580
>> Модални е она што се појавува во текот на страница
секогаш кога тоа е строго земено

899
00:43:38,580 --> 00:43:41,090
нешто, што го инхибира понатаму
интеракција, додека не се

900
00:43:41,090 --> 00:43:43,110
комуницирате со неа.

901
00:43:43,110 --> 00:43:45,820
Нешто како ова е, дали си сигурен
дека сакате да ја избришете оваа работа?

902
00:43:45,820 --> 00:43:49,100
Вие не може да навистина направи нешто друго
додека не каже да или не.

903
00:43:49,100 --> 00:43:52,720
>> Таа зеде сето ова и тоа го пакуваат
заедно и рече, тука ќе одиме.

904
00:43:52,720 --> 00:43:54,630
Луѓе сега можат да го користат овој.

905
00:43:54,630 --> 00:43:56,830
И можете да го најдете над
на getbootstrap.com.

906
00:43:56,830 --> 00:44:00,480
Тоа беше автоматски вклучени во
вашиот последен проблем во собата.

907
00:44:00,480 --> 00:44:04,160
И ти си повеќе од добредојдени да
го користите на вашиот конечниот проект.

908
00:44:04,160 --> 00:44:06,950
И ако сакате да го следат тоа
водат до Земи подигање.

909
00:44:06,950 --> 00:44:10,590

910
00:44:10,590 --> 00:44:15,700
>> Ќе видите тука е
Bootstrap CSS сајт.

911
00:44:15,700 --> 00:44:16,860
Ќе видите подигање.

912
00:44:16,860 --> 00:44:20,450
И ако се движите надолу, ќе видите
како да го преземете, како да

913
00:44:20,450 --> 00:44:21,900
инсталирај го, и така натаму.

914
00:44:21,900 --> 00:44:24,700
>> МАЈК Rizzo: И можете, исто така,
Интересно, ја прилагодите на

915
00:44:24,700 --> 00:44:27,770
биде секаков вид на теми
што сакате.

916
00:44:27,770 --> 00:44:31,270
Знам дека е нешто што го направив за мојата
финалниот проект, кога го зедов класа

917
00:44:31,270 --> 00:44:32,050
беше ја изберете.

918
00:44:32,050 --> 00:44:34,540
А поинаква верзија на подигање дека
имаше поинаков шема на бои и

919
00:44:34,540 --> 00:44:36,700
различни форми на некои
различни нешта.

920
00:44:36,700 --> 00:44:38,250
Па јас ве охрабруваме да си игра со тоа.

921
00:44:38,250 --> 00:44:39,440
Тоа е вид на забавно да се прават.

922
00:44:39,440 --> 00:44:43,230
>> TOMAS REIMERS: Гледајќи во склопот на врвот
повторно, тоа е многу слична на фонт

923
00:44:43,230 --> 00:44:44,970
Одличен сајт.

924
00:44:44,970 --> 00:44:47,810
Многу документација ќе започне
да изгледаат слично, кога сте

925
00:44:47,810 --> 00:44:48,940
видел доволно од него.

926
00:44:48,940 --> 00:44:51,260
Значи тука имаме CSS
составен дел на овој.

927
00:44:51,260 --> 00:44:53,540
И ќе видите колку е тоа
да стил нешта.

928
00:44:53,540 --> 00:44:56,780
Значи, ако кликнете на маси, на пример,
можете веднаш да се направи

929
00:44:56,780 --> 00:45:01,710
маса прилично со едноставно додавање
класа маса до него.

930
00:45:01,710 --> 00:45:03,150
>> Истите работи за копчиња.

931
00:45:03,150 --> 00:45:12,140
Ако едноставно додадете класа BTN и BTN
стандардно или BTN основно, можете да

932
00:45:12,140 --> 00:45:16,240
се добие било едно од овие копчиња
со овие пред-направени стилови.

933
00:45:16,240 --> 00:45:18,570
И тогаш, ако сте во потрага за
нешто покомплексно отколку едноставно

934
00:45:18,570 --> 00:45:24,100
редизајн што w веќе го имаат, во текот на
го вклучите Javascript-јазиче во склопот на врвот ние

935
00:45:24,100 --> 00:45:25,120
имаат еден куп на компоненти.

936
00:45:25,120 --> 00:45:30,410
>> Значи тука имаме транзиции, modals,
dropdowns, јазичиња, и советите.

937
00:45:30,410 --> 00:45:35,530
А објаснувањето е она што се појавува под
глувчето кога ти лебдиш на нешто.

938
00:45:35,530 --> 00:45:40,280
Popovers, сигнали, копчиња, склопувачки
армоники е она што

939
00:45:40,280 --> 00:45:41,190
тие обично се нарекува.

940
00:45:41,190 --> 00:45:43,045
Вртелешки, кој флип
преку, како слики.

941
00:45:43,045 --> 00:45:52,190

942
00:45:52,190 --> 00:45:54,840
>> Значи тоа се компонентите
на подигање.

943
00:45:54,840 --> 00:45:57,620
Јас би ве охрабруваме да ги
високо одат гледам во нив.

944
00:45:57,620 --> 00:46:01,780
Има вклучите Javascript-компонента
и CSS компонента.

945
00:46:01,780 --> 00:46:03,880
Се чувствуваат слободни да ги користите како сакате.

946
00:46:03,880 --> 00:46:06,730
Ние нема да одат премногу во нив
бидејќи сметаме документацијата

947
00:46:06,730 --> 00:46:09,360
е навистина добро направено.

948
00:46:09,360 --> 00:46:10,540
И је.

949
00:46:10,540 --> 00:46:14,500
Дали имате било какви прашања во врска со тоа?

950
00:46:14,500 --> 00:46:19,430
>> МАЈК Rizzo: Значи како се навистина брзо
страна, на дизајнот на овој веб страница, која

951
00:46:19,430 --> 00:46:21,830
ние брзо се стави заедно за
оваа презентација е

952
00:46:21,830 --> 00:46:24,290
всушност се направи со користење подигање.

953
00:46:24,290 --> 00:46:27,810
Како што можете да видите, кога ќе кликнете на овие
различни јазичиња, ние никогаш не сме всушност

954
00:46:27,810 --> 00:46:30,750
оставајќи им ја таа тековната index.html страница.

955
00:46:30,750 --> 00:46:36,400
Значи она што го имаме е поинаква Divs
во рамките на овој index.html.

956
00:46:36,400 --> 00:46:39,610
А потоа, кога ќе кликнете на различни
табот, тоа е само промена

957
00:46:39,610 --> 00:46:41,590
кој се покажува.

958
00:46:41,590 --> 00:46:47,390
>> Така што тоа им позиции,
менува на HTML кодот на страницата, така што

959
00:46:47,390 --> 00:46:52,330
тековната јазичето е означен како активен, па
се чини поинаку и изглед

960
00:46:52,330 --> 00:46:52,820
навистина убаво.

961
00:46:52,820 --> 00:46:57,260
>> TOMAS REIMERS: Значи тоа беше направено
без нас пишување речиси секој CSS.

962
00:46:57,260 --> 00:47:01,440
Ние исто така ја видите насловот во склопот на врвот,
кои бои се од нас.

963
00:47:01,440 --> 00:47:04,800
Но, вистинските тоа ставање на
врвот на страната и правење на

964
00:47:04,800 --> 00:47:06,660
тоа дојдете беше подигање.

965
00:47:06,660 --> 00:47:09,720
А потоа дури и за друга библиотека - ова
не е еден зборувавме, но една

966
00:47:09,720 --> 00:47:11,580
можете да ги Google, ако сакате.

967
00:47:11,580 --> 00:47:15,130
Ова се нарекува prettify.js.

968
00:47:15,130 --> 00:47:20,650
И тоа ќе синтаксичко вашиот код
за вас користење на двете CSS и JavaScript.

969
00:47:20,650 --> 00:47:23,480

970
00:47:23,480 --> 00:47:27,070
>> Последното нешто што сакаме да се зборува за
пред да го пуштите надвор во

971
00:47:27,070 --> 00:47:30,620
светот да се погледне во библиотеките да дознаам
како да ги користите и да, се надевам,

972
00:47:30,620 --> 00:47:34,640
прочитате документацијата и да се најде она што го
Потребата е како да се најде библиотеки.

973
00:47:34,640 --> 00:47:37,000
Па првиот е само сме
ќе им помогнам на Google.

974
00:47:37,000 --> 00:47:37,810
Одете на Google.

975
00:47:37,810 --> 00:47:41,150
>> Тоа е буквално она што го правиме кога ќе
треба да се направи нешто е ние на Google.

976
00:47:41,150 --> 00:47:44,730
Дали постои JavaScript библиотека која
ми дозволува да се манипулира време во

977
00:47:44,730 --> 00:47:45,400
Корисен начин?

978
00:47:45,400 --> 00:47:49,510
Значи, ако знам дека некои корисник создавање
сметка тука, и ова е

979
00:47:49,510 --> 00:47:53,010
тековното време, како можам да се пресмета
Разликата со тоа, без да се

980
00:47:53,010 --> 00:47:55,020
пресмета тоа самата себе?

981
00:47:55,020 --> 00:47:59,630
Значи ова е всушност вообичаена работа,
Го вклучите Javascript-time библиотека.

982
00:47:59,630 --> 00:48:02,440
И тука сме Moment.js--
најпопуларниот еден.

983
00:48:02,440 --> 00:48:06,530
>> Ако ние треба библиотека да се манипулира
нешто како боја да биде во можност да

984
00:48:06,530 --> 00:48:08,650
генерираат еден куп на случајни бои -

985
00:48:08,650 --> 00:48:10,660
евентуално, да генерира
стил или нешто -

986
00:48:10,660 --> 00:48:13,480
ние би можеле да Google нешто како
Го вклучите Javascript-боја библиотека.

987
00:48:13,480 --> 00:48:15,620
И сигурен сум дека ќе pop-up со
илјада и една од нив.

988
00:48:15,620 --> 00:48:18,290

989
00:48:18,290 --> 00:48:21,410
Вие сте добредојдени да се чита преку нив.

990
00:48:21,410 --> 00:48:24,610
>> Па повеќето работи - кога ќе ги најдете -
се случува да биде домаќин на една од

991
00:48:24,610 --> 00:48:25,920
сајтови кои домаќин код.

992
00:48:25,920 --> 00:48:26,960
Тие се неколку популарни оние.

993
00:48:26,960 --> 00:48:30,870
Најпопуларните, од страна на
далеку, е github.com.

994
00:48:30,870 --> 00:48:35,300
И ако одите на GitHub тоа е всушност
каде домаќин беше нормализира.

995
00:48:35,300 --> 00:48:36,950
Значи, ако сакате да се вратиме на оној.

996
00:48:36,950 --> 00:48:38,135
Да им покажеме дека.

997
00:48:38,135 --> 00:48:40,516
>> МАЈК Rizzo: И тоа е всушност каде
ова е хостиран исто така, ако сте забележале.

998
00:48:40,516 --> 00:48:41,000
>> TOMAS REIMERS: Да.

999
00:48:41,000 --> 00:48:49,078
Значи, ако одите во текот да се нормализира
и да одат во Github.

1000
00:48:49,078 --> 00:48:51,936
Беа е тоа?

1001
00:48:51,936 --> 00:48:54,620
>> МАЈК Rizzo: Тоа малку мачка работа
е симбол Github.

1002
00:48:54,620 --> 00:48:56,330
>> TOMAS REIMERS: О.

1003
00:48:56,330 --> 00:49:02,180
Па GitHub користи метод наречен
Git за чување код.

1004
00:49:02,180 --> 00:49:05,150
Е ти не знаеш што е тоа или
тоа ви плаши, тоа е во ред.

1005
00:49:05,150 --> 00:49:16,100
Вие не треба да се знае што Git е
бидејќи GitHub има копче Превземи

1006
00:49:16,100 --> 00:49:17,200
во долниот десен.

1007
00:49:17,200 --> 00:49:21,350
>> Од друга корисна работа за да знаеме
за GitHub е повеќето производи

1008
00:49:21,350 --> 00:49:23,200
ќе има ме читаат.

1009
00:49:23,200 --> 00:49:25,400
И ако тие немаат веб страна,
ме читаат ќе зборуваме за тоа како можете

1010
00:49:25,400 --> 00:49:28,310
инсталирај го, колку го користиш, она што го
не, и така натаму, и така натаму, и така натаму.

1011
00:49:28,310 --> 00:49:31,033
Она што ние сме во основа е
одење вас преку.

1012
00:49:31,033 --> 00:49:32,326
>> МАЈК Rizzo: Напуштањето интернет.

1013
00:49:32,326 --> 00:49:34,020
>> TOMAS REIMERS: Тоа е во ред.

1014
00:49:34,020 --> 00:49:36,980
Последните две работи сакавме
да се зборува за тоа -

1015
00:49:36,980 --> 00:49:38,750
ние разговаравме за Git -

1016
00:49:38,750 --> 00:49:40,290
е смена на проблеми.

1017
00:49:40,290 --> 00:49:43,020
И ова не е како релевантни за
финалниот производ, како што е

1018
00:49:43,020 --> 00:49:44,870
кога ќе го напуштите 50.

1019
00:49:44,870 --> 00:49:48,310
И кога ќе наиде на производи
спроведување библиотеки или спроведување на

1020
00:49:48,310 --> 00:49:50,230
свој проект, си оди
да имаат прашања или сте

1021
00:49:50,230 --> 00:49:51,660
случува да се погледне за прашања.

1022
00:49:51,660 --> 00:49:53,060
>> Повторно, го Google.

1023
00:49:53,060 --> 00:49:54,630
Тоа е буквално она што го правиме.

1024
00:49:54,630 --> 00:49:56,400
Ова ќе звучи глупо.

1025
00:49:56,400 --> 00:49:58,310
Но буквално, ние го Google.

1026
00:49:58,310 --> 00:50:01,810
И повторно, една од првите работи
обично ќе се кандидира во е

1027
00:50:01,810 --> 00:50:06,550
stackoverflow.com, која е прекрасна
прашање и одговор поглед.

1028
00:50:06,550 --> 00:50:10,530
>> Тоа е прекрасно двете затоа што можете
ја објавите прашања и да бараат

1029
00:50:10,530 --> 00:50:12,760
одговори, но исто така и поради
веќе има многу

1030
00:50:12,760 --> 00:50:14,590
претходна пополнети содржина таму.

1031
00:50:14,590 --> 00:50:18,510
Па обично кога на Google програмски
прашање во рамките на првите

1032
00:50:18,510 --> 00:50:22,620
неколку хитови може да имате веќе се кандидира
во неа за време на вашиот проблем комплети.

1033
00:50:22,620 --> 00:50:27,840
>> А потоа, на последната навистина краток работа
е JSFIDDLE, што е - денес ние сме

1034
00:50:27,840 --> 00:50:32,110
се прават многу работа со
Го вклучите Javascript-и HTML, CSS.

1035
00:50:32,110 --> 00:50:39,820
JSFIDDLE е веб стан, што во основа
Ви овозможува да се земе вашата HTML, ВАШИОТ

1036
00:50:39,820 --> 00:50:42,820
Го вклучите Javascript-долниот лев агол, а
вашиот CSS горниот десен агол.

1037
00:50:42,820 --> 00:50:47,840
А потоа може да се создаде брз направат
од неа и да видиме како тоа се поврзува.

1038
00:50:47,840 --> 00:50:50,500
Тоа е многу корисно кога луѓето се обидуваат
да се направи доказ за концепт како

1039
00:50:50,500 --> 00:50:52,910
ова е како ќе се
направи паѓачкото мени.

1040
00:50:52,910 --> 00:50:54,980
Можеби брзо открие или whatever.

1041
00:50:54,980 --> 00:50:56,560
>> МАЈК Rizzo: Значи, да одат
напред и кликнете на ова.

1042
00:50:56,560 --> 00:50:57,820
А брз забелешка -

1043
00:50:57,820 --> 00:51:00,430
каде што, пред да се
прави за клик.

1044
00:51:00,430 --> 00:51:04,380
Излегува JCorey Кореја исто така има вграден
во кликнете настан управувачот тоа што

1045
00:51:04,380 --> 00:51:07,020
користи само поради тоа што бројките си
ќе сакате да го направите многу нешта

1046
00:51:07,020 --> 00:51:08,410
кога ќе сакате да кликнете на нешто.

1047
00:51:08,410 --> 00:51:09,690
>> Слично на тоа, таа исто така има лебдиш.

1048
00:51:09,690 --> 00:51:12,850
Но, за да се добие целосна обемот на
оние, погледнете на jQuery

1049
00:51:12,850 --> 00:51:15,320
документација и направете го тоа.

1050
00:51:15,320 --> 00:51:18,760
Го направив нешто глупаво тука.

1051
00:51:18,760 --> 00:51:21,490
>> TOMAS REIMERS: Значи имам навистина брзо
програмата токму тука, во која се вели

1052
00:51:21,490 --> 00:51:22,640
копчето за клик.

1053
00:51:22,640 --> 00:51:23,890
Тогаш имаме за телефонска линија.

1054
00:51:23,890 --> 00:51:26,810
За i е помала од 404.

1055
00:51:26,810 --> 00:51:29,530
Тоа е само ќе да pop-up
овие пораки на алармирање.

1056
00:51:29,530 --> 00:51:33,425
>> МАЈК Rizzo: И што беше
код 404 застана за во HTML?

1057
00:51:33,425 --> 00:51:34,145
Не се сеќавам некој?

1058
00:51:34,145 --> 00:51:35,450
Не е пронајден, во право.

1059
00:51:35,450 --> 00:51:38,640

1060
00:51:38,640 --> 00:51:40,885
Хром исто така, додаде овој уредни
нешто каде што можете да -

1061
00:51:40,885 --> 00:51:43,430
>> TOMAS REIMERS: Поради луѓето како
Мајк започна да прави овој многу и

1062
00:51:43,430 --> 00:51:47,230
досадни корисници, кој им овозможува на
можете да ја видите информации.

1063
00:51:47,230 --> 00:51:48,286
>> МАЈК Rizzo: Да.

1064
00:51:48,286 --> 00:51:50,690
>> TOMAS REIMERS: Дали имаме било какви прашања
за тоа, за да го вклучите Javascript

1065
00:51:50,690 --> 00:51:53,420
библиотеки, наоѓање на библиотеки, или
Што Веб развој изглед

1066
00:51:53,420 --> 00:51:55,400
како и во реалниот свет?

1067
00:51:55,400 --> 00:51:56,880
Ние сме трчање против време.

1068
00:51:56,880 --> 00:52:00,400
Па не сум сигурен што ние ќе
да имаат време да се спроведе

1069
00:52:00,400 --> 00:52:02,290
освен ако тоа е навистина брзо.

1070
00:52:02,290 --> 00:52:04,580
Дали сме добри?

1071
00:52:04,580 --> 00:52:08,110
>> МАЈК Rizzo: ништо вие момци би сакале
за да ја видите навистина брз во, како, две

1072
00:52:08,110 --> 00:52:09,556
минути или помалку?

1073
00:52:09,556 --> 00:52:10,870
>> TOMAS REIMERS: ништо
можеме да го разјасниме?

1074
00:52:10,870 --> 00:52:12,500
Како да се напише во -

1075
00:52:12,500 --> 00:52:13,260
>> ПУБЛИКАТА: [нечујни]?

1076
00:52:13,260 --> 00:52:16,070
>> МАЈК Rizzo: Да, така that's -

1077
00:52:16,070 --> 00:52:18,065
>> TOMAS REIMERS: Вие само може да се погоди
Контрола-U на веб-сајтот.

1078
00:52:18,065 --> 00:52:19,275
>> МАЈК Rizzo: Ох, не знаев тоа.

1079
00:52:19,275 --> 00:52:22,290
>> TOMAS REIMERS: Мислам, да.

1080
00:52:22,290 --> 00:52:23,300
Контрола-U. Да.

1081
00:52:23,300 --> 00:52:25,970
>> МАЈК Rizzo: О, па тоа е
код за веб-сајт.

1082
00:52:25,970 --> 00:52:29,580
Но, ако навистина сакате да го симнете нашиот
додадени фајлови: и над сè, тоа е хостиран

1083
00:52:29,580 --> 00:52:32,650
на github.com

1084
00:52:32,650 --> 00:52:34,850
>> TOMAS REIMERS: намали моето име -

1085
00:52:34,850 --> 00:52:38,504
Томас Reimers - Slash
CS50 цртичка семинарски.

1086
00:52:38,504 --> 00:52:40,710
>> МАЈК Rizzo: И можете да
најдете сè што постои.

1087
00:52:40,710 --> 00:52:42,310
>> TOMAS REIMERS: Ова е она GitHub
изгледа, патем.

1088
00:52:42,310 --> 00:52:44,910
Значи, повторно, кога ќе видите отворен извор
проект, обично, тие ќе бидат за читање

1089
00:52:44,910 --> 00:52:45,950
мене таму што може да се прочита.

1090
00:52:45,950 --> 00:52:50,200
И ако се вратиме, ќе забележите дека
имате симнување ZIP, кој ќе

1091
00:52:50,200 --> 00:52:52,130
ќе ви овозможи да го симнете изворниот
код за да го вклучите

1092
00:52:52,130 --> 00:52:53,666
производ во вашата работа.

1093
00:52:53,666 --> 00:52:56,890
>> МАЈК Rizzo: Да, и ако ние само кликнете
на index.html навистина брзо -

1094
00:52:56,890 --> 00:52:59,180
>> TOMAS REIMERS: Ќе видиш, тука е
Изворниот код за нашата веб страница.

1095
00:52:59,180 --> 00:53:02,016

1096
00:53:02,016 --> 00:53:06,070
>> МАЈК Rizzo: Исто така, заборавив да им помогнам на право
порано со голема маса што

1097
00:53:06,070 --> 00:53:09,860
вклучен, но таму е исто така на маса
на chmods дека ние се вклучени

1098
00:53:09,860 --> 00:53:13,210
само за вашиот јасност.

1099
00:53:13,210 --> 00:53:16,940
Но, ако ние дојдете сите на патот надолу кон
дното, ние всушност не направи многу

1100
00:53:16,940 --> 00:53:21,160
многу со вклучите Javascript-
работи на сите со ова.

1101
00:53:21,160 --> 00:53:26,610
Тоа е исклучиво од сè
друго што имавме.

1102
00:53:26,610 --> 00:53:28,730
>> Затоа ти благодарам момци за доаѓање
и слушање.

1103
00:53:28,730 --> 00:53:29,830
Се надеваме дека ова беше навистина од голема помош.

1104
00:53:29,830 --> 00:53:33,020
Ако имате било какви JavaScript поврзани
прашања или само сакате да се зборува за

1105
00:53:33,020 --> 00:53:36,240
што друго, како што други кул работи
можете да го направите со JavaScript, ние би сакале

1106
00:53:36,240 --> 00:53:37,186
да разговарам со тебе.

1107
00:53:37,186 --> 00:53:40,010
>> TOMAS REIMERS: Ако имате некое прашање
за вашиот проект или ако тоа може да биде

1108
00:53:40,010 --> 00:53:42,740
релевантни, ние најверојатно ќе се држи околу
малку по ова.

1109
00:53:42,740 --> 00:53:44,640
Но освен тоа, имаат
добар викенд.

1110
00:53:44,640 --> 00:53:45,845
>> МАЈК Rizzo: Да, уживаат.

1111
00:53:45,845 --> 00:53:46,120
Ќе видите момци.

1112
00:53:46,120 --> 00:53:47,370
>> TOMAS REIMERS: Се гледаме.

1113
00:53:47,370 --> 00:53:47,926