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

Розв’язання завдань з опрацюванням подій

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

🎯 Мета уроку

Освітня: закріпити знання учнів про опрацювання подій у `tkinter`, навчити застосовувати методи `command` та `bind()` для створення інтерактивних програм, що реагують на дії користувача.
Розвивальна: розвивати навички аналізу та модифікації програмного коду, творче мислення при розв’язанні задач зі створення графічного інтерфейсу, вміння працювати з різними типами подій (кнопки, клавіатура).
Виховна: виховувати посидючість, точність у програмуванні, відповідальність за результат та самостійність у пошуку рішень.

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

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

Створювати кнопки з текстом та зображеннями, прив'язуючи до них обробники подій.
Змінювати властивості віджетів (колір, шрифт, текст) за допомогою функцій-обробників.
Опрацьовувати події клавіатури (`<Key>`, `<KeyPress-Up>` тощо) для переміщення або зміни об'єктів.
Використовувати метод `bind()` для прив'язки різних подій до віджетів.
Самостійно розв'язувати задачі зі створення інтерактивних програм з графічним інтерфейсом.

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

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

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

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

📚 Тип уроку

Урок застосування знань, формування практичних умінь та навичок.

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

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

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

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

ПОВТОРЮЄМО

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

Що таке подія в програмуванні графічного інтерфейсу?
Що таке обробник події?
Який атрибут використовується для прив'язки обробника події до кнопки `Button` при її створенні?
Який метод використовується для опрацювання інших подій, окрім натискання кнопки?
Назвіть три властивості об'єкта класу `Event`, які можна використовувати в обробниках подій.
Що необхідно зробити, щоб віджет отримував події клавіатури?

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

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

Завдання для самостійного виконання (Вправа 27)

Виконайте наступні завдання, застосовуючи знання про опрацювання подій у `tkinter`.

1. Створіть вікно програми розмірами $250 \times 200$ із заголовком "Цікаві кнопки". Завершіть програму оператором `root.mainloop()`.

from tkinter import*

root = Tk()
root.title('Цікаві кнопки')
root.geometry('280x300')

# root.mainloop() # Закоментовано для подальших кроків

2. Розмістіть угорі вікна кнопку із написом "Червоний колір", яка займає всю ширину вікна. Для цього пакувальник `pack()` викликайте з параметрами `side = TOP`, `fill = X`.

from tkinter import*

def button_red():
    pass # Обробник події для кнопки "Червоний колір"

root = Tk()
root.title('Цікаві кнопки')
root.geometry('280x300')

b_red = Button(text = 'Червоний колір', command = button_red)
b_red.pack(side = TOP, fill = X)

# root.mainloop() # Закоментовано для подальших кроків

3. Аналогічно створіть кнопки із написами "Синій колір", "Збільшити шрифт", "Зменшити шрифт", "Змінити напис".

from tkinter import*

def button_red():
    pass # Обробник події для кнопки "Червоний колір"

def button_blue():
    pass # Обробник події для кнопки "Синій колір"

def button_plus():
    pass # Обробник події для кнопки "Збільшити шрифт"

def button_minus():
    pass # Обробник події для кнопки "Зменшити шрифт"

def button_change_text():
    pass # Обробник події для кнопки "Змінити напис"

root = Tk()
root.title('Цікаві кнопки')
root.geometry('280x300')

b_red = Button(text = 'Червоний колір', command = button_red)
b_red.pack(side = TOP, fill = X)

b_blue = Button(text = 'Синій колір', command = button_blue)
b_blue.pack(side = TOP, fill = X)

b_plus = Button(text = 'Збільшити шрифт', command = button_plus)
b_plus.pack(side = TOP, fill = X)

b_minus = Button(text = 'Зменшити шрифт', command = button_minus)
b_minus.pack(side = TOP, fill = X)

b_change_text = Button(text = 'Змінити напис', command = button_change_text)
b_change_text.pack(side = TOP, fill = X)

# root.mainloop() # Закоментовано для подальших кроків

4. Додайте внизу вікна віджет `label_text` класу `Label`. Задайте значення властивостей `fg`, `bg` (колір фону), `font` (шрифту).

from tkinter import*

def button_red():
    pass # Обробник події для кнопки "Червоний колір"

def button_blue():
    pass # Обробник події для кнопки "Синій колір"

def button_plus():
    pass # Обробник події для кнопки "Збільшити шрифт"

def button_minus():
    pass # Обробник події для кнопки "Зменшити шрифт"

def button_change_text():
    pass # Обробник події для кнопки "Змінити напис"

root = Tk()
root.title('Цікаві кнопки')
root.geometry('280x300')

