Od czego zacząć ?

Wstęp

Długo się zastanawiałem czy pisać o rzeczach podstawowych takich jak zmienne, pętle, tablice itp. Jednak mając na uwadze średni wiek użytkowników Margonem oraz ich 'zaawansowanie' w temacie programowania (oczywiście są wyjątki...) postanowiłem napisać kilka zdań na początek właśnie dla nich. Może nie tyle o samych podstawach języka co o takich podstawowych rzeczach przydatnych w programowaniu, szczególnie w programowaniu dodatków do Margonem. Mam nadzieję zachęcić was do nauki programowania w JS i nie tylko. Może już niedługo będziecie pisać całkiem niezłe rozszerzenia waszej ulubionej gry ;)

Kurs jest przeznaczony dla osób początkujących. Ci którzy coś już kiedyś kodowali mogą sobie odpuścić bo pewnie mają już swoje przyzwyczajenia i jeśli jest im z nimi wygodnie to ja na siłę nie chcę tego zmieniać. Zachęcam jednak do poczytania, może dowiecie się czegoś ciekawego co umknęło wam podczas nauki. Nie napiszemy dzisiaj żadnego dodadku, ani nie zaczniemy zabawy z jQuery. Powiem natomiast kilka słów o programowaniu jako takim i jak to w ogóle ugryźć.

Wybierzmy jakiś edytor

Zdecydowanie polecam rozbudowany edytor z kolorowaniem składni, uzupełnianiem kodu i sprawdzaniem poprawności. Sam jestem zwolennikiem Netbeans'a ale to dlatego że używam go w pracy i po prostu się przyzwyczaiłem. Na początek jednak nie polecam tego IDE bo można się zrazić do niego jak i do programowania, jest to niesamowity kombajn i jedyna rzecz, której nie potrafi to chyba parzenie kawy ;) Nie wierzcie ludziom którzy twierdzą, że do pisania stron, kodu itp. wystarczy notatnik... zazwyczaj są to amatorzy, którzy nigdy nie musieli pracować nad większym projektem. Do szybkich zadań świetnie nadaje się Notepad+

Screen z programu Notepad+ z otwartym plikiem JavaScript

Spokojnie nadaje się do celów takich jak pisanie dodatków do Margonem i do szybkich poprawek w kodzie. Można go pobrać z tej strony: http://sourceforge.net/projects/notepad-plus/files/ (po wejściu kliknijcie w duży zielony przycisk 'download')

Środowisko testowe

Wiadomo, środowiskiem testowym dla naszych dodatków będzie sama gra Margonem. Ale na potrzeby kursu zrobimy sobie malą piaskownicę (sandbox - popularna nazwa środowiska testowego do zabawy). Czasami trzeba coś sprawdzić w czystym JS nie koniecznie związanego z grą i pisanym dodatkiem. W takiej sytuacji nasza piaskownica sprawdzi się idealnie. Wystarczy do tego plik z rozszerzeniem .html

A więc robimy nowy plik tekstowy, zmieniamy mu rozszerzenie i gotowe, proste co ? :) Jeśli w windowsie mamy włączoną opcję 'ukryj rozszerzenia znanych typów' to może być problem ze zmianą rozszerzenia na html. Aby to wyłączyć otwieramy 'Mój komputer' -> menu 'Narzędzia' -> Widok -> i odznaczamy wspomnianą pozycję.

Dla sprawdzenia czy wszystko działa tak jak powinno otwieramy plik do edycji we wcześniej pobranym edytorze i wpisujemy:

<script>
  document.write('Hello World!');
</script>

Teraz otwierając nasz plik testowy w przeglądarce powinniśmy zobaczyć popularne przywitanie każdego programisty z nowo poznawanym językiem. Powinno to wyglądać mniej więcej tak:

Brawo, napisałeś swój pierwszy działający skrypt :)

Przydatne narzędzia w pisaniu dodatków

Web Developer

