16 лютого 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 — це сучасна, лаконічна і безпечна мова програмування, яку можна компілювати для браузера або Node.

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

Підсумки

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

Коментарі

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