[Грає музика] 

ДАГ Lloyd: Отже, тепер ми старі профі на веб-програмування, вірно? І ми розглянули кілька мови в окремих відео. А тепер давайте зробимо ще один, JavaScript. 

Перша добра новина, JavaScript це сучасний програмування мову так само, як PHP, чиї Синтаксис є похідним від C, так що це гарне місце, щоб почати. Це приблизно як старий, як PHP, а також, Існуючи близько 20 років. Він був винайдений близько в той же час, як PHP. І JavaScript насправді досить основне значення для користувацького досвіду в Інтернеті. Насправді, є трьох мовах, що я скаже роду складають Користувач досвід взаємодії з веб-сайту, HTML, CSS, JavaScript, і. І ось тепер давайте поговоримо Трохи про JavaScript. 

Погана новина, хоча, з JavaScript, це що він встановлює багато правил для себе, а потім руйнує їх. І JavaScript дійсно може бути вид виклик, щоб дізнатися, бо це на відміну від C і PHP, які дуже структуровані і мають дуже жорсткі правила про те, як речі можуть працювати. JavaScript має вигляд зі сталі настільки гнучкими що, можливо, речі не збираюся працювати так, як ми очікуємо, що вони, і, можливо, ми дійсно не можемо дізнатися наш перший мова програмування як JavaScript. Так, може бути, тому що це не встановити сам якісь правила, і це дійсно не дотримання хороші звички кодування. Але тепер, сподіваюся, ми розробили деякі хороші звички кодування, і таким чином ми можемо почати набіг в JavaScript небагато. 

Щоб записати JavaScript, схожий на відкритті копіювання файлу C з точкою C розширенням або PHP файл з розширенням точка PHP, все, що потрібно зробити, це відкрити файл з розширенням файлу точка JS. Ми не повинні мати якийсь особливий роздільники, як ми робили в PHP. Такого роду кутом Кронштейн знак питання PHP що ми звикли, що від шляху, Ми говоримо нашим браузер, що у нас є, JavaScript є в тому числі це в HTML тега, і ми побачимо трохи про як зробити, що через хвилину. 

Інша справа, що робить JavaScript відрізняється, однак, є те, що він працює на стороні клієнта. Так згадую з PHP, що ми ніколи не могли дійсно побачити РНР, що підкреслив сайту. Якщо ми коли-небудь розглядав вихідний код сторінки, ми б тільки подивитися HTML, який був генерує ця PHP. Але в JavaScript працює на стороні клієнта. Ваш JavaScript, працює на вашому комп'ютері. І ось чому ви можете зробити речі, як додати блокатори. Вірно? Блокування реклами зазвичай робиться вбивство все JavaScript що працює на певному сайті. І тому, що він повинен запустити на клієнтському комп'ютері стороні, ви можете просто зупинити JavaScript для запуску повністю. Це також означає, що коли ви використовуєте сайт, який включає в себе JavaScript, Ви повинні відправити джерело JavaScript Код, як частина вашої відповіді HTTP клієнту, коли вони запитують їх. І тому ви можете не хочете використовувати JavaScript зробити дійсно чутливі речі як проходить інформації про паролі користувачів спині і вперед, тому що вони насправді збирається отримати весь вихідний код, не тільки HTML, який генерується, такі, як було б у випадку з скажімо PHP. 

Так як ми включати JavaScript в нашому HTML почати? Ну, схожий на CSS, насправді, є свого роду, як ми робимо це тут. За допомогою CSS ми маємо теги стиль. І всередині цих тегів стилів, ми можемо визначити лист CSS стиль. Аналогічно з JavaScript ми можемо відкрити теги сценарію, другий тег HTML ми не говорити про нашу HTML відео, і написати JavaScript в між цими тегами скриптів. Також, хоча, як CSS, ми може зв'язати в неробочий CSS файлів і тягнути їх в нашій програмі, що шлях. За допомогою CSS ми можемо також, вибачте, з JavaScript ми можемо також вказати джерело атрибут тега сценарію щоб зв'язати в JavaScript окремо, так що вам не повинні написати його в між тегами сценарій, ми може зв'язати його за допомогою що сценарій тег, а також. І так само, як і у випадку з CSS де ми рекомендували, що, ймовірно, у ваших інтересах, щоб написати Ваш CSS в окремому файлі у разі Ви повинні змінити його, Аналогічно ми рекомендуємо що ви пишете JavaScript в окремі файли і використовувати джерело теги сценарію атрибут, щоб пов'язати свій JavaScript у вашому HTML, веб-сторінки. 

