1. Вбудовані Javascript функції
2. Призначені для користувача Javascript функції
3. Javascript функції з параметрами (аргументами) і повернення значень
4. Всі способи створення призначених для користувача функцій
5. Використання виразів з функціями
6. Область видимості змінних. Javascript глобальні та локальні змінні в функції
7. Область видимості змінних
8. Рекурсивна функція javascript
9. Стрілочні функції або лямбда виразу в javascript

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

Сайт labs-org.ru надає лабораторні завдання по javaScript для закріплення теоретичного матеріалу і отримання практичних навичок створення динамічних веб-сторінок. Короткі теоретичні відомості по темі дозволять отримати необхідний для цього мінімум знань. Вирішені наочні приклади і лабораторні завдання викладені в міру збільшення їх складності, що дозволить з легкістю вивчити матеріал з нуля. Бажаємо успіхів!

Вбудовані Javascript функції

У javascript досить багато функцій, вбудованих в синтаксис мови. Розглянемо одну з них.

eval (рядок)

Функція eval (рядок) обчислює вираз в зазначеному рядку (як параметр); вираз має бути складено за правилами мови JavaScript і не містити тегів HTML: eval ( "5 * 7 + 1/2")
Розглянемо приклад використання функції eval:
Приклад: Розглянути приклад роботи коду з функцією eval. 1 2 3 var y = 5; // значення у дорівнює 5 var x = "if (y == 5) y * 2-3"; // значення х одно рядку символів var rezult = eval (x); // rezult одно 7

var y = 5; // значення у дорівнює 5 var x = "if (y == 5) y * 2-3"; // значення х одно рядку символів var rezult = eval (x); // rezult одно 7

Завдання js4_1. В скрипті запитувати у користувача ввести в діалогове вікно введення математичний вираз, потім обчислити значення цього виразу і результат вивести в діалоговому вікні.

Призначені для користувача Javascript функції

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

У javascript передбачено два варіанти функцій: функції, які при їх виклик виконують якісь дії (наприклад, виводять повідомлення), і функції, які повертають значення (число, рядок, ...).

1. Функція в ролі процедури. Якщо функція виконує будь-які дії і не повертає значення:

Синтаксис оголошення (створення) функції:

function імя_функциі (аргументи) {код; }

function імя_функциі (аргументи) {код; }

Важливо: Якщо аргументи у функції відсутні, то після імені функції ставляться порожні дужки (): function імя_функциі () {код; }
Виклик функції:

У javascript виклик функції в ролі процедури відбувається наступним чином:

імя_функциі (аргументи); // з аргументами імя_функциі (); // без аргументів

імя_функциі (аргументи); // з аргументами імя_функциі (); // без аргументів

Приклад: Створити функцію для виведення модального вікна зі словом hello. Здійснити виклик функції.



✍ Рішення: Створіть код і протестуйте його в браузері: function sayHello () {alert ( "hello"); } SayHello ();

function sayHello () {alert ( "hello"); } SayHello ();

2. Якщо функція повертає значення:

Синтаксис оголошення:

function імя_функциі (аргументи) {код; return результат або вираз}

function імя_функциі (аргументи) {код; return результат або вираз}

Важливо: У javascript return - директива, яка завершує виконання функції і повертає значення


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

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

var a = імя_функциі (аргументи); alert (a); // 1-й спосіб var b = a + a; // 2-й спосіб

var a = імя_функциі (аргументи); alert (a); // 1-й спосіб var b = a + a; // 2-й спосіб

Тобто значення потрібно або вивести на екран, або можна використовувати в подальших висловлюваннях.

Розгляньте фрагмент коду та поясніть, що виконується в даному скрипті: 1 2 3 4 5 6 7 8 function sayHello () {alert ( "1"); return "привіт!" ; alert ( "2"); } Var a = sayHello (); alert (a);

function sayHello () {alert ( "1"); return "привіт!"; alert ( "2"); } Var a = sayHello (); alert (a);

