JavaScript - tablice, pętle

Kod:

Ewentualne Objaśnienia:

Tutaj trochę przykładów związanych z pętlami oraz tablicami w JS. Mam nadzieję, że masz ogólne pojęcie czym jest tablica i czym jest pętla. Krótko mówiąc tablica to typ zmiennej przechowującej wiele wartości, a pętla to instrukcją pozwalająca na powtórzenie danego kodu/instrukcji określoną liczbę razy (no bo po co np. pisać 10 razy instrukcję wywołania alertu jak można napisać ją raz i zapętlić).

Zobaczmy na przykłady :
1) Mamy formularz gdzie są 4 przyciski checkbox i jeden radio. Do tego dwa buttony - jeden zaznacza wszystkie elementy formularza, a drugi 3 pierwsze. Oba przyciski wywołują napisane przeze mnie wcześniej funkcje i tak :
    - funkcja zaznacz_wszystkie - tutaj mamy pętlę while, zapis window.document.form.elements.length określa nam liczbę elementów formularza (liczy wszystkie elementy, przyciski też!). Tak więc nasz zapis pętli oznacza "wykonuj pętlę dopóki zmienna i jest mniejsza od ilości elementów formularza" . Na końcu pętli zmienna i jest inkrementowana - czyli zwiększana o jeden, więc zapis i++ oznacza to samo co i=i+1 . Więc po każdym wykonaniu pętli zmienna ta jest zwiększana, sprawdzane jest czy nadal i jest mniejsze od ilości el. formularza i jeśli tak no to pętla wykonuje się ponownie.
W pętli mamy pierw pewien warunek - sprawdzenie czy dany element (zależnie od wartości i) jest różny od undefined - to specjalne słowo tak jak true i false. O co w tym chodzi ? Tak naprawdę tutaj jest to niepotrzebne ponieważ liczbę elementów określamy przez wspomniany zapis. Ale gdyby skrypt wyglądał inaczej i na przykład mielibyśmy zapis window.document.form.elements[9].checked = true czyli chcielibyśmy zaznaczyć 9 element formularza, a formularz miałby elementów mniej no to zwrócone zostałoby nam właśnie undefined. Dlatego pokazałem to tutaj i warto o tym pamiętać.
Po sprawdzeniu danego elementu jest on zaznaczany.

    - funkcja zaznacz(ile) - jako parametr podajemy ile pierwszych elementów formularza chcemy zaznaczyć. Działa to identycznie jak pierwsza funkcja, tylko sami określamy ile elementów zaznaczyć oraz tutaj użyłem pętli for . Jak widzicie jej zapis jest już trochę inny - zmiennej i przypisujemy wartość 0 i dalej mamy warunek, że wykonuj pętle dopóki i jest mniejsze od zmiennej ile. Po każdym wykonaniu pętli zwiększ i o jeden czyli i++ .

Zwróć uwagę, że elementy tablic nie są numerowane od 1 tylko od 0.

2) Drugi formularz to 5 checboxów z jakimiś tam sobie imionami i jeden do zaznaczania/odznaczania wszystkich. Elementy z imionami mają atrybut name="imie", a ten do zaznaczania "zaznacz". Po kliknięciu w ten do zaznaczania wywoływana jest funkcja zaznaczWszystko, która jako parametr przyjmuje formularz, zobaczmy :
    - zmiennej ile przypisujemy ilość elementów, których atrybut name jest to 'imie' czyli zapis Formularz.imie.length . Zmiennej wartość przypisujemy wartość z elementu 'zaznacz' - czyli jeżeli go zaznaczamy to zmienna ta przyjmuje true, jeśli odznaczamy przyjmuje false. No i mamy pętlę po wszystkich elementach 'imie', którym w pętli tej przypisujemy wartość parametru checked pola do zaznaczania. Czyli zaznaczamy wszystkie pola lub je odznaczamy.

3) Link o nazwie click to prosty przykład obrazujący tablice. Funkcja tabliceAlery przyjmuje jako parametr liczbę, która określa ile elementów należy wpisać do tablicy oraz później wyświetlić alertów. Ja w przykładzie podałem liczbę 3 więc :
    - tworzymy nową tablicę - zwróć uwagę na zapis. W pętli, która wykona się "ile" razy czyli tutaj 3 razy przypisujemy danemu elementowi tablicy odpowiednie wartości czyli dla tablica[0] wpiszemy "Element nr 0" itd. Po zakończeniu pętli teraz przez pętlę while wyświetlamy alerty. Pętla wykonuje się tyle razy ile jest elementów w tablicy co uzyskujemy przez zapis tablica.length . Wyświetlane alerty pokazują wartość danego elementu, określoną na podstawie indeksu/klucza tablicy.

Przedstawione przykłady mam nadzieję dobrze zobrazowały Wam jak pożytecznymi narzędziami są pętle i tablice ;-)

Jeśli chodzi o zaznaczanie checkboxów również zachęcam do poczytania : http://ferrante.pl/2007/06/23/praktyczne-wprowadzenie-do-javascript-18/ .