Kurs obiektowego JavaScript (10)

Omówienie funkcji, sposobów przekazywania parametrów oraz kilku przydatnych funkcji wbudowanych.

Funkcje są bardzo ważną częścią każdego języka programowania. Jeśli chodzi o JS, to ich zrozumienie jest jeszcze ważniejsze, ponieważ spełniają one wiele ról i są jednym z powodów, dla których JS jest tak elastycznym językiem. Czym więc jest funkcja? To fragment kodu, który jest w jakiś sposób identyfikowany, który można wielokrotnie używać korzystając wyłącznie z identyfikatora, którym może być, np. nazwa funkcji lub jej adres.

function suma(a, b){
  var c=a+b;
  return c;
}

Funkcje w JS zawsze zwracają wartość. Jeśli nie jest to zrobione jawnie przy pomocy return, to niejawnie zwracana jest wartość undefined.

Funkcja może zwrócić tylko jedną wartość. Jeżeli zajdzie potrzeba zwrócenia wielu, można skorzystać z tablicy elementów lub obiektu (obiekty zostaną omówione w kolejnych częściach kursu).

Funkcje wywołuje się tak jak w innych językach programowania. Należy użyć jej identyfikatora (nazwy) oraz nawiasów (), w których znajdzie się lista argumentów.

var wynik=suma(1,4);

Słowo o parametrach

Jeśli przekażesz do funkcji mniej parametrów niż potrzeba, to silnik JS przypisze wartość undefined do tych, które pominąłeś.

Z drugiej strony, jeżeli przekażesz więcej parametrów niż wymaga funkcja, to nadwyżka zostanie pominięta.

Możliwe jest tworzenie funkcji, które przyjmują zmienną ilość parametrów. Dzieje się to za sprawą tablicy arguments, która jest tworzona w każdej funkcji. Zawiera ona listę wszystkich argumentów, które zostały przekazane.

function args(){ return arguments; }

args(); //[]

args("a", "b", 3, 4); //["a", "b", 3, 4]

Aby uzyskać informację o liczbie elementów tablicy należy skorzystać z konstrukcji arguments.lengh. Taki zapis wygląda standardowo jeżeli korzystałeś wcześniej z obiektowego języka programowania. Szczegóły obiektów poznasz później. W rzeczywistości argumens to obiekt, zachowaniem przypominający tablicę.

Funkcje wbudowane

W JS występuje szereg funkcji standardowych, które opisałem poniżej.

parseInt() - przyjmuje parametr dowolnego typu i stara sie go zamienić na liczbę całkowitą. Drugim parametrem jest podstawa systemu zapisu liczby, która została przekazana jako pierwszy parametr. Jest on opcjonalny i jeśli go pominiesz, to funkcja założy, że przekazałeś liczbę dziesiętną. Warto o nim jednak zawsze pamiętać, aby nie było nieporozumień.

parseInt("8"); //8

parseInt("FF"); //NaN, nie istnieje taka liczba dziesiętna
parseInt("FF", 16); //255, ale szesnastkowa tak

parseFloat() - robi to samo co parseInt(), ale działa z liczbami zmiennoprzecinkowymi. Radzi sobie dobrze z notacją naukową.

isNaN() - sprawdza czy podany argument jest równy wartości NaN.

NaN===NaN; //false, ważne!!!

isNaN(NaN); //true
isNaN(123); //false
isNaN( parseInt(223) ); //false
isNaN( parseInt("abc") ); //true

isFinite() - sprawdza czy parametr funkcji jest poprawną liczbą skończoną.

isFinite(Infinity); //false
isFinite(44); //true
isFinite(NaN); //false
isFinite(5e309); //false

encodeURI() oraz encodeURIComponent() - pierwsza na podstawie przekazanego ciągu znaków postara się zwrócić poprawny URL. Funkcja druga założy, iż przekazano tylko fragment URL. Odwrotne działanie mają funkcje decodeURI() oraz decodeURIComponent().

eval() - przekazany ciąg znaków wykona jako kod JavaScript. Należy unikać tego sposobu wykonywania kodu jeśli to możliwe. Powody są dwa: bezpieczeństwo i wydajność. JS to potężny język programowania. Jeśli więc nie wiesz i nie ufasz parametrowi jaki będzie przekazany do eval, lepiej pomyśl nad innym rozwiązaniem. Jeśli chodzi o wydajność, to kod wykonany przy pomocy eval zawsze będzie działał wolniej.

eval( "var x=12; x;" );

alert() - nie jest częścią specyfikacji ECMA, ale bardzo często jest dostępna w przeglądarkach. Jej zadaniem jest pokazanie wiadomości w oknie dialogowym. Często się również przydaje do debugowania kodu. Jej działanie powoduje zatrzymanie wykonywania kodu, do momentu zatwierdzenia komunikatu przez użytkownika.

//wykonaj w swojej konsoli:
alert("Hej!");

W tym artykule to wszystko. Przejdź do następnej części:

Kurs obiektowego JavaScript (11)