1
00:00:00,000 --> 00:00:03,840
>> [Играет музыка]

2
00:00:03,840 --> 00:00:05,770

3
00:00:05,770 --> 00:00:08,690
>> ДАГ Lloyd: Итак, теперь мы старые
профи на веб-программирования, верно?

4
00:00:08,690 --> 00:00:12,140
И мы рассмотрели несколько
языки в отдельных видео.

5
00:00:12,140 --> 00:00:14,690
А теперь давайте сделаем еще один, JavaScript.

6
00:00:14,690 --> 00:00:17,370
>> Первая хорошая новость, JavaScript
это современный программирования

7
00:00:17,370 --> 00:00:21,410
язык так же, как PHP, чьи
Синтаксис является производным от C,

8
00:00:21,410 --> 00:00:22,830
так что это хорошее место, чтобы начать.

9
00:00:22,830 --> 00:00:25,880
Это примерно как старый, как PHP, а также,
Существуя около 20 лет.

10
00:00:25,880 --> 00:00:28,600
Он был изобретен около
в то же время, как PHP.

11
00:00:28,600 --> 00:00:32,240
И JavaScript на самом деле довольно
основополагающее значение для пользовательского опыта

12
00:00:32,240 --> 00:00:32,740
в Интернете.

13
00:00:32,740 --> 00:00:34,448
На самом деле, есть
трех языках, что я

14
00:00:34,448 --> 00:00:38,480
скажет рода составляют
Пользователь опыт взаимодействия

15
00:00:38,480 --> 00:00:42,650
с веб-сайта, HTML,
CSS, JavaScript, и.

16
00:00:42,650 --> 00:00:46,030
И вот теперь давайте поговорим
Немного о JavaScript.

17
00:00:46,030 --> 00:00:50,301
>> Плохая новость, хотя, с JavaScript, это
что он устанавливает много правил для себя,

18
00:00:50,301 --> 00:00:51,300
а затем разрушает их.

19
00:00:51,300 --> 00:00:54,010
И JavaScript действительно может быть
вид вызов, чтобы узнать,

20
00:00:54,010 --> 00:00:57,000
потому что это в отличие от C и
PHP, которые очень структурированы

21
00:00:57,000 --> 00:01:00,270
и имеют очень жесткие правила
о том, как вещи могут работать.

22
00:01:00,270 --> 00:01:03,690
JavaScript имеет вид
из стали настолько гибкими

23
00:01:03,690 --> 00:01:06,650
что, возможно, вещи не собираюсь
работать так, как мы ожидаем, что они,

24
00:01:06,650 --> 00:01:09,830
и, возможно, мы действительно не можем узнать
наш первый язык программирования

25
00:01:09,830 --> 00:01:10,769
как JavaScript.

26
00:01:10,769 --> 00:01:12,810
Так, может быть, потому что это не
установить сам какие-то правила,

27
00:01:12,810 --> 00:01:15,754
и это действительно не
соблюдение хорошие привычки кодирования.

28
00:01:15,754 --> 00:01:18,170
Но теперь, надеюсь, мы разработали
некоторые хорошие привычки кодирования,

29
00:01:18,170 --> 00:01:21,470
и таким образом мы можем начать набег
в JavaScript немного.

30
00:01:21,470 --> 00:01:25,750
>> Чтобы записать JavaScript, похожий на открытии
копирование файла C с точкой C расширением

31
00:01:25,750 --> 00:01:29,770
или PHP файл с расширением точка PHP,
все, что нужно сделать, это открыть файл

32
00:01:29,770 --> 00:01:31,764
с расширением файла точка JS.

33
00:01:31,764 --> 00:01:34,430
Мы не должны иметь какой-то особый
разделители, как мы делали в PHP.

34
00:01:34,430 --> 00:01:36,750
Такого рода углом
Кронштейн знак вопроса PHP

35
00:01:36,750 --> 00:01:40,300
что мы привыкли, что от пути,
Мы говорим нашим браузер, что у нас есть,

36
00:01:40,300 --> 00:01:43,502
JavaScript является в том числе
это в HTML тега,

37
00:01:43,502 --> 00:01:46,210
и мы увидим немного о
как сделать, что через минуту.

38
00:01:46,210 --> 00:01:48,210
>> Другое дело, что делает
JavaScript отличается,

39
00:01:48,210 --> 00:01:50,580
однако, является то, что он работает на стороне клиента.

40
00:01:50,580 --> 00:01:53,430
Так вспоминаю с PHP, что
мы никогда не могли действительно увидеть

41
00:01:53,430 --> 00:01:57,041
РНР, что подчеркнул сайта.

42
00:01:57,041 --> 00:01:59,040
Если мы когда-либо рассматривал
исходный код страницы, мы бы только

43
00:01:59,040 --> 00:02:02,830
посмотреть HTML, который был
генерируемых этой PHP.

44
00:02:02,830 --> 00:02:04,900
Но в JavaScript работает на стороне клиента.

45
00:02:04,900 --> 00:02:06,710
Ваш JavaScript, работает на вашем компьютере.

46
00:02:06,710 --> 00:02:09,050
И вот почему вы можете сделать
вещи, как добавить блокаторы.

47
00:02:09,050 --> 00:02:09,550
Правильно?

48
00:02:09,550 --> 00:02:12,704
Блокировка рекламы обычно делается
убийство все JavaScript

49
00:02:12,704 --> 00:02:14,370
что работает на определенном сайте.

50
00:02:14,370 --> 00:02:19,000
И потому, что он должен
запустить на клиентском компьютере стороне,

51
00:02:19,000 --> 00:02:21,910
вы можете просто остановить
JavaScript для запуска полностью.

52
00:02:21,910 --> 00:02:27,030
Это также означает, что когда вы используете
сайт, который включает в себя JavaScript,

53
00:02:27,030 --> 00:02:32,450
Вы должны отправить источник JavaScript
Код, как часть вашего ответа HTTP

54
00:02:32,450 --> 00:02:34,159
клиенту, когда они запрашивают их.

55
00:02:34,159 --> 00:02:35,950
И поэтому вы можете не
хотите использовать JavaScript

56
00:02:35,950 --> 00:02:38,395
сделать действительно чувствительные вещи
как проходящего информации

57
00:02:38,395 --> 00:02:41,020
о паролях пользователей спине и
вперед, потому что они на самом деле

58
00:02:41,020 --> 00:02:45,610
собирается получить весь исходный код,
не только HTML, который генерируется,

59
00:02:45,610 --> 00:02:49,030
такие, как было бы в случае с скажем PHP.

60
00:02:49,030 --> 00:02:51,620
>> Так как мы включать JavaScript
в нашем HTML начать?

61
00:02:51,620 --> 00:02:54,520
Ну, похож на CSS, на самом деле,
является своего рода, как мы делаем это здесь.

62
00:02:54,520 --> 00:02:56,190
С помощью CSS мы имеем теги стиль.

63
00:02:56,190 --> 00:03:00,760
И внутри этих тегов стилей,
мы можем определить лист CSS стиль.

64
00:03:00,760 --> 00:03:03,450
Аналогично с JavaScript
мы можем открыть теги сценария,

65
00:03:03,450 --> 00:03:06,660
другой тег HTML мы не
говорить о нашей HTML видео,

66
00:03:06,660 --> 00:03:09,720
и написать JavaScript в
между этими тегами скриптов.

67
00:03:09,720 --> 00:03:13,960
Также, хотя, как CSS, мы
может связать в нерабочее CSS файлов

