Урок 4.2. Кнопка

Перегляньте презентацію

🎨 Створюємо кнопку: як вдихнути життя у графічний інтерфейс

Уявіть, що ви — дизайнер інтерфейсів, а ваше вікно програми — чисте полотно. І ось настав момент додати перший елемент взаємодії — кнопку, яка реагуватиме на дотик користувача. Як це зробити?

🛠️ Крок 1: Створення кнопки

Щоб кнопка з’явилася у вікні, потрібно створити об’єкт типу Button і прив’язати його до змінної, яка буде її ім’ям. Це як дати кнопці паспорт:

• start_button = Button()

Або одразу задати її зовнішній вигляд:

• start_button = Button(text="Старт", width=10, bg="green")

🎨 Крок 2: Налаштування стилю

Кнопка може мати безліч «характеристик»:

• text — напис на кнопці

• width, height — розміри

• bg, fg — кольори фону та тексту

• font — стиль шрифту

• state — активна чи неактивна

Ці властивості задаються у дужках через кому, як у рецепті:

• Button(text= 'Натисни мене", bg='blue', fg='white', font = 'Arial 12')

📍 Крок 3: Розміщення у вікні

Щоб кнопка не «висіла в повітрі», її потрібно розмістити у вікні. Для цього використовують методи:

• pack() — автоматичне розміщення по центру або краях

• place() — точне позиціонування за координатами

⚡ Крок 4: Додаємо реакцію

Щоб кнопка не просто «стояла», а реагувала на дії користувача, до неї можна прив’язати обробник подій — тобто функцію, яка виконується при натисканні. Це робиться через метод bind(), як і для вікна.

🎯 Отже, створення кнопки — це не просто технічна дія, а справжнє мистецтво: ви задаєте її ім’я, зовнішність, місце у вікні та поведінку. І кожна кнопка — це крок до живого, інтерактивного інтерфейсу.

Виконайте інтерактивне завдання

Працюємо за комп'ютером

Увага! Під час роботи з комп'ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.

Повторіть правила безпечної роботи за комп’ютером.

Завдання та алгоритми їх виконання ви зможете знайти за адресою: https://cutt.ly/We2cDohZ

🎮 Місія «Жива кнопка»: створюємо інтерфейс, що реагує!

Уявіть, що ви — розробник інтерфейсів для гри або навчального застосунку. Ваше завдання — створити живу кнопку, яка не просто з’являється у вікні, а змінює вигляд, реагує на натискання і навіть може «заснути» після взаємодії.

Виконайте кроки цієї місії — і ваша кнопка оживе! 

🧭 Етап 1. Відкриваємо майстерню

🔹 Запустіть середовище розробки проєктів. 

🔹 Створіть вікно розміром 600×400 пікселів — це буде ваша сцена.

🧱 Етап 2. Додаємо першу кнопку

🔹 Створіть кнопку зі стандартними налаштуваннями:

button = Button()
button.pack()

🔹 Збережіть проєкт як Вправа 4.2 і запустіть його. 

🔹 Подивіться, як виглядає кнопка «за замовчуванням».

🎨 Етап 3. Робимо кнопку яскравішою

🔹 Змініть властивості кнопки:

• • Напис: Кнопка 1

  • Висота: 3 символи

  • Ширина: 15 символів

  • Відступ зверху: 30 пікселів

🔹 Оновлена команда:

button = Button(text="Кнопка 1", height=3, width=15)
button.pack(pady=30)

🔹 Збережіть і запустіть проєкт. 

🔹 Порівняйте новий вигляд із попереднім. Що змінилося?

⚡ Етап 4. Додаємо реакцію на натискання

🔹 Створіть обробник події click, який змінює кнопку:

def click():
    button['text'] = '8-А клас'
    button['width'] = 30
    button['fg'] = 'red'

🔹 Додайте властивість command до кнопки:

button = Button(text="Кнопка 1", height=3, width=15, command=click)

🔹 Збережіть, запустіть і натисніть кнопку. 

🔹 Спостерігайте, як вона змінюється!

    Етап 5. Кнопка «засинає»

🔹 Додайте до функції click ще одну команду:

button['state'] = 'disable'

🔹 Збережіть і запустіть проєкт.

🔹 Натисніть кнопку — і вона стане неактивною. 

🔹 Проаналізуйте: як змінився її вигляд і доступність?

🏁 Фініш

🔹 Закрийте вікно виконання. 

🔹 Закрийте середовище розробки. 

🔹 Ви щойно створили інтерактивний елемент, який реагує на дії користувача — справжній крок до створення власних застосунків!

🔹 Збережіть результати і додайте їх у розділі Ваші роботи на платформі Google ClassRoom.

Відео у допомогу

Опрацюйте

За підручником "Інформатика, 8 клас" (Й.Я. Ривкінд та інші), 2025:

• Прочитайте та розберіть теоретичний матеріал пункту 4.2 (стор. 108-114).

• Дайте усні відповіді на питання 1-7 (стор. 113).

Перевірте свій рівень знань 

Скриншот результату тесту прикріпіть у розділі Ваші роботи на платформі Google ClassRoom.

• Кнопка. Тест 11 (Інформатика 8 клас Ривкінд НУШ)