JavaScript: Blok try catch
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
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 czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. 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, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
W tej lekcji pokażę ci
ważną konstrukcję języka JavaScript, jaką jest blok try catch, który służy do wyłapywania błędów.
Przejdźmy do kodu.
Na początek będę chciał utworzyć funkcję, którą nazwę searchDb, czyli przeszukało bazę danych.
Dlaczego tak? Powiem ci za moment.
Mam taką funkcję i powiedzmy, że wewnątrz tej funkcji chcę się odwołać do jakiegoś obiektu db, który
zakładam, że jest utworzony gdzieś wcześniej i następnie do metody search. On może być załadowany w jakiejś
innej bibliotece.
Mamy tutaj scripts, ale wiesz, że gdybyśmy tutaj załadowali jakiś inny plik, to możemy właśnie taką bibliotekę
załadować i oczekiwać, że będziemy tam mieli obiekt db, a na nim możemy odwołać się do search i coś tutaj
wykonać.
Najprawdopodobniej byśmy to do jakiejś zmiennej tutaj przypisywali, ale w tym momencie nie ma to znaczenia.
Powiedzmy, że w JavaScript'cie jakąś bazę danych chcemy przeszukiwać, bo istnieją właśnie implementacje baz danych
dla języka JavaScript.
Niemniej jednak, nie jest to takie istotne.
Natomiast co stanie się teraz, kiedy ja będę chciał wywołać moją funkcję searchDb. Tą, którą otworzyłem.
Widzisz, że nigdzie nie mieliśmy wcześniej takiego obiektu db, a chcemy się odwołać do dbSearch.
Prawdopodobnie pojawi się błąd, więc odświeżmy i zobaczmy, co konsola przeglądarki nam pokaże.
No i dokładnie mamy tutaj ReferenceError: db is not defined, czyli db nie zostało zdefiniowane i zauważ
co jest napisane tutaj.
Uncought, czyli nie złapany, od catch, czyli
łapać,
w języku angielskim. Nie wyłapany
błąd i taki błąd może być poważny.
Z tego powodu, że jeżeli będziemy mieli na stronie tutaj więcej kodu, czy więcej bibliotek załadowanych,
to może się okazać, że one się w ogóle nie wywołają, dlatego że wcześniej wystąpił w jakiejś innej bibliotece
w innym krypcie,
jakiś błąd, czyli takie nie wyłapane błędy są bardzo poważne.
I teraz, skąd taki błąd się może pojawić?
No właśnie stąd, że zapomnieliśmy załadować tutaj jakiś plik lub też w nim wystąpiły jakieś błędy.
I dzięki blokowi try catch, który teraz ci pokaże będziemy mogli takie błędy wyłapać. Właśnie uncought czyli
niezłapany, użyjemy na tym catch.
Blok ten wygląda bardzo prosto w języku JavaScript. Wpiszemy sobie try, czyli spróbuj i oplatamy to takim blokiem
kodu, więc wszystko co będzie tutaj, to jest kod, który chcemy spróbować wykonać.
Możemy to dowolnie zrobić sobie miejsca, o ile nam się podoba.
Może zostawmy to w ten sposób. Czyli mówimy try, searchDb, wykonaj ten kod i jak widzisz, tutaj musimy
od razu jeszcze coś przypisać, bo pokazuje mi błąd.
Napiszemy catch czyli, złap i to wygląda jak funkcja, dlatego że podajemy tutaj parametr jeden.
Możemy go nazwać e, dowolnie jak chcemy, możemy go nazwać error, jak chcemy go możemy nazwać będziemy na
nim mogli zaraz operować. Ja sobie go nazwę po prostu e
i znowu taki blok otworzymy.
Oznacza to tylko tyle, że jeżeli tutaj w try wystąpi jakiś błąd, to będziemy mogli tutaj w catch go przechwycić.
Zobacz co stanie się teraz. Odświeżam.
Nic się w konsoli nie wyświetliło.
Oznacza to tylko tyle, że błąd wystąpił, ale my poprzez catch go złapaliśmy, tutaj do tej zmiennej e.
I nie mamy już błędu, pod tytułem, niezłapany błąd.
Teraz mamy go tutaj pod e i możemy zupełnie nic nie robić.
Często zobaczysz taki zapis, że po prostu próbujemy coś uruchomić i jeżeli będzie błąd to nie chcemy
nic robić. Dzięki temu inne skrypty na naszej stronie bez problemu się wczytają.
Ale gdybyśmy chcieli coś z tym zrobić, to możemy zróbmy sobie console.log e,
czyli ten błąd złapany chcemy wyświetlić.
Zobaczmy. Jak widzisz, ReferenceError: db is not defined.
Ale zobaczmy, gdybyśmy nie korzystali z console.log, ale console.dir, która pozwoli nam zajrzeć do obiektu, a nie zobaczyć
tylko jego tekstową reprezentację.
Przy okazji taka reprezentacja się tutaj wyświetla, dlatego że taki obiekt ma metodę toString, o której
już wspominałem i kiedy korzystamy z console.log, to na obiekcie jest wywoływana metoda toString,
stąd właśnie taki napis, ale jeśli skorzystamy z console.dir, to możemy wyświetlić zawartość takiego błędu.
No jak widzisz on tak wygląda.
Mamy tutaj coś takiego jak message.
No i następnie mamy jeszcze jakieś metody, z nich nie będziemy korzystać.
Tutaj mamy proto error.
O tym mówię
w drugiej części tego kursu.
Natomiast co jest istotne to to, że mamy message.
Gdybyśmy chcieli to możemy się do tego odwołać właśnie wpisując np. console.log.
Wystąpił błąd i chcemy tutaj treść jego wyświetlić, więc e.messaage.
Myślę że to na tym etapie rozumiesz, czyli kiedy wystąpi błąd, to sobie w konsoli to chcemy wyświetlić
w taki oto sposób. Blok try catch zawiera również taki blok, który możemy tutaj dopisać, który nazywa
się finally.
Jest on opcjonalny.
Aby nam to wszystko ładnie zobrazować, to ja spróbuję tutaj w tej funkcji dodać sobie console.log, np. otwieram połączenie.
I tutaj zrobimy, zamykam połączenie i teraz, aby ci to zobrazować. Jeżeli wszystko pójdzie OK, to tutaj
powiedzmy, że mamy jakiś kod odpowiedzialny za otwieranie połączenia. Później wyszukujemy coś w bazie
i zamykamy to połączenie.
I teraz to jest bardzo istotne. Jeżeli tutaj wystąpi błąd, to ta funkcja jest zatrzymywana całkowicie
w tym miejscu, tak jak byśmy tutaj mieli return,
czyli to się nie wykonuje i ten błąd przechodzi tutaj, więc zobaczymy czy console.log zamykam połączenie
w ogóle się wykona. Otwieram połączenie i wystąpił błąd.
Czyli połączenie nie zostało zamknięte i wyobraźmy sobie, że naprawdę mamy tutaj kod, który odpowiada za zamykanie
połączenia i chcemy je zamknąć.
Nieważne czy to się uda czy nie.
Możemy skorzystać tutaj z blo finally. Wygląda on w następujący sposób i on się wykona zawsze, niezależnie
od tego czy będzie to błąd czy nie.
I powiedzmy, że tutaj będziemy się do tego obiektu jakoś chcieli odwołać i następnie będziemy chcieli
to połączenie zamknąć, więc ja tutaj wpiszę zamykam połączenie i zobaczmy jak to wygląda.
Otwieram połączenie, wystąpił błąd i zamknęliśmy takie połączenie.
Czyli blok finally nie zawsze jest on używany, ale jeżeli z niego skorzystamy, to wiemy wtedy, że to
co tutaj zawrzemy dowolny kod jaki tutaj będzie, on się wykona zawsze, niezależnie czy będzie zgłoszony
błąd czy też nie.
Co jest jeszcze bardzo istotne, to błąd wystąpił w naszej funkcji searchDB, którą tutaj chcieliśmy wykonać,
ale gdybyśmy tutaj wykonywali inną funkcję, w której wystąpiłby błąd, to ten błąd będzie uciekał do góry.
Jeżeli nie zostanie złapany w jakimś innym pliku czy w innym z skrypcie, to on dojdzie do tej naszej funkcji
i również go tutaj wyłapiemy.
Czyli błąd nie musi wystąpić w tej funkcji, ale musi wystąpić w jakimkolwiek kodzie, który został zainicjowany
w tym miejscu.
Wtedy będziemy mogli poprzez catch go złapać.
Mam nadzieję że zrozumiałeś w jaki sposób to działa, kiedy nie jesteśmy pewni czy wszystko zadziała
i wiemy, że jakieś błędy mogą się pojawić to warto spróbować opleść taki kod do bloku try catch, a w kolejnej
lekcji pokaże ci, jak sami możemy zgłaszać błędy, również korzystając z takiego bloku przechwytywania
tych błędów.
Kod
Blok try catch · 1 min
function searchDb() {
console.log("Otwieram połączenie");
db.search();
console.log("Zamykam połączenie");
}
try {
searchDb();
} catch(e) {
console.log("Wystąpił błąd: " + e.message);
} finally {
console.log("Zamykam połącznie");
}