Тема: поняття елемента керування, події, пов’язані з елементами керування, обробники цих подій мовою Javascript.

Мета:

• ознайомити з елементами керування та їхнім призначенням;
• навчитись використовувати елементи керування;
• ознайомити з поняттям події для елементів керування;
• навчитись визначати обробників подій мовою Javascript.

• має уявлення про:
  • організацію динамічних Веб-сторінок;
  • елементи керування та їх параметри;
  • події й обробники подій;
• наводить приклади:
  • елементів керування мовою Javascript;
  • обробників подій мовою Javascript;
• вміє:
  • створювати елементарні форми з елементами керування;
  • визначати властивості елемента керування;
  • визначати подію;
  • розміщувати елементи керування.

1. Організаційний момент.
2. Актуалізація опорних знань.
3. Вивчення нового матеріалу.
4. Інструктаж з ТБ.
5. Вироблення практичних навичок.
6. Підбиття підсумків уроку.
7. Домашнє завдання.

Хід уроку

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. Вивчення нового матеріалу

Елементи керування — це графічні об'єкти для показу або введення даних, виконання дій або полегшення роботи: текстові поля, списки, перемикачі, кнопки, прапорці тощо. Елементи керування дають користувачеві змогу, наприклад, запускати веб-сценарії. Елементи керування можуть бути зв'язані, вільні або обчислювані.

Зв'язаний елемент керування — елемент, джерело даних якого — поле в таблиці або запиті. Його використовують для відображення значень полів бази даних. Це може бути текст, дати, числа, значення «Так/Ні», зображення або діаграми.

Вільний елемент керування — елемент керування, який не має джерела даних, який використовують для відображення відомостей, зображень.

Обчислюваний елемент керування — елемент керування, джерело даних якого — вираз — комбінація операторів, назв елементів керування, назв полів, функцій, які повертають одне значення, і сталих.

Обробник події — це частина програми, що виконує певні дії у відповідь на подію (спричинену, наприклад, дією користувача).

Основні типи елементів керування

• Кнопки задають за допомогою елементів BUTTON и INPUT. Розпізнають:
  • кнопки відправлення (даних форми серверу);
  • кнопки скидання значень (повернення початкових значень);
  • інші кнопки, для них не вказано дію, що виконують як усталено.

• Перемикачі задають за допомогою елемента 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=значення₁ checked>
  <input type=radio name=одна_й_та_сама_назва value=значення₂> …
  — залежні перемикачі.

• <input type=text name=назва [value=значення як усталено] [size=розмір_поля] [maxlen=довжина_поля]>
  — введення текстового рядка. Даний тег створює поле з максимально допустимою довжиною тексту maxlen і розміром (на формі) в size знакомісць.

• <input type=password name=назва [value=значення як усталено] [size=розмір_поля] [maxlen=довжина_поля]>
  — введення текстового рядка пароля. Дані, що введені у таке поле, не буде відображено, а кожен символ буде замінено «зірочками».

• <input type=hidden name=назва value=значення>
  — приховане текстове поле, яке використовують для передачі службової інформації.

• <textarea></textarea> — багаторядкове текстове поле з атрибутами:
  • cols — ширина поля у символах;
  • disabled — блокування доступу та зміни елемента;
  • maxlength — максимальне число символів тексту, які можна ввести;
  • name — назва поля;
  • readonly — заборона зміни вмісту поля користувачем;
  • rows — висота поля у строках тексту;
  • wrap — тип перенесення рядків з такими значеннями:

    • 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, описані у таблиці нижче

Виклик обробника події вказують у контейнері елемента у такому форматі:

Назва_події="Назва_функції-обробника()"

Наприклад, для події клацання кнопкою миші і обробника 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. Домашнє завдання
Вивчити матеріал уроку. При потребі доробити завдання. Створити форму, яка має багаторядкове текстове поле і кнопку. Натискання на кнопку має призводити до відображення тексту, введеного у багаторядкове текстове поле і кількість набраних символів.

Текст упорядкував Олександр Рудик.