od Podstaw
9 godz. 20 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperJavaScript to język programowania, który napędza niemal wszystkie strony internetowe. Dopełnia on technologie HTML i CSS, za pomocą których tworzymy strukturę i wygląd dokumentu. Co jednak w sytuacji, gdy chcemy po kliknięciu w wybrany przycisk wyświetlić powiększone zdjęcie lub wczytać dodatkowe dane z serwera? To właśnie w takich sytuacjach przydaje się język JavaScript i tzw. DOM API, dostępne w przeglądarce. Jak się przekonasz, możliwości nowoczesnych przeglądarek w połączeniu z tym językiem są naprawdę ogromne.
Język JavaScript może być używany nie tylko na stronach internetowych. Z tego powodu, w kursie omówimy najpierw najważniejsze konstrukcje tego języka, które są niezależne od platformy uruchomieniowej. Dzięki temu zbudujesz fundamenty niezbędne do tego, by wykorzystać ten język np. w środowisku Node.js. Krok po kroku omówimy sposoby tworzenia zmiennych, dostępne typy danych i operatory. Następnie zobaczysz jak tworzyć tablice i obiekty, z jakich instrukcji warunkowych i pętli możesz korzystać, a także jak tworzyć własne funkcje. Przekazywana wiedza uwzględniać będzie nowości, które pojawiły się w języku wraz z rewolucyjnym standardem EcmaScript 6 (ES6).
Sam język JavaScript to nie wszystko, by tchnąć ducha w strony internetowe. Z tego powodu, przeglądarki internetowe udostępniają tzw. DOM API. To interfejs, który z użyciem języka JavaScript pozwala na manipulację treścią i wyglądem strony. W kursie bardzo dokładnie omówimy czym jest Obiektowy Model Dokumentu, a także jak z nim pracować. Zobaczysz jak tworzyć nowe elementy HTML i wstawiać je na stronę, jak modyfikować ich treść, atrybuty, style czy klasy CSS. Poznasz sposoby na odczytywanie położenia elementu na stronie i jego wymiarów, które będą niezbędne w wielu sytuacjach. Dowiesz się także, jak przypisywać obsługę zdarzeń w przeglądarce, by np. wywołać własną funkcję, gdy ktoś kliknie w wybrany przez Ciebie przycisk.
JSON to popularny format wymiany danych, a Ajax to potoczna nazwa dla asynchronicznych zapytań HTTP, które wysyłać możemy z poziomu kodu JavaScript. Dziś niemal każda strona internetowa wykorzystuje te technologie. W niektórych przypadkach jako dopełnienie podstawowej funkcjonalności witryny, a w innych jako główny motor napędzający stronę. Jeśli kiedykolwiek widziałeś, jak na stronie internetowej jakaś treść "doczytuje" się np. podczas przewijania - widziałeś w praktyce Ajax. W jednym z rozdziałów kursu zobaczysz, jak pracować z tym formatem, a także jak wysyłać wspomniane zapytania do serwera.
Choć kurs który masz przed sobą, jest kursem dla początkujących, to aby zrozumieć jak działa język JavaScript i jak z nim się współcześnie pracuje, omówimy dwa ważne tematy - zarządzanie zależnościami i bundlowanie kodu. Dowiesz się czym jest npm i jak z jego pomocą pobierać paczki gotowego kodu z internetu, a także jak sprawić, by bez trudnu dołączać je do własnego kodu. W tym celu skorzystamy z narzędzia snowpack, które pozwoli nam także na optymalizację kodu przed jego wypuszczeniem w świat. Na tym etapie omówimy również jak działają moduły ESM, pozwalające dzielić kod na mniejsze części.
Kurs podzielony został na możliwie krótkie lekcje, do których w każdej chwili możesz wrócić. Jeśli zatem zapomnisz jak odczytywać wymiary elementu na stronie, szybko odnajdziesz odpowiednią lekcję. Czym jednak była by sama teoria i proste przykłady, bez pokazania, jak połączyć je w całość i wykorzystać w praktyce? Dobra wiadomość jest taka, że w kursie stworzymy aż 5 praktycznych projektów, wykorzystujących zdobytą wcześniej wiedzę. Najpierw napiszemy program losujący Dużego Lotka, następnie dynamiczny pasek postępu przeczytania artykułu, dymek pojawiający się nad elementem po najechaniu na niego myszą, wygenerujemy tabelkę w użytkownikami na podstawie danych JSON, a na koniec tworzymy prosty odtwarzacz wideo, z możliwością pauzowania i przewijania filmu.
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript nie jest wymagana, ale zalecana jest podstawowa wiedza z zakresu samego programowania (czym są zmienne, pętle, funkcje itd.). Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej i zacząć korzystać z nowoczesnych frameworków.
W tej lekcji omówimy blok try catch, który jest
dostępny w języku JavaScript, ale także w wielu innych językach programowania.
Na początek, żeby to zobrazować,
wyobrazimy sobie taki przykład, gdzie chcielibyśmy się połączyć z bazą danych.
I tutaj już abstrahując od tego, czy z
języka JavaScript da się łączyć z bazą danych czy nie,
otóż da się, np. kiedy korzystamy z Node.js
to nie ma tutaj większego znaczenia, ale wyobraź sobie, że mamy funkcje,
będą to trzy funkcje, takie jak otwieranie połączenia do bazy danych, potem funkcja
pobierająca z bazy danych i funkcja zamykająca połączenie do bazy danych.
Czyli można powiedzieć, że taki standard
przy pracach z bazą danych. Więc będę chciał sobie te funkcje stworzyć
teraz. Nazwiemy jedną openDbConnection
w ten sposób i w niej zrobimy po prostu console.log
"Otwieram połączenie do bazy danych".
Coś takiego. To będzie pierwsza funkcja
i nie ma znaczenia w jaki sposób ona by to połączenie otwierała.
Druga funkcja to będzie getData, czyli pobierz dane, do niej za chwilę wrócimy
I trzecia funkcja to byłoby closeDbConnection,
w której zrobimy sobie console.log
"Zamykam połączenie do bazy danych".
OK, w ten sposób.
No i teraz wyobraźmy sobie sytuację, że wystąpiłby błąd w tej funkcje getData.
Czyli będziemy chcieli w jakiś sposób
pobrać dane z bazy danych, ale może się okazać, że baza danych jest niedostępna.
I wtedy zazwyczaj jest tak, że po prostu zostanie zgłoszony błąd.
I teraz czy my chcemy, żeby nasz program przestał przez to działać?
Zazwyczaj nie.
Dlatego wyobraź sobie, że w tej funkcji
spróbujemy zwrócić data i to nam powinno już wygenerować błąd, bo
odwołałem się do jakiejś zmiennej, która nie istnieje.
Więc ona wygeneruje JavaScript błąd,
ale w prawdziwym życiu, że tak powiem,
tutaj byłby na przykład jakiś błąd z połączeniem z serwerem bazy danych.
Niemniej jednak istotne jest, że kod w tym momencie zgłosi błąd.
Teraz zobacz, co by się stało, gdybyśmy chcieli zrobić coś takiego
otworzyć połączenie do bazy danych openDbConnection,
tak jak wspomniałem, nie jest istotne jak by się to działo,
następnie chcielibyśmy pobrać dane i zamknąć
połączenie z bazą danych w ten sposób.
Czyli wiemy, że powinien się wykonać ten console.log
i ten console.log
również. Otworzymy sobie to w przeglądarce i zobaczymy
Otwieram połączenie do bazy danych, a następnie właśnie ten krytyczny błąd
data is not defined.
Czyli ja spowodowałem ręcznie taki błąd
zwracając tutaj data, chociaż nie utworzyłem nigdzie takiej zmiennej.
W prawdziwym życiu tutaj mógłby być inny
powód, ale podobnie nasz program by się wysypał.
Tylko to co jest istotne to fakt, że
jeżeli w tej funkcji wystąpił błąd, to kod przestał być wykonywany,
cały ten proces się zakończył. Czyli closeDbConnection
nigdy się nie wywołało i nie jest to to, czego byśmy oczekiwali.
Dlatego możemy skorzystać z bloku try catch
czy w języku JavaScript, który wygląda tak.
Mówimy try czyli spróbuj
otworzyć połączenie do bazy danych i pobrać dane, a następnie w catch
czyli jeśli wystąpi błąd, ten blok wygląda tak
to chcemy pod taką zmienną e, ale możesz ją również nazwać error,
to jest Twoja nazwa, podobnie jak w funkcjach.
Czyli pod zmienną e chcemy podstawić sobie obiekt tego błędu. I wtedy będziemy mogli zrobić
sobie console.log albo wykonać tutaj dowolny inny kod.
To wszystko mogłoby być również zawarte w funkcji i moglibyśmy wtedy z tej funkcji
na przykład zwrócić null albo zrobić coś zupełnie innego,
ale co ja będę chciał zrobić, to po prostu wyświetlić ten błąd i napiszemy po prostu
wystąpił błąd i zinterpoluje sobie tutaj e.message, dlatego, że pod e
zostanie podstawiony taki specjalny obiekt, który będzie zawierał właściwość
message, a pod nią znajdzie się po prostu string reprezentujący ten błąd.
Zobaczmy co stanie się teraz.
Zobacz. Mamy
Otwieram połączenie do bazy,
Wystąpił błąd, data is not defined i zamykam połączenie do bazy danych.
Czyli blok try catch sprawił, że jeżeli gdziekolwiek tutaj
wystąpił błąd, on może być w tej funkcji getData albo gdyby ona wywoływała inne
funkcje to gdziekolwiek, w którejkolwiek funkcji
jeżeli znalazłby się błąd to automatycznie jest ten błąd wyłapywane,
przeskakujemy do bloku catch, wykonujemy
kod, który tutaj jest i kontynuujemy wykonywanie naszego programu.
W tym przypadku zamykanie połączenia do bazy może pozostać tutaj, ale chciałbym Ci
pokazać, że try catch posiada jeszcze opcjonalny, czyli nie musimy go podawać
blok finally, który wygląda tak i on się wykona zawsze
czy tutaj wystąpi błąd czy nie wystąpi
więc moglibyśmy w tym bloku właśnie
zamykać połączenie do bazy danych, a cały taki kod zawrzeć sobie np. w osobnej funkcji.
Czyli tak by to mogło wyglądać.
I znowu tutaj jest efekt ten sam.
Ale co się stanie, jeżeli się pozbędziemy tego błędu?
Czyli przestanę zwracać jakieś data, tylko po prostu zwrócę pusty obiekt?
Teraz już błędu nie ma, więc ten blok catch się nie wykona.
Zobacz,mam Otwieram połączenie do bazy danych i Zamykam połączenie do bazy danych.
Więc to nam mówi tylko tyle, że blok
finally wykonuje się zawsze, nieważne czy wystąpił błąd czy nie.
No i na koniec powiem tylko tyle, że
jeżeli nie miałeś do czynienia z blokiem try catch wcześniej w programowaniu, to
możesz sobie zadawać takie samo pytanie jak ja sobie zadawałem kilka lat temu,
to znaczy kiedy w zasadzie z tego korzystać.
I tutaj muszę Ci po prostu powiedzieć, że
musisz się uzbroić w cierpliwość i z czasem sam zobaczysz sytuacje, w których
należy korzystać z bloku try catch, gdzie w zasadzie będzie to niezbędne,
albo zobaczysz to w cudzym kodzie, albo w dodatkowych kursach tutorialach, albo sam
wpadniesz na to, że korzystając szczególnie z bibliotek trzecich, czyli
takich, które ktoś napisał, w pewnym momencie musisz po prostu opleść dany kod
takim blokiem try catch, bo zdarzają się sytuacje, w których jest tam zwracany
jakiś błąd, który powoduje, że cały Twój program się wysypuje.
Wtedy będziesz chciał to przechwycić w
catch i na tej podstawie podjąć jakieś decyzje i sprawić, żeby Twój program na to
mógł zareagować i cały czas działać poprawnie.