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

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

eval (рядок)

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

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

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

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

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

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

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

   function ім'я_функції(){
       код;
   }

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

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

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

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

   Рішення:

   • Створіть код і протестуйте його в браузері:

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

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

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

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

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

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

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

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

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

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

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

   Рішення::

   • Розгляньте роботу функції:

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

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

   • Проаналізуйте виклик функції:

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

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

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

   змінна = ім'я_функції();

   Важливо:  return  може використовуватися без значення, щоб припинити виконання функції і вийти з неї:

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

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

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

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

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

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

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

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

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

1. Функція в якості процедури.

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

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

   Рішення:

   • Оголосіть функцію sayHello. У дужках аргументів функції вкажіть аргумент з ім'ям userName:

     function sayHello(userName)
     {
     ...
     }

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

   • У коді функції за допомогою методу  alert()  виводьте повідомлення разом із значенням аргумента функції:

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

   • В основній програмі двічі викличте функцію з різними значеннями:

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

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

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

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

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

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

   Рішення:

   • Оголосіть функцію sayHello. У дужках аргументів функції вкажіть аргумент з ім'ям userName:

     function sayHello(userName)
     {
     ...
     }

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

   • У коді функції за допомогою директиви  return  поверніть повідомлення разом із значенням аргументу функції:

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

   • В основній програмі створіть змінну і надайте їй значення виклику функції. Виведіть значення змінної методом  alert()  :

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

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

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

   Завдання js4_4. Що виведе на екран наступний код?

   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.

УСІ СПОСОБИ СТВОРЕННЯ ПРИЗНАЧЕНИХ ДЛЯ КОРИСТУВАЧА ФУНКЦІЙ

1. класичний синтаксис

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

2. явне створення об'єкта  Function 

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

   або

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

3. ще один варіант створення

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

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

   var a = a1(3, 4);

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

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

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);

function add()
{
    var c=1+sum(1,2);
    return c;
}
var d=add();
alert(d);

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

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

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

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

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

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

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

  S3 = 0.5 * plRectangle(a, b);

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

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

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

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

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

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

1. Глобальні змінні

   • створюються на рівні сценарію і зберігаються до кінця сценарію;

   • оголошуються до опису javascript функції:

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

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

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

   • створюються всередині фрагментів коду і не видно ззовні;

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

   • явно оголошуються в тілі javascript функції;

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

   • аргументи (параметри) функції - завжди локальні змінні;

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

ОБЛАСТЬ ВИДИМОСТІ ЗМІННИХ

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

1. 
   

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

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

2. 
   

   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. 
   

   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. 
   

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

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

5. 
   

   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  у зовнішній програмі не визначена; змінна  x  у зовнішній програмі не визначена

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

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

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

Рішення:

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) {
    if(stepen) {
        return chislo*degree(chislo,stepen-1);
    }
    return 1;
}
document.write(degree(2,4)); // виводить 16

Рішення:

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;
}