Практична робота 29

Поняття про мови веб-скриптів та спосіб використання скриптів у гіпертекстових

документах
Увага! Під час роботи з комп'ютером дотримуйтеся правил безпеки та
санітарно-гігієнічних норм.

Стандартною мовою для веб-скриптів є JavaScript – мова програмування, яка дає змогу
вбудувати виконувані модулі в документи, написані в кодах HTML. Програму, створену мовою
JavaScript інтерпретує браузер під час завантаження документа, в який вміщено її код. Проте різні
браузери сприймають різні її варіанти. Версія мови JavaScript від корпорації Microsoft, що має
назву JScript, є найближчою для стандарту. Браузер Microsoft Internet Explorer підтримує не лише
JScript, а й ще одну мову скриптів – Visual Basic Script.
За допомогою мови JavaScript, можна, наприклад, зробити так, щоб після клацання
зображення лівою кнопкою миші воно змінювало свій вигляд. Її засобами можна реалізувати й
складнішу поведінку елементів сторінки, скажімо, змусити їх пересуватися з необхідною
швидкістю і за бажаною траєкторією.
За допомогою веб-сценаріїв можна створити принципово новий інтерфейс користувача для
своєї сторінки. Всі події, генеровані браузером, такі як клацання кнопок, модифікація полів форм і
переміщення між сторінками, можна перехопити й обробити засобами JavaScript. Ця мова придатна
для розв’язування рутинних завдань, таких як перевірка достовірності даних, опрацювання форм,
виконання дій над текстовими і числовими значеннями, тобто тих завдань, які не можна розв’язати
за допомогою стандартних засобів мови HTML.
Основні області застосування мови JavaScript:
 динамічне створення документа HTML за допомогою скриптів;
 перевірка достовірності полів форм HTML до передавання їх на сервер;
 локальне введення інформації для керування програмою;
 надання користувачу можливості вибору операцій, виконуваних браузером;
 виведення повідомлень для користувача у діалогових вікнах;
 локальне опрацювання форм, введення інформації користувачем.

JavaScript - стандартна мова для веб-скриптів - назва реалізації стандарту мови

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

Основні властивості Javascript не потрібно компілювати, він підключається до HTML-

сторінки й працює "як є".
Функції Javascript:
 змінювати сторінку,
 писати на ній текст,
 додавати й видаляти теги,
 міняти стилі елементів,
 реагувати на події: (скрипт може чекати, коли що-небудь трапиться (клік миші,
закінчення завантаження сторінки) і реагувати на це виконанням функції.)
 виконувати запити до сервера й завантажувати дані без перезавантаження сторінки.
(Це іноді називають "AJAX".)
 встановлювати й зчитувати cookie,
 валідувати дані (перевіряти їх коректність),
 виводити повідомлення (й багато чого іншого.)
Унікальність javascript:
 Повна інтеграція із браузером
 Прості речі робляться просто
 Підтримується майже скрізь
Структура мови
Структурно Javascript можна представити у вигляді об'єднання трьох частин:
1
 Якщо розглядати Javascript у відмінних від браузера застосуваннях, то об'єктна модель
браузера й об'єктна модель документа можуть не підтримуватися.
Типи даних

Змінні
Змінні в javascript слабко типізовані. Це означає, що при оголошенні не потрібно вказувати
тип. Можна надати змінній будь-яке значення. Однак при цьому інтерпретатор javascript (браузер)
завжди знає, якого типу значення містить дана змінна, а значить - які операції до неї застосовні.

Змінну не обов'язково оголошувати. Досить їй просто надати значення: x = 5. В іменах

змінних можуть використовуватися латинські букви (a...z, A...Z), цифри (0...9), знак долара ($) і
знак підкреслення (_), при цьому не можна використовувати цифру першою.

Бібліотека JQuery
jquery - бібліотека Javascript, що фокусується на взаємодії Javascript і HTML. Була
опублікована на комп'ютерній конференції «Barcamp» у Нью-Йорку Джоном Ресигом в 2006 році.

2
 Початок роботи з jquery
1. Скачати бібліотеку з будь-якого доступного джерела.
2. Ініціалізувати її - тобто, необхідно додати в заголовок html-документа наступний код:
<script type="text/javascript" src="/jquery.js"></script>
де jquery.js - ім'я файлу, що містить бібліотеку jquery.

