JavaScript: Wymiary 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.
W tej lekcji kontynuujemy poznawanie różnych właściwości obiektów HTML, które dla nas będą przydatne
przy pisaniu różnego typu aplikacji.
W tej lekcji zajmiemy się wymiarami elementu HTML.
Mamy tutaj container, to jest ten duży element.
Następnie mamy box, czyli ten mniejszy element oraz Jakiś link. W kodzie HTML
wygląda to następująco.
I teraz będę chciał ci pokazać, jak możemy sprawdzić jakiej szerokości z np. container czy też box. Wkleję
tutaj gotowy kod i nazwałem zmienną containerDim, jak container dimensions i odwołam się do
container.getBoundingClientRect.
Czyli to już znasz.
Taka metoda została w poprzedniej lekcji opisana.
I za jej pomocą mogliśmy sprawdzić, gdzie ten element znajduje się w przestrzeni, czyli od góry, od strony
lewej, prawej czy od dołu. Natomiast tam jest jeszcze kilka ciekawych właściwości, więc jeżeli teraz odświeżę
i wpiszemy container dimensions, mamy obiekt, który mamy na przykład width, czyli szerokość całego tego
kontenera, a także height, czyli jego wysokość.
Natomiast zauważ ciekawą rzecz, tutaj mamy 664, jeżeli chodzi o jego wysokość. Natomiast w stylach zdefiniowałem,
że ma to być 600.
No, ale dodałem tutaj padding, z każdej strony po 30, czyli od góry i od dołu będzie to po 30.
A więc ten element został rozszerzony już do 660.
I zauważ że dodałem również border po 2 piksele z każdej strony, czyli z góry i od dołu to jest 4 piksele.
Łącznie daje to właśnie 664 piksele.
Jeżeli chodzi o szerokość, możemy ją odczytać tutaj, również jest taka sama.
Teraz pokażę ci kolejny sposób, jak możemy odczytywać szerokość elementu.
Może zróbmy to w console.log'u container i następnie offsetWidth.
W ten sposób możemy dokładnie tak samo, odczytać szerokość takiego elementu.
Jest to tyle samo, jak widzisz 664.
Od razu zróbmy sobie również wysokość.
Więc zapamiętaj, że możesz odczytać szerokość czy wysokość elementu.
Razem z padding'iem i border'em poprzez offsetWidth oraz offsetHeight na dowolnym elemencie.
Bez znaczenia czy on ma przypisane coś w stylach czy też nie.
Zobaczmy.
Tak to wygląda.
Natomiast teraz ciekawostka, bo mógłbyś zapytać czym różni się odwołanie tutaj do getBoundingClientRect,
np. width od tego, skoro zwraca nam to takie same liczby.
No i właśnie z tego powodu ten kurs podzieliłem na takie nieduże lekcje, abyś kiedyś mógł do tej lekcji
wrócić sobie to przypomnieć, bo niewiele osób o tym wie i teraz chce ci to powiedzieć. Zróbmy to samo
na elemencie np. box, który mamy pod spodem, czyli powiedzmy, że tu odwołamy się do box i następnie do
getBoundingClientRect,
w ten sposób i do width
A tutaj odwołamy się do box i do offsetuWidth.
Zobaczmy, jak widzisz jest to po 200, tutaj i tutaj.
Ale różnica jest taka, że jeżeli CSS3 na takim elemencie, skorzystamy z transform, tutaj w tym panelu możemy
sobie dowolne style przypisywać, więc przypiszmy sobie transform.
Następnie scale, nie wiem czy znasz taką właściwość, ale w CSS3 jest dostępna.
Czyli, jeżeli taki element będziemy chcieli poprzez transform: scale,
często jest używany do animacji, zeskalować o połowę.
Jeżeli teraz będę chciał odwołać się do box, właśnie, getBoundingClientRect.width, to będzie
to 100, bo właśnie tyle on teraz zajmuje po zeskanowaniu o połowę.
Natomiast, jeżeli odwołałem się do box.offsetWidth, w ten sposób, to nadal będzie to 200, bo ten element
fizycznie zajmuje ciągle 200 pikseli, ale w tej przestrzeni jest skalowany i jakby na ekranie zajmuje
100.
Więc taka jest tylko różnica pomiędzy tymi dwoma zapisami. Odświeży i wróćmy do kodu, pokażę ci jeszcze
kilka ciekawych właściwości.
Pokazałem ci, że getBoundingClientRect.width oraz height czy offsetWidth i offsetHeight zwraca nam szerokość
razem z border'ami i z padding'iem, a teraz pokażę ci jak możemy to zrobić bez, właśnie, border'u.
Otóż możemy się odwołać, na przykład, do container i następnie do clientWidth i podobnie będzie
container.clientHeight.
W ten sposób, zobaczmy co nam zostanie zwrócone, jak widzisz 660 i 660 czyli padding
tutaj został dodany, ale border, który jest tutaj, już nie, czyli te dwa piksele, z tej oraz tej strony.
Teraz chcę Ci pokazać, że tak samo na takim linku nam to zadziała. Taki link, czyli
a, jak widzisz, jest podświetlony.
Tutaj od razu widzimy,
na stronie, że mam 81 pikseli. Natomiast on nie ma przypisanej żadnej szerokości, jest po
prostu liniowym elementem.
I mam go tutaj zapisany jako link, więc jeżeli w console.log będziemy chcieli wyświetlić jego szerokość.
Mimo tego, że nigdzie nie została ona dana, to również np. poprzez offsetWidth możemy to zrobić i zobaczyć
jaka jest szerokość takiego elementu, w zaokrągleniu jak widzisz 82 piksele i na końcu jeszcze jedna
ciekawa rzecz. Gdybyś chciał pobrać
szerokość oraz wysokość okna przeglądarki, które tutaj mamy, to możemy odwołać się do windows. ja ci pokazywałem,
że mamy taki globalny obiekt jak window, pod którym było np. windows navigator itd.
Ale do samego window można się również odwołać,
odczytując szerokość okna, czyli możemy to zrobić w następujący sposób, innerWidth i zrobimy to samo z
innerHeight.
Czyli jak widzisz,
wygląda to inaczej niż w przypadku offsetWidth czy offsetHeight.
I jjuż będę chciał to pokazać, jak widzisz 1360 to szerokość całego okna, a wysokość 293,
bo tutaj konsola, którą mamy wyświetlaną, jest jakby odliczana od tego, czyli okno to jest
ta wartość, która się znajduje pomiędzy tymi dwoma kreskami.
Gdybyśmy teraz to czytali raz jeszcze.
Czyli generalnie, to co użytkownik może na tym ekranie zobaczyć.
Na sekundę chciałbym jeszcze wrócić do elementu box, bo nie pokazałem ci jednej rzeczy, że on tutaj ma więcej
treści, niż tak naprawdę jego wysokość, więc jego wysokość jest to 200 pikseli.
Ale jaka jest jego wysokość, tak naprawdę z tą treścią wewnątrz, to również możemy odczytać.
Może zróbmy to w tym miejscu, console.log.
Odwołamy się do box i mamy taką właściwość jak scroll.
W ten sposób, Width, czyli szerokość oraz scrollHeight.
I te inne może sobie wykomentuje, aby nam nie przeszkadzały w tym momencie i zobaczmy jak to będzie wyglądać
teraz.
Czyli jak widzisz, scrollWidth, czyli szerokość, tutaj na bok nie można scrollować, jest to 200, ale
scrollHeight to już jest 288.
Ten element ma wysokość 200, ale całość po przeskalowaniu, czyli jakby to, co jest wewnątrz ma 288.
I w tym momencie już wiesz, jak odczytywać wszystko co jest ci potrzebne, aby mierzyć szerokości czy wysokości
poszczególnych elementów.
Kod
Wymiary elementu · 1 min
var container = document.querySelector("#container"),
box = container.querySelector(".box"),
link = container.querySelector("a");
var containerDim = container.getBoundingClientRect();
// console.log( box.getBoundingClientRect().width );
// console.log( box.offsetWidth );
// console.log( container.clientWidth );
// console.log( container.clientHeight );
console.log( box.scrollWidth );
console.log( box.scrollHeight );
// console.log( link.offsetWidth );
// console.log( window.innerWidth );
// console.log( window.innerHeight );