JavaScript: Zgłaszanie własnych błędów
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 kontynuujemy lekcję poprzednią i będę chciał ci pokazać, w jaki sposób możesz zwracać własne
błędy, które później ktoś inny lub też we własnym kodzie możesz, ale wcale nie musisz przechwytywać. Do
tej pory widziałeś, że jeżeli chcemy skorzystać z jakiejś zmiennej, która nie istnieje w przeglądarce, to
pojawiają się błędy gdyby sobie tutaj napisał hej,
mamy właśnie błąd, bo hej nie jest zdefiniowane i teraz wrócimy do kodu, który mieliśmy wcześniej.
Zauważ, że tutaj niewiele się zmieniło.
Próbujemy uruchomić funkcję searchDb.
Jeżeli wystąpi błąd, to go przechwytujemy i wyświetlamy w konsoli razem z
e.message.
Tutaj mamy searchDb.
Napisałem otwieram połączenie, więc symulujemy tutaj, że jakieś połączenie z bazą danych jest otwarte.
Następnie pobieramy dane.
I co ja tutaj zrobiłem, to jest zmiana względem lekcji poprzedniej.
Otóż tworzymy zmienną data i chcemy do niej przypisać to, co zwróci nam funkcja getData, no i później
powiedzmy, że coś z tym robimy i zamykamy połączenie.
Funkcja getData wygląda następująco, zwraca nam ona taki oto obiekt. Powiedzmy z bazy danych.
No i jak możesz zobaczyć tutaj.
Nie ma problemu, otwieraliśmy połączenie.
Pobraliśmy dane.
Zamknęliśmy połączenie.
Czyli to się wykonało i przy okazji widzisz, że blok finally również się wykonał w tym miejscu.
Czyli jak by drugi raz zamknęliśmy połączenie. To nie ma znaczenia.
Gdyby to naprawdę jakaś baza danych, to zależnie od implementacji, nie powinno być błędu.
Gdybyśmy drugi raz próbowali zamknąć połączenie.
Niemniej jednak widać, że finally wykonuje się zawsze, czy błąd był czy nie.
I pokazałem ci w lekcji poprzedniej, że np. w tym miejscu może być błąd.
Teraz chce ci to również pokazać.
Powiedzmy, że dodamy tutaj parametr type i będzie on musiał być przekazany.
I teraz zrobimy coś takiego.
Ten if, not type, czyli jeżeli ktoś tego typu nie poda, to powiedzmy, że chcemy zwrócić null, taką pustą wartość.
Pamiętasz, że ten return już się nie wykona, jeżeli wykona się on w tym miejscu i teraz
nie podałem tutaj żadnego parametru, czyli on tutaj będzie miał wartość undefined.
No i właśnie możemy tak sprawdzić.
Czyli jeżeli nie został podany skonwertujemy tutaj not undefined na true i będzie tutaj null. Ok i teraz
możemy w tym miejscu, po pobraniu danych z bazy danych, sprawdzić sobie np. czy data równa się null.
Jeżeli tak, to chcemy zgłosić jakiś błąd, który tutaj się pojawi i właśnie w tym miejscu przychodzi nam
z pomocą operator throw, który wygląda następująco.
Działa on podobnie jak return i możemy z niego w JavaScript'cie korzystać. Co tutaj zwrócimy poprzez throw zostanie zwrócone
tutaj jako błąd.
Czyli po pierwsze zostanie zgłoszony błąd i w bloku try zostanie on obsłużony, a tutaj zostanie on
złapany.
A po drugie, to co tutaj wrzucimy będzie dostępne pod e.
Czyli jeżeli tutaj zwrócę powiedzmy 2, nie ma problemu.
Sam fakt, że używamy throw zgłosi błąd, czyli to co jest poniżej się już nie wykona. Natomiast ta dwójka
przejdzie tutaj i tu będzie kolejny błąd, bo nie możemy na dwójce się odwołać
do kropka
message, nie jest tu dostępne, chociaż w zasadzie nie powinno być tutaj błędu tylko undefined.
Zobaczymy.
Nie mamy błędu, mamy tutaj undefined, dokładnie tak się stało.
Natomiast chciałbym Ci pokazać właśnie co tutaj zwrócisz to zostanie przechwycone w innym miejscu.
Czyli możemy w naszym kodzie sprawdzić jakiś warunek, jeżeli coś jest nie tak, to chcemy zwrócić.
No ale teraz ważne jest, że mogliśmy się tutaj odwołać w przypadku standardowych błędów do kropka message
I tak jest zazwyczaj, a więc jeżeli napiszesz sobie jakiś kod i komuś udostępniasz, to on również będzie
zakładał, że jeżeli jakiś błąd twój kod zgłasza to można się po tym obiekcie odwołać do e.message.
Co to oznacza, że tutaj warto byłoby zwrócić właśnie taki obiekt i napisać message i jakikolwiek błąd,
powiedzmy brak danych.
No bo data równa się null.
Mam nadzieję, że na razie nadążasz, czyli ten obiekt pojawi się tutaj, gdzie ktoś skorzysta z try catch.
No i skoro ten obiekt tam się pojawi pod e to kropka
message przejdzie nam w to miejsce, czyli teraz będziemy mieli brak danych.
Ale jest jeszcze inny sposób na to jak zwracać, bo tak jak wspomniałem warto, aby te obiekty które zawracamy
miały takie pole message, to możemy skorzystać z zupełnie innego zapisu mianowicie new Error.
Jest to właśnie jeden z obiektów, których nie pokazałem ci w rozdziale poprzednim, gdzie omawiałem wbudowany
obiekty w JavaScript, ale w jego ostatniej lekcji wspominałem, że mamy taki obiekt jak np. error i on działa
w ten sposób, że możemy tutaj jako parametr przekazać wiadomość, na przykład brak danych.
I ta wiadomość będzie w obiekcie, który zostanie z całego tego zapisu zwrócony.
Pamiętasz, że to jest funkcja new
i jeżeli użyjemy na takim konstruktorze zwraca obiekt i ten właśnie obiekt zostanie zwrócony tutaj, poprzez
throw zostanie wyrzucony dalej i w nim to, co podamy w tym miejscu będzie dostępne pod kropka
message. Możemy zobaczyć czy rzeczywiście tak jest i zobaczysz brak danych.
Czyli zamiast zwracać swój obiekt, tak jak ci to pokazałem,
w ten sposób. Możesz to zrobić, lepiej zwrócić
taki konstruktor егrоr, czyli to co zwróci ten konstruktor będzie to konkretnie jakiś obiekt błędu.
Teraz chcę Ci pokazać jeszcze jedną rzecz, mianowicie powiedzmy, że jeżeli tutaj typ nie będzie podany
to nie zwracamy null, ale będziemy chcieli również zwrócić nowy błąd. Tutaj jako wiadomość podamy powiedzmy
nieprawidłowy typ albo wystąpił błąd, piszmy nieprawidłowy typ.
To oczywiście wszystko jest taki pseudokod, bo jak widzisz tu nie ma żadnej bazy danych, ale myślę że
rozumiesz co chce ci przekazać.
I teraz jeżeli ten typ nie zostanie podany, to tutaj zostanie zgłoszony błąd i zobaczymy jak to zostanie
obsłużone.
Jak widzisz wszystko poszło OK, a nie powinno. Zobaczmy dlaczego.
Dlatego, że użyłem return, czyli tutaj utworzyliśmy nowy obiekt.
Ja ten obiekt zwróciłem.
Obiekt błędu. Obiekt błędu został zapisany tutaj.
Więc sprawdziliśmy, czy data jest równe null.
Nie było równe null, bo to było równe obiektowi, który tutaj zwróciłem i wszystko się udało.
Jak zatem widzisz nie return, ale jak wspominałem throw,
czyli samo polecenie throw.
Sam fakt jego użycia już zgłasza błąd.
Nieważne co zwrócimy, więc jakby ten obiekt error to nie ma znaczenia, to może być zwrócone jak ci pokazałem
cokolwiek.
Ważne żeby było throw, a nie return.
Zobaczymy teraz.
No właśnie.
I teraz został przechwycony właśnie ten błąd, czyli tutaj mówimy try searchDb, searchDb próbuje
getData i w getData pojawił się błąd, a więc od razu przeskakujemy do catch,
tutaj i obsługujemy to, co tutaj zrobiliśmy.
Jak zatem widzisz, skoro już w tym miejscu pojawił się błąd z tejże właśnie funkcji,
to w ogóle nie sprawdzaliśmy tego dalej i nie wywołaliśmy throw error.
Jak widzisz, w ten sposób to działa czyli nieważne jak głęboko ten kod jest zagnieżdżony.
Jeżeli w którejkolwiek z funkcji pojawi się błąd, to od razu jest wyrzucany tutaj do catch i możemy go
w jakiś sposób obsłużyć.
Z tej lekcji chciałbym abyś zapamiętał tylko tyle, że jeżeli będziesz pisał jakiś kod z którego ktoś będzie
korzystał. Jakąś bibliotekę czy jakieś funkcje i będziesz, załóżmy wymagał, żeby jakaś funkcja przejmowała
parametr, taki jak tutaj getData, bo będzie on do czegoś potrzebny, to jeżeli ktoś go nie poda to nie
miej skrupułów, aby wyrzucić błąd. Wyrzucasz błąd i ktoś korzystający z takiej biblioteki w konsoli przeglądarki
taki błąd zobaczy i wtedy będzie mógł albo podać ten parametr albo dostosować swój kod używają try i
catch, aby ten błąd w razie czego mu nie przeszkadzał w wykonywaniu innych skryptów.
Kod
Zgłaszanie własnych błędów · 1 min
function getData(type) {
if(!type) {
throw new Error("Nieprawidłowy typ.");
}
return {
firstName: "Jan",
lastName: "Kowalski"
};
}
function searchDb() {
console.log("Otwieram połączenie.");
console.log("Pobieram dane.");
var data = getData();
if(data === null) {
throw new Error("Brak danych");
}
console.log("Zamykam połączenie.");
}
try {
searchDb();
} catch(e) {
console.log("Wystąpił błąd: " + e.message);
} finally {
console.log("Zamykam połączenie.");
}