JavaScript: DOM API a 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.
Powiedzieliśmy już sobie czym jest obiektowy model dokumentu i w jaki sposób
struktura, czyli kod HTML, który jest przysłany, jest zamieniany na drzewo i na poszczególne obiekty.
Ale jak to wszystko współgra z językiem JavaScript?
Zobaczmy.
Tutaj mamy przykład, który już widziałeś. Po lewej stronie kod HTML. Po prawej
już jego reprezentacja jako drzewo dokumentu i skupmy się np. na tym elemencie div.
On został tutaj przysłany z całością tego tekstu.
Przeglądarka zaczęła ten tekst parsować. Stwierdziła,
musimy utworzyć sobie obiekt div i powiedzmy, że po tej stronie jest on reprezentowany, czyli gdzieś pamięci
komputera, mamy zapisany taki właśnie obiekt.
On wcale nie jest zapisany w JavaScript'cie.
Nie wiemy jak on został zaimplementowany przez twórcę przeglądarki pod spodem, ale taki obiekt na pewno
istnieje.
I teraz jak możemy z tym wszystkim współgrać
w języku JavaScript? Zobaczmy, możemy na przykład utworzyć zmienną którą nazwiemy div.
I taki element pobrać. To co tutaj widzisz,
jest to metoda, która pozwala nam wybierać selektory ze strony. Ja będę o tym mówił w jednej z kolejnych
lekcji.
Natomiast dlaczego od samego początku tego kursu chciałem wyraźnie rozdzielić język JavaScript od obiektowego
modelu dokumentu?
Myślę, że dokładnie w tym zapisie to widzisz.
Widzisz tutaj składnię języka JavaScript, czyli słowo var.
Zmienną nazwaliśmy div równa się, czyli znak przypisania.
To wszystko już znasz.
Następnie mamy jakąś zmienną document po kropce odwołujemy się do querySelector i wywołujemy. Czyli
możesz się domyśleć, że document jest to jakaś zmienna, która gdzieś tam kieruje referencje na jakiś obiekt.
No, bo skoro po kropce się odwołuje do metody, to znaczy, że jest to jakiś obiekt.
A z kolei do tej metody, czyli po prostu funkcji przekazuje parametr jakim jest string.
To wszystko, co tutaj widzisz jest to właśnie język JavaScript, którego cię od początku tego kursu uczyłem.
Czyli tworzymy zmienną.
Odwołujemy się do jakiejś metody querySelector obiektu document i przekazujemy do niej string o wartości
div.
To jest język JavaScript, a sam fakt, że istnieje taka zmienna jak document czy, że ma ona taką metodę
jak querySelector, ten właśnie obiekt, to jest inna sprawa.
I to jest właśnie DOM API.
Teraz kiedy już będziemy mieli w zmiennej pobraną referencje do takiego obiektu, to będziemy na niej
mogli robić różne rzeczy.
Jest to m.in. znajdź dzieci tego elementu.
Jeżeli ten element div ma jakiś dzieci np. paragraf to możemy je wyszukać, możemy dodać do niego jakiś
atrybut np. klasę czy też inny atrybut.
Możemy usuwać klasę CSS z takiego elementu.
Czy możemy usunąć sam element.
Jeszcze inną opcją jest np. przypisanie zdarzenia kliknięcia do elementu, czyli w samym JavaScript'cie,
jak widzisz, nie mamy czegoś takiego jak zdarzenie kliknięcia, ale za pomocą DOM API,
jeśli pobierzemy referencje do takiego obiektu, to z użyciem zapisu języka JavaScript, czyli tak jak to
tutaj widzisz, będziemy mogli np. przypisać jakąś funkcję, która się wywoła, kiedy klikniemy na stronie,
na taki element. Mam nadzieję, że tutaj widzisz tę wyraźną różnicę.
Przez zapis, który mamy u góry, to jest zapis języka JavaScript.
To nie jest php, to nie jest python czy Ruby on Rails, to jest JavaScript. Natomiast sam JavaScript, nie
posiada takiego obiektu, jak document czy metody querySelector, ale DOM API już tak.
Tuaj raz jeszcze, chcę wyraźnie zaznaczyć, że DOM API, to nie jest JavaScript.
Jak widzisz, skorzystaliśmy tutaj z operatora not i to jest ten strict equality,
czyli nie jest równy językowi JavaScript.
Dlaczego? Do tej pory jak widziałeś korzystaliśmy kilkukrotnie z metody alert.
Konkretnie jest to funkcja nazywa się alert.
No i to jest zapis JavaScript'owy, czyli wywołujemy ją parą nawiasów okrągłych przekazujemy jej string i on
się na naszej stronie wyświetli
w ten sposób. Natomiast to okienko, które widzisz to nie jest JavaScript.
Funkcja alert, jak już wcześniej mówiłem nie jest dostępna w języku JavaScript, ale jest dostępna w obiektowym
modelu dokumentu i co jest tutaj ciekawe.
Mamy ją dostępną jakby w JavaScript'cie kiedy korzystamy z tego JavaScript'u w przeglądarce możemy jej przekazać
string, ale to okienko, które się wyświetli ma już niewiele wspólnego z samym JavaScript'em, bo to przeglądarka
nam takie właśnie okienko pokazała.
Teraz chciałbym jeszcze pokazać, jak mniej więcej działa sam interpreter języka JavaScript.
A jak działa DOM API wewnątrz przeglądarki.
Zobaczmy sobie tutaj, mamy przeglądarkę i wyobraź sobie że wewnątrz mamy coś takiego jak JavaScript Engine,
czyli będzie to silnik języka JavaScript odpowiedzialny za parsowanie tego kodu, który pisaliśmy.
Pisaliśmy tekst, czyli kod JavaScript i będzie on parsowany przez JavaScript Engine, który jest dostępny
w przeglądarce internetowej.
Ten sam Engine może być dostępny tak jak wspominałem w Node.js czy jeszcze w innych implementacjach.
Jest on niezależny od DOM API.
Po drugiej stronie będziemy mieli z kolei DOM API, do którego jakby nie mamy do końca dostępu, nie wiemy
jak on
pod spodem został zaimplementowany. Najczęściej przeglądarki są napisane w języku programowania C++ i
w odpowiedni dla siebie sposób implementują.
Wszystkie te metody najczęściej zgodnie ze standardami, natomiast zostały napisane w kodzie źródłowym.
Tego nie wiemy.
I teraz jeżeli my w języku JavaScript skorzystamy np. z funkcji prompt, którą ci również pokazywałem.
Jest to funkcja niedostępna w JavaScript'cie, ale dostępna w DOM API, więc w przeglądarce będzie dla nas widoczna
i zadamy użytkownikowi jakieś pytanie, bo ta funkcja wyświetli nam okienko, w którym można coś wpisać,
to zostanie to tak naprawdę wysłane do DOM API i DOM API poprzez przeglądarkę wyświetli nam okienko
do którego będzie można wpisać jakiś tekst.
Ten tekst to będzie string.
Nieważne co tam wpiszemy, DOM API właśnie przechwyci to, co zostało wpisane w tym okienku i będzie to wyglądać
mniej więcej tak i odeśle nam to z powrotem do JavaScript Engine.
Z tego powodu, że właśnie będziemy mogli utworzyć zmienną, do której zapiszemy to, co ktoś nam przysłał.
No i wiesz, że skoro będzie to string, to na tym string'u będziemy mogli operować, robić w JavaScript'cie dowolne
rzeczy. Natomiast tak jak widzisz sam JavaScript nie ma takiej funkcji.
Ta funkcja to jest tylko takie proxy do można powiedzieć innego świata, czyli my korzystamy z tego, przeglądarka
jakieś okienko wyświetla, wpisujemy tam coś i z powrotem odsyła nam to do interpretera języka JavaScript.
Mam nadzieję, że na tym etapie jest to dla ciebie jasne, że sam język jest to rzecz zupełnie oddzielna,
a DOM API jest to zestaw takich interfejsów programistycznych, które pozwalają nam komunikować się z przeglądarką
właśnie w tym zapisie języka JavaScript czyli mamy obiekty,
mamy metody itd.
Na sam koniec chciałbym jeszcze wspomnieć o kilku API, które są dostępne w przeglądarkach, na przykład
DOM API, które umożliwia manipulowanie drzewem domu.
To jest to czym mówiłem, czyli będziemy mogli sobie znaleźć na przykład element div na stronie.
Usunąć go, dodać coś do niego, dodać mu jakąś klasę, wstawić do niego jakiś tekst itd.
Czyli manipulować całym tym drzewem DOM, które na początku zostało utworzone.
Mamy na przykład taki obiekt jak XMLHttpRequest.
Tutaj jest to API i to z kolei jest nic innego jak AJAX.
Na pewno o tym słyszałeś.
Mówię o tym bardzo dokładnie w drugiej części tego kursu i z kolei taki obiekt umożliwia nam wysyłanie
żądań do serwera.
W samym JavaScript'cie nie mieliśmy czegoś takiego jak AJAX, ale w przeglądarce już mamy i zapisem JavaScript'owym
możemy się z tym obiektem komunikować.
Czyli nowy sobie obiekt utworzyć poprzez new i tak dalej.
Tak jak ci pokazywałem to do tej pory. Mamy jeszcze na przykład takie API jak audio i wideo, które umożliwia
nam odtwarzanie multimediów na stronie bez Flash'a czy bez takiego plugin jak Silverlight.
Mamy Canvas, który umożliwia rysowanie 2D oraz 3D.
Mamy File API, który umożliwia odczytywanie treści wybranych plików czy na przykład geolokalizację,
która umożliwia pobieranie współrzędnych GPS urządzenia o bardzo wielu takich specyfikacjach HTML5 i
w ogóle specyfikacjach, które są w przeglądarce dostępne czyli API.
Mówię w kursie HTML5 JavaScript techniki zaawansowane, do którego przerobienia również cię zachęcam.
Natomiast tutaj chciałbym Ci pokazać, że widzimy rzeczy, które jakby w samym języku JavaScript nie są
dostępne, ale w przeglądarce już owszem.
I to daje nam bardzo bardzo duże możliwości, o czym się jeszcze w tym kursie przekonasz.