JavaScript: Współprzędne położenia elementu
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.
Kontynuujemy poznawanie różnych przydatnych właściwości i metod elementów HTML i w tej lekcji chciałbym ci
pokazać, jak możemy odczytywać współrzędne położenia konkretnego elementu na całym tym naszym canvas'ie,
czyli na całym dokumencie, w całej naszej stronie.
Mam tutaj dwa elementy.
Pierwszy z nich jest to taki container, a drugi jest to div box, który się tutaj znajduje i jak widzisz
wygląda to następująco, containera a wewnątrz box.
I one mają tutaj przypisane jakieś style m.in. ten box wewnątrz jest od góry odsunięty o 30 pikseli,
a np. od lewej strony, o 20 pikseli względem tego rodzica i teraz pokażę ci, jak możemy odczytać, gdzie
ten element się znajduje względem swojego rodzica, a konkretnie względem rodzica, który jest jego
offsetParent.
Wiem, że to dziwnie brzmi, ale zaraz zobaczysz, o co chodzi.
A także jak odczytać, gdzie znajduje się ten element, względem krawędzi, czyli góry przeglądarki lewej
strony przeglądarki.
Na razie może ci się to wydawać mało przydatne, ale jeszcze w tym kursie zobaczysz, kiedy będziemy tworzyć
własny tooltip,
jak bardzo jest to przydatne, dlatego chciałem, aby o tym była osobna lekcja, do której będziesz mógł wrócić.
Pobrałem do zmiennych od razu zarówno container jak i element box i zacznę ci, od pokazania, jak to wszystko
wygląda.
Czyli console.log, zróbmy sobie, i odwołamy się do box.offsetTop.
Zobaczmy, co nam to zwróci, czyli odwołujemy się do tego elementu i do jego właściwości offsetTop. Mamy
tutaj 112.
No i teraz 112
odkąd? Otóż 112 pixeli od góry, czyli odtąd, dotąd od elementu body, konkretnie, gdybyśmy go tutaj podświetlili.
Zobaczmy.
Jest to 112. Zróbmy teraz coś takiego, oczywiście to jest podane w pikselach, jak offsetLeft. One są dla
nas dostępne.
I teraz się okaże że jest to 400, to oznacza to tylko tyle, że od tej krawędzi, dotąd, jest 400 pikseli. Teraz
to jest bardzo ciekawe, jeżeli chodzi o odczytywanie tych właściwości poprzez offsetTop i Left, to zależy
od tego, względem jakiego elementu, chcemy to sprawdzić.
Teraz wydaje się, że sprawdzamy względem górnej krawędzi przeglądarki i lewej krawędzi.
Ale tak naprawdę chodzi o element body, bo jeżeli teraz w console.log zrobię coś takiego jak box.offsetParent.
Pozostanie nam zwrócone
body.
Przy okazji, mam nadzieję, że na tym etapie już rozumiesz, że jeżeli tutaj body zostaje zwrócone, to działa
to dokładnie w taki sam sposób, jak byśmy body pobrali w jakiś inny sposób. Możemy się tutaj do body
bez problemu odwoływać, do jego metod.
Wiemy, że jest to body, natomiast co się stanie, jeżeli dla kontenera przypiszemy position: relative.
W ten sposób, być może już wiesz, w HTML'u i CSS, że jeżeli nadamy jakiemuś elementowi position relative, a
wewnątrz mamy inny element np. box i będziemy go pozycjonować absolutnie, na przykład, to będzie on pozycjonowany
względem tego rodzica, któremu przypisaliśmy relative, jeżeli nie, będzie to względem body.
I teraz, jeżeli sprawdzimy znowu offsetParent, mieliśmy tutaj body.
Teraz okaże się że jest to div container i zauważ jak to wszystko się zmieniło.
Teraz offsetTop jest o 130 pikseli, czyli odsunięcie odtąd, a offsetLeft 20, czyli dokładnie tyle, ile ja
pisałem jeśli chodzi o margines górny i lewy, czyli pamiętaj, że offsetTop oraz Left, to jest względem
rodzica, względem którego jest to pozycjonowane, czyli tego, który ma position relative albo po prostu
body.
Jest to bardzo ważne.
Natomiast teraz chce ci pokazać jak odczytać te krawędzi np. lewą krawędź czy górną krawędź tego elementu
względem całego dokumentu i możemy to zrobić w dosyć prosty sposób. Mianowicie stworzymy zmianą pos,
jak postition. Odwołamy się do box i do takiej dość długiej metody, która nazywa się getBoundingClient
Rect.
W ten sposób to wygląda.
Tutaj zostanie zwrócony obiekt, który ma kilka właściwości, więc wyświetlmy sobie go w konsoli.
W ten sposób, ok.
No i mamy tutaj ClientRect jest obiekt takiego typu. Ma on właściwość bottom, height, czyli wysokość tego
elementu.
To jeszcze o tym będę mówił w tym kursie left, right, top oraz width i teraz left 400 pikseli
od lewej krawędzi, dotąd.
Top, to oznacza 111 pikseli, prawie 112 pikseli.
Odtąd, do samej góry, a nie do tego rodzica, tak jak w przypadku offfsetTop, jeśli chodzi o right, to chodzi
o to, że prawa krawędź jest odsunięta od lewej strony, o 600 pikseli.
Czyli skoro lewa jest o 400, szerokość jest to 200, no to prawa jest odsunięta o 600 pikseli, a dolna czyli
bottom 312 pikseli, prawie, czyli ta krawędź od górej jest o tyle odsunięta.
Jest to rzecz, która bardzo nam się przyda kiedy będziemy tworzyć właśnie na przykład tooltip
w tym kursie. Na sam koniec chce ci pokazać ciekawą metodę, która będzie się nam przydawać np. wtedy, kiedy gdzieś
będziemy mogli kliknąć myszką, bo już uprzedzając fakty powiem ci, że będziemy mogli zarejestrować zdarzenie
kliknięcia myszą, gdziekolwiek na dokumencie i kiedy klikniemy, to będziemy mogli odczytać punkt, czyli
współrzędne np. x oddalenia od lewej strony czy od góry i mamy taką ciekawą metodę, która nazywa się
element from point.
I teraz chce się pokazać, Zróbmy to w cnsole.log'u, ona jest dostępna na dokumencie, czyli
document.elemtnFromPoint i tutaj podajemy x oraz y, czyli np. jeśli podamy sobie te 400, to będzie x, a 200 to y.
To chodzi generalnie o to, że na naszej stronie 400 pikseli w tą stronę i 200 w dół, mamy jakiś element
i chcemy zobaczyć jaki to jest element.
Zróbmy tutaj właśnie consloe.log.
Jak widzisz jest to box, czyli po 400 pikselach już jesteśmy na krawędzi, a jeśli byśmy wpisali 399. Zobaczmy,
czy nam to zadziała.
Jak widzisz, jest to container, czyli 399 pikseli, to jest tutaj, prawie przy tej krawędzi i 200 od góry,
czyli tak jakby sprawdzamy, co jest w tym miejscu, również możemy to sprawdzić poprzez Inspect Element, jest
to container.
Fajna, przydatna czasami metoda, o której warto, abyś wiedział.
Kod
Współrzędne położenia elementu · 1 min
var container = document.querySelector("#container"),
box = container.querySelector(".box");
console.log( box.offsetTop );
console.log( box.offsetLeft );
console.log( box.offsetParent );
var pos = box.getBoundingClientRect();
console.log( pos );
console.log( document.elementFromPoint(399, 200) );