2. Завдання до лабораторної роботи

1. На веб-сторінці, розробленій в межах лабораторних робіт №2,3, виконати одне з таких завдань згідно варіанту:

1. Мовою JavaScript створити програму контролю наповненості анкети форми.

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

3. Створити скрипт, що малює круг певного кольору, а після подвійного кліку мишкою колір змінюється.

4. Створити сценарій, в якому представлено об’єкт SELECT, що використовується для зміни фону сторінки. Властивістю, яка відповідає за зміну кольору фону є document.bgColor. Необхідно запропонувати використати на вибір один з трьох кольорів: червоний, жовтий, зелений. В об’єкті кольори повинні відображатись як Стояти, Приготуватись, Іти відповідно.

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

6. Створити скрипт, який би змінював картинку в залежності від часу.

7. Створити скрипт зміни картинки при наведенні миші.

8. Створити скрипт перегляду та прокрутки картинок.

9. Створити скрипт, який змінює зображення миші.

10. Створити органайзер на поточний місяць.

11. Створити сторінку зі сценарієм, яка містить одне поле форми для введення в нього адреси електронної пошти та кнопку Submit. Відправлення форми повинне виконуватись тільки в тому випадку, якщо в текстовому полі введено символ @.

3. Контрольні запитання

1. Які події опрацьовують програми JavaScript?

2. Навести приклад події миші

3. Навести приклад події клавіатури.

4. Порівняти JavaScript та інші подібні мови.

5. Навести приклади об’єктів мови JavaScript

6. Навести приклади елементів стандартизації

Лабораторна робота № 5 Тема: Використання jQuery для опрацювання змісту сторінки Мета: Оволодіти методами jQuery для опрацювання змісту сторінки.

1. Бібліотеки підтримки динаміки на веб-сторінці

JQuery – це бібліотека JavaScript функцій підтримки змін на WEB-сторінці: для опрацювання подій, анімації, модифікації змісту тегів HTML документів та спрощення взаємодії з сервером за технологією Ajax. Технологія JQuery спрощує програмування сценаріїв засобами мови JavaScript.

Синтаксис jQuery подібний до синтаксису стилів CSS (підтримуються всі селектори), а саме: складається з селектора (вказівника) на елемент  HTML та функції для виконання певних дій над атрибутами цього елемента: $(selector).action()

Приклади:

• $(this).hide() – заховати біжучий елемент;

• $(“p”).hide() – заховати всі параграфи;

• $(“p.test”).hide() – заховати параграфи класу (class=»test»);

