Веб-технології_10-11

Урок 28. Створення динамічних елементів на веб-сторінках. Валідація та збереження даних форм

28.1. Створення динамічних елементів на веб-сторінках

Порівняння статистичних та динамічних сторінок

Статичні веб-сторінки

Статичні веб-сторінки залишатимуться однаковими до тих пір, поки хтось не змінить їх вручну
Прості у дизайні
Мови додатків та веб-мови, що використовуються для створення веб-сторінок HTML, JavaScript, CSS
Інформація оновлюється рідко
Сторінки завантажуються швидко

Динамічні веб-сторінки

Динамічні веб-сторінки є поведінковими та мають можливість створювати виразний контент для різних відвідувачів
Складні в побудові
Мови додатків та веб-мови, що використовуються для створення веб-сторінок CGI, AJAX, ASP, ASP.NET
Інформація оновлюється часто
Сторінки завантажуються довше

Динамічна веб-сторінка (англ. dynamic web page) — веб-сторінка, вміст якої може змінюватись.

Для написання динамічних веб-сторінок використовуються фрагменти коду, написані на мові JavaScript, яка має синтаксис, відмінний від HTML. Для того щоб відділити ці фрагменти від решти частини HTML-документа, такий код розміщують між тегами <SCRIPT>...</SCRIPT>.

Приклад створення Таблиці множення

Цей приклад дуже простий, але він демонструє способи використання деяких основних операторів JavaScript. Можна написати кожен рядок таблиці множення вручну:

<TABLE>

<TR>

<TD>2×2=4</TD> //символ × означає знак множення

<TD>4×2=8</TD> і так далі...

Але такий спосіб достатньо довгий і нудний, набагато швидше і раціональніше використати JavaScript:

var i, j ; //оголошення змінних

for (i=2; i<=10; i++) { document.write ("<TR>"); //рядки

for (j=2; j<10; j++) document.write("<TD>"+j+"×"+i+"="+(i*j)+"</TD>") ; //стовпці

document.write ("</TR>"); }

</SCRIPT>

Код веб-сторінки Таблиця множення

(index.html, 1.css і результат - вигляд сторінки у браузері).

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><HTML><HEAD> <TITLE>Таблиця множення</TITLE><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="1.css" ></HEAD>
<BODY><h2>Таблиця множення</h2><TABLE align="center" BORDER="1" CELLSPACING="5" CELLPADDING="5" RULES="cols"><SCRIPT> var i, j ; for (i=1; i<=10; i++) { document.write ("<TR>"); for (j=1; j<10; j++) document.write("<TD>"+j+"×"+i+"="+(i*j)+"</TD>") ; document.write ("</TR>") ; }</SCRIPT></TABLE>
</BODY></HTML>

1.css

body { color:red; }h2{ color:mediumblue; text-align: center; }td { color:mediumblue; background-color:yellow; font-weight: 800;}

28.2. Валідація та збереження даних форм

Що таке валідація форми?

Ви, непевно, неодноразово відвідували сайти з формою реєстрації і пробували її заповнити? Якщо так, то при цьому могли бачити наступні повідомлення:

"Це поле є обов'язковим для заповнення" (ви не можете залишити це поле порожнім)

"Будь ласка, введіть ваш телефонний номер в форматі xxx-xxxxxxx" (введіть три цифри, тире, сім цифр)

"Будь ласка, введіть справжню адресу електронної пошти" (якщо ваша запис не в форматі "somebody@example.com")

"Ваш пароль повинен бути від 4 до 15 символів довжиною, і містити одну велику літеру, один символ, і число" і т.п.

Валідація форми - це коли користувач вводить дані, а веб-додаток перевіряє чи вони коректні. Якщо дані вірні, додаток дозволяє даними бути відправленими на сервер і (як правило) бути збереженими в базі даних, якщо ні - він видає повідомлення про помилку.

Різні типи валідації форми

Існує два різних типи перевірки форми:

Перевірка на стороні клієнта - це перевірка, яка відбувається в браузері, перш ніж дані будуть відправлені на сервер. Це зручніше, ніж перевірка на стороні сервера, так як дає миттєву відповідь.
Перевірка на стороні сервера - це перевірка, яка виникає на сервері після відправки даних. Серверний код використовується для перевірки даних перед їх збереженням в базі даних. Якщо дані не проходять перевірку валідності, відповідь відправляється назад клієнту, щоб повідомити користувачеві, які виправлення повинні бути зроблені. Перевірка на стороні сервера не така зручна, як перевірка на стороні клієнта, оскільки вона не видає помилок до тих пір, поки не буде відправлена вся форма. Проте, перевірка на стороні сервера - це остання лінія захисту вашого додатки від неправильних або навіть шкідливих даних. Всі популярні серверні фреймворки мають функції для перевірки і очищення даних (що робить їх безпечними).

У реальному світі розробники схильні використовувати комбінацію перевірки на стороні клієнта і сервера.

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><HTML><HEAD> <TITLE>Валідація та збереження даних форм</TITLE><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="1.css" ></HEAD><BODY> <h1>Валідація та збереження даних форм</h1><form> <p> <fieldset> <legend>Стать<abbr title="Обов'язкове поле">*</abbr></legend> <input type="radio" required name="title" id="r1" value="Ч"><label for="r1">Ч</label> <input type="radio" required name="title" id="r2" value="Ж"><label for="r2">Ж</label> </fieldset> </p> <p> <label for="n1">Вік?</label> <input type="number" min="12" max="120" step="1" id="n1" name="age"pattern="\d+"> </p> <p> <label for="t1">Улюблені фрукти?<abbr title="This field is mandatory">*</abbr></label> <input type="text" id="t1" name="fruit" list="l1" required pattern="[Б]анан|[Г]руша|[Я]блуко|[П]олуниця|[Л]имон|[А]пельсин"> <datalist id="l1"> <option>Банан</option> <option>Груша</option> <option>Яблуко</option> <option>Полуниця</option> <option>Лимон</option> <option>Апельсин</option> </datalist> </p> <p> <label for="t2">Е-mail?</label> <input type="email" id="t2" name="email"> </p> <p> <label for="t3">Коментар</label> <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> </p> <p> <button>Надіслати</button> </p></form></TABLE></BODY></HTML>

1.css

body { font: 1em sans-serif; padding: 0; margin : 0;}
form { max-width: 300px; margin: 0; padding: 0 5px;}
p > label { display: block;}
input[type=text],input[type=email],input[type=number],textarea,fieldset {-webkit-appearance: none; width : 100%; border: 1px solid #333; margin: 0; font-family: inherit; font-size: 90%; -moz-box-sizing: border-box; box-sizing: border-box;}
input:invalid { box-shadow: 0 0 5px 1px red;}
input:focus:invalid { outline: none;}

Завдання. Створіть веб-сторінку Таблиця квадратів. Розмістіть на цій сторінці форму.

Page updated

Google Sites

Report abuse