Pierwszy program w JavaScript

Cześć! To jest fragment książki JavaScript od zupełnych podstaw, która ma pomóc w nauce programowania od zera. Zaangażuj się zostawiając komentarze (najedź myszką na tekst, by zobaczyć po prawej dymek komentowania), albo zostań recenzentem.

Kod to tylko tekst. Aby ożył, potrzebny jest ktoś, kto go zinterpretuje, czyli zrozumie i wykona zawarte w nim instrukcje. Nawet najlepsza książka jest bezużyteczna, gdy nie ma czytelnika, którego mogłaby poruszyć albo czegoś nauczyć. Również kod nie ma żadnej wartości, póki nie ma interpretera.

Interpreter to taki program, który czyta kod linijka po linijce i wykonuje jego instrukcje. Przypomina szczegółowe instrukcje, które dostawaliśmy od rodziców, gdy po raz pierwszy mieliśmy sami podgrzać obiad w piekarniku albo zrobić pranie.

My również w czasie naszej przygody z programowaniem będziemy potrzebować takiego interpretera, któremu możemy przekazywać instrukcje. Proces ten ułatwi zaobserwowanie, co jak rozumie. Przypomina to nieco rozmowę z... komputerem.

Ponieważ za cel postawiliśmy sobie JavaScript, który uważa się za język Internetu, jego naturalnym środowiskiem jest przeglądarka internetowa (jak Chrome, Firefox, Edge czy Safari). To ona więc będzie interpretowała nasz kod i wykonywała nasze polecenia. Zapewniam Cię, że nikt nie zna tak dobrze JavaScript jak przeglądarki internetowe, a do tego niejedna osoba chciałaby z nimi rozmawiać. W końcu spędzamy z nimi niemało czasu. Warto więc nauczyć się tego języka i móc rozpocząć nasze konwersacje.

Przeglądarka

JavaScript został stworzony, by strony internetowe nabrały życia. Technologie, które były wcześniej, umożliwiały tylko umieszczanie tekstów, tabel czy obrazków i określanie wyglądu strony. Poza przechodzeniem między stronami, niewiele się mogło zmieniać. Dla przykładu, nie wchodziły wtedy w grę popularne dzisiaj piękne animacje, liczniki liter przy tekście czy informacja o poprawności wpisanej wartości. Dzięki JavaScript strona może się zmieniać, a różne procesy mogą działać w tle.

O jakie procesy chodzi? Dla przykładu wyobraź sobie, że tworzysz komunikator internetowy, taki jak Facebook Messenger. Kiedy jesteś na stronie rozmowy i ktoś wyśle wiadomość, powinna się ona wyświetlić u Ciebie. Wszystkie wiadomości są przechowywane w jednym miejscu (zapewne w serwerowniach Facebooka), a więc Twoja przeglądarka powinna kontaktować się z tym miejscem raz na jakiś czas i dopytywać o nowe wiadomości. Jest to właśnie przykładowy proces mający miejsce, kiedy pozornie strona nic nie robi.

Tak więc najprostszym sposobem na sprawdzenie, jak działa napisany przez nas kod JavaScript, jest uruchomienie w przeglądarce strony internetowej strony z tym kodem. Przećwiczmy to teraz, stwórzmy taką stronę.

Wygląd stron internetowych definiowany jest w języku HTML. Opisuje on tylko jakie są elementy strony oraz jak są ułożone. Zdecydowałem się nie tłumaczyć HTML w tej książce, aby skupić się na JavaScript. Dlatego gdy będzie potrzebny, poprowadzę Cię, jak napisać to czego nam potrzeba.

Aby pracować z kodem będziemy potrzebowali narzędzia, które pozwoli tworzyć pliki w trybie tekstowym. Microsoft Word nie zadziała, gdyż dodawane do niego elementy mówiące o stylach czy wielkości czcionek nie będą zrozumiałe dla interpretera. Potrzebny nam program, który pozwala na umieszczenie w pliku czystego tekstu. Na Windowsie można to zrobić przy użyciu notatnika, lub można wykorzystać programistyczne edytory tekstu, takie jak: Atom, Sublime Text 3 czy Komodo Edit. Możesz również sięgnąć po bardziej zaawansowane narzędzia takie jak Visual Studio Code, WebStorm czy IDEA IntelliJ. Przy użyciu jednego z wymienionych, utwórz plik tekstowy o nazwie index.html z poniższą zawartością.

<!DOCTYPE html>
<html>
  <body>
    <script>
      // Twój kod JavaScript
    </script>
  </body>
</html>

Tutaj często wybierane środowisko programistyczne - IntelliJ IDEA - z zaznaczonymi podstawowymi funkcjonalnościami takich narzędzi.

Tam gdzie umieściłem // Twój kod JavaScript umieść dowolny kod JavaScript. Aktualny tekst zostanie zignorowany, gdyż jest to komentarz (dzięki temu, że zaczyna się od //). Komentarze są opisane na końcu tego rozdziału.

