JavaScript: Praca ze stylami CSS elementów
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.
Kolejny ciekawy temat w pracy z elementami CSS, jest to nadawanie im styli CSS.
Teraz chcę Ci pokazać jak możemy to zrobić. Najpierw
o co się cała sprawa rozchodzi?
Otóż na pewno wiesz, że możemy do elementów przypisywać style poprzez arkusze stylów. To jest jasne.
Natomiast możemy również przypisywać style jako atrybuty np. w ten sposób, co pisząc kod HTML nie jest
zalecane, ale gdybym tutaj napisał kolor red.
No to ten paragraf będzie czerwony.
Czyli możemy style liniowo przypisywać, w ten sposób.
I są to właśnie style przypisane jako atrybut.
Możemy to robić z poziomu JavaScript'u i nie tak jak właśnie pomyślałeś, a więc przez setAttribute,
nie.
Możemy to robić w inny sposób i teraz ci będę chciał to pokazać. Mamy taką oto strukturę i w pliku script.js
pobrałem h1, container, paragraf oraz link i pokażę ci teraz jak będziemy na nich ustawiać
odpowiednie style.
Otóż odwołamy się do h1, czyli właśnie do tego elementu, który mamy tutaj następnie do style.
Czyli jak widzisz taki element HTML ma w sobie taką właściwość jak style. No i co jest ciekawe, taka właściwość
style, to jest to kolejny obiekt, który obiektowy model dokumentu nam udostępnia.
Czyli widzisz, jak tutaj JavaScript fajnie się łączy, w jednym obiekcie mamy jakiś inny obiekt, który z
kolei ma swoje właściwości i swoje metody, na których zaraz będziemy operować.
Natomiast może najpierw pokażę ci w konsoli przeglądarki, co się tam dzieje, czyli h1 style, co to jest
w ogóle.
No i jak widzisz, jest to obiekt, który nazywa się CSSStyleDeclaration, to jest o tyle ważne, że
możesz sobie to skopiować, wkleić w google i przeczytać więcej na ten temat.
Natomiast zachęcam cię do przerobienia drugiej części tego kursu JavaScript w praktyce, bo tam tłumacze
programowanie obiektowe i kiedy zrozumiesz na czym polega programowanie obiektowe,
zrozumiesz skąd bierze się tak wiele różnych obiektów tutaj.
Dlaczego mają takie, a nie inne właściwości i metody.
Natomiast teraz pokażę ci, co możemy zrobić. Skoro h1 kropka style, to jest jakiś obiekt, to na pewno ma
jakieś właściwości i metody.
No i dokładnie tak jest.
Więc odwołajmy się do h1 style i ma on np. taką właściwość jak kolor, czyli te właściwości, które tutaj
po kropce możemy podawać, odwzorowują właściwości jakie możemy przypisywać czyli np. kolor, napiszemy tutaj
ff0000, czyli kolor czerwony.
W taki sposób konkretnemu elementowi przypiszemy style kolor czerwony. Odświeżmy i zobaczmy, co się tak
naprawdę stało.
Jak widzisz przypisaliśmy atrybut style, tak jak przed momentem pokazywałem i kolor.
Akurat tutaj przeglądarka ten kolor reprezentuje w notacji RGB.
Natomiast to nie ma żadnego znaczenia w tym momencie, że my wpisaliśmy jako wartość szesnastkową.
Tutaj ważne jest to, że odwołałem się do h1 kropka style kropka kolor i kolor został dodany tutaj do
tego atrybutu.
Jeżeli teraz poniżej odwołałem się do h1.style i np. do fontSize, dlaczego w ten sposób, zaraz ci powiem.
20 pikseli, to po odświeżeniu,
jak widzisz ten element h1 jest mniejszy, a tutaj mamy dodane fontSize 20 pikseli i teraz co jest bardzo
istotne, jak widzisz fontSize zapisujemy w SSC jako font pauza size.
Być może się domyślasz co by było, gdybyśmy chcieli to zapisać w ten sposób.
Otóż JavaScript potraktowałby to, że chcemy się odwołać do h1. style.font i od tego odjąć size.
Byłby to problem, dlatego każda właściwość, która ma pauzę, musi być zamieniona w taki sposób, czyli na
notację camelCase, że pauze usuwamy, a kolejną literę powiększamy.
I w ten sposób bez problemu nam to zadziała.
Możemy odświeżyć raz jeszcze i widzisz że efekt jest dokładnie ten sam.
Alternatywnie moglibyśmy tutaj odwołać się, bo pokazywałem ci w tym kursie, że do właściwości czy metod obiektu
możemy się odwołać po kropce albo w nawiasach kwadratowych.
Czyli moglibyśmy tutaj podać string.
I mogę wtedy napisać fontSize, w ten sposób również nam to zadziała, jak widzisz, tak samo jak przed momentem.
Więc ja może ci to w stawie po prostu w komentarz.
Ok, teraz pokażę ci kolejną rzecz, mianowicie odwołamy się do np. kontenera, container.
Następnie style i zamiast odwoływać się do jakiejś konkretnej właściwości, powiedzmy, że chcemy przypisać
więcej styli naraz, to na takim obiekcie style, który w przeglądarce Ci pokazałem i był to CSS style
declaration, możemy się odwołać do cssText i tutaj przypisać od razu cały tekst.
Tutaj wpisze kilka różnych właściwości.
Jak widzisz, pisałem tutaj jakieś właściwości, które normalnie byśmy w arkuszu wpisali.
No i zerknijmy, czy nam to zadziała.
Wygląda na to, że tak, jak widzisz znowu jako liniowy styl do kontenera zostało to, bez trudu dodane.
Teraz oczywiście mógłbym się odwołać do container.style i już do konkretnej właściwości np. wirth ją zmienić.
Teraz pokażę ci jak przypisać style do kilku elementów. Mamy tutaj element p,
konkretnie będzie to więcej tych elementów, mamy na stronie dwa takie elementy.
Gdybym do każdego z nich chciał przypisać jakieś style, to musimy skorzystać z pętli, która będzie wyglądać
następująco.
Myślę, że nie jest to dla ciebie zaskoczeniem.
Mamy tutaj taki element tablicopodobny zwrócony właśnie z querySelectorAll,
już o tym mówiłem.
No i żeby do każdego z nich przypisać style, to musimy się odwołać do każdego z nich po kolei.
Czyli właśnie tak, w takiej pętli do konkretnego elementu, który teraz jest w pętli tutaj pobrany, style i lineHeight, czyli
np. 30 i na stronie, od razu to również będzie widać.
Jeśli przejdziemy, to widzisz że każdy element p
dostał teraz właśnie lineHeight, w takiej postaci.
Teraz chce ci pokazać jeszcze jedną ciekawą rzecz, mianowicie mamy tutaj link i będę chciał przypisać
mu poprzez link, bo mamy go u góry zmiennej style display np. block.
Nie jest to nic dziwnego, możemy przypisać takiego linku display block. Natomiast, co ciekawe, jeżeli mamy
już przypisane jakiś display, widzimy to teraz tutaj i chcielibyśmy to zresetować, a nie do końca wiesz
czy wcześniej to było display inline czy block.
Po prostu nie jesteś pewny, jakie wyświetlanie ma taki element, to wystarczy, że odwołam się tutaj znowu
do tego elementu i takie display zresetujemy na pusty ciąg znaków.
Przeglądarka automatycznie ustawi taki display, jaki być powinien.
Po odświeżeniu, oczywiście tutaj nie mamy display inline, ale ten element wraca do takiego wyświetlania
w jakim być powinien.
Na koniec chcę Ci pokazać, jak możemy z elementu odczytywać i już przypisane style czyli np. tutaj do
kontenera przypisaliśmy width 600 pikseli, więc przypisujemy to w tym miejscu, a możemy to odczytać np. tutaj.
Zróbmy sobie console.log i odwołamy się do container.style i następnie width.
Myślę, że dla ciebie nie jest to dziwne, że w ten sposób się odwołujemy.
No i będziemy mieli w konsoli 600 pikseli, czyli gdybyśmy chcieli pobrać wartość samą 600, to tutaj możemy
napisać parseInt, czyli funkcja, którą już pokazywałem, ona nam tutaj znajdzie integer i proszę bardzo,
600. Natomiast, co jest ciekawe i co jest bardzo ważne nie możesz się odwołać do dowolnego elementu np.
tutaj do elementu p, który mieliśmy.
Albo wróćmy jeszcze do elementu h1, bo mamy go tutaj i do jakichś właściwości, która nie jest tutaj ustawiona.
Tutaj mamy kolor i font-size, więc np. spróbujmy się odwołać do display, czyli chcemy w conslole.log'u wyświetlić
h1style.display, no bo chciałbyś sprawdzić, jakie jest wyświetlanie tego elementu.
I tutaj będziemy mieli zwrócony, jest to w tym miejscu pusty ciąg znaków.
Czyli możemy się odwołać do kropka style i display tylko wówczas, jeżeli display jest przypisane jako
styl liniowy, tutaj albo gdybyśmy go oczywiście w kodzie HTML wpisali jako atrybut.
I teraz pytanie, co zrobić gdybyśmy chcieli dowiedzieć się, jaki jest wyświetlanie tego elementu.
No bo w tym momencie h1,
jeżeli jesteś zaznajomiony dobrze z CSS'em to wiesz, że domyślnie ma ona wyświetlanie display block, ale
jak to sprawdzić.
Otóż mamy specjalną metodę, która jest dostępna na obiekcie window, więc możemy napisać window.getComputer
Style.
Tutaj musimy przekazać element, który chcemy, aby z niego zostało to odczytane, czyli h1 na przykład i
zostanie nam zwrócony obiekt i w tym obiekcie
możemy się odwołać np. do display i zostanie nam to poprawnie zwrócone, więc zobaczymy console.log.
To wyrzucę, to wykomentujemy i zobaczymy, block.
zostało nam zwrócone.
Tak jak wspominałem, tutaj jest zwracany obiekt, w zasadzie mogę ci to pokazać, jak widzisz, jest to
obiekt CSSStyleDeclaration, natomiast getComputerStyle oznacza pokaż nam wszystkie style wyliczone
przez przeglądarkę.
Jak widzisz, jest ich tutaj bardzo dużo i moglibyśmy się tutaj, wyczyszczą to wszystko, odwołać na przykład
do powiedzmy float.
Jak widzisz float none, czyli wszystkie style, nawet te, o których nie pisaliśmy będą tutaj widoczne i w
ten sposób możemy je odczytywać.
Na koniec ważna uwaga.
Pamiętaj, że przypisywanie stylów liniowych, w ten sposób, jako atrybut wcale nie jest najlepszym rozwiązaniem
i kiedy tylko można, definiuj style jako klasy w arkuszu CSS, bo wiesz, że możemy stworzyć jakąś klasę
pod którą będzie bardzo wiele właściwości i do elementu po prostu dodawaj klasy,
tak jak już Ci pokazałem i te klasy usuwaj.
Natomiast takie zapisy, które Ci pokazałem, czyli dodawanie liniowych stylów poprzez style
jest również potrzebne i czasami jest nieuniknione, abyśmy mogli pewne rzeczy przypisać, na przykład wyliczyć
szerokość jakiegoś elementu i do niego ją przypisać albo kiedy, na przykład, chcemy animować jakiś element,
szczególnie przed erą CSS3 tak to działało, że np. dodawalismy tutaj style opacity 0.1 za moment 02 03 04 i możesz
się domyśleć, dzięki temu ten element był, można powiedzieć, płynnie animowany, więc wówczas tego klasą
nie mogliśmy w żaden sposób załatwić.
Dzisiaj z CSS3 jest już, nieco inaczej.
Natomiast mnóstwo skryptów cały czas korzysta z udawania styli w ten sposób, bo czasami, jak wspomniałem,
jest to jedyna droga.
Kod
Praca ze stylami CSS elementów · 1 min
var h1 = document.querySelector("h1"),
container = document.querySelector("#container"),
p = container.querySelectorAll("p"),
link = container.querySelector("a");
h1.style.color = "#ff0000";
h1.style.fontSize = "20px"; // ["font-size"]
container.style.cssText = "width: 600px; margin: 0 auto;";
for(var i = 0; i < p.length; i++) {
p[i].style.lineHeight = "30px";
}
link.style.display = "block";
link.style.display = "";
// console.log( parseInt(container.style.width) );
console.log(window.getComputedStyle(h1).display);