А щоб jquery-скрипт виконувався разом із завантаженням документа:

$(document).ready(function(){ //Code here});
де code here - це код виконуваної функції.

Після ініціалізації для використання доступні всі можливості базового функціонала jquery,
серед яких:
 функції ядра;
 робота із селекторами;
 робота з атрибутами;
 обхід дерева DOM;
 маніпуляції елементами;
 робота з CSS-властивостями елементів;
 робота з подіями;
 візуальні ефекти;
 взаємодія з ajax;
 утиліти.

Для маніпулювання потрібними елементами сторінки в Javascript є кілька способів знайти їх

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

Програмний код JavaScript можна помістити в документ HTML трьома способами:

1. окремі скрипти розмістити в тілі документа, там, де в їхньому використанні є
потреба;
2. скрипти (функції, оголошення об'єктів) розмістити у заголовній частині
документа між тегами <HEAD>...</HEAD>, а використовувати їх у тілі документа;
3. зберегти скрипт у файлі (зазвичай із розширенням .js), а в документі дати
посилання на нього.

У першому випадку для того, щоб повідомити браузер про використання JavaScript, у тіло HTML-
документа потрібно вставити парний тег <SCRIPT> з атрибутом LANGUGE="JavaScript":
<SCRIPT LANGUGE="JavaScript"> програма на JavaScript</SCRIPT>
Оскільки браузер Internet Explorer здатний розпізнавати програму на JavaScript, вміщену між тегами
<SCRIPT>...</SCRIPT>, для нього зазначений атрибут задавати необов'язково.

Для відвідувачів сторінки, у яких встановлений браузер, що не підтримує JavaScript, після тегів
<SCRIPT>...</SCRIPT> вміщують теги <NOSCRIPT>...</NOSCRIPT>, які описують вміст та вигляд
безскриптового варіанта сторінки.

JavaScript, як і будь-яка мова програмування, має набір інструкцій, що описують виконання тих чи
інших дій. Синтаксис цих інструкцій схожий на синтаксис операторів у мові Java.

Приклад 1 простої веб-сторінки зі сценарієм. Він виводитиме на екран вікно з повідомленням «!!!».
Для цього використаємо метод alert( ) .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
3
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT>
document.write("Ця сторінка написана на JavaScript!");
alert('!!!');
</SCRIPT>
</BODY>
</HTML>
Приклад.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT>
var s, i = 0
s=confirm ("2+2=4 ? " ) ;
if (s==true) { alert("Правильно!"); i++} else alert('Hi!')
s=confirm ("2+3=6 ? " ) ;
if (s == false) { alert( "Правильно" ) ; i++} else alert("Hi!")
s=confirm ("2+4 = 6 ? " ) ;
if (s==true) {alert ("Правильно!"); i++} else alert("Hi!")
s=prompt ("2+2= ?", " " ) ;
if (s==4) {alert ("Правильно!"); i++} else alert("Hi!")
s=prompt ("2+3= ?"," " ) ;
if (s==5) {alert ("Правильно!"); i++} else alert("Hi!")
s=prompt ("2+4= ?"," " ) ;
if (s==6) {alert ("Правильно!"); i++} else alert("Hi!")
if (i>=5) alert ("чудово")
else if (i>=3) alert ("добре")
else alert ("погано")
alert ("Сума балів="+і)
</SCRIPT>
</BODY>
</HTML>

Запитання для самоперевірки

1. Призначення мови JavaScript.
2. Які є способи використання скриптів у HTML- документі?
3. Коли виконуються скриипти JavaScript?
4. Де може розміщуватися скрипт на web-сторінці?
5. Яке програмне забезпечення використовується для розробки та тестування програм
JavaScript?
6. Вирази. Синтаксис запису виразів у JavaScript.
7. Арифметичні оператори JavaScript.
8. Логічні оператори та оператори порівняння.
9. Оператори JavaScript.
10. Формат запису умовного оператора.
11. Формат запису оператора вибору.
12. Формат запису операторів циклу.

4
13. Як достроково завершити цикл?
14. Як достроково перейти на наступну ітерацію циклу?