b_red = Button(text = 'Червоний колір', command = button_red)
b_red.pack(side = TOP, fill = X)

b_blue = Button(text = 'Синій колір', command = button_blue)
b_blue.pack(side = TOP, fill = X)

b_plus = Button(text = 'Збільшити шрифт', command = button_plus)
b_plus.pack(side = TOP, fill = X)

b_minus = Button(text = 'Зменшити шрифт', command = button_minus)
b_minus.pack(side = TOP, fill = X)

label_text = Label(root, text = 'Hello, World!', font = 'Arial 12', fg = 'black', bg = 'white')
label_text.pack(side = BOTTOM, fill = X)

# root.mainloop() # Закоментовано для подальших кроків

5. Створіть обробник події Натискання на кнопку для об'єкта `b_red` (рис. 27.9): `def button_red(): root.config(bg = 'red')`.

6. За аналогією створіть обробник події для кнопки "Синій колір".

7. Створіть обробник події для кнопки "Збільшити шрифт": `def button_plus(): label_text.config(font = 'Arial 18')`.

8. За аналогією створіть обробник події для кнопки "Зменшити шрифт".

9. Створіть обробник події для кнопки "Змінити напис", який змінює текст напису на "Привіт від Python!".

10. Запустіть програму, перевірте роботу кнопок.

from tkinter import*

# Внесіть зміни тут:
def button_red():
    # root.config(bg = 'red')

# Внесіть зміни тут:
def button_blue():
    # root.config(bg = 'blue')

# Внесіть зміни тут:
def button_plus():
    # label_text.config(font = 'Arial 20')

# Внесіть зміни тут:
def button_minus():
    # label_text.config(font = 'Arial 10')

# Внесіть зміни тут:
def button_change_text():
    # label_text.config(text = 'Привіт від Python!')

root = Tk()
root.title('Цікаві кнопки')
root.geometry('250x300')

b_red = Button(text = 'Червоний колір', command = button_red)
b_red.pack(side = TOP, fill = X)

b_blue = Button(text = 'Синій колір', command = button_blue)
b_blue.pack(side = TOP, fill = X)

b_plus = Button(text = 'Збільшити шрифт', command = button_plus)
b_plus.pack(side = TOP, fill = X)

b_minus = Button(text = 'Зменшити шрифт', command = button_minus)
b_minus.pack(side = TOP, fill = X)

b_change_text = Button(text = 'Змінити напис', command = button_change_text)
b_change_text.pack(side = TOP, fill = X)

label_text = Label(root, text = 'Hello, World!', font = 'Arial 12', fg = 'black', bg = 'white')
label_text.pack(side = BOTTOM, fill = X)

root.mainloop()

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

11. Змініть розміри вікна, поясніть поведінку кнопок і напису.

**Поведінка кнопок:** Кнопки з `fill=X` розтягуються на всю доступну ширину у відповідності до розміру вікна. При зміні розміру вікна вони автоматично адаптують свою ширину. Розташування `side=TOP` означає, що вони розміщуються зверху одна за одною. Їхня висота залишається сталою, якщо не вказано `expand=True`.

**Поведінка напису:** Напис `label_text` з `side=BOTTOM` і `fill=X` розміщується внизу вікна та розтягується на всю ширину. Він також адаптує свою ширину при зміні розміру вікна. Його висота теж залишається незмінною.

Якщо ви зміните розмір вікна, ви побачите, що кнопки та напис автоматично підлаштовуються під нову ширину, зберігаючи свої відносні позиції (кнопки зверху, напис знизу).

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

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

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

1. Який метод використовується для зміни кольору фону вікна програми (`root`)?

Метод `config()` об'єкта `root`, наприклад: `root.config(bg='color')`.
2. Як можна змінити розмір шрифту віджета `Label` під час виконання програми?

Використовуючи метод `config()` для властивості `font`, наприклад: `label_text.config(font=('Arial', 18))`.
3. Що роблять параметри `side = TOP` та `fill = X` при використанні методу `pack()`?

`side = TOP` розміщує віджет у верхній частині доступного простору. `fill = X` розтягує віджет горизонтально на всю ширину батьківського віджета.
4. Який код змінить текст віджета `label_text` на "Новий текст"?

`label_text.config(text = 'Новий текст')`
5. Яке значення `side` слід використати для розміщення віджета внизу вікна?

`side = BOTTOM`.
6. Чи змінюється висота кнопок з `fill=X` при зміні розміру вікна? Поясніть.

Ні, висота кнопок залишається сталою, якщо не вказано `expand=True`. `fill=X` впливає лише на горизонтальне розтягування.

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

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

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

Повторити § 27 (стор. 170-177).

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

Виконати вправу № 27 (стор. 176-177).

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