68
00:03:13,960 --> 00:03:15,900
и тянуть их в нашей программе, что путь.

69
00:03:15,900 --> 00:03:18,280
С помощью CSS мы можем также,
извините, с JavaScript

70
00:03:18,280 --> 00:03:23,240
мы можем также указать источник
атрибут тега сценария

71
00:03:23,240 --> 00:03:25,720
чтобы связать в JavaScript
отдельно, так что вам не

72
00:03:25,720 --> 00:03:27,680
должны написать его в
между тегами сценарий, мы

73
00:03:27,680 --> 00:03:29,600
может связать его при помощи
что сценарий тег, а также.

74
00:03:29,600 --> 00:03:33,230
И так же, как и в случае с CSS где
мы рекомендовали, что, вероятно,

75
00:03:33,230 --> 00:03:36,090
в ваших интересах, чтобы написать
Ваш CSS в отдельном файле в случае

76
00:03:36,090 --> 00:03:38,500
Вы должны изменить его,
Аналогично мы рекомендуем

77
00:03:38,500 --> 00:03:40,720
что вы пишете
JavaScript в отдельные файлы

78
00:03:40,720 --> 00:03:45,460
и использовать источник теги сценария
атрибут, чтобы связать свой JavaScript

79
00:03:45,460 --> 00:03:49,520
в вашем HTML, веб-страницы.

80
00:03:49,520 --> 00:03:52,610
>> Так JavaScript переменные, мы будем
начать говорить о синтаксисе здесь.

81
00:03:52,610 --> 00:03:53,600
И мы пойдем через
этот вид быстро,

82
00:03:53,600 --> 00:03:56,640
потому что мы сделали это в PHP, так
все это должно быть довольно знакомым.

83
00:03:56,640 --> 00:03:59,490
Так переменные в JavaScript являются
очень похож на РНР переменные.

84
00:03:59,490 --> 00:04:03,270
Там нет спецификатор типа, и
когда вы вводите переменную,

85
00:04:03,270 --> 00:04:05,070
Вы префикс с вар ключевое слово.

86
00:04:05,070 --> 00:04:07,750
В PHP мы что-то сделать
как это, знак доллара х.

87
00:04:07,750 --> 00:04:09,950
Вот как мы указали
переменная, но нет, мы

88
00:04:09,950 --> 00:04:12,060
не упоминают тип
переменной вообще.

89
00:04:12,060 --> 00:04:15,124
Мы хотели бы сказать что-то вроде
Знак доллара х равен 44, в PHP.

90
00:04:15,124 --> 00:04:17,040
Если мы делали то
То же самое в JavaScript,

91
00:04:17,040 --> 00:04:19,589
мы бы сказали, вар х равен 44.

92
00:04:19,589 --> 00:04:22,780
Так вар вроде нашего пути
введения переменной.

93
00:04:22,780 --> 00:04:26,850
Это, возможно, немного более понятным
чем просто доллара переменной знаком.

94
00:04:26,850 --> 00:04:29,080
>> Опять же, поскольку нет никаких
типы данных, мы могли бы сделать это

95
00:04:29,080 --> 00:04:34,490
с любым типом данных, строки,
что-нибудь еще все будет вар.

96
00:04:34,490 --> 00:04:37,260
Условные, все наши
старые друзья из C и PHP

97
00:04:37,260 --> 00:04:41,640
по-прежнему доступны, так что у нас есть, если
иначе, если, иначе, выключатель и вопрос

98
00:04:41,640 --> 00:04:42,240
знак двоеточия.

99
00:04:42,240 --> 00:04:45,890
Переключатель оставаясь гибким, как это
был в PHP, но все из них вы

100
00:04:45,890 --> 00:04:46,930
знакомы с сейчас.

101
00:04:46,930 --> 00:04:49,900
И точно так же с петли
старые фавориты время,

102
00:04:49,900 --> 00:04:52,700
сделать время, и по-прежнему доступны для нас.

103
00:04:52,700 --> 00:04:55,880
Так, мы уже знаем много из
Основной JavaScript рода основ

104
00:04:55,880 --> 00:05:01,800
просто в силу того, совсем немного
знания теперь о С и PHP.

105
00:05:01,800 --> 00:05:03,670
>> А как насчет функций в JavaScript?

106
00:05:03,670 --> 00:05:08,199
Ну, похож на PHP каждый функция
введены с функцией ключевое слово.

107
00:05:08,199 --> 00:05:10,740
Вы говорите, функции, а затем вам
начать определить свою функцию.

108
00:05:10,740 --> 00:05:12,531
Что немного отличается
о JavaScript,

109
00:05:12,531 --> 00:05:15,700
хотя это способность иметь
то, что называется анонимной функцией.

110
00:05:15,700 --> 00:05:18,880
Таким образом, вы можете определить функции
которые не имеют названия.

111
00:05:18,880 --> 00:05:21,222
Это то, что мы
действительно не видел раньше.

112
00:05:21,222 --> 00:05:23,430
Мы действительно использовать концепцию
из анонимной функции

113
00:05:23,430 --> 00:05:27,880
чуть позже в этом
видео, потому что это будет

114
00:05:27,880 --> 00:05:31,530
сделать немного больше смысла в контексте
когда мы видим его в конкретной ситуации

115
00:05:31,530 --> 00:05:33,120
что я созданный здесь.

116
00:05:33,120 --> 00:05:35,710
Но давайте просто посмотрим
на каком простого JavaScript

117
00:05:35,710 --> 00:05:37,850
функция может выглядеть.

118
00:05:37,850 --> 00:05:40,610
>> Так что я пошел вперед и
открыл свой CS50 IDE

119
00:05:40,610 --> 00:05:43,690
и я уже запускать Apache
чтобы начать мой сервер работает.

120
00:05:43,690 --> 00:05:46,800
И у меня есть этот файл
открытое называется home.html.

121
00:05:46,800 --> 00:05:48,330
И я буду увеличивать немного здесь.

122
00:05:48,330 --> 00:05:52,090
И в принципе, вы можете видеть
Home.html это просто куча кнопок.

123
00:05:52,090 --> 00:05:55,291
И я утверждая в верхней здесь
что это раздел JavaScript

124
00:05:55,291 --> 00:05:55,790
материалы.

125
00:05:55,790 --> 00:05:59,490
Таким образом, есть куча кнопок здесь,
но то, что эти кнопки на самом деле?

126
00:05:59,490 --> 00:06:03,662
>> Ну, мы направимся к моему IED,
и я home.html открыть здесь.

127
00:06:03,662 --> 00:06:05,620
В самом начале,
вот где я связывая

128
00:06:05,620 --> 00:06:07,500
во всех моих исходных файлов JavaScript.

129
00:06:07,500 --> 00:06:08,000
Правильно?

130
00:06:08,000 --> 00:06:12,440
Так что я anonymous.js, clock.js,
Я использую атрибут источника

131
00:06:12,440 --> 00:06:14,440
в тег сценария, чтобы связать в файле.

132
00:06:14,440 --> 00:06:18,660
Так что я не написал ни
JavaScript непосредственно в этом файле,

133
00:06:18,660 --> 00:06:21,790
но я вытащил во всех
JavaScript я написал отдельно.

134
00:06:21,790 --> 00:06:24,540
И если мы прокрутите вниз здесь, это
все должны выглядеть немного знакомы

