Меню

Първи стъпки в правене на сайтове

Влез Излез

Първи стъпки в JavaScript – част 5 – Функции

Предишни уроци:

Една от основните цели в програмирането е елиминирането на нуждата да повтаряме един и същ или подобен код отново и отново. Качественото програмиране, освен с всичко друго, е свързано и с правилното преизползване на кода, който пишем.

Тази цел можем да изпълним като извлечем част от кода си във функция, която след това извикаме в случаите, когато бихме искали този код да се изпълни. Нека, като пример разгледаме следния код, а след това в детайли ще обясня какво точно извършваме на отделните места:

function showCorrect() {
    alert('Правилно!');
}

function showError() {
    alert('Грешка!');
}

var a = 5;
var b = 10;
var c = 15;

if (a < b) {
    showCorrect();
} else {
    showError();
}

if (b < c) {
    showCorrect();
} else {
    showError();
}

if (a < c) {
    showCorrect();
} else {
    showError();
}

В този пример в началото на скрипта дефинираме две функции. Дефинирането на функции се извършва като използваме ключовата дума function, след което зададем име на функцията, последвано от кръгли/малки скоби. След скобите добавяме блок ограден от фигурни скоби, заграждащ тялото на функцията, което ще се изпълнява всеки път, когато функцията бъде извикана.

Скриптът продължава с инициализиране на няколко променливи, след което правим проверка за стойнотисте им и в зависимост от това извикваме една от двете функции.

В случая функциите showCorrect() и showError(), не вършат много работа, не само защото не изпълняваме много действия в тялото им, а просто защото винаги извършват едно и също. В някои случаи бихме искали функцията да обработи дадена променлива по един и същи начин, но крайният резултат би бил различен поради факта, че обработваме различни променливи.

Ето един кратък пример как можем да покажем резултата от сумиране на стойностите на елементите от един масив (приемаме, че всички елементи на масива са числа).

function sum(sumArray) {
    var sum = 0;
    
    for (var i in sumArray) {
        sum += sumArray[i];
    }
    
    alert(sum);
}

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var b = [2, 4, 6, 8, 10];
var c = [3, 6, 9, 12, 15, 18];

sum(a);
sum(b);
sum(c);

В случая извикваме функцията sum три пъти, като подаваме три различни масива, като аргумент. Аргументите се подават в кръглите скоби на функциите. Още при дефинирането си, функциите трябва да се опишат така, че да приемат аргументи. При дефинирането на функцията sum ние задаваме, че тази функция приема аргумент, чиято стойност записваме в променливата myArray. Сега е и моментът, в който трябва да се обясни, че в JavaScript имаме обхват на променливите (variable scope). Ако една променлива е инициалицирана вътре във функция (включително и при дефинирането на функцията), тя може да се използва само в даденафа функция, така че, ако се опитам да използвам променливата myArray извън функцията sum тя няма да съществува. По същия начин само във функцията можем да използваме и променливата със същото име – sum.

В тялото на функцията използваме for in цикъл, за да обходим всички елементи в масива и да добавим стойността на всеки към текущата стойност на sum, така че след последния елемент, в тази променлива да имаме записана стойността на сумата на всички елементи.

Какво обаче, ако искаме да използваме стойността на тази сума по друг начин, а не просто да я покажем на потребителите, зиползвайки alert()? Тогава използваме return ключовата дума:

function sum(sumArray) {
    var sum = 0;
    
    for (var i in sumArray) {
        sum += sumArray[i];
    }
    
    return sum;
}

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var sumA = 0;

sumA = sum(a);
alert(sumA);

Така след като вече сме пресметнали стойността на сумата на елементите от масива, функцията връща стойността (вместо на да покаже с alert()), която можем да присвоим на друга променлива, използвайки синтаксиса:

varName = functionCall();

След това в примера отново просто показваме резултата с alert(), но това е единствено в този пример, и всъщност резултатът може да се обработва и по различен начин. Можем например да пресметнем и сумата от сумите на няколко масива:

function sum(sumArray) {
    var sum = 0;
    
    for (var i in sumArray) {
        sum += sumArray[i];
    }
    
    return sum;
}

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var b = [2, 4, 6, 8, 10, 12, 14, 16, 18];
var c = [3, 6, 9, 12, 15, 18, 21, 24, 27];

totalSum = sum(a) + sum(b) + sum(c);
alert(totalSum);

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax