Відмінності між версіями «JavaScript»

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до навігації Перейти до пошуку
[перевірена версія][очікує на перевірку]
Мітки: Редагування з мобільного пристрою, Редагування через мобільну версію
 
(Не показано 4 проміжні версії ще одного користувача)
Рядок 17: Рядок 17:
 
| website =
 
| website =
 
| wikibooks = JavaScript
 
| wikibooks = JavaScript
|logo caption = Unofficial JavaScript logo}}
+
|logo caption = Unofficial JavaScript logo}}{{Infobox file format
  +
| name =
{{Infobox file format
 
| name = JavaScript
+
| icon =
| icon = [[File:Javascript icon.svg|150px]]
 
 
| logo =
 
| logo =
 
| screenshot =
 
| screenshot =
Рядок 49: Рядок 48:
 
}}
 
}}
 
{{distinguish|Java}}{{distinguish|JScript||4=}}
 
{{distinguish|Java}}{{distinguish|JScript||4=}}
'''JavaScript''' ({{IPAc-en|ˈ|dʒ|ɑː|v|ə|ˌ|s|k|r|ɪ|p|t}}<ref>{{cite web | url= http://dictionary.reference.com/browse/javascript | title= JavaScript | publisher=Dictionary.com | accessdate= 28 квітня 2019}} {{ref-en}}</ref>, [[абревіатура|абр.]] '''JS''')&nbsp;— динамічна, [[Об'єктно-орієнтоване програмування|об'єктно-орієнтована]]<ref name="ECMA-262">{{cite web |url=http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf |title=ECMAScript Language Specification |accessdate=20 серпень 2014 |archiveurl=https://web.archive.org/web/20150412040502/http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf |archivedate=12 квітень 2015 |deadurl=yes }}</ref> [[прототипне програмування|прототипна]] [[мова програмування]]. Реалізація стандарту [[ECMAScript]]. Найчастіше використовується для створення сценаріїв [[Веб-сторінка|веб-сторінок]], що надає можливість на стороні [[Клієнт-серверна архітектура|клієнта]] (пристрої кінцевого користувача) взаємодіяти з користувачем, керувати браузером, [[AJAX|асинхронно]] обмінюватися даними з [[Клієнт-серверна архітектура|сервером]], змінювати [[Об'єктна модель документа|структуру]] та [[Веб-дизайн|зовнішній вигляд]] [[Веб-сторінка|веб-сторінки]].
+
'''JavaScript''' ('''JS''')&nbsp;— динамічна, [[Об'єктно-орієнтоване програмування|об'єктно-орієнтована]]<ref name="ECMA-262">{{cite web |url=http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf |title=ECMAScript Language Specification |accessdate=20 серпень 2014 |archiveurl=https://web.archive.org/web/20150412040502/http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf |archivedate=12 квітень 2015 |deadurl=yes }}</ref> [[прототипне програмування|прототипна]] [[мова програмування]]. Реалізація стандарту [[ECMAScript]]. Найчастіше використовується для створення сценаріїв [[Веб-сторінка|веб-сторінок]], що надає можливість на стороні [[Клієнт-серверна архітектура|клієнта]] (пристрої кінцевого користувача) взаємодіяти з користувачем, керувати браузером, [[AJAX|асинхронно]] обмінюватися даними з [[Клієнт-серверна архітектура|сервером]], змінювати [[Об'єктна модель документа|структуру]] та [[Веб-дизайн|зовнішній вигляд]] [[Веб-сторінка|веб-сторінки]].
  +
 
JavaScript класифікують як [[Прототипне програмування|прототипну]] (підмножина [[Об'єктно-орієнтоване програмування|об'єктно-орієнтованої]]), [[Скриптова мова|скриптову мову]] програмування з динамічною типізацією. Окрім прототипної, JavaScript також частково підтримує інші парадигми програмування ([[Імперативне програмування|імперативну]] та частково [[Функціональне програмування|функціональну]]) і деякі відповідні архітектурні властивості, зокрема: [[Динамічна типізація|динамічна]] та [[Слабка типізація|слабка]] [[Система типізації|типізація]], автоматичне керування пам'яттю, прототипне [[Наслідування (програмування)|наслідування]], [[Функція (програмування)|функції]] як [[Об'єкт першого класу|об'єкти першого класу]].
+
JavaScript класифікують як [[Прототипне програмування|прототипну]] (підмножина [[Об'єктно-орієнтоване програмування|об'єктно-орієнтованої]]), [[Скриптова мова|скриптову мову]] програмування з динамічною типізацією. Окрім прототипної, JavaScript також частково підтримує інші парадигми програмування ([[Імперативне програмування|імперативну]] та частково [[Функціональне програмування|функціональну]]) і деякі відповідні архітектурні властивості, зокрема: [[Динамічна типізація|динамічна]] та слабка
  +
[[Система типізації|типізація]], автоматичне керування пам'яттю, прототипне [[Наслідування (програмування)|наслідування]], [[Функція (програмування)|функції]] як [[Об'єкт першого класу|об'єкти першого класу]].
   
 
Мова JavaScript використовується для:
 
Мова JavaScript використовується для:
Рядок 116: Рядок 116:
   
 
== Використання в HTML ==
 
== Використання в HTML ==
При використанні в рамках технології [[DHTML]] JavaScript код включається в [[HTML]]-код сторінки і виконується [[інтерпретатор]]ом, вбудованим в [[браузер]]. Код JavaScript вставляється в теги <script></script> з обов'язковим по специфікації HTML 4.01 атрибутом type="text/javascript", хоча в більшості браузерів мова сценаріїв за умовчанням саме JavaScript.
+
При використанні в рамках технології [[DHTML]] JavaScript код включається в [[HTML]]-код сторінки і виконується [[інтерпретатор]]ом, вбудованим в [[браузер]]. Код JavaScript вставляється в теги <code><script></code><code></script></code> хоча в більшості браузерів мова сценаріїв за умовчанням саме JavaScript.
   
 
Скрипт, що виводить модальне вікно з класичним написом «Hello, World!» усередині браузера:
 
Скрипт, що виводить модальне вікно з класичним написом «Hello, World!» усередині браузера:
 
<source lang=html4strict>
 
<source lang=html4strict>
<script type="text/javascript">
+
<script>
alert('Hello, World!');
+
alert("Hello, World!");
 
</script>
 
</script>
 
</source>
 
</source>
  +
Слідуючи концепції інтеграції JavaScript в існуючі системи, браузери підтримують включення скрипта, наприклад, в значення атрибуту події:
 
 
Є ще одна можливість підключення JavaScript&nbsp;— написати скрипт окремим файлом, та підключити його за допомогою конструкції:
 
<source lang=html4strict>
 
<script src="text/javascript">//Шлях_до_файла_зі_скриптом
  +
</script>
  +
</source>
  +
 
Слідуючій концепції інтеграції JavaScript в існуючі системи, браузери підтримують включення скрипта, наприклад, в значення атрибуту події:
 
<source lang=html4strict>
 
<source lang=html4strict>
 
<a href="delete.php" onclick="return confirm('Ви впевнені?');">Видалити</a>
 
<a href="delete.php" onclick="return confirm('Ви впевнені?');">Видалити</a>
Рядок 130: Рядок 137:
 
Тут, після натискання на посилання, функція confirm('Ви впевнені?'); викликає модальне вікно з написом «Ви впевнені?», а return false блокує перехід за посиланням. Зрозуміло, цей код працюватиме тільки якщо в браузері є та увімкнена підтримка JavaScript, інакше перехід за посиланням відбудеться без попередження.
 
Тут, після натискання на посилання, функція confirm('Ви впевнені?'); викликає модальне вікно з написом «Ви впевнені?», а return false блокує перехід за посиланням. Зрозуміло, цей код працюватиме тільки якщо в браузері є та увімкнена підтримка JavaScript, інакше перехід за посиланням відбудеться без попередження.
   
  +
===Асинхронні скрипти:defer/async===
Є і третя можливість підключення JavaScript&nbsp;— написати скрипт окремим файлом, та підключити його за допомогою конструкції:
 
  +
Спеціальні атрибути <code>async</code> і <code>defer</code> використовуються для того, щоб поки вантажиться зовнішній скрипт - браузер показав іншу (наступну за ним) частину сторінки. Без них цього не відбувається.
<source lang=html4strict>
 
  +
<script type="text/javascript" src="http://Шлях_до_файла_зі_скриптом"></script>
 
  +
====Атрибут async====
  +
  +
Підтримується всіма браузерами, крім IE9-. Скрипт виконується повністю асинхронно. Тобто, при виявленні {{code|lang=html|code=<script async src = "...">}} браузер не зупиняє обробку сторінки, а спокійно працює далі. Коли скрипт буде завантажений - він виконається.
  +
  +
====Атрибут defer====
  +
Підтримується всіма браузерами, включаючи самі старі IE. Скрипт також виповняеться асинхронно, не заставляє чекати страницу, але є дві відмінності від <code>async</code>.
  +
  +
Перше – браузер гарантує, що відносний порядок скриптів з <code>defer</code> буде збережений.
  +
  +
Тобто, в такому коді (с async) першим працюватиме той скрипт, який раніше загрузиться.
  +
  +
<source lang=html>
  +
<script src="1.js" async></script>
  +
<script src="2.js" async></script>
 
</source>
 
</source>
  +
  +
А в такому коді (з defer) першим спрацює завжди <b>1.js</b>, а скрипт <b>2.js</b>, навіть якщо завантажився раніше, буде його чекати.
  +
  +
<source lang=html>
  +
<script src = "1.js" defer> </ script> <script src = "2.js" defer> </ script>
  +
</source>
  +
  +
Тому атрибут <code>defer</code>використовують в тих випадках, коли другий скрипт <b>2.js</b> залежить від першого <b>1.js</b>, наприклад - використовує щось, описане першим скриптом.
  +
  +
Друга відмінність - скрипт з <code>defer</code> спрацює, коли весь HTML-документ буде оброблений браузером.
  +
  +
Наприклад, якщо документ досить великий ...
  +
  +
<source lang=html>
  +
<script src = "async.js" async> </ script> <script src = "defer.js" defer> </ script>
  +
</source>
  +
  +
... Той скрипт <b>async.js</b> виконається, як тільки завантажиться - можливо, до того, як весь документ готовий. А <b>defer.js</b> почекає готовності всього документа.
  +
  +
Це буває зручно, коли ми в скрипті хочемо працювати з документом, і повинні бути впевнені, що він цілком отриманий.
   
 
== Відлагодження ==
 
== Відлагодження ==

Поточна версія на 06:47, 13 травня 2019

JavaScript
Unofficial JavaScript logo 2.svg
Парадигма:імперативна, елементи функціональної, об'єктно-орієнтована (прототип-орієнтована)
Дата появи:1995
Творці:Брендан Айк
Розробник:Netscape Communications Corporation, Mozilla Foundation
Останній реліз:ECMAScript 2018[1] (червень 2018)
Система типізації:динамічна, качина
Основні реалізації:V8, SpiderMonkey, Rhino, KJS, Carakan, Chakra (Microsoft)
Під впливом від:Scheme, Self, Java, C, Python
Вплинула на:ActionScript, CoffeeScript, Dart, JScript .NET, Objective-J, QML, TypeScript, LiveScript
Сторінка інтернет:developer.mozilla.org/docs/Web/JavaScript
Розширення файлу: .js
MIME-тип: application/javascript
text/javascript (застаріла)[2]
Узагальнений ідентифікатор типу: com.netscape.javascript-source[3]
Тип формату: текстовий файл

JavaScript (JS) — динамічна, об'єктно-орієнтована[4] прототипна мова програмування. Реалізація стандарту ECMAScript. Найчастіше використовується для створення сценаріїв веб-сторінок, що надає можливість на стороні клієнта (пристрої кінцевого користувача) взаємодіяти з користувачем, керувати браузером, асинхронно обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд веб-сторінки.

JavaScript класифікують як прототипну (підмножина об'єктно-орієнтованої), скриптову мову програмування з динамічною типізацією. Окрім прототипної, JavaScript також частково підтримує інші парадигми програмування (імперативну та частково функціональну) і деякі відповідні архітектурні властивості, зокрема: динамічна та слабка типізація, автоматичне керування пам'яттю, прототипне наслідування, функції як об'єкти першого класу.

Мова JavaScript використовується для:

Незважаючи на схожість назв, мови Java та JavaScript є двома різними мовами, що мають відмінну семантику, хоча й мають схожі риси в стандартних бібліотеках та правилах іменування. Синтаксис обох мов отриманий «у спадок» від мови С, але семантика та дизайн JavaScript є результатом впливу мов Self та Scheme.[5]

Історія[ред. | ред. код]

Поява в Netscape[ред. | ред. код]

1995 року компанія Netscape поставила завдання вбудувати мову програмування Scheme чи «якусь схожу» в браузер Netscape. Для цього був запрошений Брендан Айк, американський розробник, що спеціалізувався на системному програмуванні. Також, для прискорення розробки, Netscape почали співробітництво з компанією Sun Microsystems.

З часом, концепція розроблюваної мови програмування була розширена до можливості використання безпосередньо в HTML-коді сторінки. Компанії мали на меті створити мову, що могла зв'язати різні частини веб-сайтів: зображень, Java-аплетів, об'єктної моделі документа. Ця мова повинна була стати зручною для веб-дизайнерів та некваліфікованих програмістів. Робочою назвою нової мови була Mocha, яка була змінена на LiveScript в перших двох бета-версіях браузера Netscape 2.0. А дещо пізніше, користуючись популярністю бренду Java, LiveScript був перейменований на JavaScript і третя бета-версія (2.0B3) Netscape 2.0 вже вийшла з сучасною назвою[6][7]. Для цього була придбана відповідна ліцензія у компанії Sun Microsystems, що володіла брендом Java.

1992 року компанією Nombas була розроблена скриптова мова програмування Cmm (англ. С-minus-minus, гра слів навколо мови С++), яка пізніше була перейменована на ScriptEase та могла вбудовуватися в веб-сторінки. Існує хибна думка, що JavaScript був створений під впливом Cmm. Насправді, Брендан Айк ніколи не чув про Cmm до того, як він створив LiveScript[8]. Пізніше, Nombas зупинили розробку Cmm та почали використовувати JavaScript, а згодом брали участь у групі зі стандартизації JavaScript.

Стандартизація[ред. | ред. код]

У листопаді 1996 року Netscape заявила, що відправила JavaScript в організацію Ecma International для розгляду мови як промислового стандарту. В результаті подальшої роботи з'явилась стандартизована мова з назвою ECMAScript. У червні 1997 року, Ecma International опублікувала першу редакцію специфікації ECMA-262. Рік по тому, у червні 1998 року, щоб адаптувати специфікацію до стандарту ISO/IEC-16262, були внесені деякі зміни і випущена друга редакція. Третя редакція побачила світ в грудні 1999 року.[9]

Четверта версія стандарту ECMAScript так і не була закінчена і четверта редакція не вийшла[10]. Тим не менш, п'ята редакція з'явилася в грудні 2009 року.

У червні 2015 року[11] вийшла шоста версія, починаючи з якої комітет ECMAScript прийняв рішення перейти на щорічні оновлення і нова версія отримала назву ES2015. Вона отримала цілу низку нововведень, серед яких: об'єкт Promise для зручного асихронного виконування коду, деструктуруюче присвоювання, стрілочні функції, функції-генератори, шаблонні рядки, оператори оголошення змінних let та const тощо.

Версія ES2016 вийшла у червні 2016 року, серед нововведень оператор піднесення до степеня ** та метод Array.prototype.includes, який перевіряє, чи міститься переданий аргумент в масиві.

Версія ES2017, що вийшла в червні 2017 року і на сьогодні є актуальною версією стандарту додала можливість використання асихронних функцій, «висячих» ком в параметрах функцій, об'єкт Atomics, декільких нових методів для роботи з рядками.

Актуальний стан[ред. | ред. код]

JavaScript, наразі, є однією з найпопулярніших мов програмування в інтернеті[12]. Але спочатку багато професійних програмістів скептично ставилися до мови, цільова аудиторія якої складалася з програмістів-любителів[13]. Поява AJAX змінила ситуацію та повернула увагу професійної спільноти до мови, а подальші модифікації мови за стандартами ES2015 та ES2017 внесли багато корисних можливостей, яких не вистачало для ефективного програмування. В результаті, були розроблені та покращені багато практик використання JavaScript (зокрема, тестування та налагодження), створені бібліотеки та фреймворки, поширилося використання JavaScript поза браузером.

Опис[ред. | ред. код]

JavaScript має низку властивостей об'єктно-орієнтованої мови, але завдяки концепції прототипів підтримка об'єктів в ній відрізняється від традиційних мов ООП. Крім того, JavaScript має ряд властивостей, притаманних функціональним мовам, — функції як об'єкти першого класу, об'єкти як списки, каррінг, анонімні функції, замикання (closures) — що додає мові додаткову гнучкість.

JavaScript має C-подібний синтаксис, але в порівнянні з мовою C має такі корінні відмінності:

JavaScript містить декілька вбудованих об'єктів: Global, Object, Error, Function, Array, String, Boolean, Number, Math, Date, RegExp. Крім того, 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.

Використання в HTML[ред. | ред. код]

При використанні в рамках технології DHTML JavaScript код включається в HTML-код сторінки і виконується інтерпретатором, вбудованим в браузер. Код JavaScript вставляється в теги <script></script> хоча в більшості браузерів мова сценаріїв за умовчанням саме JavaScript.

Скрипт, що виводить модальне вікно з класичним написом «Hello, World!» усередині браузера:

<script>
  alert("Hello, World!");
</script>

Є ще одна можливість підключення JavaScript — написати скрипт окремим файлом, та підключити його за допомогою конструкції:

<script src="text/javascript">//Шлях_до_файла_зі_скриптом
</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 почекає готовності всього документа.

Це буває зручно, коли ми в скрипті хочемо працювати з документом, і повинні бути впевнені, що він цілком отриманий.

Відлагодження[ред. | ред. код]

При розробці великих і нетривіальних веб-застосунків з використанням JavaScript, критично важливим є доступ до інструментів відлагодження. Оскільки браузери, від різних виробників, дещо відрізняються у поведінці JavaScript і реалізації Об'єктної моделі документа, необхідно мати відлагоджувач для кожного браузера, якщо веб-застосування орієнтовано на нього.

На даний час Firefox, Opera, Google Chrome, Edge та Safari мають зневаджувачі для себе.

Також існують такі корисні інструменти, як:

  • ESLint — перевірка якості коду, що сканує JavaScript програму, шукаючи проблеми коду;
  • Prettier — автоматичне форматування коду у коректний вигляд;
  • Babel — транспайлер Javascipt коду до більш старих версій стандартів ECMAScript, який допомагає розробникам використовувати найновіші можливості мови для оточення, що не встигло реалізувати останній стандарт.

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

Кожен блок сценарію інтерпретатор розбирає окремо. На веб-сторінках, коли треба комбінувати блоки JavaScript та HTML, синтаксичні помилки знайти легше, якщо тримати функції сценарію в окремому блоці коду, або (ще краще) використовувати багато малих пов'язаних .js файлів. В такий спосіб синтаксична помилка не спричинятиме «падіння» цілої сторінки, і можна надати допомогу, елегантно вийшовши зі сторінки.

Див. також[ред. | ред. код]

Примітки[ред. | ред. код]

  1. Standard ECMA-262. www.ecma-international.org. Процитовано 28 квітня 2019.  (англ.)
  2. RFC 4329. tools.ietf.org. 
  3. System-Declared Uniform Type Identifiers. Mac OS X Reference Library. Apple Inc. Процитовано 2010-03-05. 
  4. ECMAScript Language Specification. Архів оригіналу за 12 квітень 2015. Процитовано 20 серпень 2014. 
  5. ECMAScript Language Overview (PDF). 2007-10-23. с. 4. Архів оригіналу за 2010-07-13. Процитовано 2009-05-03. 
  6. Press release announcing JavaScript, «Netscape and Sun announce Javascript», PR Newswire, December 4, 1995
  7. TechVision: Innovators of the Net: Brendan Eich and JavaScript. Web.archive.org. Архів оригіналу за 2008-02-08. 
  8. Brent Noorda's Answers on ECMA. Quora. Процитовано 2014-04-13. 
  9. ECMAScript 3rd Edition specification (PDF). Архів оригіналу за 2015-04-12. Процитовано 2013-05-26. 
  10. Documentation. ECMAScript. Архів оригіналу за 2011-04-26. Процитовано 2014-04-13. 
  11. ES6, ES8, ES2017: что такое ECMAScript и чем это отличается от JavaScript. Tproger (ru-RU). 2017-09-07. Процитовано 2017-10-08. 
  12. 15 самых популярных языков программирования по версии GitHub (ru-RU). Процитовано 2017-10-08. 
  13. JavaScript: The World's Most Misunderstood Programming Language. Crockford.com. Процитовано 2009-05-19. 

Посилання[ред. | ред. код]