р

1. Валідація та збереження даних форм
Мета: Допомогти учням засвоїти факти та основні ідеї валідації та
збереження даних фори. Забезпечити якість вивчення нового матеріалу.
Формувати вміння виділяти головне, актуалізувати, конспектувати,
порівнювати, зіставляти. Забезпечити диференційований підхід. Встановити
зв'язки між засвоєними та новими знаннями. Формувати групи
компетентностей: соціально-трудову, інформаційну, загальнокультурну,
соціально-трудову, уміння вчитися.
 Повідомлення теми і мети уроку
Сьогодні на уроці ми з вами навчимось опрацьовувати дані
форми та перевіряти на правильність введення даних.
Мотивація навчальної діяльності
На минулому уроці ми познайомились з формами, але даних елемент є
непотрібний, якщо він не може надіслати дані та в подальшому ці дані не
будуть оброблені. Притому дані повинні бути коректними.
Не забувайте про правила поведінки на уроці. (Слайд2).
Актуалізація опорних знань
 Тестова перевірка знань учнів (Слайд3-4)
Вивчення нового матеріалу
Слайд5. Коли ви збираєте інформацію від людей, через форму, ви
застосовуєте якісь перевірки. Недотримання цих вимог може призвести до
втрати клієнтів, небажаних даних в вашій базі даних або навіть слабких місць
в системі безпеки вашого сайту. Історично, створення перевірок було
болісним процесом. На стороні сервера, процес полегшується завдяки
фреймворкам, які обробляють все за вас, але на стороні клієнта, ви, як
правило, користуєтесь JavaScript-бібліотеками, які доволі складно
інтегрувати. Валідація — процес, що дозволяє визначити, наскільки точно з
позицій потенційного користувача деяка модель представляє задані сутності
реального світу.
Слайд6. На щастя, HTML5 дає нам ряд можливостей, завдяки яким
можна виконувати більшість перевірок. Форми в HTML5 тепер мають
вбудовану підтримку для перевірки за допомогою використання спеціальних
атрибутів і нових типів введення, і надають вам широкий контроль над CSS-
стилями.
Слайд7. Просто додавши "необхідний атрибут до <input>, <select>,
</select><textarea> - required, ви повідомляєте браузеру, які значення повинні
бути в цій області. Це як червона зірочка (*), яку ми бачимо в більшості
реєстраційних форм.
Слайд8. Ми можемо встановити деякі основні обмеження, такі як
максимальна довжина, мінімальні і максимальні значення для числових

2. полів. Щоб обмежити довжину поля введення і textareas, використовуйте
атрибут maxlength. Це означатиме, що забороняється введення значення, яке
є більшим зазначеного в maxlength. Якщо користувач намагатиметься
вставити з буферу рядок більший зазначеного, то форма просто обріже його.
Поле <input type="number"> використовує мах та min атрибути, щоб створити
діапазон можливих значень (в нашому прикладі ми зробили мінімальний
допустимий вік 18 та максимальний 60).
Слайд9. CSS3 псевдо-класи дозволяють нам стилювати будь-які поля
форми в залежності від її стану. На прикладі ми бачимо, що у разі валідності
буде поле засвічуватись зеленим кольором, а в інакшому випадку червоним.
Слайд10. Ви, напевно, помітили, що при спробі відправити форму з
невірно заповненими полями, з'являється спливаюче вікно. Встановивши
атрибут title наших полів, ми можемо додавати підсказки про те, які дані
очікуються.
Слайд11. Атрибут pattern дозволяє розробникам задавати регулярний
вираз, який браузер буде регулювати введення даних користувачем, перш ніж
дозволити відправку даних. В нашому випадку - pattern="Будь-який рядок
string та символ @, також будь який рядок string та крапка й будь який рядок
string".
Слайд12. Спробуємо створити онлайнову програму для обрахунку
довжини гіпотенузи. Як на математиці ми здійснюємо обрахунки?
Розпочнемо зі звичайної структури. Скрипти для обрахунків даних ми
можемо або описувати в одному документі, або підключати як файли CSS.
Слайд13. Підключимо скрипт для обрахунків в котрі ми будемо
записувати необхідні функції - <script src="gpn.js"></script>
Слайд14-23. Створимо візуальну частину де опишемо:
<form> <!-- Початок опису форми -->
<h2> Програма на знаходження гіпотенузи </h2><!-- Опис призначення
програми для користувача -->
Введіть довжину першого катета: <input type="number" id="k1" required>
см.<br><br> <!-- Перше поле для зчитування довжини першого катета в
якому увімкнена обов’язковість вводу та є ідентифікатор даних до якого ми
будемо звертатись по дані -->
Введіть довжину другого катета: <input type="number" id="k2" required>
см.<br><br>
<input type="button" value="Обрахувати" onclick="rez()"> <!-- Опишемо
клавішу з надписом «Обрахувати» та подію «При кліку» котра буде
взаємодіяти зі змінною rez -->
<hr> <!--Додамо горизонтальну лінію для візуального розмежування -->