Так JavaScript змінні, ми будемо почати говорити про синтаксис тут. І ми підемо через цей вид швидко, бо ми зробили це в PHP, так все це повинно бути досить знайомим. Так змінні в JavaScript є дуже схожий на РНР змінні. Там немає специфікатор типу, і коли ви вводите змінну, Ви префікс з вар ключове слово. У PHP ми щось зробити як це, знак долара х. Ось як ми вказали змінна, але ні, ми не згадують тип змінної взагалі. Ми хотіли б сказати щось на кшталт Знак долара х дорівнює 44, в PHP. Якщо ми робили те Те ж саме в JavaScript, ми б сказали, вар х дорівнює 44. Так вар зразок нашого шляху введення змінної. Це, можливо, трохи більш зрозумілим ніж просто долара змінної знаком. 

Знову ж таки, оскільки немає ніяких типи даних, ми могли б зробити це з будь-яким типом даних, рядки, що-небудь ще все буде вар. Умовні, всі наші старі друзі з C і PHP раніше доступні, так що у нас є, якщо інакше, якщо, інакше, вимикач і питання знак двокрапки. Перемикач залишаючись гнучким, як це був в PHP, але всі з них ви знайомі з зараз. І точно так само з петлі старі фаворити час, зробити час, і як і раніше доступні для нас. Так, ми вже знаємо багато з Основний JavaScript роду основ просто в силу того, зовсім небагато знання тепер о С і PHP. 

А як щодо функцій в JavaScript? Ну, схожий на PHP кожен функція введені з функцією ключове слово. Ви кажете, функції, а потім вам почати визначити свою функцію. Що трохи відрізняється про JavaScript, хоча це здатність мати те, що називається анонімної функцією. Таким чином, ви можете визначити функції які не мають назви. Це те, що ми дійсно не бачив раніше. Ми дійсно використовувати концепцію з анонімної функції трохи пізніше в цьому відео, тому що це буде зробити трохи більше сенсу в контексті коли ми бачимо його в конкретній ситуації що я створений тут. Але давайте просто подивимося на якому простого JavaScript функція може виглядати. 

Так що я пішов вперед і відкрив свій CS50 IDE і я вже запускати Apache щоб почати мій сервер працює. І в мене є цей файл відкрите називається home.html. І я буду збільшувати трохи тут. І в принципі, ви можете бачити Home.html це просто купа кнопок. І я стверджуючи у верхній тут що це розділ JavaScript матеріали. Таким чином, є купа кнопок тут, але те, що ці кнопки насправді? 

Ну, ми попрямуємо до мого IED, і я home.html відкрити тут. На самому початку, ось де я пов'язуючи у всіх моїх вихідних файлів JavaScript. Вірно? Так що я anonymous.js, clock.js, Я використовую атрибут джерела в тег сценарію, щоб зв'язати в файлі. Так що я не написав ні JavaScript безпосередньо в цьому файлі, але я витягнув у всіх JavaScript я написав окремо. І якщо ми перейдіть вниз тут, це всі повинні виглядати трохи знайомі з трохи нового синтаксису. Ми маємо тут тег заголовка для функції і потім кнопку. У мене є входу, кнопка типу, і, мабуть, коли я натискаю його, Я збираюсь подзвонити деяким функція сигналу тривога дату. І це, як ми можемо роду переплутати трохи JavaScript і HTML. Вони насправді грають досить красиво разом, і так, мабуть, коли Я натисніть на цю кнопку, я збираюся щоб викликати деякі функції оповіщення дату. І точно так само є я визначив поведінки для всіх інших кнопок, які знаходяться на цій сторінці home.html, які ми будемо тримати повернення щоб під час цього відео. Але давайте повернемося на тут і поглянути в clock.js, який є Файл JavaScript, що я писав, що є ця перша функція ми збираємося, щоб поглянути на. Як ви можете бачити, я починаю свій JavaScript функціонувати з функцією ключових слів, і я дав цей ім'я, це називається оповіщення Дата. Всередині є, я, здається, створити Новий локальна змінна називається поточна дата. І я збираюся призначити рівне на нову дату. І ми могли б отримати в багато деталь, як до того, що дата, і дійсно настільки JavaScript великий, що ми не можемо охопити все в одному відео. Але досить сказати, це буде повернутися до мені елемент даних, який інкапсулює поточну дату і час. Я зберігання, що в змінній, що я мабуть, збирається попередити поточну дату. 

