JavaScript  

 

w przykładach                

http://javascript.jest.o.k.pl

Podstawy JS, cz. 5: Funkcja, warunki, pętle
5.1 Przypomnienie

Jak już wsponiałem, skrypt JS nie musi składać się tylko z kolejno wykonywanych instrukcji, może on mieć znacznie bardziej skomplikowaną budowę. Dlatego potrzebne są funkcje oraz wszelkiego rodzaju pętle i instrukcje warunkowe. Za pomocą funkcji możemy określić całe bloki poleceń, które będziemy mogli przywołać podając jedynie nazwę tej funkcji. Pętle i instrukcje warunkowe służą do uzależnienia tego, co teraz zrobić od wyników poprzednich operacji. Ale może przejdźmy do konkretów.

[ Powrót na górę ]

5.2 Funkcje

W matematyce funkcja w dużym uproszczeniu to "coś", co w zależności od argumentów zwraca odpowiednie wartości. Tak też się rozumie funkcję w programowaniu: wywołanie określonej funkcji z określonymi argumentami powoduje wykonanie konkretnych operacji, które prowadzą do wyniku. Tak jest np. w Pascalu, ale w JS znaczenie funkcji jest większe: przejmuje ona też zadania tego, co w Pascalu nazywało się procedurą. Oznacza to, że funkcji wcale nie trzeba przekazywać żadnych argumentów, nie musi ona też zwracać wartości! Można funkcji po prostu użyć dla zdefiniowania jakiegoś bloku poleceń, którego będziemy często używać, tak aby móc go wywołać poprzez nazwę tej funkcji.

Funkcję definiujemy następująco:

function Nazwa_Funkcji(argument1, argument2, argument3) {             
    // Tutaj polecenia                                                
}                                                                     

Następnie funkcje możemy wywołać w następujący sposób:

Funkcja1(argument1, argument2);                                       
Funkcja2();                                                           
Zmienna = Funkcja3(argument);                                         

Jak widać, nie trzeba podawać argumentów (jeśli nie chcemy przekazać funkcji żadnych informacji), ale wtedy i tak musimy napisać nawiasy "()". Jeśli chcemy, aby funkcja zwracała jakąś wartość, musimy w jej definicji użyć słowa kluczowego return, np:

function czy_to_ja(toto)                                              
{                                                                     
   if (toto == "ja") return true;                                     
   return false;                                                      
}                                                                     

Jeśli ciąg będący argumentem to "ja", wtedy ta funkcja zwraca wartość true, w przeciwnym razie false. Ponieważ użycie słowa return powoduje przerwanie wykonywania funkcji (inaczej niż w Pascalu!), możliwa była taka konstrukcja logiczna, bez użycia else, czyli "w przeciwnym razie".

Oprócz definowanych przez użytkownika mamy też wiele funkcji wbudowanych w JS. Ich opis można znaleźć w każdej dokumentacji do JS.

[ Powrót na górę ]

5.3 Tworzenie obiektów

Miało być o tym, jak tworzyć własne obiekty, no i jest! Aby móc tworzyć obiekty, musimy najpierw przygotować funkcję je budującą, zwaną konstruktorem. Wszystko najlepiej powinien wyjaśnić praktyczny przykład:

function mojObiekt()                                                  
{                                                                     
   this.masa = null;                                                  
   this.masa.jednostka = null;                                        
   this.opis = null;                                                  
   this.sprzedany = null;                                             
   this.uwagi = null;                                                 
   return this;                                                       
}                                                                     

Słowo kluczowe this oznacza ogólnie obiekt / zmienną, która jest właśnie "w centrum uwagi". W tym przypadku jest to tworzony obiekt. Definiujemy własności obiektu, podobnie można zdefiniować jego metody, przypisując nazwie metody nazwę jakiejś funkcji określonej gdzie indziej (tym razem bez nawiasów po nazwie funkcji, ponieważ nie chodzi w tym przypadku o jej wykonanie). Tu stworzyliśmy jedynie klika własności, przypisując im wartości null (ale moglibyśmy nadać im jakieś inne, domyślne własności). W końcu przekazujemy utworzony obiekt jako wartość zwrotną fukcji. Teraz trzeba tylko wykorzystać nasz konstruktor. Służy do tego słowo kluczowe new:

NowyObiekt = new mojObiekt();                                         
JeszczeJedenObiekt = new mojObiekt();                                 

Możemy utworzyć dowolnie wiele kopii obiektu (zwanych z angielska instances), które będą od siebie całkiem niezależne. Teraz bardziej zaawansowany przykład:

function imgArray(n) {                                                
   this.length = n;                                                   
   for (var i=0; i<n; i++)                                            
      this[i] = new Image();                                          
   return this;                                                       
}                                                                     

Funkcja ta tworzy macierz n rysunków. Macierz (array) to szczególny obiekt, do którego poszczególnych elementów mamy dostęp poprzez ich indeksy, liczone od zera. Nasza funkcja ustala, że tworzony obiekt będzie miał własność length, oraz wszystkim elementom macierzy przypisuje nowo utworzony obiekt rysunku, korzystając z predefinowanego konstruktora Image().

