Pętle to instrukcje, dzięki którym możesz powtarzać dowolny kod, dowolną ilość razy.

Można je podzielić na kilka rodzajów, które różnią się budową i działaniem, choć tak naprawdę żadna z nich nie jest skomplikowana:

  • for
  • forEach
  • while
  • do..while

Wersja wideo:

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Zacznijmy od najpopularniejszej pętli – for

Wygląda następująco:

A teraz po kolei:

  • ustalamy zmienne, które będziemy wykorzystywać w pętli
  • warunek dla którego ta pętla ma dalej działać
  • działanie, które wykonujemy na końcu każdego obiegu, a zazwyczaj jest to zwiększanie lub zmniejszanie wartości zmiennych (inkrementacja lub dekrementacja)

Przykład pętli for, która wypisuje liczby od 0 do 100:

Wynik będzie taki, że w konsoli zostaną wypisane liczby od 0 do 99

Dzieje się tak, ponieważ zmienna „i” o wartości 100 nie będzie już spełniała naszego warunku (100 NIE JEST mniejsze niż sto), a co za tym idzie zostanie wyświetlone maksymalnie 99.

Żeby naprawdę wyświetlić wszystkie liczby aż do 100, zmień warunek na „i <= 100”, wtedy sama liczba 100 również zostanie wzięta pod uwagę.

Co do „i++” – to jest to samo, co „i = i + 1”, tyle że w skróconej formie. Równie dobrze możesz odjąć jedynkę od aktualnego „i”, pisząc „i–„. To jest właśnie inkrementacja lub dekrementacja.

 

Pętla forEach

Jest przydatna, gdy np. posiadasz tablicę z jakimiś elementami i chcesz wykonać jakieś działanie dla każdego z tych elementów.

Oczywiście możesz to samo zrobić za pomocą for, ale forEach wygląda bardziej intuicyjnie.

W poniższym przykładzie tworzę tablicę z pracownikami, a potem za pomocą forEach wypisuję każdego z nich razem z numerem indeksu. Indeks powiększam o jeden, bo w programowaniu numerowanie zaczynamy od zera.

  • element – aktualny element w tablicy
  • index – indeks aktualnego elementu w tablicy
  • array – odniesienie do całej tablicy

W rezultacie otrzymujemy:

 

Pętla while

W wideo pokazałem jak za pomocą tej pętli wyświetlić pracowników, ale jest to trochę marnowanie czasu, bo dużo lepiej sobie z tym radzi pętla for czy forEach.

While można wykorzystać do wykonywania jakiegoś działania, dopóki warunek jest spełniony.

Można więc wyświetlać wszystkie liczby od 0, dopóki taka liczba jest mniejsza od 10.

W wyniku otrzymamy więc:

 

Pętla do..while

Jedyną różnicą między tą pętlą, a while jest to, że do..while wykona się co najmniej 1 raz.

W while najpierw sprawdzamy warunek, a dopiero potem następują działania.

W do..while najpierw jest do, więc najpierw wykonujemy jeden raz cały kod, a dopiero potem sprawdzamy czy warunek pozwala na dalsze działanie tej pętli.

 

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

 

Na koniec wygenerujmy tabelę w HTML za pomocą pętli

Wiesz już wystarczająco dużo, by móc pracować z pętlami. Teraz więc wykorzystamy pętlę for do wygenerowania tabeli, którą uzupełnimy danymi i na koniec wstawimy do drzewa DOM.

Na początku stworzymy kod, a zaraz potem wyjaśnię co się tutaj dzieje.

 

 

Analiza kodu krok po kroku:

  1. Na początku tworzymy zmienną „tabela”, w której tworzymy element „table”
  2. Do tej tabeli dodajemy klasę „table”, bo na wideo działamy z Bootstrapem, więc to sprawi, że tabela będzie lepiej wyglądać
  3. Teraz zaczynamy pierwszą pętlę, która wygeneruje 5 wierszy
  4. W każdej takiej pętli tworzymy nowy wiersz, czyli element „tr”
  5. Zaczynamy drugą pętlę, która dla każdego elementu „tr” – wiersza tabeli – wygeneruje potrzebne kolumny, czyli elementy „td”
  6. Kiedy każdy element „td” (kolumna) zostanie wygenerowany, dodajemy do niego tekst i wstawiamy do elementu „tr” (wiersza)
  7. Gdy już obie pętle będą zbliżać się do końca, mamy gotowy wiersz tabeli – zawierający kolumny i przykładowy tekst
  8. W taki sam sposób, jak kolumny wstawialiśmy do wiersza, teraz taki wiersz wstawiamy do tabeli
  9. Wszystkie obiegi dwóch pętli zostały już zakończone, więc tabela jest gotowa do wyświetlenia
  10. Teraz wystarczy wstawić całą tabelę do elementu o id „pojemnik-tabeli”, a po odświeżeniu strony całość pojawi się na stronie

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Kurs JavaScript 5/10 – Pętle for, forEach, while, do..while
Ocena: 4.5 - 4 głosów

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

>