Chcę zostać kotem internetu – wstęp do programowania – JavaScript cz. 1

devkot.pl 2 lat temu

JavaScript, jest to jeden z podstawowych języków programowania związanego z internetem. Tworzenie stron internetowych bez podstawowej znajomości JavaScriptu, w dzisiejszych czasach jest wręcz niemożliwe. Pomimo, iż pojawiają się różne alternatywy dla JavaScriptu np. TypeScript, jego pozycja na rynku wciąż jest dominująca, przez co jego znajomość jest wręcz konieczna dla wszystkich frontend jak i fullstack developera.

Dlaczego JavaScript jest tak ważny, iż każdy programista internetowy powinien go znać? Przeglądając dzisiejsze strony internetowe, jako użytkownik, choćby nie zdajesz sobie sprawy jak dużo rzeczy dzieje się w tle. Rzeczy, które początkowo są niewidoczne dla człowieka. Zastanawiałeś się kiedyś jak to działa, iż klikasz w jakiś element na stronie i praktycznie w tym samym czasie masz powiadomienie o wykonanej akcji? Np. gdy dodajesz produkt do koszyka, po chwili wyskakuje komunikat o poprawnym dodaniu produktu. Ale jak to działa, iż strona potrafi wykonać jakąś operacje bez przeładowywania? Do tego właśnie służy JavaScript.

JavaScript pozwala tworzyć dynamiczne strony internetowe, które oprócz prezentowania treści, są w stanie reagować na akcje użytkownika, praktycznie w czasie rzeczywistym. Javascript pozwala na to, aby dodawać dynamiczne zachowania do strony internetowej. Dzięki temu współczesne portale internetowe mogą wykonywać wiele akcji naraz bez konieczności przeładowywania strony. jeżeli chcesz kupić produkt wystarczy, iż klikniesz przycisk Dodaj produkt do koszyka i Bang! Dalej przeglądasz stronę, ale produkt jest już w koszyku (wszystko zrobiło się w tle). Załóżmy, iż przeglądasz Facebooka, podoba Ci się jakaś treść, piszesz komentarz i Bang! Jest on widoczny od razu, dodatkowo, choćby jeżeli ktoś inny na niego odpowie to wyświetli Ci się to wszystko bez konieczności odświeżania strony! Do tego właśnie głównie służy JavaScript.

Czym jest JavaScript?

No dobrze skoro już wiesz do czego używa się JavaScriptu to myślę, iż warto przedstawić to czym jest JavaScript. Jest on skryptowym językiem programowania, stworzonym przez firmę NetScape. Za twórcę JavaScriptu uznaje się Brendana Eicha. Język ten powstał w 1995 roku i jest rozwijany aż do dzisiaj. W 1996 roku NetScape nawiązało współpracę z organizacją ECMA w celu opracowania oficjalnej specyfikacji języka JavaScript, która miała pozwolić na wprowadzenie tej technologii do przeglądarek internetowych. Tak właśnie powstał ECMAScript. W 2015 została wydana wersja ECMAScript 2015, nazywana również ES6. Wersja ta wprowadziła wiele nowych mechanizmów do JS-a np słowa najważniejsze let/const, moduły i symbole oraz była to ostatnia wersja, która stosowała stare wersjonowanie.

Począwszy od 2015 roku wprowadzono nowy system wersjonowania JavaScriptu dzięki, któremu nowe wersje wychodzą dużo częściej i bardziej regularnie. Aktualnie rok w rok pojawia się nowa wersja ECMSAScript, której nazwy biorą od roku wydania, np. ES2017, ES2018, ES2019.

Poszczególne wersje JavaScriptu są wspierane przez przeglądarki internetowe i jak to często bywa nie wszystkie zawsze wspierają najnowszą wersję, dlatego przed wykorzystaniem nowych mechanizmów warto sprawdzić, które przeglądarki wspierają konkretną wersję JS.

JavaScript, a przeglądarka

JavaScript jest językiem dynamicznie typowanym tzn. nie wymaga jawnego definiowania typów przez programistę tylko dedukuje je w czasie wykonywania kodu. Jest także językiem interpretowanym tzn. nie wymaga kompilacji, a przeglądarka potrafi go w locie przetłumaczyć na język zrozumiały dla komputera podczas jego wykonywania, co pozwala na bardzo szybkie aktualizacje, wystarczy tylko podmienić 1 plik i zmiany są już widoczne na serwerze.

JavaScript jest interpretowany