135
00:06:24,540 --> 00:06:27,090
с немного нового синтаксиса.

136
00:06:27,090 --> 00:06:32,655
Мы имеем здесь тег заголовка для
функции и затем кнопку.

137
00:06:32,655 --> 00:06:35,530
У меня есть входа, кнопка типа,
и, видимо, когда я нажимаю его,

138
00:06:35,530 --> 00:06:38,130
Я собираюсь позвонить некоторым
функция сигнала тревога дату.

139
00:06:38,130 --> 00:06:41,792
И это, как мы можем рода перепутать
немного JavaScript и HTML.

140
00:06:41,792 --> 00:06:44,500
Они на самом деле играют довольно красиво
вместе, и так, по-видимому, когда

141
00:06:44,500 --> 00:06:48,730
Я нажмите на эту кнопку, я собираюсь
чтобы вызывать некоторые функции оповещения дату.

142
00:06:48,730 --> 00:06:53,660
И точно так же есть я определил поведения
для всех других кнопок, которые

143
00:06:53,660 --> 00:06:56,440
находятся на этой странице home.html,
которые мы будем держать возвращения

144
00:06:56,440 --> 00:06:59,172
чтобы в ходе этого видео.

145
00:06:59,172 --> 00:07:00,880
Но давайте вернемся на
здесь и взглянуть

146
00:07:00,880 --> 00:07:03,850
в clock.js, который является
Файл JavaScript, что я

147
00:07:03,850 --> 00:07:07,370
писал, что есть эта первая функция
мы собираемся, чтобы взглянуть на.

148
00:07:07,370 --> 00:07:11,630
Как вы можете видеть, я начинаю свой JavaScript
функционировать с функцией ключевых слов,

149
00:07:11,630 --> 00:07:14,560
и я дал этот
имя, это называется оповещения Дата.

150
00:07:14,560 --> 00:07:18,710
Внутри есть, я, кажется, создать
Новый локальная переменная называется текущая дата.

151
00:07:18,710 --> 00:07:21,500
И я собираюсь назначить
равное на новую дату.

152
00:07:21,500 --> 00:07:24,430
И мы могли бы получить в много
деталь, как к тому, что дата,

153
00:07:24,430 --> 00:07:27,060
и действительно настолько JavaScript
большой, что мы не можем

154
00:07:27,060 --> 00:07:28,330
охватить все в одном видео.

155
00:07:28,330 --> 00:07:32,220
Но достаточно сказать, это будет
вернуться к мне элемент данных, который

156
00:07:32,220 --> 00:07:35,470
инкапсулирует текущую дату и время.

157
00:07:35,470 --> 00:07:39,100
Я хранения, что в переменной, что я
по-видимому, собирается предупредить текущую дату.

158
00:07:39,100 --> 00:07:41,300
>> Ну, то, что делает предупреждение
текущая дата выглядит?

159
00:07:41,300 --> 00:07:46,460
Давайте взглянем на сам файл
назад на в окне браузера.

160
00:07:46,460 --> 00:07:49,551
Итак, еще раз, это кнопка, что я
связали с этой, по имени функции.

161
00:07:49,551 --> 00:07:51,800
И я нажмите его там и
посмотрите, что он сделал, это насторожило.

162
00:07:51,800 --> 00:07:56,140
Это выскочил этот вид коробки, говоря
что меня текущее время, по-видимому,

163
00:07:56,140 --> 00:07:59,370
это 4 ноября в
10:43:43 утра.

164
00:07:59,370 --> 00:08:02,345
И если я нажимаю его снова, теперь
это спустя несколько секунд, верно?

165
00:08:02,345 --> 00:08:03,720
Так вот все это делает функция.

166
00:08:03,720 --> 00:08:07,670
Когда я нажимаю эту кнопку, его
всплывает предупреждающее сообщение для меня.

167
00:08:07,670 --> 00:08:13,806

168
00:08:13,806 --> 00:08:15,690
Так что на самом деле не
слишком много, чтобы функции

169
00:08:15,690 --> 00:08:19,110
что отличается от PHP,
просто немного нового синтаксиса

170
00:08:19,110 --> 00:08:22,500
который поставляется с работы с JavaScript.

171
00:08:22,500 --> 00:08:24,650
>> Массивы в JavaScript являются
довольно проста.

172
00:08:24,650 --> 00:08:27,200
Чтобы объявить массив, вы используете
синтаксис квадратных скобок

173
00:08:27,200 --> 00:08:30,090
что мы знакомы из PHP.

174
00:08:30,090 --> 00:08:33,432
И похоже на PHP, мы
Также можно смешивать типы данных.

175
00:08:33,432 --> 00:08:35,140
Так что это массив, и
из этих массивов будет

176
00:08:35,140 --> 00:08:36,960
совершенно законным JavaScript.

177
00:08:36,960 --> 00:08:42,500
Один вот и все целые числа, и один, что
смешивают различные типы данных.

178
00:08:42,500 --> 00:08:45,020
>> Что-то очень разные
в JavaScript, правда?

179
00:08:45,020 --> 00:08:47,020
Это понятие объекта.

180
00:08:47,020 --> 00:08:50,240
Так что, возможно, вы слышали о
объектно-ориентированного программирования.

181
00:08:50,240 --> 00:08:53,370
Мы не делаем многое из этого в CS50,
но мы сделаем немного о нем

182
00:08:53,370 --> 00:08:55,670
Здесь в контексте JavaScript.

183
00:08:55,670 --> 00:08:59,100
Теперь JavaScript имеет возможность
вести себя как объектно-ориентированного программирования

184
00:08:59,100 --> 00:09:02,615
языком, но он сам не
исключительно объектно-ориентированный

185
00:09:02,615 --> 00:09:03,490
язык программирования.

186
00:09:03,490 --> 00:09:05,281
И это снова приходит
назад, почему я сказал, это

187
00:09:05,281 --> 00:09:10,610
может быть очень сложным, чтобы узнать
JavaScript, как ваш первый программирования

188
00:09:10,610 --> 00:09:13,890
Язык, потому что это не
действительно подходят конкретной парадигмы.

189
00:09:13,890 --> 00:09:16,430
>> С другой стороны это
функциональный язык программирования.

190
00:09:16,430 --> 00:09:22,270
Если мы хотим, чтобы, функции
вроде большого босса человека, верно?

191
00:09:22,270 --> 00:09:24,410
Они диктуют, что
происходит все остальное.

192
00:09:24,410 --> 00:09:26,600
Мы хотим изменить переменные,
мы называем функции.

193
00:09:26,600 --> 00:09:28,220
Мы делаем то, к функциям.

194
00:09:28,220 --> 00:09:31,250
Объекты вместо, В
объектно-ориентированном языке,

195
00:09:31,250 --> 00:09:35,937
объекты вроде стать звездой и
функции становятся своего рода вторичным.

196
00:09:35,937 --> 00:09:38,270
Но то, что является объектом, то, что
это понятие объекта?

197
00:09:38,270 --> 00:09:40,880
Ну, если это поможет, думаю,
Об этом на первого рода

198
00:09:40,880 --> 00:09:44,540
из, как структуры C или структуры
что мы узнали прежде.

199
00:09:44,540 --> 00:09:47,430
В C, структура содержит
число полей,

200
00:09:47,430 --> 00:09:51,174
и, возможно, сейчас мы могли бы начать
называть эти свойства полей.

201
00:09:51,174 --> 00:09:53,590
Но свойства никогда действительно
стоять на своих собственных, не так ли?

