js-basics.md

Функції

---

Доволі часто буває що нам потрібно кілька разів виконувати одну і ту ж дію. Для цього використовують функції (reusable block of code). По факту, це спрощує твій код, бо тобі не потрібно кілька разів писати одне і теж, ти можеш створити одну функцію і виконати її кілька разів.

Приклад звичайної функції

function sayHello() {
   alert('Hello !');
}

Тут ми оголосили, що в нас є функція з іменем sayHello. В круглих дужках () ми можемо оголосити чи будуть в неї параметри чи ні (в цьому прикладі дужки пусті, отже параметрів нема). В фігурних {} ми пишемо тіло функції. В тілі функції містить алгоритм дій, які виконує функція. Ця функція лише створить оголошення (alert), з словом 'Hello !'.

Окей, оголосили, ну і що ? Тепер ми можемо її викликати. Що мається на увазі ? Коли ми її оголосили, вона не виконається. Джаваскріпт просто візьме її до уваги, але не буде виконувати (табличка з словом 'Hello !' не з'явиться).

Для того щоб з'явилася табличка з словом, нам потрібно її викликати. Щоб викликати функцію, потрібно написати її ім'я і круглі дужки. Ось приклад:

sayHello();

Після виконання цього рядку, з'явиться алерт наш з текстом 'Hello !'

Підсумовуємо:

// Оголошуємо функцію
function sayHello() {
   alert('Hello !');
}

// Викликаємо її
sayHello()

---

Для чого нам параметри тоді ?

Параметри додають гнучкості функціям, залежно від потреб, ми можемо передавати їй різні значення для обчислень.

Приклад: Ми хотіли б піднімати числа до квадрату (щоб з 2 підняти до квадрату, або 3, або будь яке інше число).

Ми можемо створити кілька фукнкцій:

function twoPow() {
   alert(2 * 2);
}

function threePow() {
   alert(3 * 3);
}

function fourPow() {
   alert(4 * 4);
}

twoPow(); // вискочить табличка з 4
threePow(); // вискочить табличка з 9
fourPow(); // вискочить табличка з 16

Виходить, ми створили окремо функцію для кожного випадку. Ніби непогано, але ми можемо це оптимізувати. Як ? Напишемо одну спільну функцію, яка буде просто підносити числа до квадрату. Тут і стають у допомозі параметри. Параметр - це свого роду посередник між тобою і тим що робиться всередині функції. Параметр можеш назвати як завгодно (але рекомендують давати логічні назви). Я назву його number, бо ми передаємо числа.

function numberPow(number) {
   alert(number * number);
}

numberPow(2);
numberPow(3);
numberPow(4);

Тут ми просто передаємо функції числа які нам потрібні, а вона тупо буде піднімати їх до квадрату. Коду стало менше в цьому випадку.

Параметри ми можемо тримати в окремих змінних.

Трохи про оголошення змінних

Ми можемо тримати інформацію в змінних, оголошених через слово var (можна ще через let і const, але до цього глянемо пізніше).

var x;

var y = 'Andrii';
var num = 10;

Ми присвоїли значення 'Andrii' змінній y, а число 10 змінній num. Змінній x ми нічого не присвоїли.

Приклад з функціями:

Оголошуємо змінну first, присвоюємо їй значення '10'

var ten = 10;

Тепер ми можемо передати змінну first як параметр.

numberPow(ten);

---

1. Перший приклад, таке як тебе зараз є

Тут у on() передають три параметри 'input', '.housing_row1', function (){ ... }

$("#table-count2").on('input', '.housing_row1', function (){ 
   /* copy here function body from original */
});

2. Другий приклад, те як можна зробити

$("#table-count2").on('input', '.housing_row1', countTotalSum);

function countTotalSum() {
   /* copy here function body from original */
}

Оголошена функція countTotalSum (можеш їй давати назву яку хочеш), рекомендують називати відповідно до того що вона робить.

Дивись, можеш зараз як зробити, спробуй винести оту функцію під низ

з отакого як в тебе зараз:

$("#table-count2").on('input', '.housing_row1', function (){ /* function body*/ });

зробити отаке:

$("#table-count2").on('input', '.housing_row1', countTotalSum);
function countTotalSum(){ /* function body*/ };

там де я написав /* function body*/ встав те що в тебе