Лекція 23. JavaScript. Ajax.
2. JavaScript
JavaScript - мультипарадигмова мову програмування. Підтримує об'єктно-орієнтований, імперативний і функціональний стилі.
JavaScript зазвичай використовується як вбудована мова для програмного доступу до об'єктів додатків. Найбільш широке застосування знаходить в браузерах як мова сценаріїв для додання інтерактивності веб-сторінок.
На JavaScript вплинули багато мов, при розробці була мета зробити мову схожу на Java, але при цьому легку для використання непрограмістами. Мовою JavaScript не володіє будь-яка компанія або організація, що відрізняє її від ряду мов програмування, використовуваних в веб-розробці.
Назва «JavaScript» є зареєстрованим товарним знаком компанії Oracle Corporation.
Спочатку мова називалася Mocha, потім вона була перейменована в LiveScript і призначалась як для програмування на стороні клієнта, так і для програмування на стороні сервера. На синтаксис вплинули мови Сі і Java, і, оскільки Java в той час було модним словом, 4 грудня 1995 року LiveScript перейменували в JavaScript, отримавши відповідну ліцензію у Sun. Анонс JavaScript з боку представників Netscape і Sun відбувся напередодні випуску другої бета-версії Netscape Navigator. У ньому декларується, що 28 лідируючих ІТ-компаній висловили намір використовувати в своїх майбутніх продуктах JavaScript як об'єктну скриптову мову з відкритим стандартом.
JavaScript є об'єктно-орієнтованою мовою, але використовуване в мові прототипування обумовлює відмінності в роботі з об'єктами в порівнянні з традиційними клас-орієнтованими мовами.
Для додавання JavaScript-коду на сторінку, можна використовувати теги <script> </script>, які рекомендується, але не обов'язково, поміщати всередині контейнера <head>. Контейнерів <script> в одному документі може бути скільки завгодно. Атрибут «type = 'text/javascript'» вказувати необов'язково, дане значення використовується за умовчанням.
Скрипт, що виводить модальне вікно з класичної написом «Hello, World!» всередині браузера:
Специфікація HTML описує набір атрибутів, використовуваних для завдання обробників подій. Приклад використання:
У наведеному прикладі при натисканні на посилання функція confirm ('Ви впевнені?'); викликає модальне вікно з написом «Ви впевнені?», а return false; блокує перехід за посиланням. Зрозуміло, цей код буде працювати тільки якщо в браузері є і включена підтримка JavaScript, інакше перехід за посиланням відбудеться без попередження.
Є і третя можливість підключення JavaScript - написати скрипт в окремому файлі, а потім підключити його за допомогою конструкції:
JavaScript використовується в клієнтській частині веб-додатків: клієнт-серверних програм, в якому клієнтом є браузер, а сервером - веб-сервер, що мають розподілену між сервером і клієнтом логіку. Обмін інформацією в веб-додатках відбувається по мережі. Одним з переваг такого підходу є той факт, що клієнти не залежать від конкретної операційної системи користувача, тому веб-додатки є кроссплатформовими сервісами.
JavaScript використовується в AJAX, популярному підході до побудови призначених для користувача інтерфейсів веб-додатків, що полягає в «фоновому» асинхронному обміні даними браузера з веб-сервером. В результаті, при оновленні даних веб-сторінка не перезавантажується повністю і інтерфейс веб-додатка стає швидшим, ніж це відбувається при традиційному підході (без застосування AJAX).
Comet - широке поняття, яке описує механізм роботи веб-додатків, що використовують постійні HTTP-з'єднання, що дозволяє веб-серверу відправляти дані браузера без додаткового запиту з боку браузера. Для таких додатків використовуються технології, безпосередньо підтримувані браузерами. Зокрема, в них широко використовується JavaScript.
JavaScript широко використовується в браузерних операційних системах. Так, наприклад, вихідний код IndraDesktop WebOS на 75% складається з JavaScript, код браузерної операційної системи IntOS - на 70%. Частка JavaScript у вихідному коді eyeOS - 5%, однак і в рамках цієї операційної системи JavaScript грає важливу роль, беручи участь в візуалізації на клієнті і будучи необхідним механізмом для комунікації клієнта і сервера.
Користувацькі скрипти в браузері - це програми, написані на JavaScript, що виконуються в браузері користувача при завантаженні сторінки. Вони дозволяють автоматично заповнювати форми, переформатовувати сторінки, приховувати небажаний вміст і вбудовувати бажаний для відображення вміст, змінювати поведінку клієнтської частини веб-додатків, додавати елементи керування на сторінку і т.д.
Програми, написані на JavaScript, можуть виконуватися на серверах, що використовують Java 6 і пізніші версії. Ця обставина використовується для побудови серверних додатків, що дозволяють обробляти JavaScript на стороні сервера.
JavaScript використовується для написання прикладного ПЗ. Наприклад, 16,4% вихідного коду Mozilla Firefox написано на JavaScript.
Google Chrome OS в якості прикладного ПЗ використовує веб-додатки.
В оточенні робочого столу GNOME є можливість створювати на JavaScript програми, які оперують з бібліотеками GNOME.
JavaScript використовується в офісних додатках для автоматизації рутинних дій, написання макросів, організації доступу з боку веб-служб.
Для забезпечення високого рівня абстракції і досягнення прийнятного ступеня крос-браузерності при розробці веб-додатків використовуються бібліотеки JavaScript. Вони являють собою набір багаторазово використовуваних об'єктів і функцій.
Серед відомих JavaScript бібліотек можна відзначити Ember.js, Adobe Spry, AngularJS, Dojo Toolkit, Extjs, jQuery, Mootools, Prototype, Qooxdoo (англ.), Underscore.
jQuery - бібліотека JavaScript, що фокусується на взаємодії JavaScript і HTML. Бібліотека jQuery допомагає легко отримувати доступ до будь-якого елементу DOM (Document Object Model), звертатися до атрибутів і вмісту елементів DOM, маніпулювати ними. Також бібліотека jQuery надає зручний API для роботи з AJAX. Зараз розробка jQuery ведеться командою jQuery на чолі з Джоном Резігом.
Точно так само, як CSS відокремлює візуалізацію від структури HTML, JQuery відокремлює поведінку від структури HTML. Наприклад, замість прямої вказівки на обробник події натискання кнопки керування передається JQuery, яка ідентифікує кнопку і потім перетворює в обробник події кліку. Такий поділ поведінки і структури також називається принципом ненав'язливого JavaScript.
Бібліотека jQuery містить функціональність, корисну для максимально широкого кола завдань. Проте, розробниками бібліотеки не ставилося завдання суміщення в jQuery функцій, які підійшли б усюди, оскільки це призвело б до великого коду, велика частина якого не затребувана. Тому була реалізована архітектура компактного універсального ядра бібліотеки і плагінів. Це дозволяє зібрати для ресурсу саме ту JavaScript-функціональність, яка на ньому була б затребувана.
jQuery, як правило, включається в веб-сторінку як один зовнішній JavaScript-файл.2. AJAX
AJAX (Asynchronous JavaScript And XML) – підхід до побудови користувацьких інтерфейсів веб-застосунків, за яких веб-сторінка, не перезавантажуючись, у фоновому режимі надсилає запити на сервер і сама звідти довантажує потрібні користувачу дані. AJAX – один з компонентів концепції DHTML.
AJAX – це не самостійна технологія, а швидше концепція використання декількох суміжних технологій. AJAX-підхід до розробки, який призначений для користувачів інтерфейсів, комбінує кілька основних методів і прийомів:
- використання DHTML для динамічної зміни змісту сторінки.
- використання XMLHttpRequest для звернення до сервера «на
льоту», не перезавантажуючи всю сторінку повністю
- альтернативний метод – динамічне підвантаження коду JavaScript
в тег <SCRIPT> з використанням DOM, що здійснюється із використанням
формату JSON)
- динамічне створення дочірніх фреймів
Використання цих підходів дозволяє створювати набагато зручніші веб-інтерфейси користувача на тих сторінках сайтів, де необхідна активна взаємодія з користувачем. AJAX — асинхронний, тому користувач може переглядати далі контент сайту, поки сервер все ще обробляє запит. Браузер не перезавантажує web-сторінку і дані посилаються на сервер без візуального підтвердження (крім випадків, коли ми самі захочемо показати процес з'єднання з сервером). Використання AJAX стало популярним після того, як компанія Google почала активно використовувати його при створенні своїх сайтів, таких як Gmail, Google Maps і Google Suggest. Створення цих сайтів підтвердило ефективність використання даного підходу.
Порівняння класичного підходу та AJAX
Класична модель веб-додатка:
- Користувач заходить на веб-сторінку і натискає на який-небудь її елемент
- Браузер надсилає запит серверу
- У відповідь сервер генерує повністю нову веб-сторінку і відправляє її браузеру і т. д.
З боку сервера можлива генерація не всієї сторінки наново, а тільки деяких її частин, з подальшою передачею користувачу.
Модель AJAX:
- Користувач заходить на веб-сторінку і натискає на який-небудь її елемент.
- Браузер відправляє відповідний запит на сервер.
- Сервер віддає тільки ту частину документа, яка змінилася.