Ну, те, що робить попередження поточна дата виглядає? Давайте поглянемо на сам файл назад на у вікні браузера. Отже, ще раз, це кнопка, що я пов'язали з цієї, за імені функції. І я натисніть його там і подивіться, що він зробив, це насторожило. Це вискочив цей вид коробки, кажучи що мене поточний час, мабуть, це 4 листопада в 10:43:43 ранку. І якщо я натискаю його знову, тепер це через кілька секунд, вірно? Так от все це робить функція. Коли я натискаю цю кнопку, його спливає застережливе повідомлення для мене. Так що насправді не занадто багато, щоб функції що відрізняється від PHP, просто трохи нового синтаксису який поставляється з роботи з JavaScript. 

Масиви в JavaScript є досить проста. Щоб оголосити масив, ви використовуєте синтаксис квадратних дужок що ми знайомі з PHP. І схоже на PHP, ми Також можна змішувати типи даних. Так що це масив, і з цих масивів буде абсолютно законним JavaScript. Один ось і всі цілі числа, і один, що змішують різні типи даних. 

Щось дуже різні в JavaScript, правда? Це поняття об'єкта. Так що, можливо, ви чули про об'єктно-орієнтованого програмування. Ми не робимо багато чого з цього в CS50, але ми зробимо трохи про нього Тут в контексті JavaScript. Тепер JavaScript має можливість поводитися як об'єктно-орієнтованого програмування мовою, але він сам не виключно об'єктно-орієнтована мова програмування. І це знову приходить назад, чому я сказав, це може бути дуже складним, щоб дізнатися JavaScript, як ваш перший програмування Мова, тому що це не дійсно підходять конкретної парадигми. 

З іншого боку це функціональний мова програмування. Якщо ми хочемо, щоб, функції зразок великого боса людини, вірно? Вони диктують, що відбувається все інше. Ми хочемо змінити змінні, ми називаємо функції. Ми робимо те, до функцій. Об'єкти замість, В об'єктно-орієнтованому мовою, об'єкти на кшталт стати зіркою і функції стають свого роду вторинним. Але те, що є об'єктом, те, що це поняття об'єкта? Ну, якщо це допоможе, думаю, Про це на першого роду з, як структури C або структури що ми дізналися раніше. У C, структура містить число полів, і, можливо, зараз ми могли б почати називати ці властивості полів. Але властивості ніколи дійсно стояти на своїх власних, чи не так? Якщо я визначити структуру для автомобіля як це з наступними двома поля або властивості, один А.Н. число за рік автомобіля і ще 10 символів Рядок для моделі автомобіля, Я можу сказати, що щось на зразок цього, Я можу оголосити нову змінну типу структура автомобіля Хербі. І тоді я можу щось сказати як herbie.year дорівнює 1,963, і herbie.model дорівнює Beetle. Все добре. Я використовую поля в контекст структури, але я ніколи не міг просто щось на зразок цього. Вірно? Я не можу використовувати ім'я поля залежить від структури. Це свого роду фундаментальної речі. 

Так поля є основне значення для структури Сі дуже схожі на властивості буття основне значення для об'єктів JavaScript. Але те, що робить їх Особливо цікаво є те, що об'єкти можуть також мати що називаються методи, які дійсно просто красиве слово для функцій, які притаманні об'єкту, а також. Так що це функція, яка може бути тільки викликається в контексті об'єкта. Тільки об'єкт, який визначив ця функція всередині ІТС, якщо ви думаєте про структура, функція визначається в тих визначенні Фігурні дужки структури. Так це означає тільки те щось структурі. І це свого роду те, що ми робимо Тут з об'єктами і методами. Це в основному, як ми визначення функцій, має сенс тільки на конкретний об'єкт, і тому ми назвати це методом об'єкта. І ми ніколи не можемо назвати це Функція залежить від об'єкта, так само, як ми не можемо сказати, рік або модель залежить від структури в С 