202
00:09:53,590 --> 00:09:56,410
Если я определить структуру для автомобиля
как это со следующими двумя

203
00:09:56,410 --> 00:10:00,750
поля или свойства, один А.Н.
число за год автомобиля

204
00:10:00,750 --> 00:10:04,290
и еще 10 символов
Строка для модели автомобиля,

205
00:10:04,290 --> 00:10:07,150
Я могу сказать, что-то вроде этого,
Я могу объявить новую переменную

206
00:10:07,150 --> 00:10:10,080
типа структура автомобиля Херби.

207
00:10:10,080 --> 00:10:13,730
И тогда я могу что-то сказать
как herbie.year равна 1,963,

208
00:10:13,730 --> 00:10:15,850
и herbie.model равна Beetle.

209
00:10:15,850 --> 00:10:17,000
Ничего страшного.

210
00:10:17,000 --> 00:10:19,680
Я использую поля в
контекст структуры,

211
00:10:19,680 --> 00:10:22,290
но я никогда не мог просто
что-то вроде этого.

212
00:10:22,290 --> 00:10:22,790
Правильно?

213
00:10:22,790 --> 00:10:26,836
Я не могу использовать имя поля
зависит от структуры.

214
00:10:26,836 --> 00:10:28,210
Это своего рода фундаментальной вещи.

215
00:10:28,210 --> 00:10:32,990
>> Так поля является
основополагающее значение для структуры Си

216
00:10:32,990 --> 00:10:39,050
очень похожи на свойства бытия
основополагающее значение для объектов JavaScript.

217
00:10:39,050 --> 00:10:42,080
Но то, что делает их
Особенно интересно

218
00:10:42,080 --> 00:10:46,230
является то, что объекты могут также иметь что
называются методы, которые действительно

219
00:10:46,230 --> 00:10:50,730
просто красивое слово для функций, которые
присущи объекту, а также.

220
00:10:50,730 --> 00:10:55,340
Так что это функция, которая может быть только
вызывается в контексте объекта.

221
00:10:55,340 --> 00:10:59,200
Только объект, который определил
эта функция внутри ИТС,

222
00:10:59,200 --> 00:11:02,020
если вы думаете о
структура, функция

223
00:11:02,020 --> 00:11:05,720
определяется в тех определении
Фигурные скобки структуры.

224
00:11:05,720 --> 00:11:07,980
Так это значит только то что-то
структуре.

225
00:11:07,980 --> 00:11:10,960
И это своего рода то, что мы делаем
Здесь с объектами и методами.

226
00:11:10,960 --> 00:11:13,580
Это в основном, как мы
определения функций,

227
00:11:13,580 --> 00:11:16,670
имеет смысл только на
конкретный объект, и поэтому мы

228
00:11:16,670 --> 00:11:19,440
назвать это методом объекта.

229
00:11:19,440 --> 00:11:23,180
И мы никогда не можем назвать это
Функция зависит от объекта,

230
00:11:23,180 --> 00:11:29,260
так же, как мы не можем сказать, год или модель
зависит от структуры в С

231
00:11:29,260 --> 00:11:32,300
>> Так функциональное программирование
парадигмы выглядеть так.

232
00:11:32,300 --> 00:11:35,450
Функция, а затем, когда вы проходите
в объект в качестве параметра.

233
00:11:35,450 --> 00:11:38,650
В объектно-ориентированного программирования
языки, такого рода получает

234
00:11:38,650 --> 00:11:43,464
перевернулся, и мы будем думать о
это, как это, object.function.

235
00:11:43,464 --> 00:11:45,380
Так он вроде этого точка
Оператор снова подразумевая

236
00:11:45,380 --> 00:11:49,540
что это своего рода имущества
или атрибут самого объекта.

237
00:11:49,540 --> 00:11:53,240
Но это то, что объект
ориентированный язык программирования

238
00:11:53,240 --> 00:11:57,150
может сделать, чтобы сделать функцию
позвонить по методу, снова, что

239
00:11:57,150 --> 00:12:00,260
это просто специальное слово для функции
что присуще объекту.

240
00:12:00,260 --> 00:12:03,440
Это то, что, что
Синтаксис может выглядеть.

241
00:12:03,440 --> 00:12:09,360
И поэтому мы начнем видеть некоторые из
это в контексте JavaScript.

242
00:12:09,360 --> 00:12:12,470
>> Вы также можете думать об объекте
вроде как ассоциативный массив,

243
00:12:12,470 --> 00:12:14,160
который мы знакомы из PHP.

244
00:12:14,160 --> 00:12:17,720
Запомнить ассоциативный массив позволяет
чтобы у нас пары ключ-значение, а не

245
00:12:17,720 --> 00:12:23,040
иметь индексов 0, один, два, три,
и так далее, как мы привыкли с C

246
00:12:23,040 --> 00:12:23,940
массивы.

247
00:12:23,940 --> 00:12:27,472
Ассоциативные массивы можно сопоставить
слова, например, в видео PHP,

248
00:12:27,472 --> 00:12:29,180
мы говорим о
Начинка пиццы.

249
00:12:29,180 --> 00:12:31,180
И таким образом, мы имели массив
называемые пиццы, и мы

250
00:12:31,180 --> 00:12:36,670
был сыр был ключ и $ 8.99 был
значение, а затем пепперони был ключевым,

251
00:12:36,670 --> 00:12:39,190
$ 9.99 был значение, и так далее.

252
00:12:39,190 --> 00:12:43,300
И таким образом мы можем также подумать о
объект рода похожи на ассоциативной

253
00:12:43,300 --> 00:12:43,840
массивом.

254
00:12:43,840 --> 00:12:47,020
И этот синтаксис здесь
будет создавать новый объект

255
00:12:47,020 --> 00:12:50,950
называется Херби с двумя
свойства внутри него.

256
00:12:50,950 --> 00:12:57,310
Год, который присваивается значение 1963,
и модель, которая присваивается строка

257
00:12:57,310 --> 00:12:58,140
Жук.

258
00:12:58,140 --> 00:13:01,770
>> И обратите внимание, вот что я использую
одиночные кавычки в JavaScript.

259
00:13:01,770 --> 00:13:05,570
Вы можете использовать одинарные или двойные кавычки
когда вы говорите о строках.

260
00:13:05,570 --> 00:13:07,772
Это просто традиционно
дело, что в большинстве случаев

261
00:13:07,772 --> 00:13:10,230
когда вы пишете JavaScript,
вы просто использовать одинарные кавычки.

262
00:13:10,230 --> 00:13:15,050
Но я мог бы использовать двойные кавычки здесь, и
что бы прекрасно, как хорошо.

263
00:13:15,050 --> 00:13:17,470
>> Так помним, как в
PHP мы имели это понятие

264
00:13:17,470 --> 00:13:22,730
А для каждого цикла, что позволит нам
перебрать все значения ключа

265
00:13:22,730 --> 00:13:25,270
пары ассоциативной
Массив, потому что мы

266
00:13:25,270 --> 00:13:29,050
не имеют эту способность, чтобы перебирать
через 0, один, два, три, четыре,

267
00:13:29,050 --> 00:13:30,710
и так далее?

268
00:13:30,710 --> 00:13:35,010
JavaScript имеет что-то очень похожее,
но это не называется для каждого цикла,

269
00:13:35,010 --> 00:13:38,960
это называется по петлями.

