І знов з нами наш добрий товариш
Вінстон для того, щоб допомогти нам.

Я знаю, що він вже виглядає 
просто неперевершено,

але я хочу трішки змінити
розмір його очей.

Ось в цій частині коду
я малювала його очі.

Ви бачите, що ми визначили колір,
а потім додали ще 2 еліпси.

І якщо я хочу зробити ці
еліпси меншими,

я можу змінити їх ширину, 
так, щоб вони були круглими.

Також я маю змінити їх висоту.

Отже, для того, щоб очі були
однакового розміру,

ми маємо змінити його параметри
висоти і ширини.

Ні, щось очі виглядають замалими,
тепер потрібно їх збільшити.

Правда було б чудово, якби для того, 
щоб змінити розмір обох очей,

мені потрібно було змінити
лише один параметр?

Ось саме в цьому випадку нам
знадобляться "змінні".

Отже, змінна - це як ім’я або зарезервоване
місце для чого-небудь.

Я розглядаю змінну як 
великий кошик з назвою на ньому.

Ви можете покласти все, 
що захочете в цей кошик,

але назва залишиться тою самою.

Те, що знаходиться всередині кошика 
називається "значенням змінної".

Розпочнімо з того, 
що власне створимо змінну.

Все це я роблю тут зверху.

Вводимо зверху редактора слово "var",
що означає "variable" (змінна),

ставимо пробіл, а потім назву змінної,

яка має описувати, 
що міститиме в собі ця змінна.

В нашому випадку ця змінна eyeSize.

Ви можете назвати її так,
як Вам забажається,

але не можна залишати 
пробіли між словами в назві.

І звісно ж не забувайте про
крапку з комою в кінці.

Отже, зараз я створила змінну, 
що називається "eyeSize",

тому що вона визначає 
розмір очей Вінстона.

Але у цієї змінної досі немає значення.

Для того, щоб надати їй значення,
ми просто напишемо назву функції eyeSize,

потім знак "=", а потім 20 і крапку з комою.

Добре, бачите знак дорівнює?

Забудьте все, що Ви про нього вчили
на уроках математики.

Цей знак не означає "дорівнює", він
означає "присвоєння".

Тобто ми присвоюємо значення 20
до змінної eyeSize.

Іншими словами,
ми кладемо число 20

в кошик, який називається eyeSize.

На уроці математики Ви
можете сказати, що

x = 3, та 3 = x,

і вони мають однаковісіньке значення,
бо вони все ж таки рівні?

Але тут Ви так не можете зробити.

Те, що знаходиться зліва 
від знака дорівнює -

це завжди змінна.

А те, що з права знака рівності,
то це значення,

яке ми присвоюємо змінній.

Гарний спосіб запам’ятати
яка сторона за що відповідає -

проговорювати це вголос, 
коли ви кодите.

Так роблять багато 
професійних програмістів.

Якщо Ви використовуєте знак рівності, 
то не кажіть дорівнює, кажіть "отримує".

Таким чином виходить, що
змінна eyeSize отримує значення 20.

Зараз, коли я використовую
змінну eyeSize в своєму коді,

комп’ютер це розуміє: "О, це ж змінна,

Я знаю, що насправді її значення 20."

Отже, перевіримо -
я просто скопіюю це,

і заміню ці 4 цифри

на мою нову змінну eyeSize,

і вуаля!

Очі Вінстона тепер мають ідеально 
однаковий розмір,

і якщо я хочу змінити значення
обох очей,

або розмір обох очей,

я просто зміню значення
однієї змінної.

Ооо, круто!

Окей, і ще кілька останніх речей,
на які слід звернути увагу.

Тут ми створили нову змінну,
що має назву eyeSize.

А тут присвоїли їй значення 33.

Ми все це можемо зробити в один крок.

Вказуємо змінну var eyeSize -
це перший крок,

та надаємо їй значення 33 - це
другий крок.

І якщо я видалю ці два рядки,

то все одно все працює.

Також пам'ятайте, що комп’ютер 
читає Ваш код зверху вниз,

і тому він знає розмір очей
тільки через те,

що ми зазначили це ось тут вище.

Якщо я переміщу змінну сюди, нижче,

то коли комп’ютер добереться до
цього рядка коду, то "подумає":

"eyeSize, що це взагалі таке?
Я поняття не маю що це за eyeSize."

Насправді ми тут отримуємо сповіщення
про помилку,

яка говорить, що параметри змінної 
eyeSize не визначені.

І ви можете собі думати:

"Я ж визначив їх ось тут."

Але комп’ютер не настільки 
розумний, щоб це зрозуміти.

Отже, просто повернемо його 
на самий початок коду.

І Ви завжди повинні перевіряти

чи визначили Ви змінну перед тим,
як використати її.

Тепер Ви знаєте, що таке змінні!

Переклад на українську мову: Анна Клець, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"