Так функціональне програмування парадигми виглядати так. Функція, а потім, коли ви проходите в об'єкт як параметр. В об'єктно-орієнтованого програмування мови, такого роду отримує перекинувся, і ми будемо думати про це, як це, object.function. Так він на зразок цього точка Оператор знову маючи на увазі що це свого роду майна або атрибут самого об'єкта. Але це те, що об'єкт орієнтована мова програмування може зробити, щоб зробити функцію зателефонувати за методом, знову, що це просто спеціальне слово для функції що властива об'єкту. Це те, що, що Синтаксис може виглядати. І тому ми почнемо бачити деякі з це в контексті JavaScript. 

Ви також можете думати про об'єкт ніби як асоціативний масив, який ми знайомі з PHP. Запам'ятати асоціативний масив дозволяє щоб у нас пари ключ-значення, а не мати індекс 0, один, два, три, і так далі, як ми звикли з C масиви. Асоціативні масиви можна зіставити слова, наприклад, у відео PHP, ми говоримо про Начинка піци. І таким чином, ми мали масив звані піци, і ми був сир був ключ і $ 8.99 був значення, а потім пепероні був ключовим, $ 9.99 був значення, і так далі. І таким чином ми можемо також подумати про об'єкт роду схожі на асоціативної масивом. І цей синтаксис тут буде створювати новий об'єкт називається Хербі з двома властивості всередині нього. Рік, який присвоюється значення 1963 і модель, яка присвоюється рядок Жук. 

І зверніть увагу, ось що я використовую одиничні лапки в JavaScript. Ви можете використовувати одинарні або подвійні лапки коли ви говорите про рядках. Це просто традиційно справа, що в більшості випадків коли ви пишете JavaScript, ви просто використовувати одинарні лапки. Але я міг би використовувати подвійні лапки тут, і що б прекрасно, як добре. 

Так пам'ятаємо, як в PHP ми мали це поняття А для кожного циклу, що дозволить нам перебрати всі значення ключа пари асоціативної Масив, тому що ми не мають цю здатність, щоб перебирати через 0, один, два, три, чотири, і так далі? JavaScript має щось дуже схоже, але це не називається для кожного циклу, це називається по петлями. Так що, якщо я сказав мені, як Це, вар ключа в об'єкті, це свого роду схожі на кажучи для кожного щось якось. Але все, що я роблю тут ітерації через всі ключі моєї об'єкта. І всередині фігурних дужки там, я б використовувати об'єкт ключ квадратні дужки для позначення до значення в цьому ключовому місці. 

Крім того, існує навіть інший підхід. Якщо я просто дбають тільки про значення, я можу сказати, ключ об'єкта, і просто використовувати ключ всередині. Таким чином, для вар ключа в об'єкт, у мене є використовувати об'єкт квадратні дужки Ключ всередині циклу. Для вар ключ об'єкта, я можу просто використовувати ключ всередині циклу, тому що я просто спеціально говорити про цінності там. 

Так що давайте, можливо, взяти подивіться на різницю просто швидко показати вам, різниця між чотирьох в собі і для не с дуже специфічним Масив, який ми маємо тут, тиждень масив. Так що я повинен знайти новий масив що я наповнений семи рядків, Понеділок, вівторок, середа, Четвер, п'ятниця, субота, неділя. І я хочу, щоб в даний час ітерації через цей масив, роздрукувати певну інформацію. Якщо я використовую для циклу в роздрукувати інформацію, що ви думаєте, що я збираюся отримати? Ну, давайте поглянемо. І перш, ніж ми перестрибнути до мого вікна браузера, просто знаю, що console.log є свого роду одна спосіб робити друку F в JavaScript. Але те, що консоль? Ну, це те, що ми збираємося йти поглянути на прямо зараз. 

ОК, так що ми сюди в моєму вікні браузера, і я збираюся відкрити до моїх інструментів розробника. Знову ж таки, я просто натискаючи F12 щоб відкрити інструменти розробника. І зауважте, що тут на топ я вибрав консоль. Так що це поняття з консолі розробника, і це дозволить нам друкувати інформацію з, зразок терміналу, але як ви побачите трохи пізніше, ми також можемо ввести інформацію в взаємодіяти з нашій веб-сторінці. Я збираюся збільшити трохи тут, і я збираюся Тепер натисніть на для тесту в. А четверо test-- Я не збираюся показати вам код для нього прямо зараз, але ви отримаєте його, якщо ви скачати вихідний код, який пов'язано з цією video-- Просто для петлі в що ми бачили тільки Секунду назад на слайді. 

Так що я збираюся клацання, яке Кнопка і тут, ось те, що друкується в Консоль, 0, один, два, три, чотири, п'ять, шість. Я не друкувати інформацію всередині цих місцях масиву, тому що я використовував для в петлі. І в тілі циклу я просто роздрукувати ключ не припускаю ключ. Але якщо зараз я очистити консоль, і я переключитися на для тіста, і чотири з тіста Я кажу, що використовувати для петлі замість цього і роздрукувати ключ, якщо я натисну, що тепер я отримую фактичні елементи всередині мого об'єкта або мій масив в цьому випадку. Мій масив днів тижня. Я роздрукував понеділок, Вівторок, середа. Так що різниця між а при в петлі, яка виводить тільки ключі, якщо ви просто використовувати ключ всередині тіла циклу, і для петлі, яка друкує зі значень, якщо ви використовуєте тільки Ключ всередині тіла циклу. 

Гаразд, як ми тепер починаємо конкатенації рядків і, можливо, змішувати деякі змінні з інтерполяцією як ми були в змозі зробити в PHP? Ну, ми досить добре знайомі з цим з PHP. Це, як ми хотіли б зробити це за допомогою точка оператор для об'єднання рядків. У JavaScript, хоча, ми насправді використовувати щось називається плюс оператор, який це, можливо, навіть трохи більше інтуїтивно, чи не так? Ми додаємо купу рядків разом. Отже, давайте голову назад і побачити, що це буде друкувати, якщо ми намагаємося вивести вся інформація в тиждень масиву. Всі права, тому в тут під конкатенації, У мене є два варіанти, рядок будівля V1 і потім рядок будівлю V2. І ми побачимо, чому ми потрібно V2 в секунду. Але я збираюся натиснути на Рядок будівлю V1, який це код, який ми були тільки поглянути на, console.log з усіма плюсами. Давайте подивимося, якщо друкується те, що ми очікували. 

Понеділок день номер 01 тижні, Вівторок, день номер 11 на тиждень. Ну, що я намагався там робити було отримати це роздрукувати понеділок, день номер Один з них, вівторок день номер два. Але, схоже, я завжди друку одну. Ну, чому ж? Ну, виявляється, ще раз поглянути в цій маленькій фрагменті коду тут. Зверніть увагу, що ми використовуємо плюс оператор в двох різних контекстах. 

І так от, де можливо все що ми начебто говорили, О, це так здорово. Ми не займаємося з типами даних більше. Але ось де то що ми втрачаємо типи даних може насправді бути трохи проблеми для нас. Тепер, що оператор плюс використовується для конкатенації рядків і додавання чисел разом, JavaScript має щоб зробити свій кращий припущення а те, що я хочу, щоб це зробити для мене. І в цьому випадку, це не вгадав. Це просто зчіплюються день, який буде 0, один, два, три, чотири, п'ять або шість, і потім він просто об'єднуються що і тоді з'єднуються один. Це насправді не додати їх разом. І тому ці мови, PHP і JavaScript, що абстрагує це поняття типів, Ви не повинні мати справу з ним більше. Вони досі типи під капотом. І ми можемо, в ситуаціях, як це, використовувати цей факт кажучи щось як може бути, це, що говорить JavaScript, до чином, ставитися до цього як ціле, не розглядати його як рядок, навіть хоча ми разом рядків змішування й цілі тут. 

Це просто одна з тих речей що, здається, настільки великий, в контексті що ми не повинні справу з типами більше, але іноді ви будете зіткнетеся з ситуацією, точно як це, де те, що Ви не повинні контролювати типи може мати неприємні наслідки на вас якщо ви не будете обережні. І тому, якщо ми поп-назад до IDE, я збирається очистити свій пульт знову, і я збираюся натиснути рядок Будівля другої версії, яка де я використовувати цю функцію розбору Int. Тепер це роздруківки Інформація, що я очікував. День номер один в понеділок, вівторок день номер два, і так далі. 

Отже, давайте поговоримо про функції знову. Я обіцяв, що ми буде говорити про анонімного функції, і тепер контекст, що нарешті, прибув. Тому, перш ніж ми це зробимо, давайте знову говорити про масивах на секунду. Так масиви являють собою особливий Випадок об'єкта. Насправді, все в JavaScript насправді об'єкт. Так функції є Особливий випадок об'єкта, цілі числа спеціальна випадок об'єкта, але масиви спеціально мають ряд методів. Пам'ятайте, бо вони об'єктів, вони можуть мати властивості і методи. Вони мають ряд методів, які можуть бути застосовані до цих об'єктів. Там це метод, званий розмір, array.size, які повертатимуться в Ви, як Ви могли б очікувати кількість елементів у масиві. array.pop, ніби як наше поняття з'являються від стека, якщо ви пам'ятаєте, з нашого стеки відео, видаляє останній елемент з масиву. Array.push додає новий елемент до кінця масив. Array.shift є свого роду як DQ, це зрощування з найперший елемент масиву. 

Але є й інша спеціальна Спосіб масиву називається карту. І це свого роду цікава концепція. Так що ідея карті? Ви насправді побачите, що це в ряді інших мов, і ми не говоримо про Сортувати картографів карту тут, ми говоримо про функції відображення. У контексті ми говоримо тут, карта це спецоперація ми може виконувати на масив застосовувати певну функцію до кожного елементу цього масиву. і таким чином, ми сказали б у цей випадок, може бути, array.map, і всередині нього, ми передаємо в карті є функція, що ми хочемо для нанесення на кожний окремий елемент. Так що це свого роду аналогом допомогою петля для перебору кожного елемента і застосувати зокрема функцію до кожного елементу, просто JavaScript була побудована в це Поняття відображення, які можуть застосовуватися. І це великий контекст говорити про анонімну функції. 

Так що давайте, у нас є цей масив цілих чисел. Це називається НУМС, і він отримав п'ять речі в ньому, один, два, три, чотири, п'ять. Тепер я хочу, щоб відобразити деякі Функція на цьому масиві. Я хочу, щоб функція застосовується до кожного елементу масиву. Ну, давайте скажемо, що те, що я хочу, щоб зробити, це просто в два рази всі елементи. Що я міг зробити, це просто використовувати цикл для вар я дорівнює 0, я менше або дорівнює 4, я плюс, плюс, і потім двічі кожен номер. Але я також можу зробити щось на зразок цього. Я можу сказати, НУМС раніше був один два три чотири п'ять, Зараз, однак, я б хотів, щоб ви застосувати відображення на цьому масиві де я хотів би вас подвоїти кожен номер. І це саме те, те, що тут відбувається. Але зауважте, що я передаю в якості аргументу для відображення. Це анонімна функція. І зауважте, я не дав ця функція ім'я, Я тільки дав йому список параметрів. І так це приклад з анонімної функції. 

Ми взагалі ніколи не назвав би це функція поза контекстом карті. Ми визначаючи його як параметр на карту, і таким чином, ми дійсно не повинні мати для нього ім'я, якщо Єдине, що піклується про мапі і це визначається право там всередині карти. І так це анонімна функція. Ми не змогли зробити це раніше. Карта деякуфункцію, що приймає один параметр, Num, і що, що робить функція є повертається Уявна раз 2. І так після цього Відображення був застосований, це тепер які Nums зовнішність як, два, чотири, шість, вісім, 10. І ми будемо тріщати на мій вікно браузера і просто погляньте на це дуже швидко, як добре. 

