- •Лабораторна робота № 1 Тема: Структура dom та методи доступу до вузлів дерева. Мета: Оволодіти засобами внесення змін на web-сторінці.
- •1. Структура dom та методи доступу до вузлів дерева
- •2. Завдання до лабораторної роботи.
- •3. Контрольні запитання.
- •Лабораторна робота № 2 Тема: Форма як елемент зв’язку з сервером Мета: Оволодіти засобами керування формами, внесення інформації для сервера на динамічній web-сторінці
- •1. Внесення та опрацювання даних на формі
- •2. Завдання до лабораторної роботи
- •3. Контрольні запитання
- •Лабораторна робота № 3 Тема: Основні поняття мови JavaScript, Мета: Оволодіти структурою мови JavaScript для створення інтерактивних web-сайтів та різними способами розміщення коду JavaScript.
- •Особливості програмування мовою JavaScript
- •Завдання до лабораторної роботи
- •Контрольні запитання
- •Лабораторна робота № 4 Тема: Опрацювання подій в JavaScript Мета: Оволодіти структурою та методами мови JavaScript для опрацювання подій.
- •Різні способи розміщення коду JavaScript.
- •Завдання до лабораторної роботи
- •Контрольні запитання
- •Лабораторна робота № 5 Тема: Використання jQuery для опрацювання змісту сторінки Мета: Оволодіти методами jQuery для опрацювання змісту сторінки.
- •Бібліотеки підтримки динаміки на веб-сторінці
- •Розширення бібліотеки функцій jQuery plugins
- •Завдання до лабораторної роботи:
- •Контрольні запитання
- •Список літератури
- •Створення динамічних веб-сторінок на Клієнті методичні вказівки
Завдання до лабораторної роботи
На веб-сторінці, розробленій в межах лабораторної роботи №2 виконати вправу 1.
На веб-сторінці, розробленій в межах лабораторної роботи №2 виконати вправу 2.
На веб-сторінці, розробленій в межах лабораторної роботи №2 виконати одне з таких завдань:
Розробити сценарій, при якому відразу після завантаження сторінки відображалось би діалогове вікно з повідомленням.
Розробити скрипт, який створює вікна фіксованого розміру для завантажень документів за посиланнями.
Розробити сценарій, при якому діалогове вікно з повідомленням відображалось би після кліку користувача на кнопці форми.
Створити сценарій, коли пропонується користувачу в діалоговому вікні ввести його ім’я, а після цього вітати його по імені. Вітання повинно відображатись в основній частині сторінки.
Створити скрипт, у вікні якого після завантаження сторінки автоматично виводиться адреса URL поточної сторінки.
Створити схему програми для гри “хрестики – нулики”.
Контрольні запитання
Які типи даних використовуються в JavaScript? Навести приклади.
Які оператори структурного програмування використовуються в JavaScript? Навести приклади.
Масив у JavaScript. Навести приклади.
Переваги та недоліки масивів у JavaScript. Навести приклади.
Які об’єкти є в JavaScript?
Порівняльний аналіз операторів циклів у JavaScript.
Лабораторна робота № 4 Тема: Опрацювання подій в JavaScript Мета: Оволодіти структурою та методами мови JavaScript для опрацювання подій.
Різні способи розміщення коду JavaScript.
Мова HTML має елементи із спеціальними атрибутами – подіями. Функції JavaScript використовують як обробники цих подій.
onclick – одна з основних подій HTML.
Код на JavaScript для опрацювання подій unobtrusive (in the HTML) є поганим стилем (змішує зміст та поведінку).
Обробники подій в старому стилі
<body>
<button id="ok" onclick="okay();">Click me</button>
...
// викликається при натисканні кнопки OK
function okay() {
var button = document.getElementById("ok");
button.style.color = "red";
}
Обробник з елементами DOM
<body>
<button id="ok">Click me</button>
...
window.onload = initializeBody; // глобальний код
// викликається при завантаженні сторінки, описує обробники події; sets up all event handlers
function initializeBody() {
document.getElementById("ok").onclick = okay;
}
function okay() {
this.style.color = "red";
}
unobtrusive Javascript вживати краще через розділення змісту сторінки на три категорії:
зміст (HTML);
представлення (CSS)
поведінку (Javascript).
Сторінка не забивається кодом опрацювання та стилістикою.
Подія window.onload
window.onload = name;
// встановлює обробника події
function name() {
set up any necessary event handlers using the DOM
}
Схема опрацювання події така:
window.onload = initializeBody;
function initializeBody() {
var name = document.getElementById("ok");
name.event = function;
...
}
Події миші
Для клікання на мишу DOM об’єкти мають такі властивості:
onmousedown: натискання;
onmouseup: відпускання;
onclick: натискання – відпускання;
ondblclick: подвійне клікання.
Під час руху
onmouseover : курсор миші входить на елемент;
onmouseout : курсор миші виходить з елемента;
onmousemove : курсор миші рухається в межах об’єкта;
myElement.onmousemove = myFunction;
Приклад подій від миші
<div id="dare">Click me ... I dare you!</div>
function initializeBody() {
document.getElementById("dare").onmousedown = colorIt;
}
function colorIt() {
this.style.backgroundColor = "red";
}
В обробнику ключове слово this позначає той самий елемент document.getElementById
<div id="dare">Click me ... I dare you!</div>
function initializeBody() {
var dareDiv = document.getElementById("dare");
dareDiv.onmousedown = colorIt;
dareDiv.onmouseup = uncolorIt;
}
function colorIt() {
this.style.backgroundColor = "red";
}
function uncolorIt() {
this.style.backgroundColor = "transparent";
}
Або
function colorIt(event) {
this.style.backgroundColor = "red";
this.innerHTML = "You clicked (" + event.screenX +
", " + event.screenY + ")");
}
Властивості об’єкта події
type : "click" чи "mousedown"
same : назва корисна при опрацюванні багатьох подій.
clientX, clientY : координати зверху наліво
screenX, screenY : координати зверху ліворуч на екрані
Якщо події в браузерах несумісні, то можна використати елементи стандартизації :
function handleClick(event) {
event = standardizeEvent(event);
...
}
// направити несумісність
function standardizeEvent(event) {
var e = event || window.event;
e.srcElement = e.srcElement || e.target;
return e;
}
Розглянемо приклад :
<div id="gum"><img src="gum.png" alt="gum" />
Double your pleasure, <em>double your fun</em>!</div>
function initializeBody() {
document.getElementById("gum").ondblclick = doBorder;
}
function doBorder(event) {
event = standardizeEvent(event);
event.srcElement.style.border = "2px dashed blue";
}
Клавіатура под ії – властивості
onkeydown: натискання клавіші для елемента у фокусі;
onkeyup: відпускання клавіші для елемента у фокусі;
onkeypress: натискання і відпускання клавіші для елемента у фокусі;
onfocus: елемент у фокус ставить клавіатуру;
onblur: елемент втрачає фокус на клавіатуру.
Властивості такі: keyCode: ASCII значення клавіші, перетворення до букви: String.fromCharCode(event.keyCode)
Список значень клавіші
altKey: true, якщо Alt key тримається;
ctrlKey: true, якщо Ctrl key тримається;
shiftKey: true, якщо Shift key тримається.
Приклад одержання занесених даних
// обробник події window.onload
document.getElementById("mytextbox").onkeypress = keyPress;
function keyPress(event) {
event = standardizeEvent(event);
if (event.keyCode == 13) {
// коде 13 – Enter
do something;
}
}
Події Tex box для тегу <input type="text">, <textarea>
onselect: текст text box вибрано;
onchange: зміст в text box змінився.
Події браузера
onload: завантаження;
onunload: сторінка існує;
onresize: вікно браузера змінюється;
onerror: під час завантаження документа чи зображення сталася помилка.
Під час програмування основними помилками є:
Неправильні слова
window.onload = initalizeBody; // помилка
...
function initializeBody() {
var theDiv = document.getElementById("puzzlearea");
...
}
Неправильне розташування дужок
function foo() {
...
function bar() {
...
}
() в обробнику подій (при під’єднанні обробника подій подається тільки його назва)
myObject.onclick = handleClick(); // неправильно!
myObject.onclick = handleClick; // краще
Поставивши дужки () після назви функції, її викликають відразу.