JavaScript: Postęp przeczytania artykułu
od Podstaw
9 godz. 20 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Najważniejsze konstrukcje jezyka JavaScript
- Obiektowy Model Dokumentu i DOM API
- JSON i Ajax
- Nowości z EcmaScript 6
- Praca z npm i snowpack
- 5 praktycznych projektów
Moc języka JavaScript
JavaScript to język programowania, który napędza niemal wszystkie strony internetowe. Dopełnia on technologie HTML i CSS, za pomocą których tworzymy strukturę i wygląd dokumentu. Co jednak w sytuacji, gdy chcemy po kliknięciu w wybrany przycisk wyświetlić powiększone zdjęcie lub wczytać dodatkowe dane z serwera? To właśnie w takich sytuacjach przydaje się język JavaScript i tzw. DOM API, dostępne w przeglądarce. Jak się przekonasz, możliwości nowoczesnych przeglądarek w połączeniu z tym językiem są naprawdę ogromne.
Najważniejsze konstrukcje języka
Język JavaScript może być używany nie tylko na stronach internetowych. Z tego powodu, w kursie omówimy najpierw najważniejsze konstrukcje tego języka, które są niezależne od platformy uruchomieniowej. Dzięki temu zbudujesz fundamenty niezbędne do tego, by wykorzystać ten język np. w środowisku Node.js. Krok po kroku omówimy sposoby tworzenia zmiennych, dostępne typy danych i operatory. Następnie zobaczysz jak tworzyć tablice i obiekty, z jakich instrukcji warunkowych i pętli możesz korzystać, a także jak tworzyć własne funkcje. Przekazywana wiedza uwzględniać będzie nowości, które pojawiły się w języku wraz z rewolucyjnym standardem EcmaScript 6 (ES6).
Obiektowy Model Dokumentu
Sam język JavaScript to nie wszystko, by tchnąć ducha w strony internetowe. Z tego powodu, przeglądarki internetowe udostępniają tzw. DOM API. To interfejs, który z użyciem języka JavaScript pozwala na manipulację treścią i wyglądem strony. W kursie bardzo dokładnie omówimy czym jest Obiektowy Model Dokumentu, a także jak z nim pracować. Zobaczysz jak tworzyć nowe elementy HTML i wstawiać je na stronę, jak modyfikować ich treść, atrybuty, style czy klasy CSS. Poznasz sposoby na odczytywanie położenia elementu na stronie i jego wymiarów, które będą niezbędne w wielu sytuacjach. Dowiesz się także, jak przypisywać obsługę zdarzeń w przeglądarce, by np. wywołać własną funkcję, gdy ktoś kliknie w wybrany przez Ciebie przycisk.
JSON i Ajax
JSON to popularny format wymiany danych, a Ajax to potoczna nazwa dla asynchronicznych zapytań HTTP, które wysyłać możemy z poziomu kodu JavaScript. Dziś niemal każda strona internetowa wykorzystuje te technologie. W niektórych przypadkach jako dopełnienie podstawowej funkcjonalności witryny, a w innych jako główny motor napędzający stronę. Jeśli kiedykolwiek widziałeś, jak na stronie internetowej jakaś treść "doczytuje" się np. podczas przewijania - widziałeś w praktyce Ajax. W jednym z rozdziałów kursu zobaczysz, jak pracować z tym formatem, a także jak wysyłać wspomniane zapytania do serwera.
npm i bundlery kodu
Choć kurs który masz przed sobą, jest kursem dla początkujących, to aby zrozumieć jak działa język JavaScript i jak z nim się współcześnie pracuje, omówimy dwa ważne tematy - zarządzanie zależnościami i bundlowanie kodu. Dowiesz się czym jest npm i jak z jego pomocą pobierać paczki gotowego kodu z internetu, a także jak sprawić, by bez trudnu dołączać je do własnego kodu. W tym celu skorzystamy z narzędzia snowpack, które pozwoli nam także na optymalizację kodu przed jego wypuszczeniem w świat. Na tym etapie omówimy również jak działają moduły ESM, pozwalające dzielić kod na mniejsze części.
5 praktycznych projektów
Kurs podzielony został na możliwie krótkie lekcje, do których w każdej chwili możesz wrócić. Jeśli zatem zapomnisz jak odczytywać wymiary elementu na stronie, szybko odnajdziesz odpowiednią lekcję. Czym jednak była by sama teoria i proste przykłady, bez pokazania, jak połączyć je w całość i wykorzystać w praktyce? Dobra wiadomość jest taka, że w kursie stworzymy aż 5 praktycznych projektów, wykorzystujących zdobytą wcześniej wiedzę. Najpierw napiszemy program losujący Dużego Lotka, następnie dynamiczny pasek postępu przeczytania artykułu, dymek pojawiający się nad elementem po najechaniu na niego myszą, wygenerujemy tabelkę w użytkownikami na podstawie danych JSON, a na koniec tworzymy prosty odtwarzacz wideo, z możliwością pauzowania i przewijania filmu.
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 nie jest wymagana, ale zalecana jest podstawowa wiedza z zakresu samego programowania (czym są zmienne, pętle, funkcje itd.). 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 i zacząć korzystać z nowoczesnych frameworków.
W tej lekcji wykonamy praktyczny projekt,
a będzie to taki pasek postępu przeczytania artykułu.
Coś, co można często spotkać na stronach internetowych.
I zauważ, że taki pasek już tutaj u góry mam,
natomiast on jest tutaj wstawiony w taki sposób sztywny i ustawiony na 30%.
Jak mu zrobimy inspect to zobaczysz, że
jest to div z klasą edu-progress i w środku jest drugi div, który ma przypisane
liniowe style 30% I my będziemy chcieli zrobić tak, że w
momencie jak będziemy scrollować tą stronę to chcemy wyliczyć jakby ile procent strony
zostało przescrollowane i taki procent przypisać właśnie do tego elementu.
Wtedy ten pasek będzie się przewijał w
jedną i w drugą stronę jak będziemy wracać.
Natomiast będziemy chcieli zrobić ten projekt według założeń, które wypisałem.
Są one tutaj.
Czyli na początek będziemy chcieli
dynamicznie taki pasek utworzyć, bo drogi są dwie.
Jeżeli ja go wstawiłem tutaj na stronę, to moglibyśmy sobie teraz wyszukać tego elementu
no i potem do niego dodawać ten odpowiedni width.
Natomiast chciałbym żeby nasz kod był dynamiczny, a więc aby po podłączeniu tego
skryptu do strony taki element był tworzony automatycznie, żeby ktoś nie
musiał wstawiać już tutaj takiego kodu HTML, ale tylko podpiąć nasz skrypt.
Zatem będę chciał wykomentować sobie ten element, żeby on już nie był brany pod uwagę i
utworzyć taki element dynamicznie, a następnie wstawić go na początku body.
Jeżeli chodzi o style to możesz sobie
zerknąć, że ten element główny jest pozycjonowany jako fixed, czyli zawsze
będzie u góry strony, nieważne ile przescrollujemy,
teraz on zniknął, bo go wykomentowałem,
a ten, który jest w środku ma ustawione width na 0, czyli szerokość 0, bo będziemy po
prostu przypisywać jego szerokość dynamicznie.
Zajmijmy się zatem pierwszym punktem,
czyli stwórz element paska i wstaw go na stronę.
Zatem utworzę sobie stałą, którą nazwą progress.
Ta nazwa jest dowolna i za pomocą document.createElement,
które już Ci pokazywałem w osobnej lekcji
w tym kursie utworzymy div.
Następnie będę chciał utworzyć ten element wewnętrzny, który tam był i nazwiemy go
progressInner i tak samo utworzymy sobie div
i musimy przypisać im odpowiednie klasy tak jak w css.
Edu-progress i edu-progress_inner
tak to nazwałem.
A więc odwołamy się do progress i albo za
pomocą classList.add, albo jeżeli wiemy, że
nie chcemy dodawać tylko jednej klasy, ale ustawić po prostu cały atrybut class, to
możemy powiedzieć po prostu className i przypiszemy edu-progress,
a do tego drugiego progressInner.className przypiszemy edu-progress__inner.
No i teraz jeszcze mamy tutaj wstaw go na
stronę. Więc chcemy wstawić ten element na stronę, więc odwołamy się do body
document.body to jest taki skrót, z którego ja korzystam albo document.querySelector
body możesz wpisać i za pomocą metody prepend wstawimy go na początku body.
Niemniej jednak to nie ma znaczenia, bo jest pozycjonowany jako fixed, więc czy on
będzie na początku body czy na końcu on będzie wyglądał identycznie,
będzie się pojawiał w tym samym miejscu,
ale ja chcę go dodać na początku, więc powiemy progress.
Niemniej jednak tutaj jeszcze jeden krok musimy zrobić, bo stworzyłem progress i
progress_inner, ale ten progress_inner musimy włożyć do elementu progress.
Więc zanim to wstawimy do body zróbmy progress.append
progressInner.
Czyli tyle kodu potrzebowaliśmy, żeby utworzyć ten element dynamicznie,
a nie wstawiać go tutaj w taki sposób po prostu w kodzie HTML.
No ale zobaczmy czy ten element się na stronie pojawia.
Jak widać jest w tym miejscu, w którym być powinien.
I teraz temu elementowi jak przypiszemy odpowiedni width np.
30% to będzie to wyglądać następująco.
I tym będziemy chcieli się zająć w dalszej kolejności.
Żeby to zrobić musimy przypisać zdarzenie scroll do obiektu window.
Dzięki temu za każdym razem jak strona się będzie przewijać, wielokrotnie będzie się
wykonywać nasza funkcja, w której będziemy mogli zawrzeć całą logikę.
Więc napiszemy window.addEventListener i zdarzenie nazywa się scroll,
w ten sposób i tutaj przekazujemy funkcję.
Można ją utworzyć wcześniej i podać tutaj jako referencję, albo można ją utworzyć w
tym miejscu w taki sposób, albo z użyciem zapisu np. z ES6.
Ja wykorzystam funkcję strzałkową.
Pamiętaj jednak, że to nie ma żadnego znaczenia jak tutaj wpiszesz po prostu
function i takie nawiasy będzie działać tak samo.
Dla mnie czytelniejsze są często takie funkcje strzałkowe.
I teraz jak zrobimy console.log przewijam
na przykład, no to zobacz w konsoli przy przewijaniu wielokrotnie
jak widzisz już ponad sto razy wywołuje
się taka funkcja. Więc będziemy w tej funkcji chcieli wyliczyć gdzie jest pasek,
czyli tak naprawdę ile procent dokumentu przewinęliśmy.
Można powiedzieć, że punkt drugi zrealizowaliśmy, więc punkt trzeci będzie
polegał na wyliczeniu właśnie tego postępu przewinięcia dokumentu.
No i teraz zastanówmy się, jak możemy to zrobić.
Powiem Ci od razu, że jak przygotowywałem ten przykład, to oczywiście nie zrobiłem
go w 10 minut, bo trochę się zastanawiałem nad tym jak to powinno działać i metodą
prób i błędów oczywiście to zrobiłem, więc miej to
na uwadze, że często tworząc takie rzeczy po prostu trzeba trochę pokombinować.
Ale jak nie znasz właściwości, które
możesz odczytać, to w zasadzie nic nie wymyślisz.
Dlatego ja Ci w osobnych lekcjach
pokazywałem jak można pewne rzeczy takie jak np. pozycję suwaków odczytywać.
Powiem Ci, że będziemy potrzebowali
odwołania do elementu HTML, czyli do tego głównego elementu,
więc ja sobie chcę to odwołanie pobrać, bo
skoro ta funkcja jak widziałeś w krótkim czasie potrafi się 100 razy wykonać, to
wolałbym w niej za każdym razem nie wyszukiwać na stronie tego elementu HTML
bo jest to takie zadanie, które
przeglądarka będzie musiała 100 razy wykonać przeskakując pomiędzy tym
silnikiem JavaScript a obiektowym modelem dokumentu.
Dlatego lepiej jest wcześniej w zmiennej
sobie zapisać pewne rzeczy, które się nie zmieniają.
A zatem ja sobie to nazwę html i za pomocą
document.querySelector HTML lub skrótem documentElement
mamy odwołanie dokładnie do tego elementu
HTML, czyli do całego dokumentu. Więc nie będę go po prostu pobierał za każdym razem
w tej funkcji, tylko mam już go zapisany w stałej i mogę się do niego odwołać.
I skoro go zapisaliśmy, to będziemy mogli się
do tego odwołać w przeglądarce będę chciał Ci pokazać na czym chcemy pracować.
Czyli chciałbym sobie pobrać wysokość całego
tego dokumentu aż na sam dół, żeby móc to za chwilę wszystko obliczyć.
Więc jak się odwołam do html i np.
byśmy chcieli zrobić sobie clientHeight to zauważ, że zwraca mi tylko 1001.
Na pewno ten dokument jest dłuższy. I pokazywałem Ci w jednej z lekcji, że
możemy odczytać całą wysokość elementu włącznie z tymi scrollami za pomocą
scrollHeight. I to jest dokładnie to co będzie nam tutaj potrzebne i to nam zwraca
2368, czyli to jest wysokość całego tego elementu.
Następnie będziemy chcieli sobie odczytać, ile od góry przewinęliśmy tym paskiem.
Więc to będziemy mogli zrobić za pomocą html.scrollTop.
Teraz mamy 0, ale jeżeli trochę przywinę i odczytam jeszcze raz to już będę miał 201.
No i wydawałoby się, że jak sobie policzę 201 dzielone na 2368, czyli całą
wysokość tego dokumentu razy 100 to mi pokaże ile procent przewinąłem.
No i wydaje się, że tak, że to jest 8%
przewinięcia, więc na razie spróbujmy właśnie w ten sposób się zachować.
Czyli scrollTop i client i scrollHeight
będziemy chcieli sobie pobrać i zapiszę sobie tutaj w takiej zmiennej czy stałej height,
odwołam się do html.scrollHeight,
na razie tylko to i następnie ile przewinęliśmy, nazwę sobie stałą scroll,
jak ile przeskalowano
i będę chciał tutaj podzielić scrollTop, który w konsoli pobierałem przed chwilą
scrollTop, zauważ, że to się będzie wykonywać za
każdym razem jak scrollujemy, więc na początku będzie to 0
potem będą tutaj podstawiane kolejne wartości.
To będę chciał sobie podzielić przez to
height i pomnożyć razy 100 i wyświetlić w konsoli.
Czyli ile procent przewinęliśmy.
Zobaczmy jak to się zachowa.
Mamy 0,
przewijamy
i jak widzimy
coraz więcej, coraz więcej, ale dziwnym trafem dotarliśmy tylko do wartości 57.
No właśnie, dlaczego tak się stało?
Przewinęliśmy do 100%, a mamy wartość tylko 57. No i musimy się nad tym zastanowić.
W zasadzie co my tutaj chcemy wyliczyć.
Musimy od tego wszystkiego i to zrobiłem
właśnie metodą prób i błędów odjąć sobie to, co aktualnie widzimy.
Dlaczego?
Bo my chcemy wyliczyć tak naprawdę, ile procent tego elementu poniżej viewportu,
czyli tego, co nie widzimy, już odkryliśmy.
Czyli zobacz, jeżeli np. przewinę
tyle
to chciałbym tak naprawdę wziąć pod uwagę
tylko tą wysokość i ją porównać z tym paskiem przewijania.
Wtedy te wartości będą poprawne.
Więc musimy sobie od tego co już tutaj
zrobiliśmy, czyli scrollHeight odjąć jeszcze to co widzimy, czyli ten element,
bo można powiedzieć, że on jakby już jest
przescrollowany o tyle, wiem, że to nie do końca jest prawda, ale
to już widzimy, więc chcemy liczyć postęp tylko tego, co dopiero się pokaże.
A jak odczytać wysokość tego, co tutaj widzimy?
Otóż można to zrobić za pomocą window.innerHeight,
to też Ci już pokazywałem
I to zwróci nam 1001.
A zatem jak od całej wysokości dokumentu w
tym miejscu odejmiemy sobie window.innerHeight, to będzie trochę mniejsza wartość
zwrócona tutaj pod height i dopiero to będziemy dzielić w tym miejscu.
Zobaczmy jak to teraz się będzie zachowywać.
Mamy jak widzisz 0%
lecimy sobie tutaj do kolejnych wartości i kończymy na wartości 100%.
Czyli teraz to wszystko działa poprawnie.
No i jeszcze raz podkreślam, że to metodą prób i błędów
czasami takie rzeczy się robi
więc nie martw się, jeżeli będziesz robił
jakieś inne rzeczy i nie od razu wpadniesz na to, jak problem rozwiązać.
I teraz skoro mamy już, jak widzisz taką wartość procentową, ile
przescrollowaliśmy, to dokładnie tę wartość będziemy chcieli ustawić na tym elemencie
jako jego width i to nam całą sprawę załatwi.
Zatem punkt czwarty ustaw szerokość paska postępu.
Wystarczy, że tutaj się odwołamy do progressInner do tego elementu
i jego właściwości width
ustawimy właśnie na scrolled, czyli zinterpoluje tutaj
i musimy dodać, to jest super kluczowe, procent żeby to nam poprawnie działało.
A zatem teraz ta funkcja wywołuje się za każdym razem jak scrollujemy
wielokrotnie to jest przeliczane i jest to zmieniane na tym pasku.
Zobacz jak on się teraz będzie zachowywał. Scrolluje i u góry
fajny
taki różowy pasek się pojawia w zależności od tego ile przescrollowaliśmy,
natomiast jak będę wracał to oczywiście to
width będzie również zmieniane na mniejsze wartości i ten pasek będzie się zwijał.
I w ten sposób stworzyliśmy postęp przeczytania artykułu.
Jak widzisz po dojechaniu do końca ten pasek jest w pełni jakby załadowany
wystarczy, że trochę wrócę i tutaj już te wartości są odzwierciedlane.
To co zrobiłbym na koniec to jeszcze wszystko zawarł bym w takiej funkcji
modułu, żeby te wszystkie zmienne, które utworzyliśmy takie jak na przykład
zobaczmy co tutaj mieliśmy,
powiedzmy w tym miejscu jak progress nie były w globalnym zakresie, a więc cały
ten kod wystarczy, że wytniemy, stworzymy tutaj funkcję anonimową,
wywołamy tę funkcję i wstawimy cały ten kod do środka.
To nam ograniczy zakres zmiennych właśnie w taki sposób, że wszystkie te zmienne
będą wewnątrz tej funkcji, a więc nie przeciętną do globalnego zakresu.
Ale, że ta funkcja się sama automatycznie
wywołuje, to jak widzisz, wszystko działa dokładnie tak samo.