Урок 20. Кнопка: створення, властивості, події, обробники подій.
Урок 20. Кнопка: створення, властивості, події, обробники подій.
Embedded Files
Поділіться своєю думкою про онлайн уроки інформатики. Пройдіть анонімне опитування на головній сторінці сайту
Добрий день, восьмі класи! Сьогодні ми продовжимо вивчати створення графічного інтерфейсу у середовищі Lazarus. Ми вже вміємо розміщувати на формі мітки, поля вводу, списки. Сьогодні головна героїня нашого уроку — кнопка (TButton). Без кнопок не працює жодна сучасна програма: від калькулятора до онлайн-банкінгу. Саме кнопка дозволяє користувачу сказати програмі: «Зроби щось!».
Актуальність теми та застосування у житті
Кнопки ми натискаємо щодня:
«Увійти» в Discord, Instagram, Google Classroom
«Надіслати» повідомлення
«Купити» в інтернет-магазині
«Старт» у грі
«Друк» у Word Розуміння, як створюється кнопка, як змінюються її властивості та як вона реагує на натискання, — це основа створення будь-якого інтерактивного програмного продукту.
Актуалізація опорних знань (5 хв)
Яке стандартне компонентне панно в Lazarus містить кнопку? Відповідь: Standard (перша вкладка)
Як називається подія, яка відбувається, коли користувач клацає лівою кнопкою миші по компоненту? Відповідь: OnClick
Як називається процедура, яку ми пишемо для обробки події? Відповідь: обробник події (event handler)
Де в коді Lazarus автоматично створюється заголовок обробника? Відповідь: у розділі implementation після фрази «procedure TForm1.Button1Click(Sender: TObject);»
Основна теоретична частина (12–15 хв)
Створення кнопки
Перетягуємо компонент TButton з палітри Standard на форму
Автоматично з’являється назва Button1 (Button2, …)
Найважливіші властивості кнопки (Inspector Object)
Caption – текст на кнопці («OK», «Скасувати», «Розрахувати» тощо)
Name – ім’я об’єкта в коді (рекомендуємо змінювати на btnCalculate, btnExit тощо)
Enabled – True/False (чи активна кнопка)
Visible – True/False (чи видима)
Font – шрифт, розмір, колір тексту
Width, Height, Left, Top – розмір і позиція
Default – True → натискання Enter на формі = клік по цій кнопці
Cancel – True → натискання Esc = клік по цій кнопці
ModalResult – використовується в діалогових вікнах (mrOk, mrCancel тощо)
Основні події кнопки
OnClick – найчастіше використовується
OnDblClick – подвійний клік
OnMouseDown, OnMouseUp, OnMouseEnter, OnMouseLeave – для ефектів наведення
Обробник події OnClick При подвійному кліку по кнопці на формі Lazarus автоматично створює:
pascal
procedure TForm1.btnHelloClick(Sender: TObject);
begin
ShowMessage('Привіт, світ!');
end;
Практична робота
Практична робота
Тема: «Мій перший інтерактивний калькулятор на дві дії»
Тема: «Мій перший інтерактивний калькулятор на дві дії»
Практична робота №8 (20–25 хв)
Тема: «Мій перший інтерактивний калькулятор на дві дії»
Завдання
Створити програму-калькулятор, яка:
Має два поля вводу чисел (TEdit)
Має чотири кнопки: «+», «–», «*», «Очистити»
При натисканні на кнопку обчислення результат виводиться у мітку LabelResult
Кнопка «Очистити» очищає всі поля та мітку
Покрокова інструкція виконання (дуже детальна!)
Запуск Lazarus Пуск → Всі програми → Lazarus → Lazarus (або ярлик на робочому столі)
Створення нового проекту Project → New Project → Application → OK Зберегти відразу: File → Save All Папка: D:\Work\ВашеПрізвище\ Калькулятор_ВашеПрізвище\ Unit1.pas, Project1.lpi, назва проекту — Calculator_ВашеПрізвище
Оформлення форми
Form1.Caption := 'Калькулятор 8 клас'
Розміри форми 400×300
Розміщення компонентів
Написання коду (подвійний клік по кожній кнопці)
pascal
procedure TForm1.btnPlusClick(Sender: TObject);
var a, b, c: real;
begin
a := StrToFloat(edtA.Text);
b := StrToFloat(edtB.Text);
c := a + b;
lblResult.Caption := 'Результат: ' + FloatToStr(c);
end;
procedure TForm1.btnMinusClick(Sender: TObject);
var a, b, c: real;
begin
a := StrToFloat(edtA.Text);
b := StrToFloat(edtB.Text);
c := a - b;
lblResult.Caption := 'Результат: ' + FloatToStr(c);
end;
procedure TForm1.btnMultClick(Sender: TObject);
var a, b, c: real;
begin
a := StrToFloat(edtA.Text);
b := StrToFloat(edtB.Text);
c := a * b;
lblResult.Caption := 'Результат: ' + FloatToStr(c);
end;
procedure TForm1.btnClearClick(Sender: TObject);
begin
edtA.Text := '';
edtB.Text := '';
lblResult.Caption := 'Результат: ';
edtA.SetFocus;
end;
Збереження та запуск Ctrl+F9 → запуск Перевірити всі чотири кнопки
Звіт у Microsoft Word (10 хв)
Відкрити Word
Перший рядок: ПРІЗВИЩЕ ІМ’Я 8-? клас Підгрупа Завдання Кнопки – шрифт 28
Далі: Дата, Практична робота №8, Тема: Кнопка: створення, властивості, події… – шрифт 14
Вставити 2–3 скріншоти: форма в дизайнері + результат роботи програми
Зберегти: D:\Work\ВашеПрізвище\Завдання_Кнопки_ПРІЗВИЩЕ.docx
Критерії оцінювання практичної роботи за 12-бальною шкалою (8 клас)
Приклади мовою Пайтон
Приклади мовою Пайтон
Ось кілька цікавих і зрозумілих прикладів саме про кнопки у Python (з графічним інтерфейсом), які ідеально підійдуть для учнів 8 класу після теми «Кнопка: створення, властивості, події, обробники подій». Усі приклади працюють у звичайному Python 3 з бібліотекою tkinter (вона вже встановлена разом з Python).
1. Найпростіший «Привіт, світ!» на кнопці
1. Найпростіший «Привіт, світ!» на кнопці
Python
from tkinter import *
from tkinter import messagebox
def say_hello():
messagebox.showinfo("Привіт!", "Привіт, 8 клас! Ти натиснув кнопку!")
root = Tk()
root.title("Моя перша кнопка")
root.geometry("300x200")
btn = Button(root, text="Натисни мене!", font=("Arial", 14), command=say_hello)
btn.pack(pady=60)
root.mainloop()
2. Калькулятор на дві дії (як у Lazarus, але в Python)
2. Калькулятор на дві дії (як у Lazarus, але в Python)
Python
from tkinter import *
from tkinter import messagebox
def calculate():
try:
a = float(entry1.get())
b = float(entry2.get())
if operation.get() == "+":
res = a + b
elif operation.get() == "-":
res = a - b
elif operation.get() == "*":
res = a * b
else:
res = a / b if b != 0 else "Помилка!"
label_result.config(text=f"Результат: {res}")
except:
messagebox.showerror("Помилка", "Введіть правильні числа!")
root = Tk()
root.title("Калькулятор 8 клас")
root.geometry("400x300")
Label(root, text="Перше число:").pack()
entry1 = Entry(root, font=14)
entry1.pack(pady=5)
Label(root, text="Друге число:").pack()
entry2 = Entry(root, font=14)
entry2.pack(pady=5)
operation = StringVar(value="+")
Radiobutton(root, text="+", variable=operation, value="+").pack()
Radiobutton(root, text="–", variable=operation, value="-").pack()
Radiobutton(root, text="*", variable=operation, value="*").pack()
Radiobutton(root, text=":", variable=operation, value=":").pack()
Button(root, text="Обчислити", font=("Arial", 14), bg="lightgreen", command=calculate).pack(pady=20)
label_result = Label(root, text="Результат:", font=("Arial", 16), fg="blue")
label_result.pack()
root.mainloop()
3. Зміна кольору та тексту кнопки при натисканні
3. Зміна кольору та тексту кнопки при натисканні
Python
from tkinter import *
def change_button():
if btn["text"] == "Я червона!":
btn.config(text="Натисни ще раз", bg="lightblue", fg="black")
else:
btn.config(text="Я червона!", bg="red", fg="white")
root = Tk()
root.title("Кнопка-метелик")
root.geometry("350x250")
btn = Button(root, text="Натисни мене", font=("Comic Sans MS", 16),
bg="lightblue", activebackground="yellow", command=change_button)
btn.pack(pady=80)
root.mainloop()
4. Кнопка «Вихід» + кнопка-лічильник
4. Кнопка «Вихід» + кнопка-лічильник
Python
from tkinter import *
def change_button():
if btn["text"] == "Я червона!":
btn.config(text="Натисни ще раз", bg="lightblue", fg="black")
else:
btn.config(text="Я червона!", bg="red", fg="white")
root = Tk()
root.title("Кнопка-метелик")
root.geometry("350x250")
btn = Button(root, text="Натисни мене", font=("Comic Sans MS", 16),
bg="lightblue", activebackground="yellow", command=change_button)
btn.pack(pady=80)
root.mainloop()
5. Кнопка, що відкриває нове вікно
5. Кнопка, що відкриває нове вікно
Python
from tkinter import *
from tkinter import messagebox
def open_new_window():
new = Toplevel(root)
new.title("Нове віконечко")
new.geometry("300x150")
Label(new, text="Вітаю!\nТи відкрив нове вікно!", font=14).pack(pady=30)
Button(new, text="Закрити це вікно", command=new.destroy).pack()
root = Tk()
root.title("Кнопка відкриває вікно")
Button(root, text="Відкрий нове вікно!", font=("Arial", 16), command=open_new_window).pack(pady=80)
root.mainloop()
Ці приклади можна відразу копіювати та запускати на шкільних комп’ютерах (якщо встановлено Python 3 + tkinter).
Учні 8 класу дуже люблять 3-й і 4-й приклади — там видно реакцію програми миттєво.
Можна використовувати як домашнє завдання або як додаткові приклади на уроці після Lazarus — діти одразу бачать, що «кнопка працює однаково» і в Lazarus, і в Python, тільки синтаксис трохи інший.
Домашнє завдання
Додати до калькулятора кнопку «/» (ділення) з перевіркою ділення на 0 Підказка:
pascal
if b <> 0 then c := a/b else ShowMessage('Ділити на 0 не можна!');
Змінити колір кнопок і шрифт (властивості Color, Font.Color)
Практичне завдання
Практичне завдання
Безмашинний варіант на 30 хвилин (при відключенні світла)
Безмашинний варіант на 30 хвилин (при відключенні світла)
Тема: «Кнопковий квест на папері»
Тема: «Кнопковий квест на папері»
Безмашинний варіант на 30 хвилин (при відключенні світла)
Тема: «Кнопковий квест на папері»
Завдання
Намалюйте на аркуші А4 вікно програми «Тест на уважність».
Намалюйте 5 кнопок із написами:
Start
Так
Ні
Допомога
Вихід
Під кожною кнопкою напишіть:
Яку подію вона викликає (OnClick)
Яке повідомлення або дія має відбутись після натискання Приклад: кнопка «Вихід» → Close;
Позначте кнопку, яка матиме властивість Cancel = True (натиснення Esc)
Готово! Урок завершено. До нових зустрічей на наступному занятті!
Тестові завдання
Тестові завдання
Тест для 8 класу
Тест для 8 класу
Тема: Кнопка: створення, властивості, події, обробники подій
(30 запитань, 4 варіанти відповідей, тільки одна правильна)
Який компонент у палітрі Lazarus відповідає кнопці? a) TLabel b) TEdit c) TButton d) TCheckBox Правильна: c
Яка властивість кнопки відповідає за текст, що відображений на ній? a) Name b) Caption c) Text d) Hint Правильна: b
Яка подія відбувається найчастіше при роботі з кнопкою? a) OnDblClick b) OnMouseMove c) OnClick d) OnKeyPress Правильна: c
Де в коді Lazarus автоматично створюється заголовок обробника події кнопки? a) У розділі var b) У розділі implementation c) У розділі interface d) У коментарі Правильна: b
Яка властивість дозволяє кнопці реагувати на натискання клавіші Enter? a) Cancel b) Default c) Enabled d) Visible Правильна: b
Яка властивість дозволяє кнопці реагувати на натискання клавіші Esc? a) Default b) Cancel c) ModalResult d) Enabled Правильна: b
Як називається процедура, яку ми пишемо для реакції на подію OnClick? a) Функція b) Обробник події c) Цикл d) Умова Правильна: b
Яка властивість кнопки вимикає її (робить сірою і неактивною)? a) Visible := False b) Enabled := False c) Caption := '' d) Width := 0 Правильна: b
Як у коді отримати текст з кнопки? a) Button1.Text b) Button1.Caption c) Button1.Name d) Button1.Hint Правильна: b
Яка властивість задає підказку, що з’являється при наведенні миші? a) Caption b) Name c) Hint d) Font Правильна: c
Як змінити назву кнопки у коді (наприклад, на btnStart)? a) У властивості Caption b) У властивості Name c) У властивості Text d) У властивості Tag Правильна: b
Яка команда закриває програму при натисканні кнопки «Вихід»? a) Close; b) Exit; c) Halt; d) End; Правильна: a
Яка подія виникає при подвійному кліку на кнопку? a) OnClick b) OnDblClick c) OnMouseDown d) OnEnter Правильна: b
Який тип даних має параметр Sender в обробнику події? a) Integer b) String c) TObject d) Boolean Правильна: c
Як вивести повідомлення після натискання кнопки? a) MessageDlg b) ShowMessage c) InputBox d) Print Правильна: b
Яка властивість змінює колір фону кнопки? a) Font.Color b) Color c) Caption.Color d) Style Правильна: b
Як зробити кнопку невидимою під час запуску програми? a) Enabled := False b) Visible := False c) Caption := '' d) Width := 0 Правильна: b
Яке значення ModalResult закриває діалогове вікно з результатом «OK»? a) mrCancel b) mrOk c) mrYes d) mrNo Правильна: b
Як перейти до написання коду обробника OnClick кнопки у Lazarus? a) Подвійний клік по кнопці на формі b) Правий клік → View Source c) F4 d) Ctrl+Enter Правильна: a
Яка команда ставить курсор у поле вводу після очищення? a) edtA.SetFocus; b) edtA.Focus; c) edtA.Select; d) edtA.Clear; Правильна: a
Як перетворити текст з Edit у число типу real? a) StrToInt b) StrToFloat c) IntToStr d) FloatToStr Правильна: b
У якій вкладці палітри компонентів знаходиться TButton? a) Additional b) Standard c) System d) Dialogs Правильна: b
Як називається файл з кодом обробників подій у проекті Lazarus? a) Unit1.pas b) Project1.lpi c) Project1.lpr d) backup Правильна: a
Яка команда очищає текст у полі Edit? a) edtA.Text := ''; b) edtA.Clear; c) edtA.Delete; d) edtA.Text := 0; Правильна: a
Який символ використовується для конкатенації (з’єднання) рядків у Pascal? a) & b) + c) || d) .. Правильна: b
Як зберегти весь проект у Lazarus? a) File → Save b) File → Save As c) File → Save All d) Ctrl+S Правильна: c
Що станеться, якщо не обробити подію OnClick кнопки? a) Програма не запуститься b) Кнопка не реагуватиме на натискання c) З’явиться помилка компіляції d) Кнопка закриє програму Правильна: b
Яка властивість дозволяє змінити розмір шрифту на кнопці? a) Font.Size b) Height c) Width d) Style Правильна: a
Як правильно називати кнопки у великих проектах? a) Button1, Button2… b) btnStart, btnExit, btnCalculate… c) Кнопка1 d) btn1 Правильна: b
Чи можна мати кілька кнопок з однаковим значенням властивості Name? a) Так b) Ні, імена компонентів мають бути унікальними c) Тільки якщо вони на різних формах d) Тільки в одному модулі Правильна: b
Розподіл питань за групами результатів НУШ (8 клас)
Розподіл питань за групами результатів НУШ (8 клас)
До ГР1 (Працює з інформацією, даними, моделями):
№ 3, 7, 13, 14, 15, 19, 20, 21, 24, 25 (10 питань)
До ГР2 (Створює інформаційні продукти):
№ 1, 2, 9, 11, 12, 16, 18, 28, 29 (9 питань)
До ГР3 (Працює в цифровому середовищі):
№ 4, 8, 10, 17, 19, 22, 23, 26, 27, 30 (10 питань)
До ГР4 (Безпечно та відповідально працює з ІТ)
№ 26, 29, 30, 8, 17 (деякі перетинаються з ГР3) (5 питань, але всі пов’язані з правильною роботою в середовищі та унікальністю імен)
Page updated
Google Sites
Report abuse