Jeśli otworzysz ten plik przy użyciu przeglądarki internetowej, to zobaczysz zupełnie pustą stronę. Aby przetestować czy ona działa, możesz umieścić jako kod JavaScript alert("To jest alert!"), powodujący wyświetlenie się komunikatu z treścią "To jest alert!". Tak więc po zmianie Twój kod powinien wyglądać tak:

<!DOCTYPE html>
<html>
  <body>
    <script>
      alert("To jest alert!");
    </script>
  </body>
</html>

Następnie uruchom tę stronę przy pomocy przeglądarki internetowej. Jeśli podwójne kliknięcie nie działa, najprostszym sposobem jest przeciągnięcie tego pliku na ikonę przeglądarki. W efekcie powinna pojawić się pusta strona, a na niej wyświetlony komunikat.

Taki komunikat nazywany jest oknem dialogowym lub wyskakującym oknem (ponieważ jest osobnym oknem, które pozwala na dialog z użytkownikiem). Taki tekst jest angażujący dla użytkownika, ponieważ wymaga każdorazowej akceptacji. Dlatego powinien być wyświetlany możliwie rzadko. Subtelniejszą formą komunikatu jest tzw. wypisanie do konsoli.

Używanie konsoli

Konsola to miejsce, gdzie standardowo wyświetlane są informacje na temat tego, co się dzieje na stronie, a o czym programista powinien wiedzieć. Przypomina dziennik, z którego nigdy nic nie usuwamy i zawsze dopisujemy coś ważnego na sam koniec.

Większość użytkowników stron nie zdaje sobie sprawy z jej istnienia. Aby wypisać tekst w konsoli, używamy funkcji console.log. Taki tekst zostanie tam dodany na ostatniej pozycji, za poprzednio wypisanymi tam wartościami1.

<!DOCTYPE html>
<html>
  <body>
    <script>
      console.log("To jest tekst");
    </script>
  </body>
</html>

W różnych przeglądarkach internetowych, różnie wygląda otwarcie konsoli. Skupimy się na Chrome, ponieważ:

  • zgodnie ze statystykami, zdominowało rynek i w maju 2020 roku jest używane przez ponad 70% Polaków,
  • daje inne, przydatne dla programistów narzędzia,
  • ma wiele przydatnych wtyczek (pluginów),
  • jest bardzo popularny wśród programistów JavaScript.

Jeśli jednak zdecydujesz się na inną przeglądarkę, z łatwością znajdziesz w internecie instrukcje, jak otworzyć w niej konsolę.

Tak więc, by uruchomić konsolę na Chrome, użyj prawego przycisku myszy w dowolnym miejscu na stronie, po czym wybierz "Zbadaj".

Aby odnaleźć konsolę, musimy wybrać zakładkę "Console". Tam powinniśmy wreszcie zobaczyć tekst, który wypisaliśmy do konsoli.

Co istotne, konsola może być również wykorzystywana do bezpośredniego sprawdzania, jak zadziała kod JavaScript. Jak tylko wejdziemy do konsoli, powinniśmy móc tam pisać kod. Gdy zaś wciśniemy Enter, napisany kod zostanie natychmiast uruchomiony, a jego wynik wyświetli się poniżej.

Może Cię zastanawiać, czemu w powyższym kodzie zostało wypisane dodatkowe undefined. To jest dodatkowa funkcjonalność konsoli - automatycznie wypisuje ostatnią wprowadzoną wartość. Możesz o tym myśleć tak, jakby ostatnia linia kodu była wypisywana do konsoli jako pierwsza. Ta właściwość bardzo ułatwia testowanie prostych operacji. Gdy już poznasz wartości i operacje z następnego rozdziału odkryjesz, że konsola może służyć jako podręczny kalkulator.

To przydatne narzędzie do sprawdzania, jak krótki fragment kodu zadziała. Jednak konsola, jak wszystko ma swoje plusy i minusy. Wiele elementów z tego, co zostało już raz zdefiniowane, nie może być ponownie zmienione, gdyż wyskoczy nam błąd i będziemy musieli zaczynać cały proces od początku.

Tak więc przy nauce, gdy nierzadko popełniamy błędy, konieczne jest częste odświeżanie strony. Właśnie dlatego spopularyzowały się inne narzędzia, bardziej przystępne do nauki programowania: REPL.

REPL

Powstały specjalnie narzędzia stworzone do tego, aby dostarczać przestrzeń do uruchamiania kodu JavaScript i zobaczyć, jaki daje on efekt. Takie narzędzia to REPL (z angielskiego: read-eval-print loop, czyli pętla: odczytaj-wykonaj-wyświetl). Najłatwiej je znaleźć poprzez wpisanie w Google "JavaScript REPL". Gdy robię to podczas pisania tej książki, pierwszą sugestią jest repl.it, który rzeczywiście dostarcza środowisko idealnie dostosowane do naszych potrzeb. Po jednej stronie znajduje się edytor kodu, który proponuje podpowiedzi w czasie pisania kodu oraz zaznacza błędy w składni. Gdy tylko chcemy sprawdzić jak zadziała kod, wystarczy wcisnąć przycisk "Run" i jest on uruchamiany. Następnie zostaje wyświetlone to, co zostało wypisane w konsoli. W przeciwieństwie do konsoli błędne linijki można usunąć jednym klinknięciem bez przysparzania sobie dodatkowej pracy i ryzyka w kółko rozpoczynania jej od zera.