• $(“#test”).hide() – заховати елементи з id=”test”.

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

Наведемо приклад використання селектора та простої побудованої функції :

$(document).ready(function() {

alert(”document is ready”);

});

Ця інструкція використовується при завантаженому HTML-документі та готовому DOM навіть при недовантажених графічних об’єктах. Вона позначає функцію для виконання над об’єктами сторінки. В даному випадку видається повідомлення після завантаження сторінки.

При цьому помилка виникає якщо:

• Елемент не існує,

• Зображення не завантажено тощо

Для підключення бібліотеки в HTML коді необхідно використати тег

<script type=’text/javascript’ src=’jquery.js’></script>

<script type=’text/javascript’ src=’jquery.min.js’></script>

<script type=”text/javascript” src=”/jsz/jqModal.js”></script>

<script type=”text/javascript” src=”/jsz/cache/03565abe.js”></script>

<script type=”text/javascript” src=”/jsz/adriver.core.2.js”></script>

Всі селектори умовно об’єднані в послідовності бібліотек методів: Query Selectors, jQuery Events, jQuery Effects, jQuery Callback, jQuery HTML, jQuery CSS, jQuery AJAX.

Вправа 1. Розглянемо приклади представників селекторів з різних бібліотек. jQuery, які є обов’язковими елементами інструкцій на виконання.

Таблиця 5.1
Синтаксис		Опис
1	$(“*”)	вибір всіх елементів
2	$(“p”)	вибір всіх <p> елементів
3	$(“p.intro”)	вибір всіх <p> елементів з class=”intro”
4	$(“p#intro”)	вибір перших <p> елементів з id=”intro”
5	$(“:animated”)	вибір всіх анімованих елементів
6	$(“:button”)	вибір всіх елементів <button> в т.ч. для <input>
7	$(“:even”)$(“:odd”)	вибір парних (непарних) елементів
8	$(this)	Вибирає поточний HTML-елемент
9	$(“p#intro:first”)	Вибір першого елемента <p> з ID = ”intro”
10	$(“.intro”)	Вибір всіх елементи з класом = ”intro”
11	$(“#intro”)	Вибір першого елемента з ID = ”intro”
12	$(“ul li:first”)	Вибір першого елемента <li> Перший <ul>
13	$(“ul li:first-child”)	Вибір першого елемента <li> кожного <ul>
14	$(“[href]”)	Вибирає всі елементи з атрибутом HREF
15	$(“[href$=’.jpg’]”)	Вибирає всі елементи з атрибутом HREF, який закінчується «. jpg»
16	$(“[href=’#’]”)	Вибирає всі елементи з HREF значення, рівне «#»
17	$(“[href!=’#’]”)	Вибирає всі елементи з HREF значення НЕ дорівнює «#»
18	$(“div#intro .head”)	Вибирає всі елементи з класом = «голова» в <div> елемент з ID = “intro”)

Вправа 2. Наведемо головні методи з бібліотеки опрацювання подій jQuery Events:

Таблиця 5.2.
Event Method	Опис
$(document).ready(function)	Пов'язує функцію з готовим документом
$(selector).click(function)	Пов'язує функцію з подією у певному місці
$(selector).dblclick(function)	Пов'язує функцію з подією у певному місці (подвійне натискання)
$(selector).focus(function)	Пов'язує функцію з фокусом на елементі
$(selector).mouseover(function)	Пов'язує функцію з подією у певному місці (курсор на об’єкті)

Повний список методів можна знайти на ресурсі http://www.w3schools.com/jquery/jquery_ref_events.asp

Вправа 3. Наведемо деякі головні методи бібліотеки jQuery Effects для створення графічних ефектів :

Таблиця 5.3.
Функція		Опис
1	$(selector).hide()	Вибраний елемент ховається
2	$(selector).show()	Вибраний елемент з’являється
3	$(selector).toggle()	Перемикання стану вибраного елемента (між hide і show)
4	$(selector).slideDown()	Показ вибраного елемента зверху вниз
5	$(selector).slideUp()	Закриття вибраного елемента знизу вверх
6	$(selector).slideToggle()	Перемикання стану вибраного елемента (між slide-up і slide-down)
7	$(selector).fadeIn()	Закриття вибраного елемента знизу вверх
8	$(selector).fadeOut()	Закриття вибраного елемента знизу вверх
9	$(selector).fadeTo()	Закриття вибраного елемента до заданого рівня opacity
10	$(selector).animate()	Анімувати вибраний елемент

Повний список методів можна знайти на ресурсі http://www.w3schools.com/jquery/jquery_ref_effects.asp .

Параметр «Speed» методів SlideDown(speed, callback),SlideUp(speed, callback), SlideToggle(speed, callback) приймає значення :slow, normal, fast, milliseconds ( 100, 500, 1000, etc).

Функція callback викликається після завершення роботи методу (назва функції).

Вправа 4. Деякі головні методи з бібліотеки jQuery HTML для маніпуляції з HTML елементами наведені в таблиці 5.4:

Таблиця 5.4.
Функція	Опис
$(selector).html(content)	Зміна змісту вибраного елемента (inner) HTML
$(selector).append(content)	Додавання змісту до вибраного елемента (inner) HTML
$(selector).after(content)	Додавання змісту після вибраного елемента HTML

Повний список методів для маніпуляції змістом тегів HTML можна знайти на ресурсі http://www.w3schools.com/jquery/jquery_ref_html.asp

Вправа 5. Деякі головні методи з бібліотеки jQuery CSS для маніпуляції з CSS елементами наведені в таблиці 5.5:

Таблиця 5.5
CSS Властивості	Опис
$(selector).css(name)	Отримати значення властивості стилю елемента
$(selector).css(name,value)	Встановити значення однієї властивості стилю для відповідних елементів
$(selector).css({properties})	Встановити кілька властивостей стилю для відповідних елементів
$(selector).height(value)	Встановити висоту відповідних елементів
$(selector).width(value)	Встановити ширину відповідних елементів

Повний список методів для маніпуляції змістом тегів HTML можна знайти на ресурсі http://www.w3schools.com/jquery/jquery_ref_css.asp

Розглянемо приклад побудови функції – реакції на завантаження сторінки. В свою чергу, реакція реалізована функцією зміни тексту параграфа при натисканні кнопки :

<!DOCTYPE html>

<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(”button”).click(function(){

$(“p”).html(”Welcome to jQuery”);

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>

</html>