Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Zwracanie wartości przez funkcję

Email Drukuj PDF

Przyjmowanie argumentów to nie jedyna cecha funkcji — mogą one również zwracać różne wartości. Czynność ta jest wykonywana za pomocą instrukcji return. Jeśli wystąpi ona wewnątrz funkcji, ta jest przerywana i zwraca wartość występującą po return. Schematycznie tego typu konstrukcja wygląda następująco:

funtion nazwa_funkcji(argumenty)

{

  //instrukcje wnętrza funkcji

  return wartość;

}

Jeśli wywoła się tego typu funkcję, to w miejscu jej wywołania zostanie wstawiona zwrócona przez nią wartość, która będzie mogła być wykorzystana w dalszej części skryptu. Warto też wiedzieć, że użycie samej instrukcji return, bez żadnych argumentów, również powoduje przerwanie działania funkcji, w miejsce jej wywołania nie jest wtedy jednak podstawiana żadna wartość.

Zobaczmy zatem, jak będzie wyglądała funkcja przyjmująca dwa argumenty, której zadaniem będzie zwrócenie sumy tych argumentów. Zostało to przedstawione na listingu 2.27.

Listing 2.27. Funkcja zwracająca wynik dodawania argumentów

<script type="text/javascript">

function dodaj(wart1, wart2)

{

  var wynik = wart1 + wart2;

  return wynik;

}

var wartosc = dodaj(11, 12);

document.write("Wynikiem dodawania 11 + 12 jest " + wartosc + ".");

</script>

Funkcja dodaj przyjmuje argumenty wart1 i wart2. W jej wnętrzu są one dodawane za pomocą arytmetycznego operatora +, a wynik tego działania jest przypisywany zmiennej pomocniczej wynik. Wartość tej zmiennej jest z kolei zwracana za pomocą instrukcji return. W dalszej części kodu funkcja dodaj jest wywoływana z argumentami 11 i 12, a wynik jej działania (czyli zwrócona przez nią wartość) jest przypisywany zmiennej wartosc, która jest następnie używana w instrukcji document.write do wyświetlania rezultatu na ekranie.

Instrukcja

var wartosc = dodaj(11, 12);

działa następująco:

  • Najpierw jest wywoływana funkcja dodaj, a zatem są wykonywane jej instrukcje.

  • Następnie wynik działania funkcji dodaj jest podstawiany w miejscu jej wywołania. Ponieważ w tym przypadku jest to 23, instrukcja jest traktowana jako var wartosc = 23;.

  • Zmiennej wartosc jest przypisywana wartość zwrócona przez funkcję.

Korzystanie ze zmiennej pomocniczej wartosc nie jest przy tym konieczne. Można wywołać funkcję dodaj bezpośrednio w instrukcji document.write, która miałaby wtedy postać:

document.write("Wynikiem dodawania 11 + 12 jest " + dodaj(11, 12) + ".");

Jednak w ten sposób kod staje się mniej czytelny.

Moglibyśmy też napisać funkcję, która wykonywałaby różne działania arytmetyczne wskazywane przez dodatkowy argument. Dwa pierwsze argumenty wskazywałyby wartości, na których ma zostać wykonane działanie, a trzeci wskazywałby rodzaj działania. Tak działająca funkcja miałaby postać przedstawioną na listingu 2.28.

Listing 2.28. Funkcja zwracająca wynik zadanego działania arytmetycznego

function działanie(wart1, wart2, operacja)

{

  var wynik;

  switch(operacja){

    case '+' :

      wynik = wart1 + wart2;

      break;

    case '-' :

      wynik = wart1 - wart2;

      break;

    case '*' :

      wynik = wart1 * wart2;

      break;

    case '/' :

      wynik = wart1 / wart2;

      break;

    default:

      wynik = undefined;

  }

  return wynik;

}

Została w niej użyta instrukcja wyboru switch, która bada stan argumentu operacja. Rozpoznawane są cztery wartości, którymi są znaki +, -, * i / odpowiadające typowym operacjom arytmetycznym: dodawaniu, odejmowaniu, mnożeniu i dzieleniu. Zależnie od stanu zmiennej na argumentach wart1 i wart2 wykonywana jest jedna z wymienionych operacji, a jej wynik przypisywany jest zmiennej pomocniczej wynik. Na końcu funkcji wartość zmiennej wynik jest zwracana za pomocą instrukcji return jako wynik działania. W przypadku gdy wartością argumentu operacja nie jest żaden z wymienionych znaków, oznacza to błąd w wywołaniu funkcji. Wtedy zmiennej wynik jest przypisywana wartość specjalna undefined — oznaczająca, że stan tej zmiennej jest nieokreślony. Dzięki temu będzie można rozpoznać sytuację, gdy w funkcji nie została wykonana żadna operacja arytmetyczna.

Postać omawianej funkcji mogłaby też być inna. Zamiast instrukcji wyboru można np. użyć złożonej instrukcji warunkowej if…else if lub serii instrukcji if. Instrukcja switch też mogłaby mieć inną postać. Można zrezygnować z zapamiętywania wyniku wykonywanych operacji w zmiennej pomocniczej i opuszczać funkcję bezpośrednio w każdym z bloków case (przy zastosowaniu instrukcji return).

Przekonajmy się jeszcze, że wykonanie instrukcji return bez argumentu również jest możliwe i powoduje przerwanie działania funkcji. Kod ilustrujący takie działanie znajduje się na listingu 2.29.

Listing 2.29. Przerwanie działania funkcji za pomocą instrukcji return

<script type="text/javascript">

function func()

{

  document.write("Pierwsza instrukcja document.write.");

  return;

  document.write("Druga instrukcja document.write.");

}

func();

</script>

Zdefiniowana została funkcja func zawierająca dwie instrukcje document.write, pomiędzy którymi występuje instrukcja return. Zgodnie z tym, co zostało napisane wyżej, po wywołaniu funkcji func druga instrukcja document.write nie zostanie wykonana, o czym można się przekonać po uruchomieniu kodu.

 

JavaScript. Nieoficjalny podręcznik

JavaScript.
Nieoficjalny podręcznik

JavaScript. Pierwsze starcie

JavaScript.
Pierwsze starcie

JavaScript. Praktyczny kurs

JavaScript.
Praktyczny kurs

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15600683