Так що в мене ще одну кнопку тут в моїй домашній сторінці зване подвійне. І коли я натисніть двічі, і він говорить мені, перш ніж він був один, два, три, чотири, п`ять через два, чотири, шість, вісім, 10. І якщо я повернуся і натисніть двічі знову, два, чотири, шість, вісім, 10. А після, чотири, восьмій, 12, 16, а потім 20. І що я роблю в цій функції? Ну, якщо ми просто поп до IDE, і Я тягну мою анонімну функцію, тут на лінії сьомій через 13, я робити мало-мальськи фантазії роботу тут, але я просто роздрукувавши що в даний час в масиві. Потім у рядку 16, 17, і 18, є моя карта. Це де я застосовую цю подвоєння функція кожної елемента. А потім трохи далі вниз, Я просто роблю те ж саме Я робив колись, тільки тепер я роздрукувати вміст масиву після цього. Але все, що я зробив тут просто використовувати анонімну функцію на карту через весь масив. 

Так що ще велика тема, щоб говорити про в JavaScript є поняття події. Подія це те, що просто відбувається коли користувач взаємодіє з вашого веб- сторінка, тому, можливо, вони щось натисніть, або, може бути, сторінка завершення завантаження, або, може бути, вони переїхали їх миші над чимось, або вони набрали-то в поле введення. Всі ці речі є події що відбуваються на нашій веб-сторінці. І JavaScript має Можливість підтримувати щось називається обробник подій, який є функцією зворотного виклику, реагує на HTML випадку. І те, що функція зворотного виклику? Ну, це взагалі просто ще один ім'я для анонімної функції. Це функція, яка реагує на події. І це, де ми приходимо до Ідея зв'язування певних функцій зокрема атрибута HTML. Більшість HTML елементи мають Підтримка атрибуту що ми не говоримо про в HTML відео щось на зразок миші на або при наведенні або від навантаження, всі ці події що ви можете писати функції що угода з цими подіями коли ці події відбуваються на вашій веб-сторінці. 

І так може бути, ваш HTML виглядає наступним чином. І в мене є дві кнопки тут, одна кнопка і кнопка два, і ось я в даний час не визначене інше, але це де атрибут Клацніть по-видимому, частина моєї HTML тега. Таким чином, очевидно, коли я визначаю те, що відбувається всередині цього атрибута, це буде якийсь JavaScript функція, яка реагує на події імовірно, натиснувши на одна кнопка або кнопка два. 

Що круто про це що ми можете написати обробник події родової. І це обробник події буде створити об'єкт події. І об'єкт події скажуть нам який із двох кнопок була натиснута. Тепер, як це працює? Ну, це може виглядати наступним чином. Таким чином, ми спочатку визначимо наші кнопки мати відповідь на зворотний виклик функція, яка буде називатися коли кнопка натиснута, ми будемо називати оповіщення назва події. І зауважте, в обох випадках ми проходячи по цьому параметру подій. Так ми називаємо цю функцію або коли ця функція спрацьовує по події відбувається, він збирається створити цей об'єкт події і передати його в якості Параметр, щоб попередити ім'я. І, що об'єкт події міститиме інформацію о, яка кнопка була натиснута. І як це зробити? Ну, це може виглядати наступним чином. Так що тепер у моїй окремо Файл JavaScript, я міг би повинні знайти це Функція сповіщення ім'я, яке знову приймає цей параметр події. А потім тут, де я виявлення Кнопка, яка була викликана, вар тригера дорівнює подія точка вихідний елемент. Що було джерелом, яке створив цей об'єкт події, який був прийнятий в? Чи було це одна кнопка або це кнопка дві? 

А потім ось все, що я роблю, роздруківки trigger.innerhtml. Ну, в даному випадку, в цьому Контекст, trigger.innerhtml це те, що написано на кнопці. Просто так сталося, якщо стрибнути назад на секунду, що б бути те, що в період між цими тегами кнопки. Це буде одна кнопка або кнопка два. І давайте поглянемо на як ця подія буде обробник дивитися, якщо у нас було це працює на практиці. 

Отже, перш за все, ви, відкрили events.js, що файл JavaScript, де Я визначив цю функцію. І як ви можете бачити, це в значній мірі саме те, що ми тільки що бачили на слайді секунду тому. І я буду переходити до Головна сторінка ми використали. А в мене ось кнопка одне і кнопку два. І я буду натисніть на кнопку один. Ви натиснули на кнопку один, якщо ви можна побачити прямо тут, в бойовій готовності. ДОБРЕ. Натисніть на кнопку два, вам натиснув на кнопку два. 

Таким чином, обидві кнопки мають Виклик ж функція, вірно? Вони обидва були напоготові ім'я подія, але цей об'єкт події який створюється, коли ми натискаємо на він говорить нам, яка кнопка була натиснута. Ми не повинні написати два окремі функції або угода з наявністю пройти будь-яку додаткову інформацію. Ми просто покладатися на те, що JavaScript буде зробити для нас, що для створення, що Сортувати об'єкта події від нашого імені. Там дуже багато більше, щоб JavaScript ніж те, що ми розглянули в цьому відео, але мають ці фундаментальне повинно вам досить довгі шляху до навчання все, що вам потрібно знати про це цікавий мову. Я Дуг Ллойд. Це CS50.