270
00:13:38,960 --> 00:13:42,890
Так что, если я сказал мне, как
Это, вар ключа в объекте,

271
00:13:42,890 --> 00:13:48,670
это своего рода похожи на говоря
для каждого что-то как-то.

272
00:13:48,670 --> 00:13:53,850
Но все, что я делаю здесь итерации
через все ключи моей объекта.

273
00:13:53,850 --> 00:13:56,070
И внутри фигурных
скобки там, я бы

274
00:13:56,070 --> 00:14:03,410
использовать объект ключ квадратные скобки для обозначения
к значению в этом ключевом месте.

275
00:14:03,410 --> 00:14:05,400
>> Кроме того, существует
даже другой подход.

276
00:14:05,400 --> 00:14:10,880
Если я просто заботятся только о
значения, я могу сказать, ключ объекта,

277
00:14:10,880 --> 00:14:12,360
и просто использовать ключ внутри.

278
00:14:12,360 --> 00:14:17,240
Таким образом, для вар ключа в объект, у меня есть
использовать объект квадратные скобки

279
00:14:17,240 --> 00:14:19,340
Ключ внутри цикла.

280
00:14:19,340 --> 00:14:24,580
Для вар ключ объекта, я могу
просто использовать ключ внутри цикла,

281
00:14:24,580 --> 00:14:29,040
потому что я просто специально
говорить о ценностях там.

282
00:14:29,040 --> 00:14:32,630
>> Так что давайте, может быть, взять
посмотрите на разницу

283
00:14:32,630 --> 00:14:35,670
просто быстро показать вам,
разница между четыре

284
00:14:35,670 --> 00:14:40,730
в себе и для не с очень специфическим
Массив, который мы имеем здесь, неделя массив.

285
00:14:40,730 --> 00:14:43,616
Так что я должен найти новый массив
что я наполнен семи строк,

286
00:14:43,616 --> 00:14:46,240
Понедельник вторник среда,
Четверг, пятница, суббота, воскресенье.

287
00:14:46,240 --> 00:14:50,530
И я хочу, чтобы в настоящее время итерации
через этот массив,

288
00:14:50,530 --> 00:14:53,090
распечатать определенную информацию.

289
00:14:53,090 --> 00:14:58,780
Если я использую для цикла в
распечатать информацию,

290
00:14:58,780 --> 00:15:00,710
что вы думаете, что я собираюсь получить?

291
00:15:00,710 --> 00:15:01,710
Ну, давайте взглянем.

292
00:15:01,710 --> 00:15:05,300
И прежде, чем мы перепрыгнуть
к моему окну браузера,

293
00:15:05,300 --> 00:15:08,090
просто знаю, что
console.log является своего рода один

294
00:15:08,090 --> 00:15:10,630
способ делать печати F в JavaScript.

295
00:15:10,630 --> 00:15:12,040
Но то, что консоль?

296
00:15:12,040 --> 00:15:14,940
Ну, это то, что мы собираемся
идти взглянуть на прямо сейчас.

297
00:15:14,940 --> 00:15:16,850
>> ОК, так что мы сюда
в моем окне браузера,

298
00:15:16,850 --> 00:15:19,410
и я собираюсь открыть
до моих инструментов разработчика.

299
00:15:19,410 --> 00:15:22,290
Опять же, я просто нажимая F12
чтобы открыть инструменты разработчика.

300
00:15:22,290 --> 00:15:25,670
И заметьте, что здесь на
топ я выбрал консоль.

301
00:15:25,670 --> 00:15:28,480
Так что это понятие
из консоли разработчика,

302
00:15:28,480 --> 00:15:30,500
и это позволит нам
печатать информацию из,

303
00:15:30,500 --> 00:15:33,000
вроде терминала, но
как вы увидите чуть позже,

304
00:15:33,000 --> 00:15:37,720
мы также можем ввести информацию в
взаимодействовать с нашей веб-странице.

305
00:15:37,720 --> 00:15:42,320
Я собираюсь увеличить немного здесь,
и я собираюсь Теперь нажмите на для теста в.

306
00:15:42,320 --> 00:15:45,230
И четыре test-- Я не собираюсь
показать вам код для него прямо сейчас,

307
00:15:45,230 --> 00:15:47,479
но вы получите его, если вы
скачать исходный код, который

308
00:15:47,479 --> 00:15:50,380
связано с этой video--
Просто для петли в

309
00:15:50,380 --> 00:15:52,610
что мы видели только
Секунду назад на слайде.

310
00:15:52,610 --> 00:15:54,810
>> Так что я собираюсь щелчок, который
Кнопка и здесь,

311
00:15:54,810 --> 00:15:58,440
вот то, что печатается в
Консоль, 0, один, два, три, четыре, пять,

312
00:15:58,440 --> 00:15:58,940
шесть.

313
00:15:58,940 --> 00:16:02,490
Я не печатать информацию
внутри этих местах массива,

314
00:16:02,490 --> 00:16:05,180
потому что я использовал для в петле.

315
00:16:05,180 --> 00:16:10,670
И в теле цикла я
просто распечатать ключ не приемлю ключ.

316
00:16:10,670 --> 00:16:18,600
Но если сейчас я очистить консоль, и я
переключиться на для теста, и четыре из теста

317
00:16:18,600 --> 00:16:22,500
Я говорю, что использовать для петли
вместо этого и распечатать ключ,

318
00:16:22,500 --> 00:16:28,079
если я нажму, что теперь я получаю
фактические элементы внутри моего объекта

319
00:16:28,079 --> 00:16:29,120
или мой массив в этом случае.

320
00:16:29,120 --> 00:16:31,760
Мой массив дней недели.

321
00:16:31,760 --> 00:16:33,480
Я распечатал понедельник,
Вторник Среда.

322
00:16:33,480 --> 00:16:36,930
Так что разница между
а при в петле, которая выводит

323
00:16:36,930 --> 00:16:43,410
только ключи, если вы просто использовать ключ
внутри тела цикла,

324
00:16:43,410 --> 00:16:46,850
и для петли, которая печатает
из значений, если вы используете только

325
00:16:46,850 --> 00:16:48,870
Ключ внутри тела цикла.

326
00:16:48,870 --> 00:16:52,380
>> Ладно, как мы теперь начинаем
конкатенации строк и, возможно, смешивать

327
00:16:52,380 --> 00:16:57,220
некоторые переменные с интерполяцией
как мы были в состоянии сделать в PHP?

328
00:16:57,220 --> 00:16:59,410
Ну, мы довольно хорошо знакомы
с этим из PHP.

329
00:16:59,410 --> 00:17:04,109
Это, как мы хотели бы сделать это с помощью
точка оператор для объединения строк.

330
00:17:04,109 --> 00:17:06,260
В JavaScript, хотя,
мы на самом деле использовать что-то

331
00:17:06,260 --> 00:17:09,290
называется плюс оператор, который
это, может быть, даже немного больше

332
00:17:09,290 --> 00:17:10,470
интуитивно, не так ли?

333
00:17:10,470 --> 00:17:12,609
Мы добавляем кучу
строк вместе.

334
00:17:12,609 --> 00:17:14,520
Итак, давайте голову обратно
и увидеть, что это

335
00:17:14,520 --> 00:17:18,693
будет печатать, если мы пытаемся вывести
вся информация в неделю массива.

336
00:17:18,693 --> 00:17:20,859
Все права, поэтому в здесь
под конкатенации,