Niesie to również za sobą pewne konsekwencje. Mianowicie w odróżnieniu od języków kompilowanych do kodu maszynowego JS nie posiada walidatora składni. Prosto mówiąc jeżeli napiszesz niepoprawny kod JS, to dowiesz się o tym dopiero w przeglądarce. Co prawda istnieje coś takiego jak lintery, czyli narzędzia sprawdzające poprawność kodu JavaScript bezpośrednio w edytorze kodu, ale wymagają one dokładnej konfiguracji, za każdym razem gdy coś w JSie się zmienia. Zaufaj mi, często się zdarza tak, iż linter nie jest aktualizowany i pokazuje na czerwono (jako błąd) coś co tak naprawdę działa.

Gdzie uruchamiany jest JavaScript?

Kod JavaScript wykonuje się po stronie przeglądarki. Oznacza to, iż działa on tak naprawdę na urządzeniu osoby, która odwiedza dany portal. Dzięki temu jest on wykorzystywany do różnych operacji mających na celu zapewnienie responsywności portalu. Tzn. pozwala na natychmiastowe reakcje na akcje użytkownika bez przeładowywania strony. Jest on również wykorzystywany do odciążenia serwera, ponieważ pozwala odpytać serwer. np. tylko o dane, które się zmieniły. Nie wymaga od serwera zwracania całej strony, tylko zwykle oczekuje od serwera danych, które następnie zostaną wyświetlone.

Document Object Model (DOM)

Zanim przejdę do dokładnego omówienia składni JavaScriptu oraz tego w jaki sposób może on modyfikować rzeczy na stronie nie sposób nie wspomnieć o DOMie, czyli o Document Object Modelu. Co to adekwatnie jest? Otóż DOM jest to sposób reprezentacji złożonych dokumentów XMLowych jak i HTMLowych w postaci modelu obiektowego. Obiekt ten jest budowany w pamięci przeglądarki podczas interpretowania kodu HTML i JavaScript.

Jedną bardzo istotną cechą DOMu jest to, iż można go zmieniać bez konieczności odświeżania strony. Innymi słowy reprezentacja DOM w przeglądarce nie musi pokrywać się ze źródłowym kodem HTML.

Błędy w DOM

W przypadku niektórych błędów składniowych w pliku źródłowym, przeglądarka sama potrafi je poprawić. Np. jeżeli przeglądarka wykryje nie zamknięty element, to sama spróbuje go zamknąć. Dodatkowo DOM może być również modyfikowane między innymi przez różne wtyczki dostępne w przeglądarkach. Np przez wtyczkę do blokowania reklam, która potrafi całkowicie usunąć takie elementy z DOMu, aby nie były widoczne dla użytkownika. Każda zmiana w obiekcie DOM zmusza przeglądarkę do ponownego narysowania strony na ekranie (wyrenderowania).

Narzędzia programistyczne w przeglądarce – pobawmy się JavaScriptem

Każda współczesna przeglądarka internetowa udostępnia narzędzia dla programistów. Tzn. zestaw narzędzi, które są wręcz niezbędne, w pracy każdego internetowego programisty. Pozwalają one sprawdzić to jak działa aplikacja nad, którą pracujemy. dzięki tych narzędzi możemy podejrzeć aktualny stan DOM, wykonamy dowolny kod JavaScript, sprawdzimy zapytania jakie zostały wygenerowane przez przeglądarkę i wiele innych. Skupmy się póki co na podstawach. Aby dostać się do narzędzi developerskich w dowolnej przeglądarce wystarczy nacisnąć klawisz F12. Po naciśnięciu tego klawisza powinno wyskoczyć okno podobne do tego:

Podstawowe narzędzia programistyczne

Tak jak wspomniałem wcześniej narzędzia te pozwalają na dowolną interakcję ze stroną. Skupmy się póki co na zakładkach widocznych u góry:

Elementy – wyświetlają aktualną wersję DOM, dodatkowo z tego miejsca jesteśmy w stanie go modyfikować, aby np. sprawdzić co się stanie jak dodamy jakąś klasę/atrybut do elementu HTML, czy zmienimy jego zawartość. Możemy również dowolnie manipulować obiektem DOM. Dodatkowo warto dodać, iż jeżeli chciałbyś podejrzeć jak element dostępny na stronie internetowej wygląda w DOMie wystarczy kliknąć na niego prawym przyciskiem myszy oraz wybrać Zbadaj, przeglądarka automatycznie otworzy odpowiedni obiekt w zakładce Elementy.
Konsola – bardzo interesujące i pomocne narzędzie. Na ekranie konsoli można wypisywać dowolne komunikaty z kodu JavaScript. Czyli np. możemy zmusić przeglądarkę by wypisała tam wartość jakiegoś obiektu z pamięci lub aby wypisała jakiś komunikat (przykład poniżej). Dodatkowo na ekranie konsoli wypisywane są wszystkie błędy, ostrzeżenia i informacje dotyczące strony internetowej.
Źródła – pozwala w łatwy sposób dostać się do elementów, które zostały dołączone do kodu HTML. W tym oknie możemy podejrzeć np. pliki CSS, JS oraz inne elementy, które są doczytywane do naszego kodu HTML.
Sieć – jest to dla mnie jedna z najważniejszych i najbardziej użytecznych zakładek. Pozwala na prześledzenie wszystkich zapytań wysyłanych przez stronę internetową od momentu jej wyświetlenia, aż do czasu przeładowania. Oprócz tego, iż możemy zobaczyć jakie zapytania zostały wysłane, można także prześledzić ich zawartość oraz odpowiedzi jakie zostały otrzymane. Dla programisty backend ta zakładka jest niezwykle pomocna.
Aplikacja – pozwala na sprawdzenie elementów zapisanych w pamięci przeglądarki takich jak np. ciasteczka.

