Допомога

Команди

Відкрийте Ш++ IDE і введіть команду:

console.log("привіт")

Поекспериментуйте: спробуйте зробити так, щоб ця команда порахувала вам суму чисел, дробові числа і т.і.

Типова команда-функція виглядає як:

назваКоманди(тут-пишуться-параметри-команди)

назваКоманди(якщо-параметрів-декілька, то-пишемо-їх, через-кому)

Після команди іноді ставлять крапку з комою — щоб підкреслити, що тут команда закінчується.

console.log("привіт");

Якщо нам не треба передавати параметри до команди — дужки все одно потрібно писати. Наприклад:

console.log();

Коментарі

Після двох слешів // можна писати свої примітки та коментарі прямо в коді. Докладніше можна почитати тут.

console.log("цей текст виведеться на консоль"); // а цей текст комп'ютер не сприймає

Змінні

Змінні — це "контейнери", в яких зберігаються значення. Вони потрібні, щоб програма пам'ятала різні дані та могла з ними працювати.

UA: Змінна

RU: Переменная

EN: Variable

Оголошення змінної

Змінна оголошується (створюється) ключовим словом let. Після нього пишемо те ім'я, яким треба назвати змінну. Наприклад, створимо змінну з іменем myVariable:

let myVariable

Не можна створювати кілька змінних з однаковими іменами. Якщо побачите помилку типу "елемент вже оголошений" — ви десь створили дві (або більше) змінних з однаковими іменами.

var

Іноді ви можете побачити змінні, створені через ключове слово var замість let. var — застаріла форма. У них є і технічна різниця, але ці деталі поки не важливі. Втім, якщо цікаво — пошукайте в інтернеті. Поки ж запам'ятайте одне: до кінця курсу оголошуйте змінні лише через let , var не використовуйте.

Запис даних до змінної

Після оголошення до змінної можна записати дані:

let message;
message = "Hello"; // наприклад, можемо зберегти в змінну частину тексту (рядок)

Комп'ютер запам'ятає ці дані. Потім у нього можна буде їх дізнатися, звертаючись до змінної за ім'ям:

let message;
message = "Hello";

console.log(message); // виведе вміст змінної в консоль

Важливо: комп'ютер не зможе запам'ятати дані до змінної, якої ще не існує. Перед тим, як записати дані до змінної, цю змінну треба створити (оголосити) через let.

Для компактності варто оголошувати змінну та записувати до неї дані в одному рядку:

let message = "Hello";

Трохи аналогій

Простіше за все зрозуміти змінну, як «коробку» для даних з унікальним ім'ям.

До коробки можна покласти будь-яке значення, а пізніше — змінити його. І робити це можна скільки завгодно разів:

let message; // створили message
message = "Hello!"; // поклали до неї "Hello!"
message = "World!"; // викинули "Hello!", замінили на значення "World!"
console.log(message);

У змінні можна класти не лише "голі" значення, а взагалі будь-що. Наприклад, інші змінні.

Якщо покласти змінну А до змінної Б, то в Б скопіюється те, що знаходиться в А.

let hello = "Hello world!";
let message = hello;
 

console.log(hello); // Hello world!
console.log(message); // Hello world!

Ще трохи аналогій

Створюємо порожню коробку (змінну). 

let box;

... та кладемо до коробки кота

box = "Сat";

Або від самого початку можемо створити коробку одразу з котом всередині:

let box = "Cat";

Також у будь-який момент можна змінити вміст коробки. Наприклад, покласти туди кролика (коли кладемо кролика, то перед цим кота з коробки автоматично викине).

box = "Rabbit";

Висновки

  • Створювати змінні потрібно, щоб зарезервувати для себе шматочок пам'яті комп'ютера (як номер у готелі).

  • Коли у вас є дані, ви кладете їх до змінної (заселяєтесь до номеру).

  • Коли змінюєте дані — ви видаляєте зі змінної старе значення та зберігаєте нове (перш ніж заселити до номеру нових людей, потрібно виселити попередніх мешканців).

Основи типів даних

Все дуже просто.

  • 5 — це число

  • "5" — це текстовий рядок

  • 5 + 3 буде 8

  • "5" + "3" буде "53"

Чому дорівнює "5" + 3 і чому дорівнює 5 + "3" розберіться самостійно за допомогою console.log.

⚠️Не лінуйтеся практикувати, а не просто читати цей текст. Інакше нічому не навчитесь.

Як зробити число з рядка

Якщо у вас є рядок, а ви хочете число — використовуйте команду parseInt(вашРядок). Наприклад:

console.log(parseInt("1") + 1);

Або ще простіше: через унарний плюс.

console.log(+"1" + 1);

let a = "100";
let b = 100;
console.log(a + b);
console.log(+a + b);

До речі, саме за цим принципом працює і+prompt, про який буде в наступних розділах.

Не плутайте присвоєння з математичним "дорівнює"

let a = b + 1

Це читається як:

  • a присвоїти b плюс 1

  • тобто "взяти значення, яке зараз лежить у b, додати до нього 1 та покласти в a"

  • вирахувати вираз праворуч від знака = і покласти результат до ящика, назва якого — зліва

І це НЕ читається як:

  • a дорівнює b плюс 1 (після виконання команди це рівність і справді буде дійсною, але як довго? Коли ми пізніше змінимо В, то А автоматично не зміниться)

  • a відтепер завжди на одиницю більше b (звісно, так стане після виконання команди, але коли ми пізніше змінимо В, то А автоматично не зміниться)

Трохи "на подумати"

Далі буде код. Перш, ніж його запускати, подумайте:

Перше

  • Що буде на екрані?

  • Що сталося з b коли ми змінили a?

  • Чому так сталося?

let a = 100
let b
b = a + 1
console.log(b)
console.log("круто!")
a = 10
console.log(b)

Друге

Яку команду написати замість x + 1, щоб вивело 6? Важливо, щоб вона працювала не лише для 5, але і для будь-яких інших значень x.

let x = 5
x + 1
console.log(x) // що буде?

Підказки

  • Щоб збільшити вміст x, змінну треба змінити. Бо якщо x не зміниться, то і не збільшиться :)

  • Щоб потрібно змінити x, потрібно щось "покласти" до x.

  • Якщо потрібно щось покласти до x — яка команда це вміє робити?

  • Що саме потрібно покласти до x, щоб там у підсумку виявилося число на 1 більше за те, що в ньому лежало?

Додаткові матеріали

Змінні

Почитали теорію? Переходьте до задач

pageHello worldpageОбміняти змінні місцями

Виникли питання або труднощі? Зверніться за допомогою до Ш++.

Чи можна йти до наступної теми?

Так, якщо ви:

  • Погралися з командами та спробували все те, що ми просили вас спробувати.

  • Почитали матеріали, подивились відео та спробували все це зрозуміти.

  • Розв'язали всі задачі.

PreviousЯк і де писати код?NextHello world

Last updated