Fragment JavaScript repl na stronie repl.it. Po lewej stronie piszemy kod w edytorze dającym podpowiedzi i kolorowanie składni. Po wciśnięciu przycisku "Run", po prawej stronie zobaczymy, co zostało przez ten kod wypisane do konsoli.

Podobne REPL'e są także dostępne jako aplikacje na smartfony.

W procesie nauki warto korzystać z REPL, by szybko testować jak zadziała jakiś kod. Miej go na podorędziu i wykorzystuj, by bawić się programowaniem. W razie pytań dotyczących jakiegoś kodu, dobrą praktyką jest dzielenie się nim z innymi użytkownikami poprzez przesłanie linka do REPL z tym kodem. Dzięki temu łatwiej będą mogli nawzajem zobaczyć co zrobiliśmy i potestować, czy nasze rozwiązania zadziałają.

Komentarze

W JavaScripcie wszystko, co pojawi się po znaku //, jest ignorowane aż do końca linijki. To są tak zwane komentarze i są one wykorzystywane do opisywania kodu. Ja będę je czasem wykorzystywał by opisać jakiś fragment, ale przede wszystkim będę je stawiał za console.log by poinformować Cię, co pojawi się w konsoli w wyniku jego działania.

// To jest komentarz,
// zostanie zignorowany przez JavaScript

console.log("Witaj, świecie"); // Witaj, świecie

// Jak widać, jak używam console.log, umieszczam
// komentarz informujący, co zostało wypisane.

Nie zabraknie pewnych wyjątków od tej reguły. Gdy na przykład pojedynczy console.log zostanie użyty wielokrotnie do wyświetlenia różnych tekstów, to zamiast za nim, umieszczę na końcu komentarz informujący o tym, co zostało wypisane.

Instrukcje, średniki i białe znaki

Tak jak na wspomnianej wcześniej liście od rodziców było wiele instrukcji, tak i w naszym kodzie możemy umieścić więcej niż jedną instrukcję. Instrukcja to nierozdzielne polecenie dla interpretera - najczęściej wywołanie funkcji, deklaracja, przypisanie lub zwrócenie wartości. Pełna definicja jest bardziej skomplikowana, ale w tej książce poznasz instrukcje po tym, że są po nich umieszczone średniki. Zwyczajowo kolejne instrukcje umieszczamy w kolejnych liniach.

console.log("Tekst 1"); // Tekst 1
console.log("Tekst 2"); // Tekst 2

Nie musi tak być. Instrukcje oddzielamy średnikami, a więc możemy je także umieścić w jednej linii

console.log("Tekst 1");console.log("Tekst 2");
// Tekst 1Tekst 2

Zarówno entery jak i spacje są tzw. białymi znakami, czyli znakami, które nie mają wpływu na wynik działania kodu. Kod będzie działał nawet gdyby się pojawiły w nadmiarze w różnych miejscach. Pod warunkiem, że poprzez ich wstawienie nie rozdzielamy żadnego elementu kodu.

   console . log("Tekst 1"); // Tekst 1
console.   log(
 "Tekst 2"  )  ; // Tekst 2

Mimo iż jest to możliwe, to powinno być to użwane tylko w przypadkach uzasadnionych. W programowaniu używa się bardzo konkretnego formatowania, a więc wstawia się spacje i znaki nowej linii w konkretnych miejscach. Zaobserwujesz je w różnych przykładach tej książki. Z pewnymi wyjątkami - czasem będę dodawał enter nie dlatego że tak należy, ale z powodu ograniczonej szerokości pola przeznaczonego na kod w książce.

Istotny wyjątek, kiedy entery mają znaczenie. JavaScript wprowadził funkcjonalność, która umożliwia pominięcie średników na końcu wyrażeń. Jeśli kod jest dobrze sformatowany (entery są tam gdzie należy), to JavaScript "domyśla" się gdzie powinny być średniki i samemu je wstawia. Tak więc w niemal wszystkich przykładach tej książki, średniki na końcu wyrażenia mogłyby zostać pominięte. Warunkiem aby się tak jednak stało jest, że po zakończeniu wyrażenie zostanie postawiony znak nowej linii. Jeśli tak się nie stanie, nasz kod po prostu nie zadziała.

console.log("Tekst 1") // Tekst 1
console.log("Tekst 2") // Tekst 2

console.log("Tekst 1")console.log("Tekst 2") // BŁĄD!

W książce postanowiłem stawiać przecinki na końcu wyrażeń, by wyrabiać w Tobie intuicje co jest wyrażeniem i gdzie powinny się one znajdować.

To jak? Wygląda na to, że jesteśmy gotowy by przejść do konkretów. Pomówmy o wartościach.

1:

Alternatywnie ta operacja nazywana jest drukowaniem do konsoli, zapisywaniem, wyświetlaniem albo nawet można się spotkać ze spolszczeniem "konsollogowanie". Dla ujednolicenia będę się trzymał jednak popularnego "wypisywania" do konsoli.