JavaScript: Debugowanie kodu JavaScript
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 jak możemy testować i debugować kody JavaScript w przeglądarce Google Chrome.
To, co tutaj pokaże jest bardzo podobne w innych przeglądarkach, takich jak Firefox czy np. Opera, a więc
również będziesz mógł z tego korzystać.
Ja pokażę Ci jednak, jak to działa w przeglądarce Chrome, która według mnie ma najlepsze narzędzia deweloperskie.
Do tej pory, kiedy pracowałeś z kodem HTML i CSS, to mam nadzieję, że na tyle poznałeś te narzędzia, że korzystasz
z panelu Elements. W ogóle jak tutaj wejść?
Jeżeli jesteśmy na dowolnej stronie, to możemy prawym przyciskiem kliknąć i wybrać InspectElement
i po polsku będzie to Zbadaj element i wówczas przejdziemy do tego naszego widoku, gdzie mamy na żywo
nasze drzewo DOM.
Jeśli odświeżymy, jak widzisz tutaj, mamy na żywo całą reprezentację drzewa DOM i możemy tutaj różne rzeczy
wykonywać na tych elementach.
Możemy im przypisywać style, możemy te style włączać i wyłączać.
Jest to bardzo, bardzo przydatne. Jeżeli do tej pory nie znałeś takiego narzędzia, to polecam ci na eduweb.pl
warsztat mojego autorstwa, który dotyczy Firefox Developer Edition, ale tam bardzo dokładnie omawiam
właśnie te wszystkie panele, które znajdziesz również tutaj w przeglądarce Google Chrome, więc polecam
Ci się z tym zapoznać.
Natomiast tak jak wspomniałem. Mam nadzieję, że na tyle już znasz to narzędzie, że z panelu Elements skorzystałeś
i mogłeś sobie tutaj różne style ustawiać.
To nie ma wiele wspólnego z JavaScript'em, natomiast jest bardzo przydatne. Z JavaScript'em ma natomiast
najwięcej wspólnego panel console.log, z którego dużo razy już w tym kursie korzystaliśmy.
Za każdym razem kiedy w naszym script'cie pisałem console.log, to coś tutaj zostało wyświetlone, również
bezpośrednio tutaj mogliśmy się odwoływać.
Więc możesz tutaj testować JavaScript, wpisując np. 2 plus 2.
Masz tutaj cały interpreter języka JavaScript.
Możesz tworzyć zmienne, funkcje i tutaj się generalnie tym kodem bawić.
Nie ma najmniejszego problemu. Natomiast w tej konsoli jest kilka przydatnych tricków, które chciałbym ci
teraz pokazać.
Po pierwsze, wielokrotnie w naszych skrytptach odwoływaliśmy się do document.querySelector i mamy tutaj
do tego pewien skrót, a więc jeżeli chciałbyś na tej stronie pracować, sprawdźmy co tutaj mamy. Jest to
element h1 i chciałbyś go pobrać, to mamy taki skrót to są dwa dolary.
Czyli tak się nazywa funkcja, to jest poprawna nazwa, dwa dolary.
I tutaj możemy podać selector.
Jeżeli to zrobimy w ten sposób, to jak widzisz została zwrócona taka tablica, ten obiekt tablicopodobny,
czyli tak jak gdybyśmy skorzystali z document.querySelectorAll.
To jest taki skrót do tego tutaj, wewnątrz przeglądarki, więc moglibyśmy się tutaj do tego zestawu jakoś
odwołać np. 0
i pierwszy element dla nas będzie wyświetlony.
Druga bardzo, bardzo ciekawa sprawa, jest to fakt, że jeżeli jakiś element tutaj zaznaczymy, czy to w ten
sposób, czy po kliknięciu Inspect Element, ważne jest to, aby był on tutaj podświetlony.
Jeżeli przejdziemy do konsoli, to jest on dla nas dostępny pod taką tymczasową zmienną s0.
Jak widzisz został tutaj zwrócony.
I to jest niezwykle przydatne.
Jeżeli coś chcemy na jakimś elemencie zrobić, powiedzmy, że ja chciałbym mu tutaj przypisać style albo coś
przetestować to s0, to jest dokładna referencja do tego elementu, tak jak gdybyśmy go pobrali w naszych
skryptach poprzez np. document.querySelector, więc mogę się do niego odwołać do style.color i przypisać
np. red.
I jak widzisz zostało to przypisane.
Czyli jest to bezpośrednia referencja dla takiego elementu, który został kliknięty.
Jeśli zaznaczę body, to teraz s0 kieruje na body.
Ale co jest ciekawe,
s1 będzie kierować znowu na h1 i tak możemy się posługiwać od s0 do s4, czyli s2 to będzie
jeszcze wcześniej zaznaczony element s3 oraz s4.
Tak naprawdę z s2 do s4 rzadko się korzysta, ale s0, to jest aktualnie podświetlony element, a s1, to
będzie o jeden wcześniej zaznaczony
i z tego warto korzystać.
Oczywiście możemy je przekazywać.
Skoro to jest referencja dowolnie w każde miejsce do jakiejkolwiek funkcji gdybyśmy ją tutaj mieli,
nawet do alert możemy przekazać s0.
No i tutaj zostanie to wyświetlone, więc jest to normalna referencja tak jak w naszych skryptach.
Tutaj możemy konsolę wyczyścić na tym oto przycisku.
Albo użyć wbudowanej funkcji clear, którą można wywołać.
Taka funkcja jest tutaj dostępna, jeżeli tutaj coś napiszemy.
Wywołamy znowu funkcję clear to możemy konsolę sobie wyczyścić. Pokazywałam ci console.log, console to jest
to generalnie obiekt, do którego możemy przejść i przejść do jego proto jeszcze dalej i zobaczyć jakie
ona ma tutaj metody.
Natomiast większość z nich nie będzie Ci potrzebna, aczkolwiek polecam Ci abyś najlepiej w Internecie
sobie więcej o tym poczytał.
Natomiast jest pewna metoda, z której również korzystaliśmy i ona czasem jest przydatna jest to console.dir.
Pokazywałem ci ją, bo ona potrafi wyświetlić obiekt tak, żebyśmy mogli do niego zajrzeć, w ten sposób.
A console.log często wyświetla nam obiekt w taki sposób, że widzimy po prostu jego tekstową reprezentację,
bo na takim obiekcie jest wykonywana metoda tu string, więc z dir również warto korzystać.
Jedną bardzo ważną rzeczą, tutaj w narzędziu Chrome Developer Tools są ustawienia, więc polecam Ci przejść do ustawień.
Mamy je tutaj i zaznaczyć jedną z ważnych opcji, czyli Disable cache (while DevTools is open).
Oznacza to tylko tyle, że za każdym razem kiedy to
narzędzie jest otwarte tutaj, nie musi to być konsola, wystarczy, że Elements,
generalnie ten panel jest otwarty.
To kiedy odświeżamy stronę,
to cała pamięć podręczna przeglądarki jest czyszczona.
Jeżeli zamknę to narzędzie, to wtedy tak nie jest, bo oczywiście byłoby to bez sensu.
Kiedy chodzimy po stronach internetowych, różne obrazki czy skrypty są zapisywane w pamięci podręcznej,
aby tę strony się szybciej wczytywały
i to jest OK.
Natomiast kiedy otworzę to narzędzie, to chciałbym, aby za każdym razem po otworzeniu strony, była ona
wczytywana całkowicie od nowa i ta opcja właśnie tutaj w settings.
Jeżeli zaznaczymy, to będzie to sprawiać, że wszystko będzie czyszczone i na pewno wtedy skrypty pobiorą
się
w najnowszej wersji z naszego serwera, podobnie z obrazkami i innymi zasobami. To jest konsola. Natomiast
mamy tutaj jeszcze wiele innych paneli.
Jak wspomniałem, w warsztacie o Firefox Developer Network tłumacze tego typu panele. One są bardzo podobne,
więc warto wiedzieć, co się w przeglądarce dzieje.
Jakie zapytania są wysyłane, ale jeżeli chodzi o język JavaScript, to chciałbym Ci tutaj pokazać jeszcze
jeden panel.
Otóż najpierw przejdziemy do skryptów i chce ci pokazać, że napisałem taką funkcję, kiedy klikniemy na
naszą h1,
to tutaj do tekst pobierzemy sobie jej textContent, czyli to co jest tutaj i będę chciał to z powrotem przypisać
zamieniając na duże litery, no i sprawdźmy jak to działa.
Po kliknięciu na ten element zamienienie to na duże litery.
No i po co to zrobiłem?
Otóż chciałbym ci teraz pokazać Jeszcze jeden debugger, który się tutaj znajduje.
Jeżeli przejdziemy tutaj do Sources, do js, to możemy zobaczyć z scripts.js i przejść sobie
tutaj.
Jeżeli ten plik już jest tutaj wczytany, to możemy podstawić tzw. break point.
Klikając tutaj na odpowiednią linijkę.
Teraz break point, co widzimy tutaj został przypisany.
Jeżeli odświeżę stronę, nic się nie dzieje, bo ten kod się nie wykonuje.
Jak widzisz on się wykona tylko po kliknięciu.
Jeżeli teraz klikę to widzisz że h1, nie została zamieniona na
duże litery.
Tutaj mamy napisane Paused in debugger i możemy tutaj to wszystko puścić. W miejscu, w którym postawiłem
break point, zatrzymało się
wykonywanie tej funkcji.
Co ciekawe, to od razu nam tutaj pokazuje, że to jest MouseEvent i możemy do niego zajrzeć.
To wszystko co jest dla nas dostępne, widzimy tutaj z boku, czyli e jest w tym miejscu możemy zobaczyć,
co w nim jest.
Możemy zobaczyć co mamy pod zmienną tekst, którą utworzyłem.
Ma ona jeszcze wartość undefined, bo linijka się nie wykonała. Pod this mamy tą h1 klikniętą
i generalnie, w ten sposób, możemy krok po kroku debugować nasz kod. Tutaj możemy kliknąć i cały skrypt
wykona się do końca.
Tutaj możemy wcisnąć i będziemy chcieli przejść do następnej funkcji, która się wykona.
Tutaj możemy przejść do następnej linijki, jeżeli to kliknę,
to jak widzisz, zmienna text, w tym momencie, ma już taką wartość, możemy to zobaczyć tutaj.
A my zatrzymaliśmy się krok dalej.
Jeszcze to nie zostało powiększone i mogę przejść jeszcze jeden krok dalej albo np. możemy przejść do
góry.
Przejdźmy krok dalej.
No i ten kod się wykona. Możemy kliknąć Play, więc tak na szybko chciałem pokazać, że w dowolnym miejscu nasz
kod możemy zatrzymać, taki break point
można usunąć, klikając tutaj na niego raz jeszcze.
To co jeszcze jest bardzo istotne, to fakt, tutaj sobie odświeżymy, że w konsoli będą pojawiać się błędy tak
jak w sieci wcześniej pokazywałem.
Gdybyśmy chcieli skorzystać z jakiejś zmiennej, która nie istnieje na przykład alert i tutaj byśmy napisali
firstName albo cokolwiek, to tutaj powinniśmy mieć błąd.
Jak widzisz błąd się pojawił, ale nie wiemy gdzie on się pojawił, to znaczy tutaj sprawa jest prosta.
Błąd wystąpił w tym miejscu gdzie to wpisaliśmy.
Ale jeżeli przejdziemy do naszego pliku i powiedzmy, że po kliknięciu taki przycisk chcę zrobić alert,
właśnie firstName, czyli zmienna, która nie istnieje.
Zobaczmy, co się stanie.
Klikam na to i mamy ReferanceEroor.
Tak jak pokazałem ci w poprzedniej lekcji, ReferenceError jest wtedy, kiedy chcemy podstawić referencje
do czegoś, co nie istnieje, uncaught, bo go nie złapaliśmy w try catch, ale co jest bardzo istotne pokazuje
nam tutaj w jakim pliku i w jakiej linijce ten błąd się znajduje, czyli plik nazywa się scripts.js i po
dwukropku linijka piąta.
Więc możemy tutaj przejść i widzę, że w lince piątej jest błąd.
Ale co jest jeszcze lepsze, możemy tutaj kliknąć i zostanie nam ten błąd od razu w tym miejscu podświetlony
i wiemy, że ten błąd w tym miejscu się pojawił.
Na koniec chciałbym ci jeszcze polecić jedną ciekawą stronę, czyli DevTools Tips. Na tej stronie znajdziesz
bardzo wiele takich krótkich porad, jak korzystać z Chrome Developer Tools i one są w formie GIF'ów lub
też w formie krótkich filmików.
Polecam Ci, abyś na tę stronę zajrzał.
Oprócz tego zachęcam Cię również do przerobienia warsztatu na eduweb.pl.
O wspomnianym już Firefox Developer Edition bardzo dokładnie to tłumaczę.
Wszystkie panele HTML, CSS, ale także JavaScript czy panel Network będziesz mógł to przełożyć bez problemu
na korzystanie z Chrome DevTools, chyba że będziesz chciał korzystać z narzędzi Firefox'a,
nie ma problemu.
Kod
Debugowanie kodu JavaScript · 1 min
var h1 = document.querySelector("h1");
h1.onclick = function(e) {
alert(firstName);
var text = this.textContent;
this.textContent = text.toUpperCase();
};