505605

1. Текстове поле: створення, властивості, події, обробники подій

8 клас НУШ
Підготував
Рибак Олександр Юрійович

2. Пригадаймо

• Що таке змінна?
• Що називають
бібліотекою в
програмуванні?
• Що таке подія?
• Що таке функція?

3. Змінна

• Іменована область пам'яті комп'ютера,
призначена для зберігання даних (чисел, тексту
тощо), значення яких може змінюватися під час
виконання програми
• Кожна змінна повинна мати унікальне ім’я, щоб і
ми і комп’ютер розуміли куди саме ми хочемо
записати дані, або звідки ми хочемо прочитати
дані

4. Змінна

• Змінна це як шухляда
в шафі. Тільки цій
шухляді ми ще даємо
ім’я.
• За цим ім’ям
комп’ютер розуміє
куди саме в пам’ять
йому записувати
дані, або з якої
області пам’яті

5. Змінна

Під час роботи в
оперативній пам’яті
комп’ютера зберігається
багато різних даних. Це
як велика шафа.
Коли ми створюємо змінну,
то просимо комп’ютер
виділити нам шухляду.

6. Бібліотека

В програмуванні
бібліотекою
називають
попередньо
написаний
програмний код,
який дозволяє нам
використовувати
“написані за нас
речі”.

7. Бібліотека

• Ми не створюємо текстове
поле з нуля і детально
не програмуємо що
відбувається коли
користувач натиснув
кнопку на клавіатурі і
як це натискання
перетворилось в літеру у
текстовому полі.
• Ми просто беремо вже
готове текстове поле і
використовуємо його.

8. Функція

• Функція — блок коду, який виконує певне
завдання
• Функціям як і змінним – дають імена (щоб ми
могли вказати комп’ютеру яку саме функцію ми
хочемо виконати)

9. Функція

Функції можуть (але не обов’язково):
• приймати якість дані на вхід
• повертати якісь дані після результатів своєї
роботи

10. Функція

Уявімо що в нас є функція
пральна машинка
Давайте поміркуємо які
параметри вона може
приймати на вхід?

11. Функція

Функція пральна машинка
може приймати такі дані:
• Температура прання
• Час прання
• Режим прання
• Пральний порошок
• Чиста вода
• Брудна одежа

12. Функція

Давайте подумаємо що може
повертати наша функція
“пральна машинка”:
• Чиста одежа
• Брудна вода

13. Функція “Пральна машинка”

14. Функція

• Для того щоб сказати python що ми пишемо
функцію – треба написати ключове слово def
• Далі пишемо ім’я функції яке ми придумали
• Відкриваємо дужку і пишемо імена вхідних
параметрів, потім закриваємо дужку. Якщо
параметрів немає, то просто пишемо ()
• Потім ставимо двокрапку : і переходимо на новий
рядок

15. Функція

• З нового рядку пишемо тіло функції (воно може
займати багато рядків)
• Якщо хочемо щось повернути з функції, то
завершуємо її словом return

16.

Ключове слово що вказує на оголошення функції
Що повертає функція
Вхідні параметри функції
def sum (a, b):
sumOfTwoNumbers = a + b
return sumOfTwoNumbers
Тут буде 11
myFavouriteNumber = sum(9, 2)
yourFavouriteMark = sum(10, 2)
Тут буде 12

17. Подія

• Подія (event) в програмуванні — це дія, або
сигнал, що виникає під час роботи програми
(наприклад, клацання миші, натискання клавіші,
завершення завантаження), який розпізнається
системою та ініціює виконання певного коду,
відомого як «обробник події»
• Для того щоб обробник подій виконувався при
певній події, треба прив’язати функцію
обробника події до самої події. Фактично ми
кажемо програмі – коли стається подія, то
виклич, будь ласка, нашу функцію обробника

18.

19. Текстове поле

• Текстове поле — це елемент графічного
інтерфейсу (GUI) призначений для введення,
редагування або відображення тексту.

20. Події текстового поля

• Під час роботи з текстовим полем виникає багато
різноманітних подій
• Коли користувач ставить курсор в текстове поле
– виникає подія <FocusIn>
• Коли користувач після роботи з текстовим полем
натискає на будь який інший елемент – виникає
подія <FocusOut>
• При натисненні будь якої клавіші – виникає
подія <KeyPress-<назва клавіші>>
• При натисненні клавіші Enter виникає подія
<Return>

21. Задача

• Створити програму в якій користувач вводитиме
ім’я в текстове поле, після чого натискаючи на
кнопку “привітатись” – бачитиме на екрані
повідомлення: “Привіт <ім’я введене в текстове
поле>!”.
• Якщо коритсувач ввів ім’я Іван, то напис
буде”Привіт Іван!”

22. Cкладемо план

1. Визначимось які елементи інтерфейсу нам
потрібні
2. Складемо алгоритм роботи нашої програми
3. На основі п.1 та п.2 реалізуємо наш алгоритм
мовою python