337
00:17:20,859 --> 00:17:24,822
У меня есть два варианта, строка здание
V1 и затем строка здание V2.

338
00:17:24,822 --> 00:17:26,530
И мы увидим, почему мы
нужно V2 в секунду.

339
00:17:26,530 --> 00:17:28,610
Но я собираюсь нажать на
Строка здание V1, который

340
00:17:28,610 --> 00:17:30,360
это код, который мы были
только взглянуть на,

341
00:17:30,360 --> 00:17:32,980
console.log со всеми плюсами.

342
00:17:32,980 --> 00:17:35,910
Давайте посмотрим, если печатается
то, что мы ожидали.

343
00:17:35,910 --> 00:17:39,939
>> Понедельник день номер 01 недели,
Вторник, день номер 11 в неделю.

344
00:17:39,939 --> 00:17:41,730
Ну, что я пытался
там делать было получить

345
00:17:41,730 --> 00:17:46,280
это распечатать Понедельник, день номер
Один из них, вторник день номер два.

346
00:17:46,280 --> 00:17:50,140
Но, похоже, я
всегда печати одну.

347
00:17:50,140 --> 00:17:51,260
Ну, почему же?

348
00:17:51,260 --> 00:17:55,600
Ну, оказывается, еще раз взглянуть
в этой маленькой фрагменте кода здесь.

349
00:17:55,600 --> 00:18:00,160
Обратите внимание, что мы используем плюс
оператор в двух разных контекстах.

350
00:18:00,160 --> 00:18:03,221
>> И так вот, где возможно все
что мы вроде говорили,

351
00:18:03,221 --> 00:18:03,970
О, это так здорово.

352
00:18:03,970 --> 00:18:05,910
Мы не занимаемся с типами данных больше.

353
00:18:05,910 --> 00:18:08,220
Но вот где то
что мы теряем типы данных

354
00:18:08,220 --> 00:18:10,960
может на самом деле быть немного
проблемы для нас.

355
00:18:10,960 --> 00:18:16,260
Теперь, что оператор плюс используется для
конкатенации строк и сложения чисел

356
00:18:16,260 --> 00:18:19,550
вместе, JavaScript имеет
чтобы сделать свой лучший предположение

357
00:18:19,550 --> 00:18:22,030
а то, что я хочу, чтобы это сделать для меня.

358
00:18:22,030 --> 00:18:23,900
И в этом случае, это не угадал.

359
00:18:23,900 --> 00:18:29,340
Это просто сцепляются день, который будет
0, один, два, три, четыре, пять или шесть,

360
00:18:29,340 --> 00:18:32,060
и затем он просто объединяются
что и тогда соединяются друг.

361
00:18:32,060 --> 00:18:35,020
Это на самом деле не добавить их вместе.

362
00:18:35,020 --> 00:18:37,320
И поэтому эти языки,
PHP и JavaScript,

363
00:18:37,320 --> 00:18:39,196
что абстрагирует
это понятие типов,

364
00:18:39,196 --> 00:18:40,820
Вы не должны иметь дело с ним больше.

365
00:18:40,820 --> 00:18:43,600
Они до сих пор типы под капотом.

366
00:18:43,600 --> 00:18:46,780
И мы можем, в ситуациях,
как это, использовать этот факт

367
00:18:46,780 --> 00:18:49,240
говоря что-то
как может быть, это, что

368
00:18:49,240 --> 00:18:53,210
говорит JavaScript, к
образом, относиться к этому как целое,

369
00:18:53,210 --> 00:18:57,100
не рассматривать его как строку, даже
хотя мы вместе строк смешивания

370
00:18:57,100 --> 00:18:58,940
и целые здесь.

371
00:18:58,940 --> 00:19:02,204
>> Это просто одна из тех вещей
что, кажется, настолько велик, в контексте

372
00:19:02,204 --> 00:19:04,120
что мы не должны
дело с типами больше,

373
00:19:04,120 --> 00:19:05,828
но иногда вы будете
столкнетесь с ситуацией,

374
00:19:05,828 --> 00:19:09,110
точно как это, где то, что
Вы не должны контролировать типы

375
00:19:09,110 --> 00:19:11,220
может иметь неприятные последствия на вас
если вы не будете осторожны.

376
00:19:11,220 --> 00:19:18,285
И поэтому, если мы поп-обратно к IDE, я
собирается очистить свой пульт снова,

377
00:19:18,285 --> 00:19:20,660
и я собираюсь нажать строку
Здание второй версии, которая

378
00:19:20,660 --> 00:19:23,052
где я использовать эту функцию разбора Int.

379
00:19:23,052 --> 00:19:25,260
Теперь это распечатки
Информация, что я ожидал.

380
00:19:25,260 --> 00:19:29,330
День номер один в понедельник, вторник
день номер два, и так далее.

381
00:19:29,330 --> 00:19:31,170
>> Итак, давайте поговорим о функциях снова.

382
00:19:31,170 --> 00:19:34,790
Я обещал, что мы будет говорить о анонимного
функции, и теперь контекст, что

383
00:19:34,790 --> 00:19:36,360
наконец, прибыл.

384
00:19:36,360 --> 00:19:39,980
Поэтому, прежде чем мы это сделаем, давайте снова говорить
о массивах на секунду.

385
00:19:39,980 --> 00:19:42,120
Так массивы представляют собой особый
Случай объекта.

386
00:19:42,120 --> 00:19:45,180
На самом деле, все в
JavaScript на самом деле объект.

387
00:19:45,180 --> 00:19:47,190
Так функции являются
Особый случай объекта,

388
00:19:47,190 --> 00:19:49,770
целые числа специальная
случай объекта,

389
00:19:49,770 --> 00:19:52,152
но массивы специально
имеют ряд методов.

390
00:19:52,152 --> 00:19:55,110
Помните, потому что они объектов,
они могут иметь свойства и методы.

391
00:19:55,110 --> 00:19:58,600
Они имеют ряд методов, которые
могут быть применены к этим объектам.

392
00:19:58,600 --> 00:20:01,197
Там это метод, называемый
размер, array.size,

393
00:20:01,197 --> 00:20:03,030
которые будут возвращаться в
Вы, как Вы могли бы ожидать

394
00:20:03,030 --> 00:20:05,120
количество элементов в массиве.

395
00:20:05,120 --> 00:20:08,480
array.pop, вроде как
наше понятие появляются от

396
00:20:08,480 --> 00:20:11,110
стека, если вы помните,
из нашего стеки видео,

397
00:20:11,110 --> 00:20:13,810
удаляет последний элемент из массива.

398
00:20:13,810 --> 00:20:17,110
Array.push добавляет новый элемент
до конца массив.

399
00:20:17,110 --> 00:20:20,910
Array.shift является своего рода
как DQ, это сращивания из

400
00:20:20,910 --> 00:20:23,610
самый первый элемент массива.

401
00:20:23,610 --> 00:20:27,549
>> Но есть и другая специальная
Способ массива называется карту.

402
00:20:27,549 --> 00:20:29,340
И это своего рода
интересная концепция.

403
00:20:29,340 --> 00:20:30,930
Так что идея карте?

404
00:20:30,930 --> 00:20:33,880
Вы на самом деле увидите, что это
в ряде других языков,

405
00:20:33,880 --> 00:20:38,550
и мы не говорим о
Сортировать картографов карту здесь,

406
00:20:38,550 --> 00:20:41,480
мы говорим о функции отображения.

