JavaScript: Śledzenie postępu
w Praktyce
9 godz. 47 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe i Domkniecia
- Format danych JSON oraz praca z AJAX
- Cookies
- Wyrazenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilosc sztuczek i dobrych praktyk
- I wiele, wiele wiecej!
Witaj w kursie JavaScript w Praktyce!
W pierwszym rozdziale tego kursu poznasz bardzo dokładnie koncepcje programowania zorientowanego obiektowo. W jednej z lekcji, omówimy wszystkie z nich na przykładzie pseudo-kodu, niezwiązanego bezpośrednio z językiem JavaScript. Dzięki temu zrozumiesz, jak realizowane jest programowanie obiektowe w wielu popularnych językach programowania. Dowiesz się czym jest klasa, obiekt, instancja, właściwości, metody, a także zrozumiesz takie pojęcia jak dziedziczenie, polimorfizm, abstrakcja czy enkapsulacja. Następnie przejdziemy już do języka JavaScript i do zrozumienia tego, w jaki sposób powyższe koncepcje są w nim zaimplementowane. Język ten nie jest bowiem w 100% klasycznie obiektowy, jak np. język PHP. Co jednak bardzo istotne, JavaScript implementuje tzw. dziedziczenie prototypowe, którego bardzo dogłębne zrozumienie, gwarantuje zrozumienie całego języka JavaScript. Dowiesz się zatem czym są konstruktory i jak je tworzyć, a także jak korzystać z prototypu funkcji. Dzięki temu będziemy mogli wykorzystać obiektowość do własnych celów, co później w praktycznych przykładach uczynimy.Na przestrzeni kilku lekcji zobaczysz krok po kroku, jak w języku JavaScript zaimplementować dziedziczenie wielokrotne. Taka wiedza absolutnie otwiera oczy na zależności rządzące obiektami w tym języku. Dowiesz się również jak rozszerzać wbudowane konstrukcje języka JavaScript czy Obiektowego Modelu Dokumentu, a także kiedy powinniśmy to robić. Omówimy problemy, jakie mogą się pojawiać przy korzystaniu ze słowa kluczowego this, a także sposoby ich rozwiązania. Poznasz 3 bardzo ważne metody funkcji: call, apply i bind.JavaScript ma wiele specyficznych cech, a jedną z nich są tzw. domknięcia. W jednym z rozdziałów zobaczysz, do czego one służą i kiedy powinniśmy z nich korzystać. Dopełnimy tym również wiedzę związaną z programowaniem obiektowym i tzw. prywatnością.Rozdział o obiektowości został celowo umieszczony na samym początku kursu, gdyż zrozumienie tych koncepcji pozwala patrzeć zupełnie inaczej na wszystkie pozostałe. Po tym rozdziale przejdziemy do omówienia bardzo popularnego, lekkiego formatu wymiany danych JSON. Dowiesz się jak wygląda składnia tego formatu, a także jak współpracuje on z językiem JavaScript.Następnie przejdziemy do bardzo ekscytującego tematu, jakim jest technologia AJAX. Dzięki niej możemy wysyłać zapytania do serwera i pobierać dane, bez przeładowywania witryny. Do zrozumienia AJAXa niezbędne jest jednak rozumienie działania protokołu HTTP, na którym opiera się sieć www. Z tego powodu, jedna z lekcji została w 100% poświęcona HTTP i dowiesz się z niej jak wysyłane są żądania i odpowiedzi, a także tzw. nagłówki, które będą dla nas niezwykle istotne. Chwilę później omówimy również bardzo ważne mechanizmy: Same- origin policy i CORS, które blokują możliwość wysyłania żądań AJAX do pewnych serwerów. Kiedy już będziesz rozumiał te niezwykle istotne koncepcje, przejdziemy do napisania pierwszego kodu, wysyłającego asynchroniczne żądanie do serwera. Następnie dowiesz się jak wysyłać, a także odbierać dane z serwera, umieszczać je na stronie oraz śledzić postęp zarówno wysyłania, jak i pobierania danych.W tym rozdziale na przestrzeni kilku lekcji napiszemy swoją własną bibliotekę AJAX, która pozwoli w niezwykle łatwy sposób wysyłać i odbierać dane. Skorzystamy w niej już w kolejnej lekcji, gdzie zobaczysz, jak wysłać wiadomość e-mail z użyciem AJAX i PHP po stronie serwera. Gotowy skrypt, będziesz mógł umieścić na własnej stronie internetowej. Na zakończenie tego rozdziału omówimy również dokładnie niezwykle sprytną technikę o nazwie JSONP, które pozwala wysyłać tzw. żądania “cross-origin”. Przekonasz się dlaczego taka technika powstała i jak współpraca klienta i serwera potrafi obejść zabezpieczenia przeglądarek.Kolejnym tematem omówionym w kursie będą Cookies, czyli tzw. ciasteczka. Dowiesz się czym są, w jakim celu istnieją, a także jak są ustawianie przez serwer. Co ciekawe, również z poziomu języka JavaScript będziemy mieli do nich dostęp, a zatem zobaczysz jak je ustawiać i odczytywać. Na tym etapie przyda nam się wiedza zdobyta w lekcji o protokole HTTP.W kursie znajdziesz również rozdział poświęcony w 100% wyrażeniom regularnym. To mechanizm języka, który pozwala dopasowywać tekst do definiowanych przez nas wzorców. Wyrażenia regularne potrafią być bardzo zaawansowane i odstraszać, dlatego rozłożymy je na czynniki pierwsze, byś dokładnie je zrozumiał. Na przestrzeni wielu lekcji dowiesz się jakie są specjalne symbole wykorzystywane przy wyrażeniach regularnych, czym są kwantyfikatory, kotwice czy np. grupowanie. Następnie przejdziemy do wykorzystania wyrażeń regularnych w języku JavaScript. Poznasz zarówno metody obiektu RegExp jak i te dostępne na obiekcie String. Dzięki nim będziemy mogli wyszukiwać np. adresów e- mail w podanym tekście, usuwać je lub zamieniać na coś innego. Jako praktyczny projekt, stworzymy “Antybluzgacz”. Wykorzystamy do tego celu programowanie obiektowe, a sama aplikacja będzie pozwalała filtrować wpisywany przez użytkownika tekst wiadomości i wyłapywać w nim niecenzuralne słowa. Wszystkie z nich zamienimy na przypadkową reprezentację znaków, np. $#!@%^. Ten projekt pokaże Ci nie tylko jak korzystać z wyrażeń regularnych, ale także jak profesjonalnie pracować z kodem JavaScript.W przedostatnim rozdziale tego kursu znajdziesz lekcje związane z dobrymi praktykami pracy. Omówimy tzw. “strict mode” języka JavaScript, zagadnienia związane z minifikacją i konkatenacją skryptów, sprawdzaniem poprawności pisanego kodu oraz delegacją zdarzeń DOM.Na końcu kursu znajdziesz 10 krótkich lekcji z serii Tips & Tricks, które przybliżą Ci wiele ciekawych konstrukcji języka JavaScript, a także technik na rozwiązanie różnych problemów. Zobaczysz np. jak wczytać obrazy w tle czy jak wyświetlić na pasku tytułowym witryny migające powiadomienie.Podsumowując, kurs ten jest dopełnieniem wiedzy z zakresu języka JavaScript i Obiektowego Modelu Dokumentu z kursu “JavaScript od Podstaw”. Poprzedni kurs nie jest wymagany, lecz jego przerobienie z pewnością pozwoli dużo lepiej przyswoić wiedzę z tego kursu, gdyż były one przygotowywane równocześnie. Oba te materiały, pozwolą od zera, wskoczyć na naprawdę wysoki poziom rozumienia języka, a także dobrych praktyk pisania kodu.
Kurs JavaScript w Praktyce to między innymi:
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe
- Domknięcia
- Format danych JSON
- Praca z AJAX
- Cookies
- Wyrażenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilość sztuczek i dobrych praktyk
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Do tego kursu mogą jednak przystąpić wszystkie osoby, które znają już podstawy języka HTML, CSS i JavaScript i chcą poszerzyć swoją wiedzę, a także spojrzeć zupełnie inaczej na ten język.
W tej lekcji pokażę ci w jaki sposób możemy śledzić postęp pobierania oraz wysyłania danych z i do
serwera.
Przejdźmy najpierw do skryptu chcę Ci pokazać co już tam mamy.
Otóż mamy obiekt xhr i data.
To co mieliśmy wcześniej robię dokładnie to samo co w poprzedniej odbiesz PHP robi dokładnie to samo
czyli zwraca nam po prostu tekstową reprezentację tej tablicy i wygląda to następująco widzisz to tutaj
natomiast stworzyłem jeszcze dwie zmienne download progress i upload progress jak widzisz one pobierają
jakieś elementy download i upload zaraz się je pokaże.
Jak widzisz tutaj znowu do form data która już Ci przedstawiłem przekazujemy sobie pewne dane i je
wysyłamy.
Natomiast download i upload progress są to takie oto elementy.
Jest to element progress dostępny w HTML 5 więc we wszystkich nowoczesnych przeglądarkach będzie działał
i on jest o tyle ciekawy że przyjmuje taki parametr jak max.
Możemy ustawić 100 aktualna wartość 0.
Tak to na stronie wygląda.
Tak wygląda domyślnie ten element nie ostylowałem go w żaden sposób.
Jeżeli tutaj zmienię wartość np. na 20 to wygląda to w ten sposób czyli w zależności od systemu.
Może to troszkę inaczej u ciebie wyglądać taki pasek postępu ale co ciekawe kiedy bierzemy go w JavaScript
tak jak ja zrobiłem to tutaj do zmiennej to możemy się do tego odwołać kropka value i taką wartość zmieniać.
Dzięki temu będzie tutaj takie ładowanie się nam pokazywać w naszym przypadku mamy mało danych które
są bardzo szybko wysłane do lokalnego serwera więc nie zobaczymy jakiegoś płynnego postępu ale gwarantuję
ci że to co ci pokażę sprawi że jeżeli będziesz większe dane wysyłał do serwera który faktycznie jest
gdzieś w internecie to będziesz to widział.
I teraz jak możemy to zrobić najpierw zajmiemy się pobieraniem.
Otóż w lekcji wprowadzającej do Ajax tam gdzie wysłaliśmy pierwsze żądanie pokazałem ci że możemy
przypisywać pewne zdarzenia takie jak on ready state change.
Wśród tych zdarzeń które Ci pokazałem było też zdarzenie on progress w zasadzie nazwa zdarzenia to jest
progress i możemy je przypisać poprzez on progress lub add event listener oczywiście jeżeli przypiszemy to w ten sposób
to tylko raz możemy z niego skorzystać czyli tylko raz możemy takie zdarzenie przypisać tylko jedną
funkcję.
W przypadku add event listener możemy wiele razy takie samo zdarzenie przypisywać a więc on progress to
będzie funkcja która przyjmuje tutaj oczywiście event i więc do niego się będziemy odwoływać i chce ci go
pokazać teraz w konsoli.
Wysyłamy standardowo żądanie zobaczmy co się stanie.
Jak widzisz mamy taki oto event XML http request progress event czyli tak nazywa się konstruktor naszego eventu.
Gdybyśmy tutaj wpisali e kropka constructor. Na tym etapie jeszcze Ci tłumaczę tylko po to abyś za każdym
razem kiedy robimy coś w tym jakby natywnym JavaScript bo to przecież nie jest obiekt który sami stworzyliśmy
abyś widział ciągle te prototypy.
I jak to działa.
Czyli taki event.
Co ciekawe ma różne informacje bardzo podobne do eventu przy kliknięciu itd.
Właśnie z tego powodu że mamy jakąś nadrzędną klasę constructor event a potem różne inne eventy więc
możesz sobie pomyśleć że taki event dziedziczy z eventu tego nadrzędnego poprzez prototypy tak jak już
Ci pokazałem ale on oprócz tego ma jeszcze swoje bardzo ważne dane do których się będziemy chcieli teraz
odwołać.
Te bardzo ważne dane o których mówię.
Jest to przede wszystkim loaded.
Czyli ile już danych zostało w czytanych następnie Total czyli wszystkie dane.
Powiedzmy że to mogłoby być 10 tysięcy a w momencie kiedy się odpaliło to zdarzenie loaded byłoby powiedzmy
60 tutaj zdarzenie odpaliło się tylko raz bo mamy mało tych danych więc od razu loaded jest 60.
Total to również jest 60.
Jak widzisz type progress.
Czyli mamy tutaj kilka ciekawych informacji te które nas interesują to właśnie loaded oraz total.
I teraz jak możemy sobie z tego obliczyć ile procent zostało wczytanych.
Otóż możemy przejść sobie tutaj i napisać percent czyli procent i odwołamy się do e loaded dzielone przez etotal,
czyli załóżmy że tutaj mamy 60 wczytało się a total to będzie 100.
To z tego zostanie nam wyliczone coś takiego 60 dzielone przez 100 czyli 0:6 a więc jeżeli chcemy to
mieć w procentach to jeszcze razy 100.
Musimy to wszystko zrobić.
Kolejność działań jest poprawna ale żeby to lepiej wyglądało możemy to w ten sposób opleść.
Natomiast jest jedna bardzo bardzo bardzo ważna rzecz otóż abyśmy w ogóle mogli to obliczać to ten event
musi mieć na ten temat informację i ma on pewną właściwość która nazywa się length computable bo muszę ją
tutaj teraz znaleźć.
Jak widzisz jest tutaj.
Czyli czy możemy obliczać w ogóle tę wartość.
I teraz mamy tutaj true.
Więc sprawdzimy sobie w if to skopiuje if e length computable możemy napisać równa się true ale nie musimy
jeżeli to będzie spełnione jeżeli nie.
Czyli tylko wtedy kiedy możemy to obliczać kiedy te wartości są już przypisane to tylko wtedy chcemy
utworzyć zmienną percent.
Mamy tutaj już procenty możemy zrobić console log percent.
Zobaczmy jak widzisz od razu 100 procent ale tak jak ci wspomniałem jeżeli to wolniej będzie się pobierać
będziemy mieć więcej danych.
Taki event wielokrotnie się odpali i mielibyśmy tutaj np. 55 70 i np. 100 proc. Tu mamy od razu 100.
Natomiast to możemy teraz przypisać do download progress czyli do tego elementu mamy go pod zmienną
właśnie dProgress więc piszę to tutaj jej value bo tak możemy się do tego odwołać równa się percent
w ten sposób.
I teraz kiedy odświeżymy to jak widzisz od razu mamy tutaj 100 ale tak jak wspomniałem to byłoby zmieniane
i byłoby fajnie ładowane.
Teraz rzecz podobną możemy zrobić z wysyłaniem tylko jak to możemy zrobić.
Nie mamy takiego eventu jak on upload ale zajrzymy sobie co znajduje się w xhr czyli w naszym naszej
instancji zerknijmy do środka i okazuje się że tutaj oczywiście są te wszystkie zdarzenia możemy je
przypisać ale jest również coś takiego jak upload.
Jest to kolejna instancja obiektu utworzona z takiej jakby klasy XML http request upload czyli XML http request to jest
ten nasz xhr.
A tutaj jest jakiś kolejny obiekt upload gdybyś to wpisał w internecie to znowu np. na Mozilla Developer
Network znajdziesz opis takiego obiektu.
Niemniej jednak on wygląda bardzo podobnie do tego co mieliśmy tutaj czyli jest to bardzo podobny obiekt
do obiektu XML http request ale nie ma on tutaj jedynie zdarzenia
on ready state change. Jak widzisz możemy przypisywać za tym zdarzenia również on abort on error itd
w przypadku wysyłania ja chcę tutaj tylko przypisać to do pProgress czyli odwołamy się do xhr kropka
upload będziemy mieli ten obiekt i następnie do on progress w dokładnie ten sam sposób czyli to co miałem
tutaj sobie skopiujemy.
I tutaj odwołamy się do upload.
Kropka on progress.
No i dokładnie tak samo tylko tutaj do innego elementu progress chcemy to przypisać i to nam obsłuży
wysyłanie.
Czyli na początku my wysyłamy dane więc to się dzieje na początku a później otrzymujemy z powrotem dane
więc ten event jest odpalany tutaj błyskawicznie się to wykona jak widzisz ale znowu tutaj byłoby to
po troszku wczytywane.
Mam nadzieję że już wiesz jak śledzić pobieranie i wysyłanie danych zapamiętaj tą ważną rzecz że pod
xhr jeżeli zajrzymy to mamy również obiekt upload na którym również można w odpowiedni sposób reagować
przypisując jak widzisz odpowiednie zdarzenia.