Веб-програмування та інтерактивні сторінки. Мова програмування JavaScript, обробка форм.
Розшифруй
QR-код!!!
ТЕМА УРОКУ
ВИКОНУЙМО РАЗОМ!
Веб-програмування
галузь веб-розробки і різновид дизайну, в завдання якої входить проектування користувальницьких веб-інтерфейсів для сайтів або веб-додатків.
Веб-програмування�та інтерактивні сторінки
JavaScript (JS) — динамічна, об'єктно-орієнтована прототипна мова програмування. Найчастіше використовується для створення сценаріїв веб-сторінок, що надає можливість на стороні клієнта (пристрої кінцевого користувача):
взаємодіяти з користувачем
керувати браузером
асинхронно обмінюватися даними з сервером
змінювати структуру та зовнішній вигляд веб-сторінки
Цікаво
Брендан Айк — американський програміст, автор JavaScript, мови, яка була створена за 10 днів. Вона подавалась як скриптова для виконання невеликих клієнтських завдань у браузері. ��Один із засновників�американської компанії Mozilla, яка розробляє браузер Firefox.
Мова програмування JavaScript
Синтаксис JS навмисно було розроблено �максимально подібним до Java, який на �той момент дуже активно використовувався,
Динамічну типізацію запозичено від не�менш популярної мови Perl.
Функції в JavaScript — це просто ще один тип об'єкта. �Ними можна оперувати, як і будь-якими іншими �елементами, що запозичено з мови Scheme.
Наслідування реалізовано через прототипи, як у мові Self. �
Функції JavaScript дозволяють:
• зберігати дані в змінних�• активувати частину коду згідно з певними сценаріями,�що реалізуються на сторінці сайта�• створювати контент, який оновлюється автоматично�• керувати мультимедійними можливостями (працювати�з відео, анімувати зображення)
Мова програмування JavaScript
Що може JavaScript?
ІНТЕРАКТИВНІ СТОРІНКИ
Створити інтерактивну сторінку — означає створити сторінку, що вміє «спілкуватися» зі своїми відвідувачами. Проста статична сторінка доступна лише для перегляду. Для того щоб зв’язатися з адміністрацією сайта або зробити замовлення, відвідувачеві необхідно зателефонувати за контактним телефонним номером, написати електронного листа на e-mail або відправити факс.
Інтерактивність сторінки забезпечується за допомогою HTML-форм: реєстраційних, відправки повідомлень, онлайн-замовлень тощо.
Веб-програмування�та інтерактивні сторінки
Де саме потрібно розміщувати код?
Можна писати код в середині цього елемента
Підключати зовнішні файли з кодом за допомогою атрибуту src тегу script
<script> … </script>
<script src=“…”> … </script>
Щоб підключити JavaScript до сторінки використовують елемент <script>. Є два варіанти:
ОСНОВИ МОВИ ПРОГРАМУВАННЯ JAVASCRIPT
Задача. Необхідно для HTML-сторінки jawa1.html створити сценарій на мові JavaScript для показу на екрані вікна повідомлення з текстом “Всім привіт!" - переглянути
Варіант 1. Визначення сценарію безпосередньо на HTML-сторінці jawa1.html
<html>
<head>
<title>Використання JavaScript</title>
</head>
<body>
<script language="JavaScript">
alert('Всім привіт');
</script>
</body>
</html>
Варіант 2. Визначення сценарію в файлі m1.js, пов’язаному з HTML-сторінкою jawa1.html за допомогою параметру src тегу SCRIPT.
<html>
<head>
<title>Використання JavaScript</title>
<script language="JavaScript «src="m1.js">
</script>
</head>
<body>
</body>
</html>
Елементи форми
Форма може містити
поля для введення текстової інформації,
списки для вибору заздалегідь визначених відповідей,
прапорці,
перемикачі,
кнопки
інші елементи керування.
СТВОРЕННЯ ФОРМ В БРАУЗЕРІ
ТЕКСТОВІ ПОЛЯ
Для введення текстових даних у спеціальні поля використовують тег <INPUT>, в якого атрибут TYPE має значення text:
<INPUT TYPE="text">
Інші атрибути тегу <INPUT>:
NAME
VALUE
SIZE
MAXLENGTH
СТВОРЕННЯ ФОРМ В БРАУЗЕРІ
ПЕРЕГЛЯНУТИ
Цей самий тег, в якого атрибут TYPE має значення password використовують у разі потреби ввести пароль. При цьому надруковані символи будуть приховані за зірочками чи крапками.
<INPUT TYPE = "password">
Для текстів великого обсягу зі смугами прокручування використовують парний тег <TEXTAREA> з такими атрибутами:
ROWS
COLS
WRAP
NAME
ТЕКСТОВІ ПОЛЯ
СТВОРЕННЯ ФОРМ В БРАУЗЕРІ
ПЕРЕМИКАЧІ
Щоб дізнатися про думку відвідувача з того чи іншого приводу, не змушуючи його вводити інформацію, використовують перемикачі з варіантами відповідей. Відвідувач переглядає їх і вибирає потрібний. Перемикачі дають змогу вибрати лише один із запропонованих варіантів.
Для створення перемикачів використовують тег <INPUT>, в якого атрибут TYPE (тип) має значення radio. Групі перемикачів, що стосуються одного питання, обов'язково присвоюють однакове ім'я (NAME).
Атрибут VALUE позначає відповідний перемикачу варіант відповіді для розробника форми, тоді як напис після тегу <INPUT> — для користувача. Для вибору одного з перемикачів за умовчанням використовують атрибут CHECKED.
<html><head><title>Вибір мови</title></head>
<body>
<h4>Вибери мову:</h4><br>
<INPUT TYPE="radio" NAME="lang" value="українська" Checked>Українська<br>
<INPUT TYPE="radio" NAME="lang" value="російська" Checked>Російська<br>
<INPUT TYPE="radio" NAME="lang" value="англійська" Checked>Англійська<br>
</body></html>
СТВОРЕННЯ ФОРМ В БРАУЗЕРІ
ПРАПОРЦІ
Прапорці дають змогу вибирати кілька варіантів із запропонованих.
Для них атрибут TYPE тегу <INPUT> має значення checkbox.
<html>
<head>
<title>Прапорці</title>
</head>
<body>
<h4>Вибери екзамен:</h4 >
<input type="checkbox" name="exam" value=“українська”> Українська <BR>
<input type="checkbox" name="exam" value=“фізика”> Фізика <BR>
<input type="checkbox" name="exam" value=“математика”> Математика <BR>
</body>
</html>
СТВОРЕННЯ ФОРМ В БРАУЗЕРІ
СПИСКИ
Списки, які можна розміщувати у формі так само, як перемикачі та прапорці, також позбавляють відвідувачів веб-сторінки від необхідності вводити інформацію вручну, даючи змогу вибрати відповідь із запропонованих варіантів.
Список розміщують між тегами <SELECT> та </SELECT>, а його елементи визначають за допомогою тегу <OPTION>. Наприклад:
Район:
<SELECT>
<OPTION NAME="skad">Скадовський
<OPTION NAME="kalan">Каланчацький
<OPTION NAME="kachov">Каховський
</SELECT>
Якщо замість <SELECT> записати <SELECT MULTIPLE>, користувач отримає можливість вибрати зі списку кілька варіантів. Атрибут SIZE=N тегу <SELECT> обмежує КІЛЬКІСТЬ показаних елементів списку числом N, після чого буде використано прокручування.
ОСНОВИ МОВИ ПРОГРАМУВАННЯ JAVASCRIPT
КНОПКИ
Заповнивши форму текстом та вибравши потрібні елементи керування, користувач повинен мати можливість підтвердити свої дії або скасувати помилково введені дані.
Для підтвердження правильності введення використовують кнопку, яку створює тег <INPUT> з атрибутом TYPE = "submit".
На цій кнопці буде напис, заданий атрибутом VALUE.
Аналогічно створюють кнопку скасування дії: атрибут TYPE у цьому випадку повинен мати значення reset.
Звичайна кнопка, з якою можна зв'язати будь-яку дію, має атрибут TYPE = "button".
<INPUT TYPE="submit" VALUE= "Biдicлaти">
<INPUT TYPE="reset" VALUE="Оновити форму">
<INPUT TYPE="button" VALUE="Обчислити">
Для оригінального оформлення кнопки в неї можна вставити малюнок. Для цього використовують такий синтаксис:
<INPUT TYPE = "image" SRC="..." WIDTH=... HEIGHT=... ALT="..." VALUE=...>
СТВОРЕННЯ ФОРМ В БРАУЗЕРІ
Розглянемо створення тесту у вікні браузера із вбудованою функцією регеvirka, параметром якої є форма з відповідями користувача на запитання.
Відповіді на тестові запитання вибираються у групах перемикачів. Для кожного запитання є своє значення атрибута NAME у тегу INPUT — для першого NAME="one", для другого — NAME="two", для третього — NAME = "three".
Кожна така група перемикачів інтерпретується у функції перевірки як масив значень. Функція виконує перевірки такого типу:
if (tests.оnе[1].Checked) {і+ + ;}
Цей рядок коду означає, що якщо у формі з іменем tests у групі кнопок з іменем one вибране друге значення (елементи масиву нумеруються від 0), тобто вибрана правильна відповідь, то до значення змінної і додається одиниця.
ОСНОВИ МОВИ ПРОГРАМУВАННЯ JAVASCRIPT
Запустити тест
ОСНОВИ МОВИ ПРОГРАМУВАННЯ JAVASCRIPT
<HTML>
<HEAD>
<TITLE>Тестування</TITLE>
<BODY>
<H4>Тестування</H4>
<SCRIPT>
function perevirka (tests){
var i=0;
if (tests.one[1].checked) {i++;}
if (tests.two[0].checked) {i++;}
if (tests.three[2].checked) {i++;}
if (tests.free[2].checked) {i++;}
document.tests.druk.value = i;
}</SCRIPT>
</HEAD>
ОСНОВИ МОВИ ПРОГРАМУВАННЯ JAVASCRIPT
<FORM METHOD="post" NAME="tests">
2+2=? <BR><BR>
<INPUT TYPE="radio" NAME="one" VALUE="1">5 <BR>
<INPUT TYPE="radio" NAME="one" VALUE="2">4 <BR>
<INPUT TYPE="radio" NAME="one" VALUE="3">3<BR><BR>
3+3=? <BR><BR>
<INPUT TYPE="radio" NAME="two" VALUE="1">6<BR>
<INPUT TYPE="radio" NAME="two" VALUE="2">5<BR>
<INPUT TYPE="radio" NAME="two" VALUE="3">7<BR><BR>
4+4=? <BR><BR>
<INPUT TYPE="radio" NAME="three" VALUE="1">7<BR>
<INPUT TYPE="radio" NAME="three" VALUE="2">9<BR>
<INPUT TYPE="radio" NAME="three" VALUE="3">8<BR>BR>
5+9=? <BR><BR>
ОСНОВИ МОВИ ПРОГРАМУВАННЯ JAVASCRIPT
<INPUT TYPE="radio" NAME="free" VALUE="1">7<BR>
<INPUT TYPE="radio" NAME="tfree" VALUE="2">9<BR>
<INPUT TYPE="radio" NAME="free" VALUE="3">8<BR><BR>
<INPUT NAME="check" ONCLICK="perevirka (tests)" TYPE="button" VALUE="Кількість вірних відповідей">
<TEXTAREA cols="1" NAME="druk" ROWS="1"></TEXTAREA>
<INPUT TYPE="reset" VALUE="Оновити форму">
</FORM>
</BODY>
</HTML>
Вираз document.tests.druk.Value = і означає, що значення змінної і присвоєне об'єкту druk — таку назву має текстова область для виведення інформації в один рядок та два стовпця:
<TEXTAREA R0WS = "1" C0LS = “1" NAME="druk"></TEXTAREA>
Ця область міститься у формі, якій присвоєно назву tests. Форма розташована у поточному документі document.
Кнопка Кількість правильних відповідей ініціює виконання функції perevirka(this.form) після настання події ОnСІіск (клацання кнопки). Аргумент this.form показує, що обчислення застосовують до поточної форми.
<INPUT NAME="check" onclick="perevirka(this.form)" TYPE="button" Value="Кількість правильних відповідей" >
Передбачена ще одна кнопка — Оновити форму — для очищення форми.
ОСНОВИ МОВИ ПРОГРАМУВАННЯ JAVASCRIPT
Приклад 2. Потрібно написати сценарій, в якому в залежності від довжини сторони або радіуса і форми вибраного вітражу обчислюється його площа.
ОСНОВИ МОВИ ПРОГРАМУВАННЯ JAVASCRIPT
Роз’язування. Для простоти будемо вважати, що вітраж може мати форму квадрата(задається його сторона), або форму круга(задається радіус), або форма рівностороннього трикутника(задається його сторона).
Площу фігури будемо розраховувати по формулі k*a2, де k – коефіцієнт, що залежить від форми вибраної фігури; а – значення, що задається користувачем. Обчислення будуть простішими, якщо коефіцієнт k вказати як значення параметра value відповідного перемикача. Клацання на елементі «перемикач» відповідає події Click, обробка якої відбувається при визові функції test. Функція має єдиний параметр, значення параметра – value перемикача, яке служить для обчислення площі фігури.
ОСНОВИ МОВИ ПРОГРАМУВАННЯ JAVASCRIPT
Працюємо на оцінку!
Елементи мови JavaScript
Домашнє завдання