407
00:20:41,480 --> 00:20:44,110
В контексте мы
говорим здесь, карта

408
00:20:44,110 --> 00:20:47,950
это спецоперация мы
может выполнять на массив

409
00:20:47,950 --> 00:20:51,630
применять определенную функцию
к каждому элементу этого массива.

410
00:20:51,630 --> 00:20:55,190
и таким образом, мы сказали бы в
этот случай, может быть, array.map,

411
00:20:55,190 --> 00:21:00,330
и внутри него, мы передаем
в карте есть функция, что мы хотим

412
00:21:00,330 --> 00:21:02,430
для нанесения на каждый отдельный элемент.

413
00:21:02,430 --> 00:21:07,299
Так что это своего рода аналогом помощью
петля для перебора каждого элемента

414
00:21:07,299 --> 00:21:09,340
и применить частности
функцию к каждому элементу,

415
00:21:09,340 --> 00:21:14,830
просто JavaScript была построена в это
Понятие отображения, которые могут применяться.

416
00:21:14,830 --> 00:21:19,700
И это большой контекст
говорить об анонимной функции.

417
00:21:19,700 --> 00:21:22,370
>> Так что давайте, у нас есть
этот массив целых чисел.

418
00:21:22,370 --> 00:21:25,370
Это называется НУМС, и он получил пять
вещи в нем, один, два, три, четыре,

419
00:21:25,370 --> 00:21:26,410
5.

420
00:21:26,410 --> 00:21:30,620
Теперь я хочу, чтобы отобразить некоторые
Функция на этом массиве.

421
00:21:30,620 --> 00:21:34,337
Я хочу, чтобы функция применяется
к каждому элементу массива.

422
00:21:34,337 --> 00:21:37,420
Ну, давайте скажем, что то, что я хочу, чтобы
сделать, это просто в два раза все элементы.

423
00:21:37,420 --> 00:21:42,520
Что я мог сделать, это просто использовать цикл
для вар я равна 0, я меньше

424
00:21:42,520 --> 00:21:47,390
или равно 4, я плюс, плюс, и
затем дважды каждый номер.

425
00:21:47,390 --> 00:21:49,580
Но я также могу сделать что-то вроде этого.

426
00:21:49,580 --> 00:21:53,420
Я могу сказать, НУМС ранее был
один два три четыре пять,

427
00:21:53,420 --> 00:21:58,310
Сейчас, однако, я бы хотел, чтобы вы
применить отображение на этом массиве

428
00:21:58,310 --> 00:22:00,400
где я хотел бы вас
удвоить каждый номер.

429
00:22:00,400 --> 00:22:02,540
И это именно то,
то, что здесь происходит.

430
00:22:02,540 --> 00:22:06,870
Но заметьте, что я передаю
в качестве аргумента для отображения.

431
00:22:06,870 --> 00:22:09,080
Это анонимная функция.

432
00:22:09,080 --> 00:22:11,140
И заметьте, я не дал
эта функция имя,

433
00:22:11,140 --> 00:22:13,290
Я только дал ему список параметров.

434
00:22:13,290 --> 00:22:16,370
И так это пример
из анонимной функции.

435
00:22:16,370 --> 00:22:21,270
>> Мы вообще никогда не назвал бы это
функция вне контекста карте.

436
00:22:21,270 --> 00:22:24,110
Мы определяя его в качестве параметра
на карту, и таким образом, мы действительно не

437
00:22:24,110 --> 00:22:27,910
должны иметь для него имя, если
Единственное, что заботится о карте

438
00:22:27,910 --> 00:22:30,339
и это определяется право
там внутри карты.

439
00:22:30,339 --> 00:22:31,880
И так это анонимная функция.

440
00:22:31,880 --> 00:22:34,680
Мы не смогли
сделать это раньше.

441
00:22:34,680 --> 00:22:38,400
Карта некоторую функцию, что
принимает один параметр, Num,

442
00:22:38,400 --> 00:22:41,890
и что, что делает функция
является возвращается Мнимая раз 2.

443
00:22:41,890 --> 00:22:45,330
И так после этого
Отображение был применен,

444
00:22:45,330 --> 00:22:50,090
это теперь какие Nums внешность
как, два, четыре, шесть, восемь, 10.

445
00:22:50,090 --> 00:22:52,090
И мы будем трещать на мой
окно браузера и просто

446
00:22:52,090 --> 00:22:55,240
Взгляни на это
очень быстро, как хорошо.

447
00:22:55,240 --> 00:22:58,000
>> Так что у меня еще одну кнопку здесь
в моей домашней странице называемое двойное.

448
00:22:58,000 --> 00:23:03,570
И когда я нажмите дважды, и он говорит
мне, прежде чем он был один, два, три, четыре,

449
00:23:03,570 --> 00:23:07,250
пять через два, четыре, шесть, восемь, 10.

450
00:23:07,250 --> 00:23:11,930
И если я вернусь и нажмите дважды
снова, два, четыре, шесть, восемь, 10.

451
00:23:11,930 --> 00:23:17,400
А после, четыре,
восемь, 12, 16, а затем 20.

452
00:23:17,400 --> 00:23:20,440
И что я делаю в этой функции?

453
00:23:20,440 --> 00:23:25,210
Ну, если мы просто поп к IDE, и
Я тяну мою анонимную функцию, здесь

454
00:23:25,210 --> 00:23:28,780
на линии семь через 13, я
делать мало-мальски фантазии работу здесь,

455
00:23:28,780 --> 00:23:32,240
но я просто распечатав
что в настоящее время в массиве.

456
00:23:32,240 --> 00:23:36,580
Затем в строке 16, 17,
и 18, есть моя карта.

457
00:23:36,580 --> 00:23:40,930
Это где я применяю эту удвоение
функция каждой элемента.

458
00:23:40,930 --> 00:23:43,530
А потом немного дальше вниз,
Я просто делаю то же самое

459
00:23:43,530 --> 00:23:46,640
Я делал прежде, только теперь я
распечатать содержимое массива

460
00:23:46,640 --> 00:23:48,167
после этого.

461
00:23:48,167 --> 00:23:50,500
Но все, что я сделал здесь
просто использовать анонимную функцию

462
00:23:50,500 --> 00:23:53,640
на карту через весь массив.

463
00:23:53,640 --> 00:23:58,466
>> Так что еще большая тема, чтобы говорить о в
JavaScript является понятие события.

464
00:23:58,466 --> 00:24:01,590
Событие это то, что просто происходит
когда пользователь взаимодействует с вашего веб-

465
00:24:01,590 --> 00:24:04,715
страница, поэтому, возможно, они что-то нажмите,
или, может быть, страница завершения загрузки,

466
00:24:04,715 --> 00:24:07,200
или, может быть, они переехали
их мыши над чем-то,

467
00:24:07,200 --> 00:24:09,290
или они набрали-то
в поле ввода.

468
00:24:09,290 --> 00:24:14,260
Все эти вещи являются события
что происходят на нашей веб-странице.

469
00:24:14,260 --> 00:24:17,460
И JavaScript имеет
Возможность поддерживать что-то

470
00:24:17,460 --> 00:24:21,760
называется обработчик событий, который
является функцией обратного вызова,

471
00:24:21,760 --> 00:24:23,329
реагирует на HTML случае.

472
00:24:23,329 --> 00:24:24,620
И то, что функция обратного вызова?

473
00:24:24,620 --> 00:24:27,328
Ну, это вообще просто еще один
имя для анонимной функции.

