PI-Popovichenko / ПІ_ПЗС-1244_Поповіченко_Лаб№3
.docЛабораторна робота № 3.
Тема: Типове програмне забезпечення клієнтської частини Web–додатку з виростанням сценаріїв JavaScript.
Мета: навчитись обробляти події миші та клавіатури в Web-браузері за допомогою динамічних сценарії на мові JavaScript.
Теоретичні відомості
1.1. Поняття подій і обробників подій
Події – це дії, що відбуваються в браузері – натискання миші, клавіш, переміщення покажчика миші, завантаження малюнка. Сценарії, що дозволяють визначати події і виконувати відповідні їм дії, називаються оброблювачами подій. Багато з кодів JavaScript реагують на події, виконані користувачем або програмним забезпеченням браузера. Це кероване подіями середовище дозволяє розробникові сосредотачиваться тільки на подіях, які зачіпають його додаток; те, що браузер виконує між подіями — справа браузера, а не розробника. Крім того, розробникові не потрібно цікавитися всіма подіями, виконаними користувачем, а тільки тими, які потребують відповіді. Кожна подію JavaScript має відповідний обробник подій (event handler), який призначений для автоматичної відповіді на подію, що відбувається. При роботі з подією до нього не додають код і не змінюють його безпосередньо, а, швидше, управляють обробником події. Враховуючи керований подіями характер JavaScript, можна стверджувати, що тверде розуміння вбудованих подій — ключ до максимального збільшення його потужності.
Завдання
Описати і реалізувати обробку подій засобами JavaScript.
На Вашій сторінці є кнопка. При наведенні на неї вивести текст.
Ввести групу (з клавіатури), прізвище студента та курс (поля вводу). Якщо неправильно вказано курс (перша цифра номеру групи), вивести попередження, інакше вивести повне ім’я студента.
Лістинг програми
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Functions</title>
<script language="javascript">
<!--
function validate_form ( ){
valid = true;
if ( document.sdudent.group.value == "" ){
alert ( "Будь ласка заповніть поле група" );
valid = false;
} else {
if ( document.sdudent.kurs.value == "" ){
alert ( "Будь ласка заповніть поле курс" );
valid = false;
} else {
if ( document.sdudent.pib.value == "" ){
alert ( "Будь ласка заповніть поле ПІБ студента" );
valid = false;
} else {
var sGroup=sdudent.group.value;
var sKurs=sdudent.kurs.value;
var Student=sdudent.pib.value;
var valid_stud=/[а-я]+/i;
var valid_rez_stud=valid_stud.test(Student);
var valid_group=/[0-9а-я]+/i;
var valid_rez_group=valid_group.test(sGroup);
var valid_kurs=/[0-9]+/i;
var valid_rez_kurs=valid_kurs.test(sKurs);
if (!valid_rez_group) {
alert("група введена некоректно!");
valid=false;
}
if (!valid_rez_kurs) {
alert("курс введений некоректно!");
valid=false;
}
if (!valid_rez_stud) {
alert("ПІБ студента введений некоректно!");
valid=false;
}
for (var i=0; i<sGroup.length; i++){
if ((sGroup.charAt(i)=="1")||(sGroup.charAt(i)=="2")||(sGroup.charAt(i)=="3")||(sGroup.charAt(i)=="4")||(sGroup.charAt(i)=="5")){
if (sGroup.charAt(i)==sKurs.charAt(0) && (valid)){
alert("Дані про студента "+ Student +" будуть відправлені");
break;
} else {
alert("Не співпадають введені група і курс");
valid = false;
break;
}
}
}
}
}}
return valid;
}
-->
</script>
<style type="text/css">
</style>
</head>
<body>
<form method="post" name="sdudent" action="" onsubmit="return validate_form( );">
<h1>Введіть дані про студента</h1>
<table>
<tr><td>Група:</td><td><input type="text" name="group"></td></tr>
<tr><td>Курс:</td><td><input type="text" name="kurs"></td></tr>
<tr><td>ПІБ студента:</td><td><input type="text" name="pib"></td></tr>
<tr><td></td><td><input type="submit" name="send" value="Відправити"></td></tr>
</table>
</form>
</body>
</html>
Результати роботи програми
Висновок: навчився обробляти події миші та клавіатури в Web-браузері за допомогою динамічних сценарії на мові JavaScript.