JavaScript: Relacje między elementami
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 omówimy relacje między elementami.
Być może pamiętasz jak w lekcji wprowadzającej do DOM, mówiłem o tym, że pewne elementy są ułożone w
hierarchii i dzięki temu one do siebie są ułożone w różnych relacjach.
Czyli możemy powiedzieć, że jeden element jest rodzicem innego elementu.
Z kolei inny element jest dzieckiem jakiegoś innego elementu lub np. elementy są na równi i wtedy są
rodzeństwem.
Teraz pokażę ci jak takie relacje można odczytywać i jak takich elementów na stronie wyszukiwać.
Więc przejdziemy do kodu.
Na początek mamy znaną na listę ul z identyfikatorem list i kilka elementów. Tutaj na końcu jeszcze jest
jakiś komentarz HTML, który na stronie nie jest widoczny.
I teraz przejdziemy do scripts. Pobrałem referencje do tej listy. Tym razem poprzez querySelector i pokażę
ci jak zobaczyć wszystkie dzieci jakie znajdują się w takim oto elemencie.
Konkretnie, chodzi mi o wszystkie węzły, o których już mówiłem.
Nazwiemy zmienną, czyli children i odwołamy się do list.
Następnie do childNodes, to jest taka właściwość, która przechowuje wszystkie dzieci elementu list.
Jeśli teraz odświeżę i wpiszemy w konsoli children, to zobacz, mamy tutaj obiekt tablicopodobny, bo przypominam,
to nie jest tablica, w którym jest bardzo wiele różnych elementów.
No i spodziewałbyś się, że powinny tam być tylko elementy li skoro i tutaj dodałem, ale okazuje się, że
mamy jeszcze jakieś elementy text, taki oto element,
to jest obiekt tekstowy, taki który możemy utworzyć za pomocą createTextNode, co ci już pokazywałem.
Jest on tutaj potem element li i potem znowu tekst. Tu na końcu mamy komentarz.
Mógłbyś zapytać o co chodzi?
Przejdźmy zatem do kodu i zauważ, że tutaj otwarłem li.
A w zasadzie ul i pomiędzy kolejnym elementem, czyli li mamy jakiś tekst.
Ten tekst jest niewidoczny, to jest tabulator, ale jest.
Jeżeli go usuniemy, to ten pierwszy element tekstowy powinien zniknąć, czyli znowu
nie ma tego elementu.
Tak jak ci wspominałem, każdy kawałek tekstu jaki jest dostępny, jest zamieniony na odpowiedni obiekt, do
którego można się odwołać.
Podobnie jest z komentarzem, który tu się wyświetlił.
No i teraz jeżeli nie chcemy pobierać wszystkich dzieci, ale tylko te dzieci, które są elementami, tak
jak tutaj np. li, to możemy to zrobić za pomocą list.children,
co zrobię poniżej,
nazwę sobie tutaj zmianą elementChildren, żebyśmy mogli odróżnić, że są to tylko elementy i napiszemy
sobie children, w ten oto sposób i teraz pobierzemy wszystkie dzieci, które są elementami niekoniecznie muszą być
li,
no ale te elementy, które mogą się znajdować w ul, to są elementy li.
Teraz pokażę ci kolejne zależności, właśnie typu rodzic dziecko, bo tutaj pozbieraliśmy wszystkie dzieci.
Co, jeżeli chcielibyśmy pobrać pierwszy element jaki się znajduje w takim elemencie ul.
Oczywiście ja ci pokazywałem, że możemy korzystać z metod querySelector, więc nie ma problemu, możemy
odwołać się do
list.querySelector, firstChild.
Nie ma problemu, ale czasami będziemy również chcieli się do tego odwołać w inny sposób.
Dlatego chcę, aby się o tym wiedział.
Utwórzmy zatem zmianą first i odwołamy się do list i następnie do firstChild.
I znowu chce, abyś wiedział, o co chodzi, wpiszmy sobie tutaj first.
I znowu to będzie text, tak jak ci wcześniej pokazałem.
A jeżeli będziemy chcieli odwołać się do pierwszego dziecka, które jest elementem, to napiszemy
firstElement, list i teraz firstElementChild.
Mamy taką właściwość.
No i znowu tym razem, jeśli odwołam się do firstElement, mamy tutaj element li. Podobnie będzie z
lastChild,
dlatego od razu to wkleję, aby już tego nie pisać,
last będzie to ostatni element, jakikolwiek węzeł.
Może to być oczywiście element li.
Ale w tym przypadku będzie to text, ale lastElement,
będzie to ostatni element tekstowy. Tutaj musimy zapisać i możemy to sprawdzić, last.
Chyba nam się coś nie zapisało.
Raz jeszcze odświeżam last i następnie lastElement.
Jest to ostatni element li i teraz chciałbym Ci pokazać zależności typu rodzeństwo.
Jeżeli mamy już pobrany element taki jak tutaj np. firstElement i chciałbym pobrać kolejny element, który koło
niego się znajduje, czyli jego rodzeństwo, to możemy to zrobić, więc napiszmy sobie tutaj second i odwołamy
się do firstElement i następnie do nextSibling, czyli następny krewny,
można powiedzieć no i odświeżmy odwołajmy się do second.
Jak widzisz mamy tutaj text, znowu tak jak ci to pokazałem na początku, a jeżeli chcę aby był to następny
element, następny sibling,
ale musi to być element HTML,
to możemy odwołać się do secondElement, tak sobie to nazwiemy i do firstElement, nextElementSibling.
W ten sposób oczywiście secondElement, będzie to kolejny element li,
jak widzisz element
listy2.
Zupełnie podobna sytuacja jest z poprzednim, czyli previousSibling oraz previousElementSibling.
Tym razem nazwałem to przedostatni i przedostatni element i odwołałem się do last, ten który mieliśmy
tutaj i dokładnie w ten sam sposób będzie to działać.
Czyli last i następnie
lastButOneElement. Możemy to zrobić w ten sposób i lastButOneElement, czyli element tekstowy na sam
koniec chce ci pokazać jak odwołać się do rodzica.
Jeżeli jesteśmy np. w elemencie drugim, powiedzmy tutaj, chcemy się odwołać do ul czyli do jego rodzica, to
możemy to zrobić, napiszmy sobie parent, jak rodzic i następnie np. secondParentNode.
W ten sposób odwołamy się do ul, czyli jeżeli teraz wpisze sobie parent, to odwołaliśmy się do ul.
I teraz, co z tego wynika, dlaczego to może być przydatne.
Ja Ci pokazałem że aby np. usunąć ostatni element li, musimy się odwołać do ul i do remove Child.
Ale jeżeli my np. będziemy mieli referencje do konkretnego obiektu, to jak się z niego można odwołać,
żeby go usunąć.
Otóż możemy to bez problemu zrobić.
Może zróbmy to w konsoli, będzie to najlepiej widać albo może jednak abyś to miał w plikach źródłowych, mamy
taki element jak np. second.
Więc odwołamy się do second.parentNode.
Czyli mając referencje do takiego obiektu jak li, możemy się odwołać do parentNode czyli ul potem
removeChild.
Pamiętasz, że było to możliwe?
I tu musimy podać dziecko, które chcemy usunąć, a więc podamy
sobie second.
W ten sposób drugi element listy powinien zostać usunięty.
Niestety to się nie stało.
Ok.
Second to był to tekst, więc nam to nie zadziałało, musimy się odwołać do second element oczywiście.
W ten sposób i teraz ten element powinien zniknąć.
I dokładnie tak się stało, czyli widać, że z poziomu elementu możemy do jego rodzica się odwołać i na
rodzicu metodą removeChild, wówczas znowu podać ten oto element.
Kod
Relacje między elementami · 1 min
var list = document.querySelector("#list");
var children = list.childNodes;
var elementChildren = list.children;
var first = list.firstChild;
var firstElement = list.firstElementChild;
var last = list.lastChild;
var lastElement = list.lastElementChild;
var second = firstElement.nextSibling;
var secondElement = firstElement.nextElementSibling;
var lastButOne = lastElement.previousSibling;
var lastButOneElement = lastElement.previousElementSibling;
var parent = second.parentNode;
secondElement.parentNode.removeChild(secondElement);