474
00:24:27,328 --> 00:24:30,170
Это функция, которая
реагирует на события.

475
00:24:30,170 --> 00:24:34,130
И это, где мы приходим к
Идея связывания определенных функций

476
00:24:34,130 --> 00:24:38,060
в частности атрибута HTML.

477
00:24:38,060 --> 00:24:41,420
Большинство HTML элементы имеют
Поддержка атрибута

478
00:24:41,420 --> 00:24:45,170
что мы не говорим о в HTML
видео что-то вроде мыши на

479
00:24:45,170 --> 00:24:50,540
или при наведении или от нагрузки,
все эти события

480
00:24:50,540 --> 00:24:53,120
что вы можете писать функции
что сделка с этими событиями

481
00:24:53,120 --> 00:24:56,090
когда эти события
происходят на вашей веб-странице.

482
00:24:56,090 --> 00:24:59,170
>> И так может быть, ваш HTML
выглядит следующим образом.

483
00:24:59,170 --> 00:25:02,240
И у меня есть две кнопки здесь,
одна кнопка и кнопка два,

484
00:25:02,240 --> 00:25:04,620
и вот я в настоящее время
не определено иное,

485
00:25:04,620 --> 00:25:11,170
но это где атрибут
Кликните по-видимому, часть моей HTML тега.

486
00:25:11,170 --> 00:25:15,220
Таким образом, очевидно, когда я определяю то, что
происходит внутри этого атрибута,

487
00:25:15,220 --> 00:25:18,590
это будет какой-то JavaScript
функция, которая реагирует на события

488
00:25:18,590 --> 00:25:24,360
предположительно, нажав на
одна кнопка или кнопка два.

489
00:25:24,360 --> 00:25:28,580
>> Что круто об этом что мы
можете написать обработчик события родовой.

490
00:25:28,580 --> 00:25:32,370
И это обработчик события будет
создать объект события.

491
00:25:32,370 --> 00:25:37,000
И объект события скажут нам
какой из двух кнопок была нажата.

492
00:25:37,000 --> 00:25:38,064
Теперь, как это работает?

493
00:25:38,064 --> 00:25:39,730
Ну, это может выглядеть следующим образом.

494
00:25:39,730 --> 00:25:44,860
Таким образом, мы сначала определим наши кнопки
иметь ответ на обратный вызов

495
00:25:44,860 --> 00:25:47,470
функция, которая будет называться
когда кнопка нажата,

496
00:25:47,470 --> 00:25:49,520
мы будем называть оповещения название события.

497
00:25:49,520 --> 00:25:53,320
И заметьте, в обоих случаях мы
проходя по этому параметру событий.

498
00:25:53,320 --> 00:25:55,460
Так мы называем эту функцию
или когда эта функция

499
00:25:55,460 --> 00:26:00,330
срабатывает по событию происходит,
он собирается создать этот объект события

500
00:26:00,330 --> 00:26:03,300
и передать его в качестве
Параметр, чтобы предупредить имя.

501
00:26:03,300 --> 00:26:07,270
И, что объект события
будет содержать информацию

502
00:26:07,270 --> 00:26:09,800
о, какая кнопка была нажата.

503
00:26:09,800 --> 00:26:11,580
И как это сделать?

504
00:26:11,580 --> 00:26:13,654
Ну, это может выглядеть следующим образом.

505
00:26:13,654 --> 00:26:15,570
Так что теперь в моей отдельно
Файл JavaScript, я мог бы

506
00:26:15,570 --> 00:26:17,420
должны найти это
Функция оповещения имя, которое

507
00:26:17,420 --> 00:26:19,500
снова принимает этот параметр события.

508
00:26:19,500 --> 00:26:24,640
А потом здесь, где я обнаружения
Кнопка, которая была вызвана,

509
00:26:24,640 --> 00:26:28,100
вар триггера равна событие
точка исходный элемент.

510
00:26:28,100 --> 00:26:33,150
Что было источником, который создал
этот объект события, который был принят в?

511
00:26:33,150 --> 00:26:36,390
Было ли это одна кнопка или это кнопка два?

512
00:26:36,390 --> 00:26:40,710
>> А потом вот все, что я делаю,
распечатки trigger.innerhtml.

513
00:26:40,710 --> 00:26:43,860
Ну, в данном случае, в этом
Контекст, trigger.innerhtml

514
00:26:43,860 --> 00:26:45,940
это то, что написано на кнопке.

515
00:26:45,940 --> 00:26:48,830
Просто так случилось, если прыгнуть
назад на секунду, что бы

516
00:26:48,830 --> 00:26:51,670
быть то, что в период между этими тегами кнопки.

517
00:26:51,670 --> 00:26:54,150
Это будет одна кнопка или кнопка два.

518
00:26:54,150 --> 00:26:57,320
И давайте взглянем на
как это событие будет обработчик

519
00:26:57,320 --> 00:27:01,080
смотреть, если у нас было это работает на практике.

520
00:27:01,080 --> 00:27:03,850
>> Итак, прежде всего, вы,
открыли events.js,

521
00:27:03,850 --> 00:27:06,517
что файл JavaScript, где
Я определил эту функцию.

522
00:27:06,517 --> 00:27:08,558
И как вы можете видеть, это
в значительной степени именно то, что

523
00:27:08,558 --> 00:27:10,230
мы только что видели на слайде секунду назад.

524
00:27:10,230 --> 00:27:14,890
И я буду переходить к
Главная страница мы использовали.

525
00:27:14,890 --> 00:27:17,660
А у меня вот кнопка
одно и кнопку два.

526
00:27:17,660 --> 00:27:19,820
И я буду нажмите на кнопку один.

527
00:27:19,820 --> 00:27:23,930
Вы нажали на кнопку один, если вы
можно увидеть прямо здесь, в боевой готовности.

528
00:27:23,930 --> 00:27:25,810
ХОРОШО.

529
00:27:25,810 --> 00:27:28,980
Нажмите на кнопку два, вам
нажал на кнопку два.

530
00:27:28,980 --> 00:27:32,150
>> Таким образом, обе кнопки имеют
Вызов же функция, верно?

531
00:27:32,150 --> 00:27:35,840
Они оба были начеку имя
событие, но этот объект события

532
00:27:35,840 --> 00:27:41,900
который создается, когда мы нажимаем на
он говорит нам, какая кнопка была нажата.

533
00:27:41,900 --> 00:27:44,650
Мы не должны написать два отдельных
функции или сделка с наличием

534
00:27:44,650 --> 00:27:46,470
пройти любую дополнительную информацию.

535
00:27:46,470 --> 00:27:48,220
Мы просто полагаться на
то, что JavaScript будет

536
00:27:48,220 --> 00:27:53,772
сделать для нас, что для создания, что
Сортировать объекта события от нашего имени.

537
00:27:53,772 --> 00:27:56,730
Там очень много больше, чтобы JavaScript чем
то, что мы рассмотрели в этом видео,

538
00:27:56,730 --> 00:27:58,521
но имеющие эти
фундаментальное должно вам

539
00:27:58,521 --> 00:28:00,690
довольно длинные пути к
обучение все, что вам

540
00:28:00,690 --> 00:28:04,030
нужно знать об этом
интересный язык.

541
00:28:04,030 --> 00:28:05,000
Я Дуг Ллойд.

542
00:28:05,000 --> 00:28:07,010
Это CS50.

543
00:28:07,010 --> 00:28:09,181