Konsola – kod JS bezpośrednio w przeglądarce

Logowanie informacji do konsoli dzięki JavaScriptu

Konsola jest to jedno z najbardziej użytecznych narzędzi programistycznych dostępnych w przeglądarkach. Jak zresztą sam za chwilkę się przekonasz pozwala ona bez żadnego opóźnienia wykonywać dowolne akcje. Poniżej przygotowałem parę przykładów, które pomogą zobrazować to do czego może służyć konsola. Jednak zanim do nich przejdziesz proszę Ciebie o uruchomienie narzędzi developerskich.

Zaloguj błąd do konsoli Zaloguj ostrzeżenie do konsoli Zaloguj informację do konsoli

Kod przycisków powyżej:

<button id="LogErrorToConsole">Zaloguj błąd do konsoli</button> <button id="LogWarningToConsole">Zaloguj ostrzeżenie do konsoli</button> <button id="LogInformationToConsole">Zaloguj informację do konsoli</button> <script type="text/javascript"> document.getElementById("LogErrorToConsole").onclick = () => console.error("Zalogowano błąd do konsoli"); document.getElementById("LogWarningToConsole").onclick = () => console.warn("Zalogowano ostrzeżenie do konsoli"); document.getElementById("LogInformationToConsole").onclick = () => console.log("Zalogowano informację do konsoli"); </script>

Kod przykładowych przycisków, składa się elementów HTML takich jak <button /> oraz <script />. dzięki z tego taga drugiego możemy dołączać kod JavaScript do stron internetowych. Podobnie jak z dołączaniem plików CSS możemy go napisać dzięki metody inline, czyli bezpośrednio w pliku HTML lub dołączyć go z zewnętrznego pliku wykorzystując atrybut src.

Obiekt document

Jak możesz zauważyć, każda linijka kodu JavaScript w przykładzie zaczyna się od słowa document. Document to tak naprawdę obiekt w JavaScript, który zawiera elementy wchodzące w skład DOM. Pozwala na manipulowanie stanem strony. Przy wykorzystaniu metody getElementById rozkazujemy przeglądarce znaleźć element w DOM z identyfikatorem odpowiadającym np. LogErrorToConsole a następne dzięki polecenia onclick przypisujemy do niego akcję. Wynikiem wykonanej akcji będzie zapisanie na konsoli odpowiedniego komunikatu.

Ważne: Linijka w JavaScript nie musi zaczynać się od słowa document. W przykładzie akurat modyfikuje obiekt DOM, dlatego każda linijka kodu zaczyna się od tego słowa.

Uruchamianie skryptów JavaScript z poziomu konsoli

Przejdziemy teraz do jednej z najpotężniejszych rzeczy jaką możemy zrobić z konsoli, czyli do uruchamiania własnych skryptów. Poniżej możesz zauważyć element, który zlicza wywołania funkcji. Możesz ją wywołać poprzez kliknięcie w przycisk.

Kliknij mnie

Kliknięto: 0

Powyższy kod działa, ale jak wywołać go z konsoli ? Spróbuj wpisać w niej coś takiego:

incrementCounter()

Jak widzisz licznik został podbity, ale co tak naprawdę się stało? Spójrzmy przez chwilę na kod:

<button id="incrementCounter">Kliknij mnie</button> <div> Kliknięto: <span id="clickCounter">0</span></div> <script type="text/javascript"> let clicked = 0; document.getElementById("incrementCounter").onclick = () => {
incrementCounter();
} function incrementCounter() { clicked++; document.getElementById("clickCounter").innerText = clicked; } </script>

W powyższym kodzie zdefiniowałem funkcje o nazwie incrementCounter. Jej jedynym zadaniem jest podbicie licznika i operując na DOM aktualizuje wartość elementu, który wyświetla tą liczbę na ekranie. W konsoli możesz wpisać dowolny prawidłowy skrypt JavaScript. Chciałbyś np. aby przycisk klikał się co 3 sekundy? Spróbuj wpisać coś takiego:

setInterval(incrementCounter, 3000);

