Dzisiaj poznamy podstawy składni JavaScript – na początek na warsztat weźmiemy metody.

Jeżeli czytaliście mój poprzedni wpis to doskonale wiecie, że celem moim i mojego dziesięcioletniego syna jest stworzenie własnej aplikacji dostępnej w internecie.

Na początek chcemy poznać podstawy składni JavaScript, html i css. Pozwoli nam to stworzyć stronę, która będzie miała określony wygląd (html, css), ale też chcemy zaprogramować jej zachowanie – do tego przydadzą nam się podstawy składni JavaScript.

CodeCombat

Jako przewodnik po meandrach języka wybraliśmy grę CodeCombat. Z jednej strony wprowadza ona poszczególne elementy w określonej kolejności, z drugiej zaś wprowadza je w przystępnej dla dzieci formie.

Jeżeli chcecie podążać naszym śladem stwórzcie sobie konto w grze i przechodźcie kolejne poziomy. To naprawdę świetna zabawa !

Zaczynamy od świata nazwanego “Loch Kitharda”. Dzisiaj przejdziemy pierwszych dziewięć poziomów, poznamy koncepcję metod i argumentów oraz dowiemy się czym są komentarze w JavaScript.

Domyślnym językiem dla tej gry jest Python, więc jeżeli, tak jak my, chcecie robić zadania w JavaScript musicie go na początku zmienić:

Podstawy składni JavaScript – metody

Pierwsze komendy jakie poznajemy podczas przechodzenia kolejnych poziomów gry CodeCobat są to komendy ruchu. Pierwsze 3 plansze polegają na zaprogramowaniu bohatera -„hero” tak, żeby zebrał wszystkie znajdujące się na planszy klejnoty.

Dostępne metody to :

Nazwy metod pochodzą z języka angielskiego – dla tych którzy nie znają tego języka:

hero.moveDown(); – rusz się w dół

hero.moveLeft(); – rusz się w lewo

hero.moveRight(); – rusz się w prawo

hero.moveUp(); – rusz się w górę

Warto tutaj od razu wyjaśnić kilka rzeczy. Jak widzisz wszystkie te komendy pojawiają się po „hero.” Oznacza to tyle, że są one wykonywane na rzecz „hero”, czyli to nasz bohater będzie poruszał się do góry, do dołu w prawo i w lewo.

Kolejnym charakterystycznym elementem są nawiasy „()” – dzięki nim wiadomo, że ciąg znaków, który poprzedzają jest metodą.

Metoda jest to taki mały podprogram, który wykonywany jest na rzecz jakiegoś obiektu.

U nas tym obiektem jest bohater – „hero”, a metody pozwalają mu się poruszać w czterech kierunkach.

Ostatnią rzeczą, na którą chcę zwrócić tutaj uwagę, jest średnik. Pojawia się on na końcu każdej z powyższych komend i mówi, że to jej koniec.

Podstawy składni JavaScript – argumenty

Na kolejnym etapie gry poznajemy argumenty.

Argument jest to wartość przekazywana do parametru funkcji.

Brzmi trochę skomplikowanie?

No to po kolei.

Jak ustaliliśmy wcześniej metody są takimi podprogramikami, dzięki którym obiekt może wykonywać jakieś zadania np. poruszać się w prawo.

No ale co to znaczy „poruszać się w prawo”? Jak daleko pójdzie nasz bohater?

Domyślnie zakładamy, że będzie to jeden krok i tak właśnie działa metoda hero.moveRight(). Ale co jeżeli chcemy zrobić 10 kroków ?

Wówczas musielibyśmy napisać 10 razy hero.moveRight(). Kolejnym sposobem byłoby stworzenie metody hero.moveRightTenSteps(), która pozwalałaby poruszać się 10 kroków na raz.

No ale co, jeżeli za chwilę będziemy chcieli poruszyć się o 5 kroków, potem o 7 itd… Czy musimy dla każdego z tych przypadków pisać oddzielną metodę?

Otóż nie !

Wystarczy, że napiszemy metodę horo.moveRight z parametrem oznaczającym ilość kroków, które przebędzie bohater po jej wykonaniu. W ten sposób nasza metoda jest parametryzowana ilością kroków. Kiedy więc napiszemy hero.moveRight(2); nasz bohater przemieści się o 2 kroki w prawo. Przy czym liczba 2 jest argumentem naszej metody i może zostać zastąpiona dowolną liczbą, w zależności od tego, ile kroków chcemy wykonać naszym bohaterem.

Kolejny przykład wykorzystania argumentów w akcji znajdujemy na kolejnej planszy. Wprowadzona tam zostaje metoda hero.attack(target).

Wykorzystując tę metodę bohater może atakować różne cele (attack – atakuj, target – cel) – w szczególności wrogów. I znowu, mamy jedną metodę attack, której możemy przekazać informację kogo powinniśmy zaatakować. Dzięki temu nie musimy tworzyć oddzielnej metody dla każdego potencjalnego celu. Tak więc pisząc hero.attack(„Brak”) mówimy: „Bohaterze zaatakuj wroga o imieniu „Brak”.

Warto tutaj zwrócić uwagę na to, że o ile liczby przekazujemy do metod po prostu, w przypadku ciągów znaków musimy je oznaczyć cudzysłowem. Także hero.attack(Brak), to nie to samo co hero.attack(„Brak”).

Podstawy składni JavaScript – komentarze

W kolejnych poziomach gry ogromną rolę odgrywają komentarze, czyli – cytując twórców gry – sposób w jaki programista może wytłumaczyć kod innemu programiście. Znaczy to tyle, że jest to tekst, który nie ma żadnego znaczenia dla komputera – czytają go tylko ludzie. Jeżeli usuniemy wszystkie komentarze z naszego programu, będzie on działał dokładnie tak samo, jak z nimi.

Komentarze piszemy wtedy, kiedy chcemy w nich wyjaśnić coś innemu człowiekowi. W JavaScript komentarz oznacza się wpisując na początku linii //

Jeżeli wybraliście w grze język polski na początkowych etapach gry komentarze będą faktycznie w języku polskim. Muszę was jednak ostrzec, że niestety nie cała gra została jeszcze przetłumaczona, więc może się zdarzyć, że część poleceń i komentarzy dostępna będzie jedynie w języku angielskim.

Na dzisiaj to tyle !

W następnym wpisie zapoznamy się z pętlami, a na razie zachęcam Was do pokonywania kolejnych poziomów gry i zdobywania kolejnych umiejętności 🙂