2 липня 2022 р.

Вступ до JavaScript

Давайте розглянемо, що такого особливого в JavaScript, чого ми можемо досягти з її допомогою і які ще технології пов’язані з нею.

Що таке JavaScript?

JavaScript було створено для того, щоб “оживити веб-сторінки”.

Програми на цій мові називаються скриптами. Їх можна писати прямо на сторінці в коді HTML і вони автоматично виконуються при завантаженні сторінки.

Скрипти надаються та виконуються як простий текст. Для запуску їм не потрібна спеціальна підготовка чи компілятор.

У цьому плані JavaScript дуже відрізняється від іншої мови програмування — Java.

Чому цю мову називають JavaScript?

Коли мову JavaScript було створено, спочатку вона мала іншу назву: “LiveScript”. Але тоді була дуже популярна мова програмування Java, тому було вирішено, що позиціонування нової мови як “молодшої сестри” Java допоможе у її популяризації.

Але з часом JavaScript значно вирісла і стала повністю незалежною мовою програмування зі своєю специфікацією ECMAScript, і зараз немає нічого спільного з Java.

Сьогодні JavaScript може виконуватися не тільки у браузері, але й на сервері, або на будь-якому пристрої, який має спеціальну програму — рушій JavaScript.

Браузер має вбудований рушій, який деколи називають “віртуальною машиною JavaScript”.

Різні рушії мають різні “кодові назви”. Наприклад:

  • V8 – в Chrome, Opera та Edge.
  • SpiderMonkey – в Firefox.
  • …Є також інші кодові назви як “Chakra” для IE, “JavaScriptCore”, “Nitro” і “SquirrelFish” для Safari, та інші.

Написані вище терміни добре було б запам’ятати, оскільки вони використовуються в статтях розробників на просторах інтернету. Ми також будемо їх використовувати. Наприклад, якщо “можливість X підтримується в V8”, тоді ймовірно це буде працювати в Chrome, Opera та Edge.

Як рушії працюють?

Рушії складні. Але принцип роботи простий.

  1. Рушій (вбудований, якщо це браузер) читає (“розбирає”) скрипт.
  2. Потім він перетворює (“компілює”) скрипт в тимчасову репрезентацію(“байт код”).
  3. І потім байт код виконується, причому дуже швидко.

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

Що може вбудований у браузер JavaScript?

Сучасний JavaScript – це “безпечна” мова програмування. Вона не надає низькорівневого доступу до пам’яті чи процесора, оскільки початково була створена для браузерів, які цього не потребують.

Можливості JavaScript значно залежать від оточення, в якому вона виконується. Наприклад, Node.js підтримує функції, які дозволяють JavaScript читати/записувати довільні файли, здійснювати мережеві запити, та інше.

Вбудована у браузер JavaScript може робити все, що пов’язано з маніпуляцією веб-сторінками, взаємодією з користувачем та веб-сервером.

Наприклад, JavaScript може:

  • Додавати новий HTML-код на сторінку, змінювати існуючий вміст, змінювати стилі.
  • Реагувати на дії користувача, опрацьовувати натискання миші, переміщення вказівника, натискання на клавіші клавіатури.
  • Відправляти запити через мережу до віддалених серверів, завантажувати і відвантажувати файли (так звані технології AJAX і COMET).
  • Отримувати і надсилати куки, ставити запитання відвідувачам, показувати повідомлення.
  • Запам’ятовувати дані на стороні клієнта (“local storage”), які будуть доступні в майбутніх сесіях на цьому веб-сайті.

Що НЕ може JavaScript?

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