3. <div id="textrez">Довжина гіпонетузи</div> <!-- Створимо параграф з
ідентифікатором textrez куди і буде виводись (зберігатись) наш результат -->
</form> <!-- Завершимо опис форм-->
Слайд24-31. Опишемо документ java де буде виконуватись функція
обрахунку:
function rez() { // оголосимо функцію rez() (таку ж як на кнопці подія
var k1, k2, result; // зарезервуємо 3 змінні. Зверніть увагу, що не обов’язково
вказувати тип даних
k1 = document.getElementById('k1').value; // у змінну k1 присвоїмо значення
котре візьмемо з документу, а шукати будемо по ідентифікатору k1, потрібні
дані заберемо з параметра value
k2 = document.getElementById('k1').value; // у змінну k2 присвоїмо значення
котре візьмемо з документу, а шукати будемо по ідентифікатору k2, потрібні
дані заберемо з параметра value
result = Math.sqrt(k1*k1+k2*k2); // обрахуємо дані присвоївши їх в змінну
result. Причому параметр Math. може мати змінну другу частину в котрій
вказується тип використовуваної функції
result = result.toFixed(2); // комірка result буде вміщувати дійсні числа, тому
обмежимо кількість цифр після коми до двох
document.getElementById('textrez').innerHTML = 'Довжина гіпотенузи '+result
+' сантиметрів'; } // знайдемо в документів потрібний ідентифікатор місця
виводу та імпортуємо в структуру документа за схемою тест, значення, текст.
Усвідомлення набутих знань й формування вмінь та навичок
 Практичне завдання (Слайд32-33)
Інструктивна карта
Завдання 1
1. Створити на робочому столі папку та назвати її власним прізвищем та
ім’ям.
2. Створіть у власній папці підпапку «Завдання 1»
3. Створіть документ index.html та запрограмуйте за опрацьованим
зразком:

4. 4. Створіть документ gpn.js котрий буде проводити обрахунки за
продемонстрованим зразком.
5. Перевірте коректність роботи веб-сторінки та дані у папці «Завдання 1»
Завдання 2
1. Створіть у власній папці підпапку «Завдання 2».
2. Відомо, що ідеальну масу людини можна обчислити за формулою:
де m - маса в кг; R - ріст в см; V - об’єм грудної клітки в см.
3. Перевірте коректність роботи веб-сторінки та дані у папці «Завдання 2»
Завдання 3
1. Створіть у власній папці підпапку «Завдання 3».
2. Обчислити довжину кола і площу круга за заданим радіусом R.
Перевірте коректність роботи веб-сторінки та дані у папці «Завдання 3»
 Релаксація
Вправа для профілактики короткозорості та порушення зору
Будиночок з долоньок
Вправа спрямована на поліпшення кровопостачання. Вона рекомендована в
якості розминки перед основною зарядкою для очей, а також для
розслаблення очних м'язів. Лікарі-офтальмологи рекомендують виконувати
цю вправу через кожні півгодини роботи за комп'ютером, читання, перегляду
телевізора. Зробіть вправу самі, а потім покажіть техніку виконання дитині.
Складіть долоні навхрест так, щоб перехрещувалися тільки пальці.
Одержаний «будиночок» з долонь «надіньте» на перенісся. Таким чином, очі
повинні опинитися під виїмками в долонях, а схрещені пальці - на лобі. Руки
повинні щільно прилягати до обличчя, не пропускаючи світла.

5. Тепер, коли очі перебувають в абсолютній темряві, починайте
«малювати» очними яблуками цифри і букви. Для різноманітності можна
зробити базові рухи: часте моргання, рухи ліворуч-праворуч, вгору-вниз.
Час цієї розминки становить від однієї до двох хвилин.
 Запитання для повторення (Слайд34)
1. Що таке валідність?
2. Які існують способи перевірки валідності введеної інформації?
3. Яким чином можна отримати дані з форми в функцію та
вивести їх?
VIІ. Домашнє завдання
Опрацювати вивчений матеріал. Підготуватись до практичної роботи.