Тема: поняття елемента керування, події, пов’язані з елементами керування, обробники цих подій мовою Javascript.
Мета:
Хід уроку
1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.
2. Актуалізація опорних знань
Дати відповіді на запитання.
Порівняти відповіді з очікуваними.
Особливістю мови Javascript є те, що вона спрямована на створення динамічних HTML-сторінок завдяки використанню елементів керування та підтримує велике коло баз даних.
Форма — це основний інструмент заповнення і передавання повідомлень від користувача до сервера. У формах можна вводити текст або вибирати потрібні варіанти зі списку. Залежно від введених користувачем даних ця програма може формувати різні веб-сторінки, відправляти запити до бази даних, запускати різні додатки тощо.
Об'єкт (від латинською objectum — предмет, явище) — це те, на що спрямована певна діяльність. Кожний об'єкт має свою назву та низку властивостей (параметрів).
Подія — зміна властивостей об'єкта, взаємодія між об'єктами, утворення нового об'єкта або знищення наявного об'єкта.
Метод — дія, яку об'єкт може виконувати.
Події й опрацювання подій є істотньою частиною програмування мовою JavaScript. Події переважно спричиняються діями користувача. Програми опрацювання подій (обробники подій) описано далі таким чином (перелік не є вичерпним):
назва програми — подія — зміст події та зауваження щодо її опрацювання:
onBlur — blur — поля форми select, text чи textarea гублять фокус;
onChange — change — поля форми select, text чи textarea гублять фокус, а їхні величини змінюються;
onClick — click — клацання мишею на об'єкті форми;
onFocus — focus — поле отримує фокус введення з клавіатури чи клацанням миші. Вибір результатів всередині поля з подією select, а не з подією focus;
onLoad — load — завершення завантаження вікна або всіх фреймів всередині тегу FRAMESET. Використовують всередині тегів BODY або FRAMESET. Наприклад, <BODY onLoad="…">. Робота onLoad, описана всередині фрейма в тезі BODY, виконується до роботи onLoad, описаної всередині тегу FRAMESET в тезі FRAMESET;
onMouseOver — mouseOver — курсор миші на об'єкті. Повернення true всередині опрацювання події, якщо потрібно використати властивості status або defaultStatus;
onSelect — select — користувач вибирає певний текст всередині поля text або textarea;
onSubmit — submit — користувач відправляє форму на Web-сервер. Можна використати для зупинки передавання даних форми при return=false і лише при такій величині;
onUnload — unload — Вихід з документу. Використовують всередині тегів BODY чи FRAMESET. Наприклад, <BODY onUnload="…">. Виконання onUnload, описаного всередині фрейму тега BODY, відбувається перед подією onUnload, описаною всередині FRAMESET у тезі FRAMESET.
3. Вивчення нового матеріалу
Елементи керування — це графічні об'єкти для показу або введення даних, виконання дій або полегшення роботи: текстові поля, списки, перемикачі, кнопки, прапорці тощо. Елементи керування дають користувачеві змогу, наприклад, запускати веб-сценарії. Елементи керування можуть бути зв'язані, вільні або обчислювані.
Зв'язаний елемент керування — елемент, джерело даних якого — поле в таблиці або запиті. Його використовують для відображення значень полів бази даних. Це може бути текст, дати, числа, значення «Так/Ні», зображення або діаграми.
Вільний елемент керування — елемент керування, який не має джерела даних, який використовують для відображення відомостей, зображень.
Обчислюваний елемент керування — елемент керування, джерело даних якого — вираз — комбінація операторів, назв елементів керування, назв полів, функцій, які повертають одне значення, і сталих.
Обробник події — це частина програми, що виконує певні дії у відповідь на подію (спричинену, наприклад, дією користувача).
Основні типи елементів керування
Перемикачі задають за допомогою елемента INPUT. Розпізнають: залежні («вкл/викл») і незалежні, що можуть приймати і змінювати своє значення незалежно від інших перемикачів.
Меню задають за допомогою елементів SELECT, OPTGROUP і OPTION. Меню надає користувачу список можливих варіантів вибору.
Текстове поле задають за допомогою елементів INPUT (один рядок) і TEXTAREA (декілька рядків). Введений текст стає поточним значенням елемента керування.
Вибір файлів для відправлення вибраних файлів і приховані елементи реалізють за допомогою елемента INPUT.
Перелічені вище елементи керування використовують для побудови інтерфейсу користувача на веб-сторінці і для створення HTML-форм. Елемент INPUT є найуживанішим тегом, за його допомогою реалізуються основні функції форми. Якщо елементи керування вказано поза контейнером FORM, то вони створюють не форму, а інтерфейс користувача на веб-сторінці. Його особливість — відсутність кінцевого (завершальногого) тега.
Синтаксис використання простих елементів керування
<input type=button [name=назва] value="напис на кнопці">
— кнопка.
<input type=submit [name=назва] value="напис на кнопці"> — кнопка відправки.
<input type=reset [name=назва] value="напис на кнопці">
— кнопка скидання значень встановлює для всіх елементів форми значення як усталено. Наявність цієї кнопки забезпечує очищення форми.
<input type=image [name=назва] src="шлях до файлу зображення">
— кнопка-малюнок для надсилання координат точки клацання.
<input type=checkbox name=назва value=значення [checked]>
— незалежний перемикач. Дає можливість вказати свої налаштування за допомогою вибору певних значень. Щоб перемикач був як усталено включений, необхідно для нього вказати атрибут checked. В одній формі може бути одночасно обрано декілька таких перемикачів.
<input type=radio name=одна_й_та_сама_назва value=значення1 checked>
<input type=radio name=одна_й_та_сама_назва value=значення2> …
— залежні перемикачі.
<input type=text name=назва [value=значення як усталено] [size=розмір_поля] [maxlen=довжина_поля]>
— введення текстового рядка. Даний тег створює поле з максимально допустимою довжиною тексту maxlen і розміром (на формі) в size знакомісць.
<input type=password name=назва [value=значення як усталено] [size=розмір_поля] [maxlen=довжина_поля]>
— введення текстового рядка пароля. Дані, що введені у таке поле, не буде відображено, а кожен символ буде замінено «зірочками».
<input type=hidden name=назва value=значення>
— приховане текстове поле, яке використовують для передачі службової інформації.
virtual — праворуч виведено смугу прокручування, текст виглядає розбитим на рядки, ознаку нового рядка створює натискання клавіші ENTER;
physical — цей тип залежить від типу браузера і виглядає по-різному;
none — текст виглядає у полі у тому вигляді, в якому користувач його вводить. Якщо текст не вміщається в один рядок, з'являється горизонтальна смуга прокручування.
<select name=day size=1>
<option value=1> понеділок </option>
<option value=2> вівторок </option>
<option value=3> середа </option>
<option value=4> четвер </option>
<option value=5> п'ятниця </option>
<option value=6> субота </option>
<option value=7 selected> неділя </option>
</select>
— приклад cписку вибору, реалізованого за допомогою тега SELECT.
В HTML5 добавлено нові значення типу елемента INPUT, описані у таблиці нижче
| Тип | Призначення |
|---|---|
| color | вибір кольору |
| date | вибір дати |
| datetime-local | вказання місцевої дати й часу |
| для адреси електронної пошти | |
| month | вибір місяця |
| number | для введення чисел |
| range | повзунок для вибору числа: min — найменше значення; max — найбільше значення; value — значення як усталено; step — крок |
| search | поле для пошуку |
| tel | для телефонних номерів |
| time | для часу |
| url | для веб-адрес |
| week | вибір тижня |
Виклик обробника події вказують у контейнері елемента у такому форматі:
Назва_події="Назва_функції-обробника()"
Наприклад, для події клацання кнопкою миші і обробника Get це має такий вигляд:
onclick="Get()"
Запис тексту в абзац кодом Javascript здійснюють такою вказівкою:
document.getElementById('id_абзацу').innerHTML=('текст для виведення');
Заміна елемента керування на текст (напис) кодом Javascript здійснюють такою вказівкою:
id_елемента.outerHTML="текст для виведення";
В обох випадках текст для виведення — це код HTML. Інакше кажучи, у ньому можна використовувати усі коди HTML для форматування символів і тексту.
4. Інструктаж з ТБ
5. Вироблення практичних навичок
Завдання 1. Використовуючи такі зображення:
і текст, створити форму експрес-опитування за таким зразком:
Після натискання кнопки з написом Результат внизу сторінки на її місці має виникнути такий напис:
На місці 4 має бути кількість правильних відповідей — одна з цифр 0, 1, 2, 3, 4 залежно від дій користувача. Усі коди записати у теку з назвою Ваше прізвище_1 у місці, вказому вчителем. Порівняти з демонстраційним розв'язанням: html + js.
6. Підбиття підсумків уроку
Виставлення оцінок.
7. Домашнє завдання
Вивчити матеріал уроку. При потребі доробити завдання. Створити форму, яка має багаторядкове текстове поле і кнопку. Натискання на кнопку має призводити до відображення тексту, введеного у багаторядкове текстове поле і кількість набраних символів.
Текст упорядкував Олександр Рудик.