Лабораторна робота 10.


Лабораторна робота 10.

Мета – навчитися використовувати методи для створення автоматичного руху об’єктів, створювати шари, кнопки, форми на веб-сторінці.
Програмне забезпечення:
–         операційна система з графічним інтерфейсом – Windows XP або Windows 7;
–         браузер для роботи в мережі Інтернет – Google Chrome або Opera;
–         веб-технологія – мова програмування JavaScript.
ХІД РОБОТИ
Теоретичні відомості
Для виконання лабораторної роботи необхідно повторити матеріал теми 6.

JavaScript. Рух об’єктів
Алгоритм створення руху об’єктів:
1. Відкрити веб-сторінки, створені в л. р. 5 – 9.
2. Створити автоматичний рух об’єктів.
Створення руху об’єкта можливо, якщо використовувати такі методи:
  • метод ім’я процесу setInterval (вираз, період) об’єкта window запускає процес циклічного виконання виразу (функції);
  •  метод clearInterval (ім’я процесу) об’єкта window зупиняє процес.

Наприклад рух зображення по діагоналі екрану з використанням кнопки, при цьому кнопка змінює свою назву на іншу (рис. 10.1). Код програми:
<html>
<head><title>Рух зображення</title>
</head>
<body>
<button id="i" onclick=start_stop()
style="position:absolute; right:100;top:10">
Рух</button>
<img id="c" src="1.jpg"
style="position:absolute;top:110;right:20">
</body>
<script>
dx=10;
dy=10
z=false
function start_stop()
{if(z)
{window.clearInterval(t)
z=false
document.all.i.innerHTML="Рух" }
else
{t=window.setInterval("move()",100)
z=true
document.all.i.innerHTML="Стоп"} }
function move() {
var y=parseInt(document.all.c.style.top)
document.all.c.style.top=y+dy  }
</script>
</html>


Рис. 10.1. Рух зображення

JavaScript. Шари
1.      Відкрити веб-сторінки, створені в л. р. 5 – 9.
2.      Створити шари на веб-сторінці (10.2).
Приклад створення шарів на веб-сторінці (приклад з лекції):
<head>
<title>Керування видимістю</title>
<script>
//Функція, яка забезпечує зміну видимості шарів
function vis(){
//Отримання доступу до шару
var Layer=document.getElementById('lay');
//Визначення поточного стану шару
if (Layer.style.visibility=='hidden'){
//Якщо шар невидимий, то потрібно його зробити видимим
Layer.style.visibility='visible';
}
else{
//Якщо шар видимий, тоді потрібно його зробити невидимим
Layer.style.visibility='hidden';
}
}
</script>
</head>
<body>
<h2>Керування видимістю</h2>
<div id=control style="position:absolute; top:50px;left:50px;">
<a href="javascript:vis();">Скрити/Показати шар</a>
</div>
<div id=lay style="position:absolute; top:70px;left:50px;
height:100px;width:250px; background-color:orange;
visibility:hidden">
Цей шар за замовчуванням невидимий, щоб його побачити, потрібно натиснути по посиланню
</div>
</body>
</html>
Рис. 10.2. Шари

