Тема 5: «Алгоритми та програми». Урок № 37. (До § 27)

Опрацювання подій

Інтерактивний план-конспект уроку для 8 класу НУШ

🎯 Мета уроку

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

✅ Очікувані результати

Після уроку учні зможуть:

Пояснювати, що таке подія та обробник події.
Створювати об'єкти класу `Button` у `tkinter`.
Прикріплювати до кнопок функції-обробники подій за допомогою атрибута `command`.
Використовувати метод `bind()` для опрацювання інших подій (натискання клавіш, рух миші).
Розробляти прості програми, що реагують на дії користувача.

📊 Групи результатів (НУШ)

Візуалізація важливості груп результатів для цього уроку.

Учень / учениця:

ГР1 – працює з інформацією, даними, моделями;
ГР2 – створює інформаційні продукти;
ГР3 – працює в цифровому середовищі;
ГР4 – безпечно та відповідально працює з інформаційними технологіями.

📚 Тип уроку

Урок вивчення нового матеріалу з елементами практичної роботи.

💻 Обладнання та ПЗ

Комп'ютери з встановленим Python та `tkinter`.
Проєктор або інтерактивна дошка.
Середовище розробки (наприклад, IDLE, VS Code).

🔗 Міжпредметні зв'язки

Технології (розробка інтерактивних застосунків).
Математика (координатні системи для розміщення об'єктів).

ПОВТОРЮЄМО

Актуалізація опорних знань

Яка команда використовується для імпорту всіх класів модуля `tkinter`?
Як встановити заголовок вікна програми `root`?
Як створити віджет `Label` з текстом "Hello" та прив'язати його до головного вікна `root`?
Який метод використовується для зміни властивостей віджета (наприклад, кольору фону `bg`)?
Як розташувати віджет `my_label` по центру вікна за допомогою `pack()`?
Що відбудеться, якщо в `root.geometry()` вказати '200x100+50+100'?

Джерело: Підручник з інформатики для 8 класу (стор. 165-168)

Практичний блок уроку

1. Множинний вибір (Радіокнопки)

Що таке подія в контексті графічного інтерфейсу користувача?

2. Заповнення пропусків

Заповніть пропуски:

Блок програмного коду, який виконується в разі настання події, з якою він пов'язаний, називається .

3. Створіть вікно програми з кнопкою "Змінити колір". При натисканні на кнопку колір фону вікна повинен змінюватися на блакитний.

from tkinter import*

def change_bg_color():
    root['bg'] = 'lightblue'

root = Tk()
root.title('Змінюємо колір')
root.geometry('300x200')

# Ваш код тут для створення кнопки та її прив'язки
# btn = Button(root, text = 'Змінити колір', command = change_bg_color)
# btn.pack(pady=50) # Для центрування кнопки

root.mainloop()

**Інструкція:** Скопіюйте код у ваш Python IDE (наприклад, IDLE), доповніть його та запустіть, щоб перевірити роботу. Натисніть кнопку "Запустити код (Python IDE)", щоб перевірити, чи відповідає ваш код умовам завдання.

4. Множинний вибір (Чекбокси)

Які властивості може мати об'єкт класу `Event` при опрацюванні подій? (Оберіть кілька варіантів)

5. Напишіть програму, де віджет `Label` з текстом "Рухай мене!" може переміщуватися вгору/вниз/ліворуч/праворуч на 10 пікселів за допомогою відповідних клавіш зі стрілками.

from tkinter import *

def move_label(event):
    # використовуємо глобальний lab, а не event.widget
    x = lab.winfo_x()
    y = lab.winfo_y()

    dx, dy = 0, 0
    if event.keysym == 'Up':
        dy = -10
    elif event.keysym == 'Down':
        dy = 10
    elif event.keysym == 'Left':
        dx = -10
    elif event.keysym == 'Right':
        dx = 10

    lab.place(x=x+dx, y=y+dy)

root = Tk()
root.title('Рухомий напис')
root.geometry('400x300')

lab = Label(root, text='Рухай мене!', bg='lightgreen', font=('Arial', 16))
lab.place(x=150, y=100)

# Внесіть зміни тут: 
# root.bind_all('<Key>', move_label) # Слухаємо натискання клавіш у всьому застосунку — без фокусу

root.mainloop()

**Інструкція:** Скопіюйте код у ваш Python IDE (наприклад, IDLE), доповніть його для опрацювання подій клавіатури та запустіть, щоб перевірити рух віджета. Натисніть кнопку "Запустити код (Python IDE)", щоб перевірити, чи відповідає ваш код умовам завдання.

Перевірка знань

Натисніть на картку, щоб побачити відповідь.

1. Що таке подія в програмуванні графічного інтерфейсу?

Подія — це зовнішній вплив на об'єкт, на який цей об'єкт може реагувати (наприклад, натискання кнопки, рух миші, натискання клавіші).
2. Що таке обробник події?

Обробник події — це блок програмного коду (функція або метод), який виконується у відповідь на настання певної події.
3. Який атрибут використовується для прив'язки обробника події до кнопки `Button` при її створенні?

Атрибут `command` (наприклад, `Button(root, text='OK', command=my_function)`).
4. Який метод використовується для опрацювання інших подій, окрім натискання кнопки?

Метод `bind()` (наприклад, `widget.bind('<EventName>', event_handler_function)`).
5. Назвіть три властивості об'єкта класу `Event`, які можна використовувати в обробниках подій.

`x`, `y` (координати миші), `char` (набраний символ), `keysym` (код символу).
6. Що необхідно зробити, щоб віджет отримував події клавіатури?

Надати йому фокус за допомогою методу `focus_set()` (наприклад, `widget.focus_set()`) та прив'язати подію клавіатури до нього або до вікна.

Джерело: Підручник з інформатики для 8 класу (стор. 170-175)

Домашнє завдання

1. Теоретична частина:

Опрацювати § 27 (стор. 170-177).

2. Практична частина:

Виконати завдання із прикладу № 6 (стор. 174-175).

3. Завдання за бажанням (для закріплення):

Інтерактивна платформа IZZI (8 клас) до § 27: https://ua.izzi.digital/DOS/1183864/1262913.html

Додаткові матеріали

Техніка безпеки
Оцінювання учнів та учениць на уроках інформатики
Підручник з інформатики для 8 класу (§ 27, стор. 170-177)
Інтерактивна платформа IZZI (8 клас)
Інтерактивна платформа IZZI (8 клас) до § 27: https://ua.izzi.digital/DOS/1183864/1262913.html