Podczas pracy nad MargoMap bardzo często potrzebowałem podejrzeć kod gry, zobaczyć jak to się tam dzieje, że NPC pokazują się na mapie i jak się za to wszystko zabrać. Gdzie się wstrzelić ze swoim kodem żeby nie popsuć gry a jednocześnie żeby sprawić, że mój dodatek będzie bardziej atrakcyjny. Pomocne okazało się rozszerzenie do Firefoxa o nazwie 'Web Developer' (do pobrania tutaj: https://addons.mozilla.org/pl/firefox/addon/60) dość popularny dodatek co można stwierdzić po ilości pobrań. Jest to także jeden z pierwszych dodatków napisanych pod Firefoxa. No ale jedziemy dalej... Ma on bardzo przydatną opcję podglądu kodu js, który występuje na stronie. Nie ważne czy są to wstawki

<script>alert('test')</script>

Rozwijane menu dodatku Web Developer

Po kliknięciu w podświetlony element ukaże się nam cały kod JS używany na stronie. Wygląda to mniej więcej tak:

Wykaz plików JS w Web Developer

Elementy oznaczone strzałkami to pliki JavaScript dołączone do gry Margonem na nowym silniku. Pod każdym z nagłówków widoczny jest kod, który odpowiada swojemu plikowi. Powiedzmy, że chcemy się przyjżeć bliżej plikowi 'player.js' (oznaczony ramką) W tym celu klikamy TRZY razy na jego kodzie, kopiujemy zaznaczona zawartość i wklejamy do edytora żeby nam ładnie pokolorował składnię... Aleee jak widać plik jest zapisany w jednej linii, trochę ciężko się go czyta w taki sposób. Tutaj przychodzi z pomocą:

JavaScript Beautifier

Jesto to narzędzie online, które w prosty sposób sformatuje nam kod, dzieląc go na poszczególne linie oraz dodająć wcięcia. Narzędzie dostępne jest tutaj: http://jsbeautifier.org/ a korzystanie z niego jest bardzo proste. Wklejamy kod w pole tekstowe, wciskamy przycisk na dole i kopiujemy to co powstało. Teraz możemy się bawić w rozkodowywanie tego co autor kodu miał na myśli pisząc go ;) Jeśli mamy problem z czytaniem kodu to łatwiej będzie nam go rozgryźć widząc go w akcji. w tym celu możemy posłużyć się najlepszym narzędziem do debugowania:

Firebug

To kolejny dodatek do przeglądarki Firefox. Jest bardzo przydatny jeśli chcemy np w locie zmodyfikować kod html lub css. Np gdy chcemy sprawdzić jak by coś wyglądało gdyby dodać temu czemuś ramkę albo tło ;) Dodatek można pobrać ze strony https://addons.mozilla.org/pl/firefox/addon/1843 po zainstalowaniu, w prawym dolnym rogu przeglądarki powinna pojawić się ikonka z karaluchem, po kliknięciu na nią otwiera się Firebug. Wygląda to mniej więcej tak:

Okienko firebuga.

Nas najbardziej interesują sekcje zaznaczone kolorem pomarańczowym. Postaram się w kilku zdaniach opisać każdą z nich:

HTML - Tutaj możemy podejrzeć kod html całej strony, modyfikować poszczególne elementy, usuwać, dodawać nowe a także zmieniać style każdego zaznaczonego elementu (w prawej kolumnie)

Skrypt - Tutaj można podejrzeć skrypty JS działające na stronie oraz ustawić breakpointy i generalnie zająć się debugowaniem skryptu. Dla początkujących jest to dość skomplikowane, dlatego nie będę tu tego opisywał. Może dojdziecie do tego kiedyś w trakcie pisania. Nie jest to aż tak niezbędne.

DOM - Chyba najlepsza zakładka:) Można tu podejrzeć utworzone obiekty, zobaczyć co się w nich znajduje i jak się zmieniają podczas gry w Margonem. Zobaczcie co między innymi można znaleźć w tej zakładce:

Wartości bint i bstr odpowiadają intelektowi i sile naszej postaci. (Zemyna, Zorza)

Jest to bardzo przydatne w debugowaniu skryptów i sprawdzaniu jak działają. Jakie przechowują wartości i czy w praktyce jest tak jak myśleliśmy, że będzie :)

Na koniec wspomnę jeszcze o jednym narzędziu, może nie niezbędnym ale bardzo przydatnym, szczególnie gdy chcemy w grze w menu zarządzania dodatkami zmienić coś szybko w aktualnie działjacym dodatku. W tym celu można posłużyć się narzędziem:

Its all Text

Jest to dość uniwersalne narzędzie, działa na każdym polu tekstowym w przeglądarce Firefox. Można go pobrać tutaj: https://addons.mozilla.org/pl/firefox/addon/4125 po zainstalowaniu, możemy edytować pole tekstowe za pomocą każdego edytora. Wystarczy go wskazać w ustawieniach dodatku. Możemy np podpiąć nasz Notepad+ w ten sposób mając możliwość szybkiego edytowania pól tekstowych z naszym kodem. Bez tego narzędzia należało by wykonać kilka operacji zamiast jednej aby to zrobić.

To narazie wszystko co dla was przygotowałem. Już niedługo poradnik jak napisać swój pierwszy dodatek.