✍ Рішення:

• Розгляньте роботу функції:
1 2 3 4 5 6 function sayHello () {alert ( "1"); // виконається return "привіт!" ; // завершуємо виконання функції alert ( "2"); // не виконається, тому що після return}

function sayHello () {alert ( "1"); // виконається return "привіт!"; // завершуємо виконання функції alert ( "2"); // не виконається, тому що після return}

Як видно з прикладу, після return функція дійсно завершує свою роботу. Тому оператор alert ( "2") виконуватися вже не буде.

• Проаналізуйте виклик функції:
var a = sayHello (); alert (a);

var a = sayHello (); alert (a);

Виклик функції відбувається через присвоювання. Виклик в даному прикладі можна також організувати так: alert (sayHello ()); , Але це не рекомендується варіант.

Таким чином, директива return вказує на значення, що повертається функції, яке буде передано змінної при наступній формі виклику: змінна = імя_функциі (); Важливо: return може використовуватися без значення, щоб припинити виконання функції і вийти з неї 1 2 3 4 5 function checkName () {var name = prompt ( 'введіть ім'я') if (! Name) {return; // якщо ім'я не заповнено, то виходимо з функції}

function checkName () {var name = prompt ( 'введіть ім'я') if (! name) {return; // якщо ім'я не заповнено, то виходимо з функції}

Доповніть код згідно із завданням: В змінну povtor привласнити результат виконання функції confirm , Яка виводить фразу «Пройти заповнення ще раз?» І приймає відповідь користувача (ок або скасування).

Фрагмент коду:

1 2 3 4 5 6 7 function say () {document. write ( "Ви тут?" + "<br/>"); } Do {say (); povtor = ...} while (povtor);

function say () {document.write ( "Ви тут?" + "<br/>"); } Do {say (); povtor = ...} while (povtor);

Завдання js4_3.

Створити функцію без параметрів, яка обчислює різницю двох вводяться користувачем в діалогові вікна числа. Виконати завдання двома способами: 1) функція виводить повідомлення з результатом; 2) у функції виконується різниця, а повідомлення з результатом виводиться в основній програмі.

Приблизний фрагмент коду для одного із способів:

1 2 3 4 5 6 function raznost () {var a = ... var b = ... ...} ...

function raznost () {var a = ... var b = ... ...} ...

Javascript функції з параметрами (аргументами) і повернення значень

Розглянемо докладніше використання інструкції return в функції javascript на двох прикладах. Крім того, розглянемо використання в Javascript функції з параметрами (аргументами).

⇒ 1. Функція як процедури.

Функція як процедури повертає значення undefined, але виконує якісь дії:

Приклад: Створити скрипт, що виводить в модальне вікно повідомлення 'Привіт, ім'я', де ім'я передається з програми в якості аргументу функції

✍ Рішення:

• Оголосіть функцію sayHello. У дужках аргументів функції вкажіть аргумент з ім'ям userName:
1 2 3 4 function sayHello (userName) {...}

function sayHello (userName) {...}

У прикладі функція має один аргумент, вказаний в дужках, тобто userName.

• У коді функції за допомогою методу alert () виводите повідомлення разом із значенням аргументу функції:
1 2 3 4 function sayHello (userName) {alert ( "Привіт," + userName); }

function sayHello (userName) {alert ( "Привіт," + userName); }

• В основній програмі двічі викличте функцію з різними значеннями:
1 2 3 ... sayHello ( "Вася"); sayHello ( "Петя");

... sayHello ( "Вася"); sayHello ( "Петя");

Мінлива userName прийме те значення, яке вказано в дужках при виконанні функції - «Вася» і «Петя». Значить, при першому виклику функція виведе в діалогове вікно Привіт, Вася, при другому - Привіт, Петя.

• Протестуйте результат в браузері.

⇒ 2. Функція в ролі функції (класичне оформлення).

Функція в класичному оформленні повертає конкретне значення.

Приклад: Написати функцію, яка приймає в якості аргументу ім'я користувача і повертає в програму повідомлення 'Привіт, ім'я'. В основній програмі виводити дане повідомлення методом alert ().

✍ Рішення:

Оголосіть функцію sayHello. У дужках аргументів функції вкажіть аргумент з ім'ям userName: 1 2 3 4 function sayHello (userName) {...}

function sayHello (userName) {...}

У прикладі функція має один аргумент, вказаний в дужках, тобто userName.

• У коді функції за допомогою директиви return поверніть повідомлення разом із значенням аргументу функції:
1 2 3 4 function sayHello (userName) {return "Привіт," + userName; }

function sayHello (userName) {return "Привіт," + userName; }

• В основній програмі створіть змінну і надайте їй значення виклику функції. Виведіть значення змінної методом alert ():
1 2 3 ... var a = sayHello ( "Вася"); alert (a);

... var a = sayHello ( "Вася"); alert (a);

• Протестуйте результат в браузері.

Зверніть увагу на різницю між викликом функції без директиви return і з директивою: в першому випадку функція викликається як оператор, повертаючи значення undefined; у другому випадком функція викликається через присвоювання, або беручи участь в виразах ( див. нижче ) Завдання js4_4. Що виведе на екран наступний код? 1 2 3 4 5 6 7 8 9 10 11 var a = 5, b = 10, c = 20, d = 7; function Sum1 () {var result = a + b; document. write ( "Sum1:" + result + "<br/>"); } Function Sum2 (x1, x2) {var result = x1 + x2; document. write ( "Sum2:" + result); } Sum1 (); Sum2 (c, d);

var a = 5, b = 10, c = 20, d = 7; function Sum1 () {var result = a + b; document.write ( "Sum1:" + result + "<br/>"); } Function Sum2 (x1, x2) {var result = x1 + x2; document.write ( "Sum2:" + result); } Sum1 (); Sum2 (c, d);

Завдання js4_5. Необхідно запросити у користувача ввести вік (метод prompt ()). Викликати функцію, яка виводить діалогове вікно з повідомленням 'Привіт, малюк!' , Якщо вік менше 18, і 'Привіт, юначе!' , Якщо вік більш дорівнює 18.

У функцій можуть бути необов'язкові аргументи:

Приклад: function f (x, y = 3) {return x + y; } F (2); // 5

function f (x, y = 3) {return x + y; } F (2); // 5

Всі способи створення призначених для користувача функцій

1. класичний синтаксис
function a1 (x, y) {return x + y; }

function a1 (x, y) {return x + y; }

2. явне створення об'єкта Function
// обов'язковим є тільки останній аргумент - тіло функції var a1 = new Function ( 'x', 'y', 'return x + y');

// обов'язковим є тільки останній аргумент - тіло функції var a1 = new Function ( 'x', 'y', 'return x + y');

або

var a1 = new Function ( 'return "hello"');

var a1 = new Function ( 'return "hello"');

3. ще один варіант створення
var a1 = function (x, y) {return x + y; };

var a1 = function (x, y) {return x + y; };

Виклик функцій у всіх випадках буде:

Використання виразів з функціями

Звичайне використання javascript функції:

1 2 3 4 5 6 7 function sum (arg1, arg2) {var a = arg1 + arg2; return a; } Var b = sum (1, 2); alert (b);

function sum (arg1, arg2) {var a = arg1 + arg2; return a; } Var b = sum (1,2); alert (b);

Функція як складова частина виразу:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function sum (arg1, arg2) {var a = arg1 + arg2; return a; } Var b = sum (1, 2); alert (b); function add () {var c = 1 + sum (1, 2); return c; } Var d = add (); alert (d);

function sum (arg1, arg2) {var a = arg1 + arg2; return a; } Var b = sum (1,2); alert (b); function add () {var c = 1 + sum (1,2); return c; } Var d = add (); alert (d);

У другій функції (add ()) використовується вираз, що посилається на першу функцію (sum (), в 11-му рядку).

Завдання js4_6.

Створити функцію, яка повертає найбільше з трьох чисел. Аргументами функції є самі числа.

Фрагмент коду:

function findMax (a, b, c) {... return ...} var max = ... ...

function findMax (a, b, c) {... return ...} var max = ... ...

Інші варіанти використання виразів з функціями

(тільки для функцій, які повертають результат):

Розглянемо приклади для функції:

1 2 3 4 function plRectangle (width, height) {var S = width * height; return S}

function plRectangle (width, height) {var S = width * height; return S}

Варіанти виразів:

⇒ Виклик функції як частину виразу:

1 S3 = 0.5 * plRectangle (a, b);

S3 = 0.5 * plRectangle (a, b);

⇒ Виклик функції в логічних виразах:

1 2 if (plRectangle (a, b)> plRectangle (c, d)) alert ( "Перший прямокутник більше другого");

if (plRectangle (a, b)> plRectangle (c, d)) alert ( "Перший прямокутник більше другого");

⇒ Виклик javascript функції як параметр іншої функції:

1 2 3 var х = "25рх"; var у = 12; var S = plRectangle (parselnt (x), у);

var х = "25рх"; var у = 12; var S = plRectangle (parselnt (x), у);

Завдання js4_7.

Використовуйте функцію для модернізації прикладу із закінченням слова про кількість ворон. Відкрийте файл з виконаним завданням про ворон. Необхідно викликати функцію з параметром - кількість ворон.

Завдання js4_8. Створіть функцію для розрахунку ступеня введеного числа.

1. Для чого використовуються функції?
2. Поясніть в чому різниця використання функції в ролі процедури і функції з класичним оформленням?
3. Опишіть синтаксис виклику функції в ролі процедури.
4. Опишіть синтаксис виклику функції з класичним оформленням.
5. Для чого служить директива return?
6. Що таке аргументи функції і де вони вказуються?

Область видимості змінних. Javascript глобальні та локальні змінні в функції

Область видимості змінної - область коду, в якому змінна доступна для використання.

1. Глобальні змінні
- створюються на рівні сценарію і зберігаються до кінця сценарію; - оголошуються до опису javascript функції: var a = 1; function ... ...

var a = 1; function ... ...

- можуть бути причиною складно знаходять помилок;

2. локальні змінні
- створюються всередині фрагментів коду і не видно ззовні; for (var i = 1; i <5; i ++) {// i - локальна ...} if (x <5) {var a = 5; // a - локальна}

for (var i = 1; i <5; i ++) {// i - локальна ...} if (x <5) {var a = 5; // a - локальна}

- явно оголошуються в тілі javascript функції; function findA {var a = 2 * 2 // a - локальна}

function findA {var a = 2 * 2 // a - локальна}

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

Доповніть код згідно із завданням:
Створити 2 змінні глобальної та локальної області видимості (тобто всередині функції func) з іменами: global, local.
Змінної global привласнити текст "Привіт", а local - "Мир". function func () {} func ();

function func () {} func ();

Область видимості змінних

Розглянемо конкретні приклади області видимості змінних в javascript при використанні глобальних і локальних змінних.

1. 1 2 3 4 5 6 7 8 var S = 2; // Глобальна змінна S function plRectangle (width, height) {var S = width * height; return S // Локальна змінна S} z = plRectangle (2, 3); alert (z); alert (S);

   var S = 2; // Глобальна змінна S function plRectangle (width, height) {var S = width * height; return S // Локальна змінна S} z = plRectangle (2, 3); alert (z); alert (S);

   Приклад: Значення z дорівнює 6, а значення S залишилося рівним 2, тобто значенням глобальної змінної, визначеної у зовнішній програмі

2. 1 2 3 4 5 6 7 8 9 10 11 function plRectangle (width, height) {var s = width * height; // аргументи завжди локальні width = width + 10; return s} width = 2; height = 3; z = plRectangle (width, height); alert (z); alert (width);

   function plRectangle (width, height) {var s = width * height; // аргументи завжди локальні width = width + 10; return s} width = 2; height = 3; z = plRectangle (width, height); alert (z); alert (width);

   Приклад: Значення z дорівнює 6; значення змінної width дорівнює 2, тобто залишилося без змін

3. 1 2 3 4 5 6 7 8 9 10 var S = 2; // Глобальна змінна S function plRectangle (width, height) {S = width * height; // замінюємо глобальну змінну: return S // S - глобальна змінна (тому що без визначення var)} var z = plRectangle (2, 3); alert (z); alert (S);

   var S = 2; // Глобальна змінна S function plRectangle (width, height) {S = width * height; // замінюємо глобальну змінну: return S // S - глобальна змінна (тому що без визначення var)} var z = plRectangle (2, 3); alert (z); alert (S);

   Приклад: Значення і z і S рівні 6; S - глобальна змінна

4. 1 2 3 4 5 6 7 8 function Plrectangle (width, height) {S = width * height; // глобальна змінна return S} z = Plrectangle (2, 3); S = 2; // змінюємо глобальну змінну alert (z); alert (S);

   function Plrectangle (width, height) {S = width * height; // глобальна змінна return S} z = Plrectangle (2, 3); S = 2; // змінюємо глобальну змінну alert (z); alert (S);

   Приклад: Значення z дорівнює 6, а значення S дорівнює 2, тобто значенню зміненої глобальної змінної, визначеної у зовнішній програмі

5. 1 2 3 4 5 6 7 8 9 10 function plRectangle (width, height) {var S = width * height; var x = 17; return S} z = plRectangle (2, 3); alert (z); alert (x); // не визначена у зовнішній програмі alert (S); // не визначена у зовнішній програмі

   function plRectangle (width, height) {var S = width * height; var x = 17; return S} z = plRectangle (2,3); alert (z); alert (x); // не визначена у зовнішній програмі alert (S); // не визначена у зовнішній програмі

   Приклад: Значення z дорівнює 6; змінна S у зовнішній програмі не визначена; змінна х у зовнішній програмі не визначена

Що виведе на екран наступний код? 1 2 3 4 5 6 7 var variable = "Глобальна змінна"; function f () {var variable = "Локальна змінна"; document. write (variable + "<br/>"); } F (); document. write (variable);

var variable = "Глобальна змінна"; function f () {var variable = "Локальна змінна"; document.write (variable + "<br/>"); } F (); document.write (variable);

Рекурсивна функція javascript

Важливо: В інформатиці та програмуванні, а, відповідно, і в javascript, рекурсія - це виклик функції з самої ж функції, тобто функція в функції

Бувають також непряма або складна рекурсія, коли функція викликається не безпосередньо з самої себе, а з вкладеною в неї функції: наприклад, функція A викликає функцію B, а функція B - функцію A. Кількість вкладених викликів функції або процедури називається глибиною рекурсії.

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

Приклад: Використовуючи функцію, необхідно обчислювати зведення числа в ступінь. Виконати завдання, використовуючи цикл for

Показати рішення: 1 2 3 4 5 6 7 8 var chislo, stepen; function degree (chislo, stepen) {for (var result = 1; stepen> 0; stepen -) {result * = chislo; } Return result; } Document. write (degree (2, 4)); // виводить 16

var chislo, stepen; function degree (chislo, stepen) {for (var result = 1; stepen> 0; stepen--) {result * = chislo; } Return result; } Document.write (degree (2,4)); // виводить 16

Тепер виконаємо зведення числа в ступінь через рекурсію:

1 2 3 4 5 6 7 8 var chislo, stepen; function degree (chislo, stepen) {if (stepen) {return chislo * degree (chislo, stepen - 1); } Return 1; } Document. write (degree (2, 4)); // виводить 16

var chislo, stepen; function degree (chislo, stepen) {if (stepen) {return chislo * degree (chislo, stepen-1); } Return 1; } Document.write (degree (2,4)); // виводить 16

Завдання js4_11.

Що виведе на екран наступний код? 1 2 3 4 5 6 7 8 function f (counter) {counter -; document. write (counter + "<br/>"); if (counter! = 0) f (counter); document. write (counter + "<br/>"); } F (2);

function f (counter) {counter--; document.write (counter + "<br/>"); if (counter! = 0) f (counter); document.write (counter + "<br/>"); } F (2);

Обчислення факторіала числа ітераційним методом з використанням циклу : Показати рішення: 1 2 3 4 5 6 7 8 9 10 11 var m = 2; x = factorial (m); document. write (x); function factorial (n) {if (n <= 1) return 1; rezult = 2; // result - змінна для результату for (i = 3; i <= n; i ++) {rezult = rezult * i; } Return result; }

var m = 2; x = factorial (m); document.write (x); function factorial (n) {if (n <= 1) return 1; rezult = 2; // result - змінна для результату for (i = 3; i <= n; i ++) {rezult = rezult * i; } Return result; }

Стрілочні функції або лямбда виразу в javascript

У javascript можливе використання так званих лямбда виразів: функції, які скорочують запис виразу. У записі такої функції використовується стрілочка =>, звідси і назва «стрілочні функції». Стрілочку можна трактувати, як «таке що":

Приклад стрілочної функції з одним аргументом: var f = x => x + 1; alert (f (5))

var f = x => x + 1; alert (f (5))

Розшифровуємо так:
функція f дорівнює значенню x, таке що x = x + 1.
Тобто в результаті в вікно виведеться 6.

Приклад стрілочної функції з двома аргументами: var g = (x, y) => x + y; alert (g (5, 3))

var g = (x, y) => x + y; alert (g (5,3))

✍ Рішення:

Результатом роботи скрипта буде висновок числа 8.

Приклад: Написати стрелочную функцію для обчислення факторіала числа. Функція повинна бути рекурсивної.

✍ Рішення:

• Назвемо функцію factorial.
• Визначимо рекурсивні правила:

n = factorial (n-1), при n> 0 n = 1, при n = 1

• Тепер дані правила опишемо в самій рекурсивної функції в скрипті. Для написання функції будемо використовувати тернарний оператор :
var factorial = n => (n> 0)? n * factorial (n - 1): 1;

var factorial = n => (n> 0)? n * factorial (n-1): 1;

• Виведемо значення, наприклад, для 4! :
• Протестуйте функцію на інших значеннях.

Приклад: Написати стрелочную функцію для обчислення перших n чисел ряду Фібоначчі. Функція повинна бути рекурсивної.

✍ Рішення:

• Назвемо функцію fib.
• Визначимо рекурсивні правила:

fib = fib (n-1) + fib (n-2), при n> 2 fib = 1, при n

• Тепер дані правила опишемо в самій рекурсивної функції в скрипті. Для написання функції будемо використовувати тернарний оператор :
var fib = n => (n> 2)? fib (n - 1) + fib (n - 2): 1;

var fib = n => (n> 2)? fib (n-1) + fib (n-2): 1;

• Виведемо значення, наприклад, для перших 6 чисел ряду (результат: 5 + 3 = 8):
• Протестуйте функцію на інших значеннях.

Написати лямбда-вираз для обчислення квадрата числа.

например:

alert (kvadr (5)) // результат повинен бути 25

Завдання js4_14:
Використовуючи стрелочную функцію, створіть послідовність 1 3 9 27 81 243 729 2187 6561 19683

1. Які функції називаються стрілочними функціями?
2. Чи є різниця між стрілочними функціями і лямбда виразами в javascript?
3. Який синтаксис стрілочних функцій?