dla Początkujących
6 godz. 26 min · JavaScript · Full-stack i Programowanie
Adam GospodarczykProgramowanie to szeroka dziedzina, która nieustannie się rozwija. Rozpoczynając naukę możemy opierać się głównie na wskazówkach bardziej doświadczonych osób, bądź autorach kursów i nauczycielach. W praktyce najważniejsze na początku jest dobre zrozumienie tego, czym jest programowanie, jakie możliwości daje oraz jakie możemy wybrać ścieżki rozwoju. W tym kursie spojrzymy na programowanie z szerokiej perspektywy, dając Ci solidne podstawy do dalszej nauki.
To kolejne trudne pytanie, na które nie ma jednoznacznej odpowiedzi. Dobra wiadomość jest taka że języki programowania, podobnie jak angielski, niemiecki czy hiszpański mają cechy wspólne. Nie oznacza to że nauka jednego, da Ci dostęp do wszystkich ale poznasz ogólne mechanizmy, które spotkasz w niemal wszystkich pozostałych technologiach. W tym kursie skupiamy się właśnie na takich obszarach, opierając przykłady o obecnie najpopularniejszy język jakim jest JavaScript.
Być może zastanawiasz się jak dokładnie wygląda praca programisty? Czym różni się front-end od back-endu i czy wysokie umiejętności analityczne są wymagane niezależnie od obszaru programowania, którym się zajmujemy? Dodatkowo samo zostanie programistą to tylko początek drogi. Możliwości jakie przed nami stoją nie tylko są ogromne, ale również nieustannie się rozwijają, stawiając przed nami nowe wyzwania.
Ten kurs podzielony jest na dwie części - teoretyczną, która przedstawi Ci szerokie spojrzenie na programowanie oraz praktyczną, w której samodzielnie będziesz w stanie przekonać się jak pisać programy z wykorzystaniem języka JavaScript - najpopularniejszego języka na świecie. To, że będziemy przerabiać przykłady w JavaScript, nie stanowi przeszkody a wręcz lepiej przygotuje Cię do pracy z innymi językami jak Python, C# czy C++ lub Kotlin. To wszystko ułatwi Ci podejmowanie decyzji dotyczących dalszej nauki i rozwoju jako programista.
W pierwszych lekcjach części praktycznej kursu dowiesz się jak skonfigurować środowisko pracy wraz z edytorem, w którym przyjdzie Ci pracować. Pomożemy Ci w dobraniu odpowiednich ustawień i wtyczek, które przyspieszą naukę i pomogą w lepszym zrozumieniu podstawowych koncepcji programistycznych. Krok po kroku dowiesz się jak przygotować środowisko i rozpocząć komfortową pracę.
Mimo, że będziemy pracować z JavaScript, posłuży nam on do przedstawienia najważniejszych koncepcji programowania w każdym innym języku. Nie będziemy uczyć się tworzenia stron i środowiska przeglądarki a jedynie przećwiczymy najważniejsze koncepcje języków programowania w środowisku konsolowym. Dzięki temu zdobyte umiejętności z łatwością przełożysz na inne języki jak Python, Java czy Swift, bo wszystkie posiadają identyczne konstrukcje, a poznać należy wyłącznie różnice.
OOP to jeden z najważniejszych paradygmatów programowania, który powinien poznać każdy aspirujący Programista. Dzięki temu będziesz mógł zdecydowanie lepiej zrozumieć możliwości i powiązania klas i obiektów, które tworzą programiści a także pisać kod, który jest prostszy i reużywalny. To koncepcja, którą także wyjaśnimy obrazowo w kursie. Oczywiście, poza teorią w kursie pokażemy Ci przykłady tworzenia funkcjonalnych klas w JavaScript.
Kolejną ważną koncepcją, którą musi znać każdy początkujący Programista jest praca z błędami - innymi słowy obsługa błędów lub debugowanie naszej aplikacji. To niezwykle ważne, bo oszczędzi Ci mnóstwa frustracji oraz wielu godzin rozpoznawania, co w kodzie nie działa poprawnie. Z kursu w praktyce dowiesz się, jak testować swoje aplikacje, łatwo wykrywać błędy i korzystać z narzędzi, które będą je dla nas wykrywać lub automatycznie poprawiać!
Ten kurs przygotowaliśmy tak, aby był fundamentem wiedzy o Programowaniu, którego używamy w wielu naszych ścieżkach na eduweb.pl. To znaczy, że kurs który masz przed sobą rozpoczyna ścieżkę Python, JavaScript, Ruby i wiele innych. Wiemy, że w sieci jest mnóstwo materiałów na temat podstaw programowania i chcieliśmy przygotować wyjątkowy kurs, który da Ci spokój w natłoku wielu informacji w sieci. Zaangażowaliśmy w to najlepszych autorów eduweb oraz naszym zdaniem jednych z najlepszych programistów w Polsce. To, co jest jednak najważniejsze - kurs omawia programowanie bardzo prostym językiem, dzięki czemu jest przystępny dla każdego!
Kurs przeznaczony jest dla osób początkujących, które stawiają swoje pierwsze kroki na scieżce programisty lub programistki. Jednak skorzystają z niego także te osoby, które myślą o nauce programowania w celu uzupełnienia innych umiejętności, na przykład internetowi przedsiębiorcy, freelancerzy, UI/UX i web designerzy. Jeżeli czujesz się zagubiony lub przytłoczony dużą ilością często sprzecznych informacji - ten materiał pozwoli Ci szerzej spojrzeć na programowanie. To z kolei przełoży się na lepsze decyzje, które będziesz podejmować w kontekście swojego rozwoju. W kursie znajdziesz wskazówki i porady dotyczące efektywnej nauki programowania, które pomogą Ci szybciej zdobyć nowe umiejętności i pracę w zawodzie. Najważniejszą z nich jest fakt, że programowanie to dynamicznie rozwijająca się dziedzina, która wymaga od Ciebie nieustannej nauki. Zatem wypracowanie odpowiednich nawyków i technik nauki jest niezwykle istotne, niezależnie od miejsca w którym aktualnie się znajdujesz.
W tej lekcji pokażę Ci jak możemy w kodzie
obsługiwać wyjątki i kiedy to może się okazać przydatne.
W tym celu stworzymy sobie trochę takiego
pseudo środowiska, czyli stworzymy sobie na szybko taką funkcję, która w domyśle czy w
zamyśle miałaby nam wyszukiwać czegoś w bazie danych. Ale
tak naprawdę tego robić nie będzie i nie jest to super istotne na tym etapie. Więc
tworzy sobie jakąś taką stałą db jak database i będzie to taki zwyczajny obiekt
i w środku stworzymy sobie funkcję, czyli tak naprawdę jeżeli funkcja jest w
obiekcie to nazywamy ją metodą search, która będzie wyszukiwać i w niej zrobimy
console.log szukam w bazie danych. Teraz do niej oczywiście będzie się można
odwołać jak powinieneś już wiedzieć poprzez db.search
bo db jest to nasza stała, kieruje na obiekt, w obiekcie jest metoda search i
będzie ją można wywołać. Ale to jeszcze nie wszystko.
Tutaj jakby założymy, że takie wyszukiwanie
w bazie danych to jest swego rodzaju biblioteka czyli kod udostępniony
dla nas przez kogoś innego albo jakieś sterowniki itd.
Czyli generalnie, że my nie wnikamy co jest
w środku ale jest to jakaś metoda, która czegoś nam w bazie danych wyszuka.
Natomiast my się skupimy na tym co my moglibyśmy napisać. Czyli wyobraź sobie, że
piszemy swój program, który będzie mógł z czegoś takiego korzystać i będziemy
chcieli stworzyć sobie taką funkcję jak searchDb, czyli szukaj w bazie danych
i ona na początku musiałaby otworzyć połączenie do bazy danych,
potem byśmy wyszukiwali i na końcu byśmy to połączenie zamykali.
Wiem, że są to abstrakcyjne koncepcje.
Nie jest to zupełnie na tym etapie istotne.
Ważne żebyś sobie wyobraził, że na tym
etapie byśmy otwierali połączenie, otwieram połączenie do bazy danych,
potem byśmy chcieli wyszukać w bazie danych korzystając właśnie
z takich dostępnych metod, które ktoś nam udostępnił, więc zrobimy db.search,
czyli tutaj chcemy wyszukać czegoś w bazie
danych i jak się wyszuka to będziemy zamykać połączenia.
Dlaczego to jest istotne za moment się dowiesz.
No i teraz być może się domyślasz, że jeśli wywołamy funkcję searcgDb,
to wszystko będzie Ok.
Wywołajmy ją.
I teraz patrzymy tutaj, otwieram połączenie,
szukam w bazie danych, zamykam połączenie. Czyli wszystko jest Ok.
Natomiast co stałoby się w sytuacji gdyby tutaj pojawił się jakiś błąd.
Nie jest to nasz kod i tu nawet nie chodzi o to, że u kogoś w kodzie może być błąd ale
może być błąd na przykład podczas wyszukiwania w bazie danych, bo powiedzmy
serwer bazy danych może nie odpowiedzieć itd.
Zapewniam Cię, że jak będziesz więcej
programował w przyszłości zobaczysz, że mnóstwo nieoczekiwanych rzeczy może się
stać przez to, że przerwie się połączenie internetowe itd.
I na pewne z tych rzeczy
trzeba jakby z wyprzedzeniem czekać i odpowiednio obsłużyć.
Natomiast żebyśmy my mogli zasymulować sobie, że w takiej metodzie może być jakiś błąd,
nie mamy jak tego symulować, że tutaj coś z
połączeniem będzie nie tak itd więc zrobimy to w taki bardzo prymitywny
sposób. Mianowicie odwołamy się do jakiegoś obiektu, który nie istnieje,
czyli jakby do jakiejś zmiennej database i wywołany na niej metodę search.
Więc wyobraźmy sobie, że to db.search
w środku korzysta jeszcze z jakiejś innej biblioteki, która nie została tutaj dołączona.
Edytor nam podświetla, że jest to błąd no bo nigdzie nie otworzyliśmy żadnej zmiennej
lub stałej, która się nazywa database a próbujemy się do niej odwołać.
Teraz o tym zapominamy i patrzymy tutaj. Wywołujemy naszą funkcję,
ona otwiera połączenie w jakiś sposób to
nie jest istotne, próbuje skorzystać z db.search
a w środku tej metody wystąpił błąd.
Jeżeli zapisze,
zapisuje, zauważ, że nam się program wyłożył i
widzimy database is not defined. Natomiast program mógłby się wyłożyć z
zupełnie innych powodów tak jak wspomniałem, bo na przykład tu byłaby jakaś
prawdziwa logika wyszukująca w bazie i baza by nie odpowiadała.
Natomiast to co się stało i to co jest
najbardziej dla nas istotne chcę teraz pokazać,
zobacz mamy tutaj otwieram połączenie bo te powyżej to są te stare console.logi
jeszcze, ale teraz jak to wykonaliśmy to mamy otwieram połączenie,
potem mam błąd i nigdzie nie pojawiło się
zamykam połączenie. I to w niektórych sytuacjach może być
problematyczne dlatego, że powinniśmy takie połączenia zamykać.
Podobnie może być przy pracy z plikami.
Jeżeli otwieramy jakiś plik po to żeby do
niego coś wpisywać to powinniśmy go później również zamknąć.
Więc to są koncepcje bardziej abstrakcyjne natomiast chcę pokazać jak my możemy
uprzedzić fakty i jakby można powiedzieć, że oczekiwać, że coś może
pójść nie tak i jeżeli pójdzie nie tak to wykonać pewnego rodzaju kod.
To wszystko będzie bardzo proste do zrobienia.
Wystarczy, że skorzystamy z bloku try catch,
który znajdziesz chyba we wszystkich językach programowania
i jest to koncepcja, którą należy zrozumieć i w każdym języku, którego będziesz się uczył
ją znajdziesz, więc piszemy try i otwieramy taki blok.
Tu może być bardzo wiele linijek kodu.
Generalnie mówimy spróbuj wykonać kod w
tych blokach. I tutaj spróbujemy wykonać naszą funkcję searchDb
w ten oto sposób. Natomiast to jeszcze nie
jest pełny zapis dlatego, że jeżeli tutaj będą jakieś błędy,
jeżeli jakby program będzie próbował się wyłożyć gdziekolwiek w tej funkcji lub w innych
funkcjach, które będą w środku wiemy, że nasza searchDb wywołuje db.search i dopiero w
niej jest błąd ale błąd mógłby być dużo, dużo głębiej.
Nie ma znaczenia, jeżeli w tym bloku kodu
będzie jakikolwiek błąd to mówimy catch czyli złap, przechwycić,
podajemy tutaj nazwę zmiennej, pod którą ten błąd zostanie nam przekazany,
możesz ją nazwać error,
możesz ją nazwać jak chcesz bo to od
Ciebie zależy, to jest taki parametr. Zazwyczaj nazywa się to po prostu e.
I mówimy co chcemy w tej sytuacji zrobić.
Jeżeli nic nie zrobimy, ja tutaj wyczyszczę, zobacz Clear, zapisze,
nic się nie stało. Otwieramy połączenie, wiemy, że potem wystąpił błąd i ten błąd
tutaj został przechwycony ale nic z nim nie zrobiliśmy więc program się nie wyłożył.
Program działa cały czas ale nic więcej tutaj nie zrobiliśmy.
Więc będziemy chcieli tutaj wyświetlić to co znajduje się w e,
dlatego możemy zrobić console.log i napisać tutaj na przykład wystąpił
błąd i dokleimy do tego jaki to jest błąd. I co ciekawe e to będzie instancja pewnej
klasy error. Czyli do tej pory już wiesz bo mieliśmy rozdział o programowaniu obiektowym, jak
tworzyliśmy swoje klasy i z tych klas tworzyliśmy obiekty. To e
będzie instancją czyli obiektem utworzonym z takiej specjalnej kasy error
a to oznacza, że obiekty mogą mieć pewne właściwości i metody. No i pod e zostanie
podstawiony obiekt, który ma właściwość Message a będzie to treść błędu.
Jeżeli teraz zapisze, zobacz, mamy otwieram
połączenie a następnie wystąpił błąd i to message
to było Database is not defined.
To jest błąd, który zgłosił nam język Javascript.
Ale tak jak wspomniałem gdyby to była
prawdziwa implementacja tu mógłby być błąd, że np.
nie udało się nawiązać jakiegoś połączenia z bazą danych itd.
Bardzo różne błędy tutaj by się mogły
pojawić. Więc teraz sprawiliśmy, że nasz program nie przestał działać
gdybyśmy tu mieli kolejne linijki ten program cały czas by działał,
ale przechwyciliśmy błąd. Gdyby tego błędu nie było to ten blog catch nigdy się nie wykona.
I teraz ostatnia rzecz związana z blokiem
try catch, z której nie zawsze się korzysta bo nie jest to zawsze potrzebne,
ale może się przydać
i jest to taki blog, który nazywa się finally
i on się wykona zawsze, czyli try wykonuje jakiś kod
jeżeli tam były jakieś błędy to wykona się catch.
Jeżeli nie to się nie wykona.
Natomiast finally wykona się zawsze. I
moglibyśmy tutaj w tym bloku finally zamykać połączenie.
My tylko piszemy, że zamykamy połączenie
ale tu byłby jakiś kod, który faktycznie takie połączenie by zamykał.
Więc spróbujmy tutaj wyczyszcze żeby mieć pewność co nam się
pokaże, zapisuje i widzimy, że otworzyliśmy połączenie, spróbowaliśmy czegoś wyszukać
ale to zwróciło błąd więc zamknęliśmy to połączenie i wszystko jest ok.
Gdybyśmy tutaj mieli tak jak mówiłem jakąś
prawdziwą implementację dużo bardziej skomplikowaną to to pozwoliłoby nam
uniknąć jakichś niezamkniętych połączeń itd.
Pokażę Ci teraz jeszcze jeden przykład, który
może jeszcze Ci lepiej pokażę kiedy możemy korzystać z try catch.
Mamy w języku JavaScript dostępny taki obiekt, który nazywa się
JSON i możemy na nim wykonać JSON.parse
i to pozwala nam taki zapis JSONowy
czyli jest to pewnego rodzaju struktura danych sparsować na obiekt JavaScript.
Czyli jakbyśmy tutaj podali taki JSON
gdzie w środku podamy go może w takich apostrofach bo potrzebujemy w środku mieć cudzysłowy.
Jeżeli w środku byłoby firstName,
w ten sposób np.
Piotr, to jeżeli sobie to sparsujemy i zapiszemy do jakiejś stałej np.
data, to jeżeli wyświetlimy sobie console.log(data) zobacz to pokaże mi firstName Piotr. Natomiast
JSON.parse działa w taki sposób, że jak przekażemy niepoprawny JSON, czyli na
przykład gdyby on wyglądał tak, to nam się wyłoży program bo JSON.parse zwraca nam
jakiś błąd. I teraz gdybyśmy chcieli temu zapobiec tu również można zrobić blog try catch,
ale pokażę Ci jak fajnie można byłoby to
zapisać w funkcji. Moglibyśmy stworzyć własną funkcję którą nazwiemy parsJson,
tak albo z wielkich to nie ma znaczenia, zapiszmy to tak, podawali byśmy
tutaj jakiś tekst, którym jest JSON albo może tak byśmy zapisali
i tutaj w środku byśmy zrobili takie parsowanie, zrobili byśmy try,
czyli spróbowali byśmy od razu zwrócić JSON.parse i przekazać mu ten JSON,
natomiast jeżeli to zwróci błąd tak jak w tym przypadku, to wykona się blok
catch
i jak będziemy mieli blok catch, przechwytujemy tutaj e, ale nic z nim nie musimy robić.
Możemy wtedy zwrócić null. I w ten sposób stworzymy sobie taką bardzo
fajną funkcję, która będzie odporna na tego typu błędy.
Ja to u góry wykomentuje.
Zobacz stworzyliśmy funkcję i teraz możemy powiedzieć data
równa się parseJson,
przekazać ten JSON w taki sposób i wyświetlić sobie data. Tutaj wyczyszczę,
zapisuje no i zobacz mamy teraz wartość null, czyli my przyjęliśmy w naszej funkcji, że jak ktoś
poda niepoprawny JSON to nie chcemy wyrzucać błędu i sprawiać, że nasz program
przestanie działać ale chcemy zwrócić wartość null.
Natomiast jeżeli ktoś poda poprawny
JSON, w tej sytuacji zobacz, zwróci nam sparsowany JSON. Więc opakowaliśmy sobie we własną funkcję
wywołanie JSON.parse i dzięki blokowi try catch mogliśmy tutaj zapobiec wyłożeniu się programu
i po prostu zwrócić null jeżeli ten przekazany JSON nie był poprawny.
Mam nadzieję, że to pokazało Ci w jaki sposób działa blok try catch,
natomiast w przyszłości kiedy będziesz więcej programował jeszcze na pewno
wielokrotnie to będziesz widział więc warto na razie tylko zapamiętać, że taki
blok pozwala nam wykonać kod, w którym mogą zostać zgłoszone jakieś błędy.