Приклади таких обмежень:

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

    Сучасні браузери дозволяють працювати з файлами, але доступ до них обмежений і надається тільки тоді, коли користувач виконав відповідні дії, наприклад, перетягнув файл у вікно браузера чи вибрав його через теґ <input>.

    Є можливість взаємодії з камерою/мікрофоном або іншими пристроями, але для цього потрібен явний дозвіл користувача. Тому сторінка, на якій увімкнена JavaScript, не може нишком увімкнути веб-камеру, спостерігати за оточенням і відсилати інформацію до СБУ.

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

    Це називається “Політикою того ж походження (Same Origin Policy)”. Щоб обійти це обмеження, обидві сторінки повинні погодитися на обмін даними і містити JavaScript код, який спеціальним чином буде обмінюватися даними. Ми розглянемо це в посібнику.

    Знову-таки, це обмеження для безпеки користувача. Сторінка за адресою http://anysite.com, яку відкрив користувач, не повинна мати доступ до іншої вкладки браузера з URL-адресою http://gmail.com і звідти викрадати інформацію.

  • JavaScript може легко спілкуватися через мережу з сервером, від якого отримана поточна сторінка. Але її здатність отримувати дані з інших сайтів/доменів обмежена. Запит на інший домен також можливий, проте це потребує спеціального заголовку в HTTP від віддаленого сервера. Це зроблено з метою безпеки.

Таких обмежень немає, якщо JavaScript використовується за межами браузера, наприклад, на сервері. Сучасні браузери дозволяють встановлювати плаґіни/розширення, які мають розширені можливості, проте потребують розширених прав.

Що робить JavaScript унікальною?

Є як мінімум три чудові особливості в JavaScript:

  • Цілковита інтеграція з HTML/CSS.
  • Прості речі робляться просто.
  • Підтримується всіма сучасними браузерами і увімкнена усталено.

JavaScript – це єдина браузерна технологія, яка суміщає ці три речі.

Це і робить її унікальною. Ось чому JavaScript найбільш поширений засіб створення браузерних інтерфейсів.

До слова, JavaScript також дозволяє створювати сервери, мобільні застосунки, тощо.

Мови “над” JavaScript

Синтаксис JavaScript не задовольняє потреби кожного. Різні люди хочуть різних функцій.

Цього слід очікувати, тому що проекти і вимоги різні для кожного.

Останнім часом з’явилося безліч нових мов, які транспілюються (конвертуються) в JavaScript до того, як виконаються в браузері.

Сучасні інструменти роблять транспіляцію дуже швидкою і прозорою, дозволяючи розробникам писати код іншою мовою і автоматично конвертувати його “під капотом”.

Приклади таких мов:

  • CoffeeScript — це “синтаксичний цукор” поверх JavaScript. Вона вводить більш короткий синтаксис, що дозволяє нам писати більш чіткий і точний код. Зазвичай, це до вподоби програмістам на Ruby.
  • TypeScript зосереджена на додаванні “строгої типізації даних”, щоб спростити розробку і підтримку складних систем. Розробляється у Microsoft.
  • Flow також додає типізацію даних, але іншим способом. Розробляється компанією Facebook.
  • Dart — це автономна мова, яка має власний рушій, що працює в не-браузерних середовищах (як-от мобільні застосунки), але також може транспілюватися в JavaScript. Розробляється компанією Google.
  • Brython це транспілятор коду з мови Python в JavaScript, що дозволяє писати застосунки на чистому Python без використання JavaScript.
  • Kotlin — це сучасна, лаконічна і безпечна мова програмування, яку можна компілювати для браузера або NodeJS.

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

Підсумки

  • Мова JavaScript спочатку була створена лише як мова для браузера, але зараз її також використовують в інших середовищах.
  • Сьогодні, JavaScript позиціонується як найбільш поширена мова для браузера, яка повністю інтегрована з HTML/CSS.
  • Є багато мов які “транспілюються” в JavaScript і надають певні функції. Рекомендується переглянути їх, принаймні мигцем, після освоєння JavaScript.
Навчальна карта

Коментарі

прочитайте це, перш ніж коментувати…
  • Якщо у вас є пропозиції, щодо покращення підручника, будь ласка, створіть обговорення на GitHub або одразу створіть запит на злиття зі змінами.
  • Якщо ви не можете зрозуміти щось у статті, спробуйте покращити її, будь ласка.
  • Щоб вставити код, використовуйте тег <code>, для кількох рядків – обгорніть їх тегом <pre>, для понад 10 рядків – використовуйте пісочницю (plnkr, jsbin, codepen…)