23. Підберемо потрібні елементи інерфейсу

“Створити програму в якій користувач вводитиме
ім’я в текстове поле, після чого натискаючи на
кнопку “привітатись” – бачитиме на екрані
повідомлення: “Привіт <ім’я введене в текстове
поле>!”.”
• текстове поле
• кнопка (button)
• мітка (label)

24. Створимо вікно нашої програми

from tkinter import *
window = Tk()
window.title('Привітання')
window.geometry("700x700")
window.mainloop()

25. Додамо текстове поле

from tkinter import *
До якого вікна
прив’язане наше
текстове поле
window = Tk()
window.title('Привітання’)
window.geometry("700x700")
Тип та розмір шрифту
нашого текстового поля
textField = Entry(window, width=30, font="Arial 30")
textField.pack()
window.mainloop()
Вказуємо яким чином
текстове поле буде
розміщено в нашому
Ширина нашого
текстового поля

26. Проміжні результати

• Запускаємо нашу
програму і
отримуємо ось таке
вікно

27. Додаємо кнопку

from tkinter import *
window = Tk()
window.title('Привітання’)
window.geometry("700x700")
textField = Entry(window, width=30, font="Arial 30")
textField.pack()
greetingButton = Button(
window, font="Arial 30",
text="Привітати", bg="green", fg="white“
)
greetingButton.pack()
window.mainloop()

28.

29. Додамо мітку (label) куди ми будемо виводити вітання

from tkinter import *
window = Tk()
window.title('Привітання’)
window.geometry("700x700")
textField = Entry(window, width=30,
font="Arial 30")
textField.pack()
greetingButton = Button(
window, font="Arial 30",
text="Привітати", bg="green",
fg="white“
)
greetingButton.pack()
window.mainloop()

30. Додамо мітку (label) куди ми будемо виводити вітання

from tkinter import *
window = Tk()
window.title('Привітання’)
window.geometry("700x700")
textField = Entry(window, width=30, font="Arial 30")
textField.pack()
greetingButton = Button(
window, font="Arial 30",
text="Привітати", bg="green", fg="white“
)
greetingButton.pack()
greetingLabel = Label(
window, font="Arial 30", text= "Тут буде привітання"
)
greetingLabel.pack()
window.mainloop()

31.

32. Дістаємо текст

Для того щоб дістати з текстового поля текст треба викликати функцію get у змінної в яку ми
поклали текстове поле.
textField = Entry(window, width=30,
font="Arial 30")
textField.pack()
userName = textField.get()

33. Збираємо наш конструктор докупи

1. Треба створити функцію яка буде діставати
текст з текстового поля і додавати його до
мітки (label)
2. Цю функцію ми прив’яжемо до події натискання
лівою клавішою миші на кнопку (наша функція
стане обробником події)

34. Пишемо наш обробник для події

def greetingButtonClick(event):
text = "Привіт " + textField.get() + "!"
greetingLabel["text"] = text
Беремо значення змінної
text записуємо його в
нашу мітку
Дістаємо текст з текстового поля і за
у змінну text такий бутерброд:
Привіт <тут текст взятий з поля>!

35. Прив’язуємо обробник до події

greetingButton.bind("<Button-1>", greetingButtonClick)

36.

from tkinter import *
def greetingButtonClick(event):
text = "Привіт " + textField.get() + "!“
greetingLabel["text"] = text
window = Tk()
window.title('Привітання’)
window.geometry("700x700")
textField = Entry(window, width=30, font="Arial 30")
textField.pack()
greetingButton = Button(
window, font="Arial 30", text="Привітати", bg="green", fg="white"
)
greetingButton.pack()
greetingButton.bind("<Button-1>", greetingButtonClick)
greetingLabel = Label( window, font="Arial 30", text= "Тут буде привітання" )
greetingLabel.pack()
window.mainloop()

37.

38. Фінальний штрих!

Ви помітили що часто натискання клавіші enter
після вводу тексту в текстове поле – робить те
саме що і кнопка біля цього самого поля?

39. Фінальний штрих!

• Оскільки в нас вже є функція яка робить
потрібну магію, то все що лишилось це
прив’язати її до потрібною події
textField.bind("<Return>", greetingButtonClick)

40.

from tkinter import *
def greetingButtonClick(event):
text = "Привіт " + textField.get() + "!“
greetingLabel["text"] = text
window = Tk()
window.title('Привітання’)
window.geometry("700x700")
textField = Entry(window, width=30, font="Arial 30")
textField.pack()
textField.bind("<Return>", greetingButtonClick)
greetingButton = Button(
window, font="Arial 30", text="Привітати", bg="green", fg="white"
)
greetingButton.pack()
greetingButton.bind("<Button-1>", greetingButtonClick)
greetingLabel = Label( window, font="Arial 30", text= "Тут буде привітання" )
greetingLabel.pack()
window.mainloop()