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
п'ять.

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