НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

JS Підручник

JS Старт JS Інтро JS Установка JS Виведення JS Інструкції JS Синтаксис JS Коментарі JS Змінні JS Ключове слово Let JS Ключове слово Const JS Оператори JS Арифметичні JS Присвоєння JS Типи даних JS Функції JS Об’єкти JS Події JS Рядки JS Рядкові методи JS Рядковий пошук JS Рядкові шаблони JS Числа JS Числові методи JS Масиви JS Методи масиву JS Сортування масиву JS Ітерація масиву JS Масив Const JS Дати JS Формати дат JS Методи отримання дат JS Методи установки дат JS Математичні JS Рандомні JS Булеві JS Порівняння JS Умови JS Switch JS Цикл For JS Цикл For In JS Цикл For Of JS Цикл While JS Break & Continue JS Ітерації JS Набори JS Карти JS Typeof JS Перетворення типів JS Побітове JS Регулярні вирази JS Помилки JS Область дії JS Хостинг JS Use Strict JS Ключове слово this JS Функція стрілки JS Класи JS JSON JS Відладка JS Гід по стилю JS Кращі практики JS Поширені помилки JS Продуктивність JS Зарезервовані слова

JS Версії

JS Версії JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/Edge JS Історія

JS Об’єкти

Визначення об’єктів Властивості об’єкта Методи об’єкта Відображення об’єкта Доступ до об’єктів Конструктори об’єктів Прототипи об’єктів Ітеровані об’єкти Набори об’єктів Карти об’єктів Довідник об’єктів

JS Функції

Визначення функцій Параметри функції Виклик функції Функція call() Застосування функції Закриття функції

JS Класси

Вступ Наслідування класу Статичні методи

JS Асинхронний

Зворотні виклики Асинхронний Проміси Async/Await

JS HTML DOM

DOM Вступ DOM Методи DOM Документ DOM Елементи DOM HTML DOM Форми DOM CSS DOM Анімація DOM Події DOM Слухач подій DOM Навігація DOM Вузли DOM Колекції DOM Вузлові списки

JS Браузер BOM

JS Вікно JS Скрін JS Локація JS Історія JS Навігатор JS Спливаюче оповіщення JS Таймінг JS Кукі

JS Веб API

Веб API Вступ Веб-форми API Веб-історія API Веб-сховище API Веб-воркер API Веб-виборка API Веб-геолокація API

JS AJAX

AJAX Вступ AJAX XMLHttp AJAX Запит AJAX Відгук AJAX XML Файл AJAX PHP AJAX ASP AJAX База даних AJAX Додатки AJAX Приклади

JS JSON

JSON Вступ JSON Синтаксис JSON та XML JSON Типи даних JSON Аналіз JSON Stringify JSON Об’єкти JSON Масиви JSON Сервер JSON PHP JSON HTML JSON JSONP

JS та jQuery

jQuery Селектори jQuery HTML jQuery CSS jQuery DOM

JS Приклади

JS Приклади JS HTML DOM JS HTML Input JS HTML Об’єкти JS HTML Події JS Браузер JS Редактор JS Вправи JS Вікторина JS Сертифікат

JS Довідники

JavaScript Об’єкти HTML DOM Об’єкти

Place for your advertisement!
JavaScript. Уроки W3Schools для початківців українською мовою

En

JavaScript Функції


JavaScript функція – це блок коду, призначений для виконання певного завдання.

JavaScript функція виконується, коли "щось" викликає її (називає).


Приклад

function myFunction(p1, p2) {
  return p1 * p2;  // Функція повертає добуток p1 і p2
}
Спробуйте самі »

JavaScript Синтаксис функції

Функція JavaScript визначається за допомогою ключового слова function, після якого йде ім’я та дужки ().

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

У дужках можуть бути назви параметрів, розділені комами:
(параметр1, параметр2, ...)

Код, який виконується функцією, поміщається у фігурні дужки: {}

function name(parameter1, parameter2, parameter3) {
  // код для виконання
}

Параметри функції перераховані в дужках () у визначенні функції.

Аргументи функції – це значення, отримані функцією під час її виклику.

Усередині функції аргументи (параметри) поводяться як локальні змінні.

Функція майже така ж, як процедура або підпрограма в інших мовах програмування.


Виклик функції

Код усередині функції виконуватиметься, коли "щось" викликає (називає) функцію:

  • Коли відбувається подія (коли користувач натискає кнопку)
  • Коли її викликають із коду JavaScript
  • Автоматично (самовиклик)

Ви дізнаєтесь набагато більше про виклик функцій пізніше в цьому посібнику.


Повернення функції

Коли JavaScript досягає інструкції return (повернення), функція припиняє виконання.

Якщо функцію було викликано з інструкції, JavaScript "повернеться", щоб виконати код після інструкції виклику.

Функції часто обчислюють повернене значення. "Повернене" значення повертається до "абонента" (того, хто викликав):

Приклад

Обчисліть добуток двох чисел і поверніть результат:

let x = myFunction(4, 3);   // Викликається функція, повертається значення в кінці x

function myFunction(a, b) {
  return a * b;            // Функція повертає добуток a та b
}

Результат x буде:

12
Спробуйте самі »

Чому саме функції?

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

Ви можете використовувати той самий код багато разів із різними аргументами, щоб отримати різні результати.

Приклад

Конвертуйте градуси Фаренгейта в градуси Цельсія:

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
Спробуйте самі »

Оператор () викликає функцію

У наведеному вище прикладі toCelsius посилається на об’єкт функції, а toCelsius() посилається на результат функції.

Доступ до функції без () поверне об’єкт функції замість результату функції.

Приклад

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
Спробуйте самі »

Функції, що використовуються як значення змінних

Функції можна використовувати так само як і змінні, у всіх типах формул, присвоєнь і обчислень.

Приклад

Замість використання змінної для збереження значення, що повертається функцією:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

Ви можете використовувати функцію безпосередньо, як значення змінної:

let text = "The temperature is " + toCelsius(77) + " Celsius";
Спробуйте самі »

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


Локальні змінні

Змінні, оголошені у функції JavaScript, стають ЛОКАЛЬНИМИ для функції.

До локальних змінних можна отримати доступ лише зсередини функції.

Приклад

// код тут НЕ може використовувати carName

function myFunction() {
  let carName = "Volvo";
  // код тут МОЖЕ використовувати carName
}

// код тут НЕ може використовувати carName
Спробуйте самі »

Оскільки локальні змінні розпізнаються лише всередині своїх функцій, змінні з однаковими іменами можна використовувати в різних функціях.

Локальні змінні створюються, коли функція запускається, і видаляються, коли функція завершується.


Перевірте себе за допомогою вправ

Вправа:

Виконайте функцію з назвою myFunction.

function myFunction() {
alert("Hello World!");
}
;


Place for your advertisement!