Веб-програмування та інтерактивні сторінки. Створення інтерактивної сторінки за допомогою форми

Опрацюйте теоретичний матеріал та навчальні відео:

JavaScript (JS) — динамічна, об'єктно-орієнтована прототипна мова програмування. Реалізація стандарту ECMAScript.

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

Щоб веб-сторінка була інтерактивною, тобто могла взаємодіяти з користувачем, і динамічною, необхідно використовувати скрипти, або сценарії.

Сценарій (script, скрипт) — це програма, написана спеціальною мовою програмування і вбудована в HTML-документ.

Сценарії описують усі можливі дії над елементами HTML-документа під час взаємодії з користувачем: реакцію на натискання кнопки миші, зміну вмісту сторінки залежно від певних дій користувача тощо.

Для роботи з DOM у JavaScript є об'єкт document, який дозволяє:

• видаляти HTML-елементи і атрибути;

• змінити всі HTML-елементи на сторінці;

• змінити всі атрибути HTML на сторінці;

• змінювати всі стилі CSS на сторінці;

• додавати нові елементи HTML і атрибути;

• створювати нові події на сторінці;

• редагувати існуючі події на сторінці.

Методи і властивості для роботи з DOM

JavaScript дозволяє на етапі форматування документу додавати до нього дані за допомогою методів document.write() і document.writeln().

Метод в об'єктно-орієнтованому програмуванні — підпрограма (процедура, функція), що використовується виключно разом із класом (методи класу) або з об'єктом (методи екземпляра).

Тег <script></script>

Тег <script> призначений для опису скриптів, може містити посилання на програму або її текст певною мовою. Скрипти можуть розташовуватися в зовнішньому файлі і зв'язуватися з будь-яким HTML-документом. Такий підхід дозволяє використовувати одні й ті ж загальні функції на багатьох веб-сторінках і прискорює їх завантаження, тому що зовнішній файл кешується при першому завантаженні, і скрипт викликається швидше при наступних викликах.

<Script> може розташовуватися в заголовку або тілі HTML-документа в необмеженій кількості. У більшості випадків розташування скрипта ніяк не позначається на роботі програми. Однак скрипти, які повинні виконуватися в першу чергу, звичайно поміщають в заголовок документа.

Атрибути тега:

• async - завантажує скрипт асинхронно;

• defer - відкладає виконання скрипта до тих пір, поки вся сторінка не буде завантажена повністю;

• language - встановлює мову програмування на якій написаний скрипт;

• src - адреса скрипта з зовнішнього файлу для імпорту в поточний документ;

• type - визначає тип вмісту тега <script>.

Примітка. У HTML5 атрибут type можна опустити, він є необов'язковим і приймає значення text / javascript, якщо не вказаний явно. У попередніх версіях HTML атрибут type необхідний.

Метод alert()

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

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

Це невелике вікно з повідомленням називається модальним вікном. Поняття модальне означає, що користувач не може взаємодіяти з інтерфейсом решти сторінки, натискати на інші кнопки і т. д. до тих пір, поки взаємодіє з вікном. В даному випадку - поки не буде натиснута кнопка OK.

Метод prompt()

Цей метод генерує діалогове вікно запиту. Дві кнопки, наявні в діалоговому вікні, — OK і Cancel — дають змогу користувачу закрити діалогове вікно, повернувши у сценарій значення текстового поля (кнопкою OK) або спеціальне значення null (кнопкою Cancel).

Функція prompt приймає два аргументи:

result = prompt (title, [default]);

Цей код відобразить модальне вікно з текстом, полем для введення тексту і кнопками OK / Скасувати.

title

Текст для відображення у вікні.

default

Необов'язковий другий параметр, який встановлює початкове значення в поле для тексту в вікні.

Користувач може надрукувати що-небудь в поле введення і натиснути OK. Він також може скасувати введення натисканням на кнопку «Скасувати» або натиснувши на клавішу Esc.

Null — спеціальне значення, яке використовується для позначення відсутності даних. NULL відповідає поняттю «порожнє поле», тобто «поле, яке не містить ніякого значення».

Метод confirm()

Синтаксис:

result = confirm (question);

Функція confirm відображає модальне вікно з текстом питання question і двома кнопками: OK і Скасувати.

Результат true, якщо натиснута кнопка OK. В інших випадках - false.

На всі зазначені методи поширюються два обмеження:

• Розташування вікон визначається браузером. Зазвичай вікна знаходяться в центрі.

• Візуальне відображення вікон залежить від браузера, і ми не можемо змінити їх вигляд.

Виконайте інтерактивні вправи.

Скріни виконаних вправ прикріпіть до цього завдання

(2 вправи=2 скріни)