Pętle w JavaScript koncepcyjnie nie różnią się od pętli w innych językach programowania. O tym czym są pętle w programowaniu pisałam już przy okazji przygotowania młodszych dzieci do nauki programowania we wpisach o pętlach warunkowych oraz pętlach licznikowych.

Dla tych, którzy nie zapoznali się jeszce z tymi materiałami oraz dla tych, którzy już nie pamiętają czym jest pętla przypomnę w sktócie.

Pętla jest to sposób na zapisanie czynności, która powinna zostać powtórzona wiele razy.

Pętle w JavaScript

Jeżeli chodzi o pętle w JavaScript jedyną dodatkową rzeczą jaką dzisiaj poznamy jest skłania, czyli to jak pętlę zapisać w tym języku.

Gra CodeCombat wprowadza pętle warunkowe ( while ) fantastycznie wyjaśniając po co je stosować :

Pętle w JavaScript

Z drugiej zaś strony zadania, które pojawiają się po wprowadzeniu “tej mocy” formuowane są tak, żebyśmy byli niejako zmuszeni do wykorzystania pętli:

Pętle e JavaScript

Pojawia się tutaj dodatkowy cel „Poniżej 6 wyrażeń”. Żeby go osiągnąć musimy wykorzystać pętlę 🙂

Pętle w JavaScript – składnia

Pętle w JavaScript

Pętla warunkowa składa się z 3 głównych elementów:

słowa kluczowego (czyli takiego które rozpoznawane jest przez komputer jako polecenie) – while, możemy je przetłumaczyć jako dopóki dopóty

warunku zakończenia – w nawiasach () umieszczamy tzw. warunek, który musi być spełniony, żeby polecenia zawarte w pętli wykonywały się

– ciała pętli – polecenia które mają wykonywać się dopóki wskazany przez nas warunek jest spełniony. Umieszczamy je w nawiasach klamrowych {}

W naszym przykładzie mamy zatem słowo kluczowe while, które mówi nam, że teraz zaczyna się pętla. W nawiasach okrągłych () umieszczone jest słowo „true” (ang. „prawda”), które oznacza, że pętla powinna wykonywać się zawsze (jest to tzw. pętla nieskonczona). Następnie w nawiasach klamrowych {} umieszczone są polecenia, które mają wykonywać się stale: dwa razy hero.moveRight(); po czym dwa razy hero.moveUp();.

Podsumowując, nasz bohater ciągle powinien robić dwa kroki w prawo, po czym dwa kroki do góry i tak aż do końca gry 🙂

Jeżeli chcecie poćwiczyć sobie pętle w JavaScript kolejne plansze gry na pewno Wam w tym pomogą. Motywatorem do ich stosowania, zamiast wilokrotnego powtarzania tych samych komend, są premie za wykorzystanie odpowiednio małej ilości komend do osiągnięcia zadanego celu.

JavaScript – zastosowanie zmiennych

Następnym elementem, jaki poznajemy podczas pokonywania kolejnych komnat lochu, są zmienne:

JavaScript - zmienne

Zmienne służą do przechowywania wartości, które później mogą być wielokrotnie wykorzystywane. W przykładzie powyżej w zmiennych enemy1,2 i 3 zapisaliśmy sobie imiona naszych wrogów. Teraz, za każdym razem, kiedy chcemy zaatakować któregoś z nich, zamiast wpisywać jego imię, do metody możemy przekazać zmienną pod którą to imię jest zapisane.

O ile w tym przypadku zastosowanie zmiennych wydaje się nadmiarowe, o tyle kolejna plansza pozwala nam zrozumieć jak je wykorzystać.

JavaScript zmienne

Pojawia się tam metoda findNearestEnemy(). Pozwala ona na zidentyfikowanie wroga znajdującego się najbliżej bohatera. Nie wiemy jak on się nazywa, więc nie możemy wpisać jego nazwy do metody attack(). To co możemy zrobić, to zapisać rezultat metody findNearestEnemy() i wykorzystać, np. w metodzie attack().

JavaScript zmienne

No i w zasadzie na tym kończy się zakres wiadomości jakie można zdobyć przy pomocy tej gry w wersji darmowej. Jeżeli chcemy przechodzić kolejne poziomy, chociażby w „Ostępach lasu” musimy wykupić płatny dostęp.  Według mnie warto 🙂