HTML, CSS, JS - skróty frontendu
HTML, CSS i JS pojawiają się w dyskusjach sklejone, ale każda z tych technologii ma swoją rolę i zadanie. Zobaczmy więc jakie są ich zadania oraz jak współpracują ze sobą.
HTML, CSS, JS - skróty frontendu
Html - struktura
Tak się składa, że czytasz właśnie dokument napisany w html. Czytasz właśnie akapit. Powyżej akapitu znajduje się nagłówek. Po drodze przeczytasz inne akapity, nagłówki, obrazki być może hiperłącza (linki).
Html określa nam strukturę dokumentu, daje nam elementy budulcowe strony. Mamy do dyspozycji różne elementy takie jak:
nagłówki (6 wielkości) - h1,h2,h3,h4,h5,h6
akapity - p (skrót od paragraph)
hiperłącza - a (skrót od anchor, kotwica)
zdjęcia - img
paski - hr (horizontal rule)
i wiele wiele innych...
Wszystkie elementy umieszczone są w strukturze drzewiastej. Znaczy to, że mamy jeden rdzeń, od którego odchodzą odnogi. Zatem mamy pień, od niego odchodzą gałęzie, od niech kolejne gałęzie i tak dalej. Struktura naszej strony może wyglądać tak.
body
sekcja
nagłówek
akapit
akapit
akapit
treść
link
akapit
sekcja
nagłówek
akapit
akapit
Poza elementami, mogą mieć one różne atrybuty - obowiązkowe lub opcjonalne. Spójrz na poniższy kod
Widzimy z przodu tag img(image - zdjęcie). Do tego elementu przypisane są również dwa atrybuty
src - link do zdjęcia
alt - tekst do wyświetlenia gdyby zdjęcia nie udało się pobrać lub gdyby ktoś oglądał stronę na czytniku
Weźmy kolejny przykład
W tym przypadku mamy tag a tzn. hiperłącze (anchor). Mamy również przypisane dwa atrybuty:
href (hypertext reference) - dokąd prowadzi nasz link
target - gdzie ma zostać otwarty ten link, _blank otworzy link w osobnej zakładce
Za pomocą atrybutów możemy również edytować wygląd naszych elementów.
Widzimy akapit(p - paragraph), do którego przypisany jest style. Style w tym przypadku sprawi, że nasz element stanie się czerwony. Niestety z tym podejściem wiąże się pewien problem. Nasz kod staje się odpowiedzialny za wiele rzeczy i jeśli zaczniemy chować wszystkie zasady odnośnie stylowania w atrybucie style zrobi się wielki nieporządek. Przecież my tych zasad możemy mieć naście! Byłoby bardziej elegancko, gdybyśmy mogli to jakoś ładnie opisać np.
Do naszego akapitu ktoś przypisał klasę. Nie chodzi tu o status społeczny, ani gust tylko o sposób, w jaki będziemy się do niej odnosić. Mówiąc wprost, w jaki sposób będziemy odnajdywać ten element i go kolorować. Zamiast przekazywać listę cech (chcę by był zielony, w łuski), opiszemy go w sposób zrozumiały (chcę by był jak dinozaur). W innym miejscu opiszemy jak wygląda dinozaur. Dzięki temu mamy jedno miejsce opisujące strukturę, a inne wygląd.
Nie wyczerpujemy tutaj tematu, w htmlu można robić dużo więcej rzeczy. Ale ostatnia kluczowa dla nas sprawa to fakt, że za pomocą html możemy sygnalizować przeglądarce jakie zasoby chcemy ściągnąć
Powyższy kod mówi przeglądarce, że potrzebny jest arkusz styli css, który jest dostępny pod linkiem main.css.
I tak oto płynnie przechodzimy do tematu css.
CSS- kaskadowe arkusze styli
Bez żadnego wstępu o co może chodzić w tym kodzie?
We wcześniej sekcji dowiedzieliśmy się, że p to akapit. Prawdopodobnie chodzi o to, że chcemy aby nasz akapit miał:
kolor czcionki - różowy
rozmiar czcionki - 24 pixele
kolor tła - zielony
Przy pomocy kodu css możemy w swobodny sposób określać jak prezentować się będą nasze elementy strony. Arkusz styli składa się z zasad, które określają do czego się stosują (co zostaje wybrane) oraz jakie zasady aplikujemy np. kolor czerwony czcionki.
Mamy różne rodzaje selektorów, między innymi:
wszystko - każdy element na stronie
po tagu - każdy akapit lub link
klasie - nazwy własne, które mają dla nas sens np. dinozaur, lista-artykulow, lista-artykulow__wpis
złożone - każdy link, który znajduje się w elemencie z klasą lista-artykulow
Dzięki CSS możemy ustawić elementy w przestrzeni(layout), określić cechy ich wyglądu(czcionka, kolory, tła, ramki, cienie). Możemy również zarządzać wyglądem strony w zależności od urządzenia tzw. RWD - responsive web design.
Tak jak HTML ustalał strukturę tak CSS decyduje o wyglądzie naszej strony. Gdyby HTML był elementami naszej twarzy (oczy, brwi, usta, nos), CSS określa ich ustawienie i wygląd (oczy obok siebie, z przerwą po środku, brwi szerokie i ciemne, usta pełne). Niestety piękna twarz nam może czasami nie wystarczyć i warto byśmy mogli coś przy jej pomocy zrobić. Coś powiedzieć, pogryźć lub zareagować. Pora na ostatni element naszej układanki.
Javascript - programowanie w przeglądarce
Jedna z ludowych definicji programowania to używanie komputera do osiągnięcia swoich celów. Większość z celi, które możemy uzyskać przy użyciu przeglądarki możemy osiągnąć przy użyciu javascriptu.
Javascript w przeglądarce pozwala nam na manipulowanie obecnie wyświetloną stroną. Znaczy to również, że może bezpośrednio wpływać zarówno na strukturę (html) jak i style(css). Lista rzeczy, które możemy zrobić przy użyciu javascriptu jest bardzo szeroka.
Możemy po wejściu na stronę ściągnąć dodatkowe dane z zewnętrznego serwisu i je wyświetlić (frontend vs backend).
Możemy sprawdzić poprawność formularza przez wysłaniem do backendu i wyświetlić odpowiedni komunikat.
Możemy zapisać preferencje użytkownika by po ponownym wejściu na stronę użyć ciemnego motywu.
Możemy wyświetlić inną stronę bez przeładowania strony (client side routing).
Możemy ściągać kolejne elementy listy gdy użytkownik dojedzie do końca strony, by uniknąć ściągania wszystkie (lazy loading).
Możemy w zależności od roli użytkownika (admin, zwyklak) wyświetlać odpowiednie sekcje strony.
Skoro można robić wszystko w javascripcie dlaczego nie robić w nim wszystkiego w takim razie? Cóż, niektórzy tak robią. Przesyłają pustą stronę html, ładują skrypt javascript i wszystko robią już w nim. Tworzą w nim zarówno strukturę (html) jak i dodają CSSprzy użyciu javasciptu(css-in-js). Podejście to, jak wszystko, ma swoje wady i zalety. Łatwo się tak programuje i utrzymuje kod w porządku, natomiast w zamian jest on znacznie wolniejszy.
Ale nie jest to takie proste
HTML odpowiada za strukturę naszej strony, CSS jak wygląda, javascript za działanie i.. co tylko sobie wymarzymy.
Celowo pominąłem tutaj wiele niuansów wspomnę tylko o kilku.
Choć nasz kod CSS i javascript uszczegóławia zachowania elementów na stronie, jest wiele domyślnych zachowań. Jako ustawienie domyślne link będzie niebieski i podkreślony, akapit zajmie cała stronę, a przycisk przeładuje stronę jeśli będzie typu submit.
W HTML mamy cała masę znaczników semantycznych, które mają ułatwić programistom, robotom (np. wyszukiwarkom internetowym) oraz czytnikom stron internetowych zrozumienie czym jest dana sekcja.
W CSS mamy całe mnóstwo szczegółów związanych ze specyficznością (w jakiej kolejności aplikują się zasady) i kaskadą (jak style rozlewają się na kolejne rozgałęzienia elementów). Ponadto możemy animować elementy
Natomiast temat niuansów Javascriptu jest tak szeroki, że określmy go tymczasowo mianem magii.
Podsumowanie
Podsumowując relacje html, css i javascript podam jeszcze analogię windy.
HTML określi nam co znajduje się w windzie - drzwi, przyciski, lampka
CSS określi jak rozmieszczone będą elementy i jak będą wyglądać - drzwi po środku, przyciski okrągłe, lampka żółta
Javascript sprawi, że winda działać - po wciśnięciu przycisku pojedzie na odpowiednie piętro, otworzy drzwi, a po 5 sekundach od otwarcia zamknie drzwi