w Praktyce
9 godz. 47 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperW 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.
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.
Trick czwarty to bardzo ciekawy i przydatny temat.
Mianowicie jak załadować obrazki na naszej stronie w tle jak widzisz mam tutaj przycisk wczytaj obrazki
i w kodzie html wygląda to następująco na stronie tutaj nic nie ma oprócz tego przycisku właśnie load images
wczytaj obrazki i teraz w skrypcie mamy ten przycisk tutaj pobrany i mamy również tablicę z adresami
URL dwóch obrazów.
Teraz przypisałem do tego przycisku na kliknięcie czyli on click tą funkcję show images która tutaj się znajduje.
Robimy tutaj proste rzeczy więc szybko Ci je wytłumaczę.
Otóż tworzę sobie nowy fragment dokumentu aby za każdym razem kiedy chce wczytać obrazek nie wstawiać
go na stronę.
Stawiam go do fragmentu dokumentu a później dopiero ten fragment.
Stawiam na stronę.
Następnie odwołuje się do tej tablicy i iteruje po wszystkich jej elementach dla każdego elementu.
Mam tutaj zmienną URL czyli będzie to taki oto string.
Później ten string tworzy nowy element img co jest niesłychanie ważne.
To w momencie kiedy do img wpisujemy atrybut src już przeglądarka zaczyna pobieranie takiego obrazu.
Nie musimy tego elementu wstawiać na stronie.
Natomiast zauważ co robię tutaj wstawiam sobie ten nowo stworzony obrazek do document fragment i dopiero
kiedy zakończymy tę pętlę w tym fragmencie documentu będziemy mieli dwa obrazki.
One już są pobierane i wstawiam ten fragment dokumentu na stronę.
Zobaczmy jak to będzie działać.
Przejdziemy jeszcze do panelu Network który fajnie nam to wczytywanie będzie pokazywał wciskam wczytaj
obrazki jak widzisz one zostały wystawione na stronę.
Ale widzimy jak one się wczytują a więc raz jeszcze możemy to zrobić odświeżę.
Widzimy moment wczytywania tych obrazków natomiast chciałbym teraz zrobić tak aby te obrazki wczytały
się w tle.
I kiedy będą gotowe dopiero zostały wstawione na stronę.
W tym celu stworzymy sobie funkcję którą nazwę preload images i wrzucę ją teraz tutaj.
Funkcja wygląda następująco szybko ci ją wytłumaczę.
Jako pierwszy parametr będzie przyjmować tablice z obrazkami taką właśnie jak tutaj.
A jako drugi funkcję która ma się wykonać kiedy wszystkie obrazki się załadują.
Teraz tworzę zmienną counter równą 0 zmiennej length zapisuje długość tej tablicy w tym przypadku będzie
to 2 i następnie znowu tworzę fragment dokumentu.
Teraz co jest ciekawe.
Tutaj będziemy mogli przekazać funkcję jak wspomniałem i mamy taką funkcję count która sprawdza czy counter
jest już równy length.
I teraz co ciekawe przejdziemy niżej.
Znowu iteruje po wszystkich obrazkach.
Zauważ dokładnie robię to co wcześniej tworzę nowy obrazek przypisuje mu tutaj zdarzenie onload do którego
za sekundę wrócę.
Natomiast tworzę nowy obrazek przypisuje mu src na url i wstawiam go do fragmentu dokumentu ale nie
wstawiam nigdzie na stronę.
Natomiast przypisałem mu zdarzenie on load czyli kiedy przeglądarka pobierze sobie taki obrazek wywoła
tę funkcję.
I teraz jest to funkcja count która znajduje się tutaj.
Ma ona dostęp do zmiennej counter czyli kiedy pierwszy obrazek się wczyta wykonamy funkcję count i ona zwiększy
nam counter.
Czyli mamy zero.
Ona zrobi plus plus counter czyli 1 i sprawdzić czy 1 jest równe 2.
W tym przypadku nie jest więc nic się nie stanie kiedy drugi obrazek wczyta znowu funkcja się wykona
sprawdzimy sobie tutaj.
Plus plus counter czyli plus plus 1 to jest 2 czy jest równe 2.
Tak więc wykonaj funkcje dopiero w tym momencie czyli ta funkcja przekazana tutaj wykona się kiedy
wszystkie obrazki się wczytają i zauważ że wywołujemy tę funkcję i przekazujemy jej również ten fragment
dokumentu w którym będą obrazki aby móc je wstawić na stronę.
I teraz wystarczy że po kliknięciu wysyłamy metodę show images którą teraz tutaj wrzucę.
Jak widzisz ona wywoła funkcję którą przed momentem stworzyliśmy preload images przekażę tutaj imgs czyli
tablicę zapisaną na samej górze a jako drugi parametr czyli funkcję do wywołania po wczytaniu wszystkich
obrazków przekaże taką oto funkcję pokazałem ci że ta funkcja będzie otrzymywać document fragment więc
możemy go wstawić na stronę zobaczmy jaki będzie efekt wciskam wczytaj jak widzisz tutaj obrazki się
wczytują ale na stronę zostaną wystawione dopiero wtedy kiedy się wczytają.
W tym momencie moglibyśmy tutaj dodać na przykład jakiś preloader.
Mam nadzieję że technika dla ciebie ciekawa i być może kiedyś z niej skorzystasz.