JavaScript. Користувачі веб-сторінки
Алгоритм створення визначення кількості відвіданих користувачем веб-сторінок
1.      Відкрити веб-сторінки, створені в л. р. 5 – 9.
2.      Створити кнопку визначення кількості відвіданих веб-сторінок.
Приклад визначення кількості відвіданих веб-сторінок (приклад з лекції) (рис. 10.3):
<html>
<head>
<title>Кількість відвіданих сторінок</title>
</head>
<body>
<script language=JavaScript>
function hislen()
{                   
alert(window.history.length)
}
</script>
<input type="button" onclick="hislen()" value="Кількість відвіданих сторінок">
</body>
</html>
Рис. 10.3. Кількість відвіданих сторінок
JavaScript. Форми
1. Відкрити веб-сторінки, створені в л. р. 5 – 9.
2. Створити форму на веб-сторінці.
Форма призначена для введення користувачем даних, складається з таких елементів управління: поля введення даних, перемикачі, прапорці, списки, кнопки і т.д. Для позначення форми використовуються теги <form> і </form>. Приклад створення форми:
<html>
<head>
<title> Форма реєстрації </title>
<script>
function validateForm () {// функція перевірки форми на наявність порожніх полів
var validateFlag = true; // логічна змінна, яку повертає функція
for (var i = 0; i <5; i ++) // перевірка перших 6 елементів
{
var countElem = document.regform.elements [i]; // змінна countElem введена для поліпшення сприйняття коду, в неї записується черговий елемент
if (countElem.value == "") // умова чи порожній елемент
{
validateFlag = false; // якщо так, що встановлюємо прапорець в false
alert ("Введіть значення" + countElem.name); // виведення попередження для поточного елемента
break; // припинення циклу
}
}
return validateFlag; // повернення значення
}
</script>
</head>
<body>
<h4>Реєстраційна форма
<! –створення форми ->
<form name = "regform" metod = "post" onsubmit = "return validateForm ();">
<!- створення полів ->
Прізвище: <sup> * </sup>
<input type = "text" size = "30" name = "lastname">
<br> Ім’я: <sup> * </sup>
<input type = "text" size = "30" name = "firstname">
<br> Адреса електронної скриньки: <sup> * </sup>
<input type = "text" size = "30" name = "email">
<br> Логін: <sup> * </sup>
<input type = "text" size = "30" name = "login">
<br> Пароль: <sup> * </sup>
<input type = "password" size = "15" name = "pass1">
<! - створення перемикачів ->
<br> Ваша стать:
<input type = "radio" name = "sex" value = "male"> Чоловік
<input type = "radio" name = "sex" value = "female"> Жінка <br/>
<!- створення списку ->
<br> Країна:
<select size = "1" name = "country">
<option value = "Ukraine"> Україна </option>
<option value = "France"> Франція </option>
<option value = "Great Britain"> Великобританія </option>
<option value = "other"> Інша </option>
<!- створення кнопок ->
<br>
<input type = "submit" value = "Зареєструвати"> <br>
<input type = "reset" value = "Очистити">
</form>
</body>
</html>
Результат форми (рис. 10.4):

Рис. 10. 4. Форми 

Процеси введення/виведення інформації в JavaScript можна реалізувати за допомогою наступних трьох методів: alert(), prompt() і confirm(). Ці методи генерують різні вікна повідомлень.
Використавши метод alert(), відобразиться діалогове вікно з відповідним повідомленням (рис. 10.5). Для закриття вікно можна використовувати кнопку ОК. Приклад створення повідомлення:
<html>
<head>
<title>Повідомлення</title>
</head>
<script>
alert("Ви пройшли реєстрацію.");
</script>
<body>
</body>
</html>
Рис. 10.5. Поява повідомлення

Завдання для виконання
1.  Рух і перетягування об’єктів
Завдання 1.1. Створення руху об’єкту (20 хв.).
1. Створити веб-сторінку, на якій зображення буде переміщатися зліва на право по прямій лінії.

 Завдання 1.2. Створення шарів (20 хв.).
1. Створити на декількох веб-сторінках шари.

2. Форми
Завдання 2.1. Створення форми (40 хв.).
1. Створити веб-сторінку, що містить реєстраційну форму користувача.
2. Форма повинна містити такі елементи:
  • текстові поля: Прізвище, Ім’я, Адреса електронної пошти, Логін, Пароль;
  • список: Навчальний заклад;
  • перемикач: Пол;
  • посилання на Правила користування веб-сайтом;
  • прапорець: З умовами реєстрації згоден;
  •  кнопки: Зареєструватися, Назад.

3. При натисканні на кнопку Зареєструватися повинно з’являтися повідомлення: «Ви успішно пройшли реєстрацію».
4.  При натисканні по кнопці Назад користувач переходить на головну сторінку.
5. При неправильному введенні даних має з’явитися повідомлення про помилку.

Завдання для самостійного виконання
Завдання 1.1. Перетягування об’єкту (15 хв.).
1. Створити веб-сторінку, на якій можливе переміщення зображення всередині синього квадрата.

 Завдання 2.1. Повідомлення. Кнопка (15 хв.).
1. Створити повідомлення, яке буде з’являтися на веб-сторінці.
2. Створити кнопку на веб-сторінці (наприклад, кнопку Кількість відвідувань веб-сторінці).

Запитання для контролю
1. Як створити автоматичний рух об’єкту?
2. Охарактеризуйте процес створення форми за допомогою JavaScript.
3. Як перетягнути об’єкт на веб-сторінці?
4. Як створити повідомлення, яке буде з’являтися на веб-сторінці?





Немає коментарів:

Дописати коментар

Підписатися на: Дописи (Atom)