Remove ads
JavaScript (JS) — динамічна, об'єктно-орієнтована[5] прототипна мова програмування. Реалізація стандарту ECMAScript. Найчастіше використовується для створення сценаріїв вебсторінок, що надає можливість на боці клієнта (пристрої кінцевого користувача) взаємодіяти з користувачем, керувати браузером, асинхронно обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд вебсторінки.
| JavaScript | |
|---|---|
 | |
| Парадигма | імперативна, елементи функціональної, об'єктно-орієнтована (прототип-орієнтована) |
| Дата появи | 1995 |
| Творці | Брендан Айк |
| Розробник | Netscape Communications Corporation, Mozilla Foundation |
| Останній реліз | ECMAScript 2020[1] (червень 2020) |
| Тестова версія | (27 липня 2010) |
| Система типізації | динамічна, качина |
| Основні реалізації | V8, SpiderMonkey, Rhino, KJS, Carakan, Chakra (Microsoft) |
| Під впливом від | Scheme, Self, Java, C, Python |
| Вплинула на | ActionScript, CoffeeScript, Dart, JScript .NET, Objective-J, QML, TypeScript, LiveScript |
| Звичайні розширення файлів | .js[2] або .mjs[2] |
| Вебсайт | ecma-international.org/publications-and-standards/standards/ecma-262/ |
| Розширення файлу: | .js |
|---|---|
| MIME-тип: | |
| Узагальнений ідентифікатор типу: | com.netscape.javascript-source[4] |
| Тип формату: | текстовий файл |
JavaScript класифікують як прототипну (підмножина об'єктно-орієнтованої), скриптову мову програмування з динамічною типізацією. Окрім прототипної, JavaScript також частково підтримує інші парадигми програмування (імперативну та частково функціональну) і деякі відповідні архітектурні властивості, зокрема: динамічна та слабка типізація, автоматичне керування пам'яттю, прототипне наслідування, функції як об'єкти першого класу.
Remove ads
Мова JavaScript використовується для:
- написання сценаріїв вебсторінок для надання їм інтерактивності
- створення односторінкових та прогресивних вебзастосунків (React, AngularJS, Vue.js)
- програмування на боці сервера (Node.js (Express.js))
- стаціонарних застосунків (Electron[6], NW.js[7])
- мобільних застосунків (React Native[8], Cordova[9])
- сценаріїв в прикладних програмах (наприклад, в програмах зі складу Adobe Creative Suite чи Apache JMeter)
- всередині PDF-документів тощо.
Попри схожість назв, мови Java та JavaScript є двома різними мовами, що мають відмінну семантику, хоча й мають схожі риси в стандартних бібліотеках та правилах іменування. Синтаксис обох мов отриманий «у спадок» від мови С, але семантика та дизайн JavaScript є результатом впливу мов Self та Scheme[10].
Remove ads
Поява в Netscape
1995 року компанія Netscape поставила завдання вбудувати мову програмування Scheme чи «якусь схожу» в браузер Netscape. Для цього був запрошений Брендан Айк, американський розробник, що спеціалізувався на системному програмуванні. Також, для прискорення розробки, Netscape почали співробітництво з компанією Sun Microsystems.
З часом, концепція розроблюваної мови програмування була розширена до можливості використання безпосередньо в HTML-коді сторінки. Компанії мали на меті створити мову, що могла зв'язати різні частини вебсайтів: зображень, Java-аплетів, об'єктної моделі документа. Ця мова повинна була стати зручною для вебдизайнерів та некваліфікованих програмістів. Робочою назвою нової мови була Mocha, яка була змінена на LiveScript в перших двох бета-версіях браузера Netscape 2.0. А дещо пізніше, користуючись популярністю бренду Java, LiveScript був перейменований на JavaScript і третя бета-версія (2.0B3) Netscape 2.0 вже вийшла з сучасною назвою[11][12]. Для цього була придбана відповідна ліцензія у компанії Sun Microsystems, що володіла брендом Java.
1992 року компанією Nombas була розроблена скриптова мова програмування Cmm (англ. С-minus-minus, гра слів навколо мови С++), яка пізніше була перейменована на ScriptEase та могла вбудовуватися в вебсторінки. Існує хибна думка, що JavaScript створено під впливом Cmm. Насправді Брендан Айк ніколи не чув про Cmm до того, як він створив LiveScript[13]. Пізніше, Nombas зупинили розробку Cmm та почали використовувати JavaScript, а згодом брали участь у групі зі стандартизації JavaScript.
Стандартизація
У листопаді 1996 року Netscape заявила, що відправила JavaScript в організацію ECMA для розгляду мови як промислового стандарту. У результаті подальшої роботи з'явилась стандартизована мова з назвою ECMAScript. У червні 1997 року, ECMA опублікувала першу редакцію специфікації ECMA-262. Рік по тому, у червні 1998 року, щоб адаптувати специфікацію до стандарту ISO/IEC-16262, були внесені деякі зміни і випущена друга редакція. Третя редакція побачила світ у грудні 1999 року[14].
Четверта версія стандарту ECMAScript так і не була закінчена і четверта редакція не вийшла[15]. Тим не менш, п'ята редакція з'явилася в грудні 2009 року.
У червні 2015 року[16] вийшла шоста версія, починаючи з якої комітет ECMAScript ухвалив рішення перейти на щорічні оновлення і нова версія отримала назву ES2015. Вона отримала цілу низку нововведень, серед яких: об'єкт Promise для зручного асинхронного виконування коду, деструктуруюче присвоювання, стрілочні функції, функції-генератори, шаблонні рядки, оператори оголошення змінних let та const тощо.
Версія ES2016 вийшла у червні 2016 року[16], серед нововведень оператор піднесення до степеня ** та метод Array.prototype.includes, який перевіряє, чи міститься переданий аргумент в масиві.
Версія ES2017, що вийшла в червні 2017 року[16], додала можливість використання асихронних функцій, «висячих» ком в параметрах функцій, об'єкт Atomics, декількох нових методів для роботи з рядками.
Версія ES2018 вийшла у червні 2018 року[17], додала можливість здійснювати асинхронні ітерації, оператор Spread (…) для роботи з об'єктами та масивами, декілька нових можливостей для регулярних виразів, метод Promise.prototype.finally, який спрацьовує по отриманню Promise'ом статусу «виконаний».
Версія ES2019 вийшла у червні 2019 року[18], серед нововведень: новий тип даних Symbol, нові методи для роботи з рядками та масивами, перетворення об'єктів в масиви і навпаки за допомогою Entries.
Актуальною на даний момент є версія ES2020, що вийшла у червні 2020 року[19]. Вона додала до мови новий тип даних BigInt, оператор ?? для перевірки на null та undefined, можливість використання опціональних значень в об'єкті, динамічні імпорти, об'єкт globalThis, методи String.prototype.matchAll для пошуку у рядку за допомогою регулярних виразів та Promise.allSettled для спрацювання після виконання усіх Promise'ів.
Актуальний стан
JavaScript, наразі, є однією з найпопулярніших мов програмування в інтернеті[20]. В перші роки існування, більшість професійних програмістів скептично ставилися до мови, цільова аудиторія якої складалася з програмістів-аматорів[21]. Поява AJAX змінила ситуацію та звернула увагу професійної спільноти до мови, а її подальші модифікації за стандартами ES6+ внесли багато корисних можливостей, яких не вистачало для ефективного програмування. В результаті, були розроблені та покращені багато практик використання JavaScript (зокрема, тестування та налагодження), створені бібліотеки та фреймворки, поширилося використання JavaScript поза браузером.
В 2023 році, у категорії найпопулярніших мов програмування серед IT-спеціалістів згідно рейтингу IEEE Spectrum, який охоплював 59 мов програмування, топ-5 виглядав так: Python, Java, C++, C, JavaScript[22].
Remove ads
JavaScript має низку властивостей об'єктно-орієнтованої мови, але завдяки концепції прототипів підтримка об'єктів в ній відрізняється від традиційних мов ООП. Крім того, JavaScript має кілька властивостей, притаманних функціональним мовам, — функції як об'єкти першого класу, об'єкти як списки, каррінг, анонімні функції, замикання (closures) — що додає мові додаткову гнучкість.
JavaScript має C-подібний синтаксис, але в порівнянні з мовою C має такі корінні відмінності:
- об'єкти, з можливістю інтроспекції і динамічної зміни типу через механізм прототипів
- функції як об'єкти першого класу
- обробка винятків
- автоматичне приведення типів
- автоматичне збирання сміття
- анонімні та стрілочні функції
JavaScript містить декілька десятків вбудованих об'єктів[23], які поділяються на групи: фундаментальні (Object, Function, Boolean, Symbol), помилки (група об'єктів Error), числа та дати (Number, BigInt, Math Date), текстові (String, RegExp), індексовані (група об'єктів Array), ключові (Map, Set, WeakMap, WeakSet), для роботи з структурованими даними (ArrayBuffer, Atomics, DataView, JSON), абстрактні (Promise, Generator), рефлекційні (Reflect, Proxy), групи Intl та WebAssembly. Крім того, JavaScript містить набір вбудованих операцій, що керують логікою виконання програм. Синтаксис JavaScript в основному відповідає синтаксису мови Java (тобто, зрештою, успадкований від C), але спрощений у порівнянні з ним, щоб зробити мову сценаріїв легкою для вивчення. Так, наприклад, декларація змінної не містить її типу, властивості також не мають типів, а декларація функції може знаходитися в тексті програми після неї.
Семантика мови схожа з мовою Self.
Приклад оголошення і використання класу в JavaScript:
class MyClass {
constructor() {
this.myValue1 = 1;
this.myValue2 = 2;
}
}
const mc = new MyClass();
mc.myValue1 = mc.myValue2 * 2;
Одна з популярних технологій, що дозволила зробити сторінки динамічнішими і забезпечити нові можливості — це динамічне завантаження і вставка даних в документ, що отримала назву AJAX.
Remove ads
При використанні в рамках технології DHTML JavaScript код включається в HTML-код сторінки і виконується інтерпретатором, вбудованим в браузер. Код JavaScript вставляється в теги <script></script> , хоча в більшості браузерів мова сценаріїв за умовчанням саме JavaScript.
Скрипт, що виводить модальне вікно з класичним написом «Hello, World!» усередині браузера:
<script>
alert("Hello, World!");
</script>
Є ще одна можливість підключення JavaScript — написати скрипт окремим файлом, та підключити його за допомогою конструкції:
<script src="шлях/до/файлу/зі/скриптом.js"></script>
Браузери, які дотримуються концепції інтеграції JavaScript в існуючі системи, підтримують включення скрипту, наприклад, у значення атрибуту події:
<a href="delete.php" onclick="return confirm('Ви впевнені?');">Видалити</a>
Після натискання на посилання, функція confirm() викликає модальне вікно з написом «Ви впевнені?», а return false блокує перехід за посиланням. Цей код працюватиме тільки якщо в браузері вбудована та ввімкнена підтримка JavaScript, інакше перехід за посиланням відбудеться без попередження.
Асинхронні скрипти: defer/async
Атрибути async і defer використовуються для ввімкнення асинхронного порядку завантаження скриптів.
Атрибут async
Підтримується всіма браузерами, крім IE9-. Скрипт виконується асинхронно. Тобто, елемент <script async src = "..."> , виконується в момент його отримання браузером.
Атрибут defer
Підтримується всіма браузерами, включно з найстаршими версіями IE. Скрипт також виконується асинхронно, не змушує чекати сторінку, але є дві відмінності від async.
Перша — браузер гарантує, що відносний порядок скриптів з defer буде збережений.
Тобто, в такому коді (з async) першим працюватиме той скрипт, котрий швидше завантажиться.
<script src="1.js" async></script>
<script src="2.js" async></script>
А в такому коді (з defer) першим спрацює завжди 1.js, а скрипт 2.js, навіть якщо завантажився раніше, буде його чекати.
<script src="1.js" defer></script>
<script src="2.js" defer></script>
Тому атрибут deferвикористовують в тих випадках, коли другий скрипт 2.js залежить від першого 1.js, наприклад — використовує щось, описане першим скриптом.
Друга відмінність — скрипт з defer спрацює, коли весь HTML-документ буде оброблений браузером.
Наприклад, якщо документ досить великий…
<script src="async.js" async></script>
<script src="defer.js" defer></script>
…то скрипт async.js виконається, щойно завантажиться, можливо, до того, як весь документ готовий. А defer.js почекає готовності всього документа.
Це буває зручно, коли ми в скрипті хочемо працювати з документом, і повинні бути впевнені, що він цілком отриманий.
Remove ads
Оскільки JavaScript є інтерпретованою мовою програмування, без строгої типізації, і може виконуватися в різних середовищах, кожне зі своїми власними особливостями сумісності, програміст має бути уважним, і повинен перевіряти, що його код виконується як очікується в широкому переліку можливих конфігурацій. Типізація вважається одною з ключових проблем JavaScript, тому восени 2012 року, компанія Microsoft презентувала мову програмування TypeScript, що компілюється в JavaScript та містить декілька важливих для програмістів доповнень, що полегшують розробку.
Remove ads
При розробці великих і нетривіальних вебзастосунків з використанням JavaScript, критично важливим є доступ до інструментів відлагодження. Оскільки браузери, від різних виробників, дещо відрізняються у поведінці JavaScript і реалізації Об'єктної моделі документа, необхідно мати відлагоджувач для кожного браузера, якщо вебзастосунок орієнтовано на нього.
На даний час Firefox, Opera, Google Chrome, Edge та Safari мають зневаджувачі для себе.
Також існують такі корисні інструменти, як:
- ESLint [Архівовано 7 жовтня 2017 у Wayback Machine.] — перевірка якості коду, що сканує JavaScript-програму, шукаючи вади у коді;
- Prettier [Архівовано 13 вересня 2017 у Wayback Machine.] — автоматичне форматування коду у коректний вигляд;
- Babel [Архівовано 15 листопада 2016 у Wayback Machine.] — компілятор JavaScript-коду до старіших версій стандарту ECMAScript, який допомагає розробникам використовувати найновіші можливості мови для оточення, що не встигло реалізувати останній стандарт.
Кожен блок сценарію інтерпретатор розбирає окремо. На вебсторінках, коли треба комбінувати блоки JavaScript та HTML, синтаксичні помилки знайти легше, якщо зберігати функції сценарію в окремому блоці коду, або (ще краще) використовувати багато малих, пов'язаних між собою .js файлів. Таким чином, синтаксична помилка не спричинятиме «падіння» всієї вебсторінки та дозволить сповістити користувача про проблему.
Remove ads
- ActionScript — реалізація від Adobe для Flash.
- WebAssembly
- Rhino — реалізація на Java.
- JScript — реалізація в Internet Explorer від Microsoft.
- DOM — об'єктна модель документа.
- Firebug
- AJAX
- JSON
- Вебдокументація MDN
Remove ads
Wikiwand in your browser!
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
Remove ads