Kod ten zleca przeglądarce wywoływanie funkcji incrementCounter co 3000 milisekund, czyli co 3 sekundy. Jak widzisz licznik wzrasta samoczynnie.

Sieć – zobaczmy co w tle robi Twoja przeglądarka

Kolejnym bardzo ważnym narzędziem programistycznym jest zakładka sieć, pozwala ona podejrzeć wszystkie żądania wysyłane przez przeglądarkę. Co ważne zakładka ta rejestruje dane dopiero od momentu uruchomienia narzędzi programistycznych. Dlatego też jeżeli chcesz zobaczyć pełną listę żądań odśwież stronę po uruchomieniu tej zakładki.

Wyślij zapytanie HTTP

<button id="sendHttpRequest">Wyślij zapytanie HTTP</button>
<script type="text/javascript">
document.getElementById("sendHttpRequest").onclick = () => {
const httpRequest = new XMLHttpRequest();
httpRequest.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
httpRequest.send();
}
</script>

Powyższy kod wysyła zapytanie HTTP pod adres https://jsonplaceholder.typicode.com/todos/1. Jeśli masz otwartą zakładkę Sieć powinieneś zobaczyć to zapytanie na samym dole listy.

W tym oknie możesz podejrzeć wszystkie informacje na temat wysłanego zapytania. To jakie miał nagłówki, co było ciałem żądania, jaka odpowiedź została zwrócona przez serwer. Jest to bardzo pomocne narzędzie, szczególnie podczas pracy nad integracją frontendu z backendem.

Aplikacja – co wie o Tobie Twoja przeglądarka

Zakładka aplikacja pozwala sprawdzić jakie informacje dany portal internetowy zapisał w pamięci Twojej przeglądarki. Za jej pomocą możesz sprawdzić dane zapisane w najważniejszych magazynach danych udostępnianych przez przeglądarkę. W ich skład wchodzi:

pamięć lokalna (local storage) – dane są zapisywane bezpośrednio w przeglądarce użytkownika. Są one przechowywane również po zamknięciu okna przeglądarki. Daje to możliwość odczytania zapisanych tam danych, gdy użytkownik wróci do Twojego portalu internetowego. Głownie używany do przechowywania prostych struktur danych. Dane zapisane w localStorage są przechowywane tak długo, aż programista lub użytkownik nie zażąda ich usunięcia.
Pamięć sesji – w tym przypadku dane również zapisywane są bezpośrednio w pamięci przeglądarki, ale w odróżnieniu od pamięci lokalnej te informacje są usuwane w momencie zamknięcia zakładki/okna przeglądarki. Przy ponownym uruchomieniu okna przeglądarki i odwiedzeniu portalu zostanie utworzona nowa sesja z czystymi danymi. Podobnie jak localStorage w pamięci sesji powinniśmy przechowywać proste struktury danych.
IndexedDB – baza danych wbudowana w przeglądarkę. Pozwala na przechowywanie wartości typu klucz-wartość. W odróżnieniu od poprzednich magazynów, IndexedDB służy do zapisywania złożonych struktur danych. Natomiast jeżeli chodzi o czas przechowywania danych to są one zapisane aż do momentu usunięcia ich przez programistę lub użytkownika.
Ciasteczka – jedna z podstawowych metod zapisywania danych przez przeglądarki internetowe. Jest to magazyn wartości typu klucz-wartość oraz jest ona zapisywana jako tekst na dysku twardym użytkownika. Ciasteczka są przesyłane jako element zapytania HTTP między użytkownikiem, a serwerem. Pozwalają na zapisywanie informacji, które mogą być potrzebne zarówno po stronie przeglądarki jak i serwera. Ciasteczka mogą mieć ustawioną datę ważności. Po przekroczeniu tej daty ciasteczka wygasają. Dodatkowo jeżeli nie ustawi im się tej wartości to wygasną automatycznie w momencie zakończenia sesji.

Podsumowanie

W dzisiejszym artykule skupiłem się głównie na przedstawieniu Ci historii JavaScriptu oraz koncepcyjnego spojrzenia na to czym on jest oraz na co pozwala. jeżeli przykłady przedstawione w powyższym artykule są dla Ciebie niezrozumiałe, nie przejmuj się. Ich celem było przedstawienie przykładowych zastosowań JavaScriptu. W ramach tego artykułu skupiłem się głównie na narzędziach programistycznych dostępnych w popularnych przeglądarkach internetowych. Dobre poznanie narzędzi przed przystąpieniem do programowania pozwoli Ci dużo szybciej rozwiązywać programistyczne problemy.
Mam nadzieję, iż artykuł Ci się podobał i zapraszam do śledzenia bloga. W drugiej części artykułu skupię się bardziej na podstawach JavaScriptu oraz przedstawię proponowaną ścieżkę nauki.