Урок 21. Напис: створення, властивості, події, обробники подій.
Урок 21. Напис: створення, властивості, події, обробники подій.
Embedded Files
Поділіться своєю думкою про онлайн уроки інформатики. Пройдіть анонімне опитування на головній сторінці сайту
Добрий день, дорогі восьмикласники!
Сьогодні на уроці інформатики ми вивчаємо дуже важливу та цікаву тему — «Напис: створення, властивості, події, обробники подій». Це один з базових об'єктів у візуальному програмуванні, зокрема в середовищі Lazarus, який ми використовуємо за підручником Й.Я. Ривкінда та ін. Тема належить до розділу «Алгоритми та програми» і є продовженням вивчення компонентів форми.
Актуальність і застосування у житті
Написи (або мітки — Label) — це один з найпоширеніших елементів інтерфейсу програм. Ми бачимо їх щодня: у мобільних додатках, на веб-сайтах, у комп'ютерних програмах — це текстові підказки, заголовки, повідомлення про стан. Наприклад, у банківському додатку напис показує ваш баланс, у грі — кількість очок, у калькуляторі — результат обчислень. Знання, як створювати написи, змінювати їх властивості та реагувати на події (наприклад, клік мишею), допомагає створювати зручні та інтерактивні програми, які полегшують життя людям.
Актуалізація опорних знань
Давайте пригадаємо, що ви вже знаєте. Відповідайте хором або піднімайте руки:
Які основні компоненти є на палітрі компонентів Lazarus? Відповідь: Button, Edit, Label, Image, Timer тощо.
Як додати компонент на форму? Відповідь: Вибрати його на палітрі та клікнути на формі або протягнути.
Що таке властивість Caption у кнопки? Відповідь: Текст, який відображається на кнопці.
Де пишемо код обробки події для кнопки? Відповідь: У вкладці Events об'єктного інспектора, подвійний клік по події (наприклад, OnClick).
Чудово! Сьогодні ми зосередимось саме на компоненті Label (Напис).
Основні теоретичні відомості
Напис (Label) — це компонент, призначений для виведення тексту, який користувач не може редагувати (на відміну від Edit).
Створення напису:
На палітрі компонентів (вкладка Standard) знайдіть іконку Label (зазвичай позначена «Abc»).
Клікніть на ній і потім клікніть на формі — з'явиться новий напис з назвою Label1.
Основні властивості (у Об'єктному інспекторі):
Name — ім'я об'єкта (наприклад, lblTitle). Рекомендується змінювати для зручності.
Caption — текст, який відображається (можна використовувати українські літери).
Font — шрифт (Name, Size, Color, Style — жирний, курсив тощо).
Color — колір фону напису.
Alignment — вирівнювання тексту (taLeftJustify, taCenter, taRightJustify).
AutoSize — автоматичне підлаштування розміру під текст (True/False).
WordWrap — перенесення слів на новий рядок.
Visible — видимість (True/False).
Події (Events):
Найпоширеніші для Label:
OnClick — при кліку мишею.
OnDblClick — при подвійному кліку.
OnMouseEnter, OnMouseLeave — коли курсор заходить/виходить з області напису.
Обробник подій — це процедура, яку ми пишемо в коді, щоб виконати певні дії при настанні події.
Приклад: при кліку на напис змінюємо його колір або текст.
Практична робота (20–25 хвилин)
Сьогодні ви створите простеньку програму-вітання з інтерактивними написами.
Завдання:
Створіть програму «Інтерактивна вітальна листівка». На формі розмістіть:
Великий напис-заголовок «Вітаю!» (змінюйте шрифт, колір).
Напис-підказку «Клікни на мене!».
При кліку на заголовок — змінюється текст на «Доброго дня, [ваше ім'я]!».
При наведенні миші на підказку — вона стає жирною і червоною, при відведенні — повертається до звичайного вигляду.
Покрокова інструкція виконання практичної роботи
Запустіть Lazarus: Пуск → Всі програми → Lazarus → Lazarus.
Створіть новий проект: Файл → Новий → Application → OK.
Збережіть проект одразу: Файл → Зберегти все. Оберіть диск D:\Work\Ваше_прізвище\8_клас\Напис. Unit1.pas, Project1.lpi — збережіть.
На палітрі Standard знайдіть Label, додайте на форму два написи (Label1 і Label2).
Виділіть Label1:
Name → lblTitle
Caption → Вітаю!
Font.Size → 24
Font.Color → clBlue
Alignment → taCenter
AutoSize → False
Width → 300, Height → 70 (розтягніть мишкою по центру форми)
Font.Style → [fsBold]
Виділіть Label2:
Name → lblHint
Caption → Клікни на мене!
Font.Size → 14
Top і Left — нижче заголовка
Події для lblTitle:
У Об'єктному інспекторі вкладка Events → OnClick → подвійний клік.
У коді напишіть:
pascal
procedure TForm1.lblTitleClick(Sender: TObject);
begin
lblTitle.Caption := 'Доброго дня, Іванов Іван!'; // замініть на своє ім'я
lblTitle.Font.Color := clGreen;
end;
Події для lblHint:
OnMouseEnter → подвійний клік:
pascal
procedure TForm1.lblHintMouseEnter(Sender: TObject);
begin
lblHint.Font.Color := clRed;
lblHint.Font.Style := [fsBold];
end;
OnMouseLeave → подвійний клік:
pascal
procedure TForm1.lblHintMouseLeave(Sender: TObject);
begin
lblHint.Font.Color := clBlack;
lblHint.Font.Style := [];
end;
Запустіть програму: F9 або кнопка Run.
Перевірте всі ефекти.
Збережіть проект.
Звіт про виконання (10 хвилин)
Створіть таблицю в Microsoft Word:
Відкрийте Microsoft Word (Пуск → Word).
У першому рядку: Прізвище Ім'я Клас Підгрупа Завдання Напис — шрифт 28 пт.
Далі: Дата уроку, Практична робота, Тема: Напис: створення, властивості, події, обробники подій — шрифт 14 пт.
Зробіть скріншот форми (Alt+PrintScreen), вставте в документ.
Під скріншотом напишіть коротко, які події ви обробили.
Збережіть: Файл → Зберегти як → Цей ПК → D:\Work\Ваше_прізвище → файл «Завдання_Напис_Прізвище.docx».
Критерії оцінювання за 12-бальною шкалою (8 клас — з групами результатів НУШ)
ГР1 Працює з інформацією, даними, моделями (3 б): правильне використання властивостей Caption, Font, Color, Alignment.
ГР2 Створює інформаційні продукти (4 б): створено працюючу програму з двома інтерактивними написами, естетичний вигляд.
ГР3 Працює в цифровому середовищі (3 б): правильне створення, збереження проекту, запуск, звіт у Word.
ГР4 Безпечно та відповідально працює з ІТ (2 б): збереження файлів у свою папку, акуратна робота, дотримання інструкції.
Домашнє завдання
Додайте ще один напис, який показує поточний час (використовуйте Timer з попередніх уроків або просто DateTimeToStr(Now)).
Підготуйтеся до захисту: розкажіть, які властивості та події ви використовували.
Безмашинний варіант (на випадок відключення світла, урок 30 хв)
Безмашинний варіант (на випадок відключення світла, урок 30 хв)
Завдання на аркуші:
Намалюйте ескіз форми програми «Листівка». Позначте два написи, вкажіть їх Caption, розмір шрифту, колір.
Напишіть алгоритм (у вигляді списку дій) для події OnClick заголовка: що має відбутися при кліку.
Запишіть назви 5 властивостей компонента Label та їх призначення.
Намалюйте схему: Label → подія OnMouseEnter → обробник → зміна Font.Color на clRed.
Успіхів усім! До наступного уроку! 💻
Приклади реалізацій на Python (мова програмування, яку ми вивчаємо паралельно з Lazarus)
Приклади реалізацій на Python (мова програмування, яку ми вивчаємо паралельно з Lazarus)
Приклади реалізацій на Python (мова програмування, яку ми вивчаємо паралельно з Lazarus)
Добрий день, шановні учні!
На попередньому уроці ми розглядали компонент Напис (Label) у середовищі Lazarus. Сьогодні я покажу, як аналогічні речі можна реалізувати у Python за допомогою бібліотеки tkinter — це стандартна бібліотека для створення графічного інтерфейсу, яка вже встановлена разом з Python на шкільних комп’ютерах.
Чому це корисно знати?
Знання кількох мов програмування та бібліотек робить вас універсальнішими. Те саме завдання (вивід тексту, зміна властивостей, реакція на події) можна вирішити по-різному, але принципи залишаються однаковими: об’єкт → властивості → події → обробник.
Аналог компонента Label у tkinter — віджет Label
Основні властивості (атрибути):
text — текст напису (аналог Caption)
font — шрифт (наприклад, ("Arial", 24, "bold"))
fg — колір тексту (foreground)
bg — колір фону (background)
width, height — розміри
justify — вирівнювання (LEFT, CENTER, RIGHT)
Події:
<Button-1> — клік лівою кнопкою миші
<Enter> — наведення миші
<Leave> — відведення миші
Обробники подій прив’язуються методом .bind().
Приклад 1. Простий напис (аналог статичного Label)
Python
import tkinter as tk
root = tk.Tk()
root.title("Простий напис")
root.geometry("400x200")
lbl = tk.Label(root,
text="Вітаю!",
font=("Arial", 28, "bold"),
fg="blue",
bg="yellow")
lbl.pack(expand=True)
root.mainloop()
Приклад 2. Зміна тексту та кольору при кліку (аналог OnClick)
Python
import tkinter as tk
def on_click(event):
lbl.config(text="Доброго дня, Іванов Іван!", fg="green") # замініть на своє ім'я
root = tk.Tk()
root.title("Клік по напису")
root.geometry("400x300")
lbl = tk.Label(root,
text="Клікни на мене!",
font=("Arial", 24),
fg="navy",
bg="lightgray",
width=20, height=3)
lbl.pack(expand=True)
lbl.bind("<Button-1>", on_click) # прив’язуємо подію кліку
root.mainloop()
Приклад 3. Реакція на наведення/відведення миші (аналог OnMouseEnter / OnMouseLeave)
Python
import tkinter as tk
def enter(event):
lbl.config(fg="red", font=("Arial", 18, "bold"))
def leave(event):
lbl.config(fg="black", font=("Arial", 18))
root = tk.Tk()
root.title("Наведення миші")
root.geometry("400x200")
lbl = tk.Label(root,
text="Наведи на мене курсор!",
font=("Arial", 18),
fg="black")
lbl.pack(expand=True)
lbl.bind("<Enter>", enter)
lbl.bind("<Leave>", leave)
root.mainloop()
Приклад 4. Повна програма-вітання (аналог практичної роботи з Lazarus)
Python
import tkinter as tk
def title_click(event):
title_lbl.config(text="Доброго дня, [Ваше ім'я]!", fg="green")
def hint_enter(event):
hint_lbl.config(fg="red", font=("Arial", 16, "bold"))
def hint_leave(event):
hint_lbl.config(fg="black", font=("Arial", 16))
root = tk.Tk()
root.title("Інтерактивна вітальна листівка")
root.geometry("500x300")
root.configure(bg="lightblue")
title_lbl = tk.Label(root, text="Вітаю!", font=("Arial", 32, "bold"),
fg="blue", bg="lightblue")
title_lbl.pack(pady=30)
hint_lbl = tk.Label(root, text="Клікни на заголовок і наведи на мене!",
font=("Arial", 16), fg="black", bg="lightblue")
hint_lbl.pack(pady=20)
title_lbl.bind("<Button-1>", title_click)
hint_lbl.bind("<Enter>", hint_enter)
hint_lbl.bind("<Leave>", hint_leave)
root.mainloop()
Як запускати ці приклади на шкільному комп’ютері (детальна інструкція)
Натисніть Пуск → введіть IDLE → відкрийте IDLE (Python GUI).
Файл → New File (нове вікно редактора).
Скопіюйте один з прикладів повністю у це вікно.
Збережіть файл: Файл → Save As → Диск D:\Work\Ваше_прізвище → назвіть, наприклад, label_example1.py → Зберегти.
Запустіть: Run → Run Module (або клавіша F5).
З’явиться вікно програми — перевірте роботу.
Щоб закрити програму — закрийте її вікно.
Закрийте IDLE.
Порівняння Lazarus і Python (tkinter)
Порівняння Lazarus і Python (tkinter)
Тепер ви бачите, що незалежно від мови програмування принципи роботи з написами та подіями дуже схожі!
Додаткове домашнє завдання (за бажанням)
Спробуйте вдома (або на наступному уроці) створити у Python програму з трьома написами:
один змінює колір при наведенні,
другий змінює текст при кліку,
третій показує кількість кліків (підказка: використовуйте змінну лічильник).
Успіхів у програмуванні! 💻
Якщо будуть запитання — пишіть у чат класу або запитуйте на уроці.
Page updated
Google Sites
Report abuse