Jeśli jednak chcemy stworzyć macierz bez określania, co ma być jej elementami, możemy skorzystać z gotowego konstruktora Array(n), gdzie n to długość macierzy.

[ Powrót na górę ]

5.4 Konstrukcje warunkowe i pętle

Te konstrukcje pozwalają na uzależnienie wykonywania kodu od spełnienia lub nie spełnienia określonych warunków. Są to: if ... else ("jeśli ... w przeciwnym razie"), while ("dopóki") oraz for ("dla każdego").

5.4.1 Instrukcja warunkowa if ... else

Taka konstrukcja oznacza po prostu "jeśli coś to coś, w przeciwnym razie coś innego". Używa się jej w następujący sposób:

if (warunek) {                                                        
   instrukcja1;                                                       
   instrukcja2;                                                       
} else {                                                              
   instrukcja3;                                                       
}                                                                     

Instrukcje mogą być zagnieżdżane. Jeśli mamy tylko jedną instrukcję, klamry wokól bloku { ... } możemy opuścić. Nie trzeba także określać bloku else { ... }. Przykład:

if ((dzień == "sobota") || (dzień == "niedziela")) {                  
   alert("Uwielbiam weekendy!");                                      
   confirm("Czy Ty też?");                                            
} else                                                                
   if (dzień == "poniedziałek")                                       
      alert("Nie cierpię poniedziałków");                             

[ Powrót na górę ]

5.4.2 Pętla while

Ta instrukcja powtarza jakiś fragment kodu, dopóki spełniony jest zadany warunek. I tak np.

var i = 1;                                                            
var x = 1;                                                            
while (i < 5) {                                                       
   x = x * i;                                                         
   writeln(i + "! = " + x);                                           
   i++;                                                               
}                                                                     

wypisze silnie kolejnych liczb naturalnych od 1 do 4. Za każdym razem, gdy wykonane zostaną polecenia z bloku ograniczonego klamrami ({ }), komputer sprawdza, czy warunek (x < 5) jest spełniony i jeśli tak, wraca na początek pętli. Podobnie jak w poprzednim punkcie instrukcje te mogą być zagnieżdżane i można opuścić klamry gdy w pętli jest tylko jedna instrukcja.

[ Powrót na górę ]

5.4.3 Pętla for

Jest to pętla podobna do poprzedniej, tylko że nie musimy ręcznie zwiększać stanu licznika (w naszym przykładzie było to i). Przez to nadaje się on lepiej właśnie w takich sytacjach, gdy wiemy z góry, ile razy chcemy wykonać daną pętlę.

Stosuje się ją następjąco:

for (var licznik = wartość początkowa; warunek; licznik++) {          
   instrukcje;                                                        
}                                                                     

Oczywiście, licznik to nazwa naszego licznika. Po określeniu jego początkowej wartości, po średniku podaje się warunek, np. licznik < 365. Zamiast licznik++ można też napisać licznik-- - wtedy jego wartości będą się zmniejszać zmiast zwiększać. [Właściwie instrukcję for można z powodzeniem wykorzystać także gdy nie mamy licznika jako takiego. Po prostu w nawiasie określany kolejno: kod do wykonania przed rozpoczęciem pętli; wyrażenie logiczne, które określa, czy kontynuwać pętlę; kod wykonywany po każdym przebiegu pętli. Jednak najczęście stosuje się właśnie schemat z licznikiem.] Teraz ten sam przykład, co w poprzednim punkcie, z wykorzystaniem pętli for:

var x = 1;                                                            
for (var i = 1; i < 5; i++)                                           
{                                                                     
   x = x * i;                                                         
   writeln(i + "! = " + x);                                           
}                                                                     

Wewnątrz pętli for możemy też stosować następujące instrukcje: continue oraz break. Pierwsza - continue powoduje natychmaistowy przeskok do następnego przebiegu pętli, nawet jeśli nie zostały jeszcze wykonane wszystkie jej instrukcje. Z kolei break powoduje całkowite wyjście z pętli i przejście do pierwszego polecenia znajdującego się po niej. Te same instrukcje działają także w przypadku pętli while

[ Powrót na górę ]

5.5 Komentarze

Przy okazji jeszcze parę słów o tym, jak umieszcza się w kodzie JS komentarze. Są dwa sposoby: można użyć podwójnego ukośnika (//), który oznacza, że od danego miejsca do końca linii wszelkie znaki są komentarzem. Przykład:

// to jest komentarz                                                  
//to też                                                              
var i = 0; // tu warto wyjaśnić w komentarzu znaczenie zmiennej i     

Można też oznaczać komentarze wieloliniowe. Początek takiego komentarza to /*, a koniec: */. Znów przykład:

/* komentarz na wiele linii                                           
i druga linia */                                                      
/* ale może być też na jedną linię */                                 

[ Powrót na górę ]

 


Valid HTML 4.0!

© 1998-2000 Maciej Szczepaniak