JavaScript: Odczytywanie ciasteczek
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 lekcji poprzedniej wytłumaczyłem Ci jak działają ciasteczka i jak możemy je w krypcie przypisywać a
w tej lekcji pokażę ci jak możemy je odczytywać.
Czyli mamy tutaj dla naszego localhost przypisane takie ciasteczka jak first name
czy session.
Aby je odczytać odwołujemy się do document cookie.
Tak jak wspomniałem nie ma takiej możliwości aby tutaj napisać np. first name itd choć taki mechanizm
od dawna powinien być według mnie dostępny.
Mamy mnóstwo różnych bibliotek w internecie więc polecam Ci z nich korzystać kiedy będziesz potrzebował
poprawnie odczytać każde ciasteczko.
Ale teraz pokażę ci jak możemy zrobić własną widzisz że mamy taki oto ciąg znaków więc aby zrobić własną
funkcję która będzie to odczytywać wystarczy ten ciąg rozbić na takim znaku i spacji ta spacji tu nie jest
obowiązkowa więc nie zawsze się ona pojawi pokaże ci jak możemy to wyrażeniem regularnym zrobić.
Więc przejdźmy teraz tutaj gdzie mieliśmy funkcję set cookie i napiszemy nową którą nazwiemy get cookie i
będziemy mogli jej podać ciasteczko jakie nas interesuje kiedy chcemy odczytać ciasteczko będzie mnie
interesowała wartość np. first name więc tutaj będę musiał to przekazać.
I teraz tak jak wspomniałem będziemy chcieli rozbić ten ciąg document cookie.
Natomiast jeżeli on jest pusty i że jeżeli nie ma żadnych ciasteczek chcemy to sprawdzić to będziemy chcieli
zwrócić czy jeżeli nowy document cookie jeżeli to jest pusty ciąg znaków to zwrócimy null w ten sposób nawet
jeżeli ktoś coś tutaj poda.
Natomiast w przeciwnym wypadku będziemy chcieli sobie stworzyć tablicę arrr i odwołam się do document
cookie.
Jest to string a string ma taką metodę jak split która zamieni go na tablicę.
I tutaj moglibyśmy podać to w ten sposób i poprawnie by nam to zadziałało.
Czyli ten string zostałby rozbity na takich znakach.
Natomiast jeżeli tu nie będzie spacji to nam to już nie zadziała więc tą spacje chciałabym zrobić opcjonalną
i możemy to zrobić za pomocą wyrażenia regularnego jeszcze o tym w tym kursie będę mówił możemy to napisać
w ten sposób czyli średnik.
Tutaj stawiam spację to jest znak i gwiazdka czyli średnik musi być a spacja może być ale nie musi
ta gwiazdka to sygnalizuje.
Jeżeli taką tablicę sobie utworze to teraz tworzę jeszcze obiekt cookies który jest pusty będziemy się
zaraz do niego odwoływać.
Przejdźmy do wyświetlenia tej tablicy jak ona wygląda.
Przejdźmy tutaj i wpiszemy sobie read cookie czy get cookie.
Ok.
Podamy jakąś nazwę np. first name chociaż na razie jeszcze to nie ma znaczenia.
I ta tablica wygląda następująco.
Jak widzisz w ten oto sposób zostało to rozdzielone i teraz każdy taki element tej tablicy będę chciał
jeszcze rozdzielić na first name czyli na tym znaku równa się i zrobimy to już w pętli czyli na tej tablicy
chcę wykonać pętlę na tablicy możemy to zrobić poprzez for each.
Tutaj będzie funkcja która będzie jeden taki element przyjmować więc nazwiemy go cookie po prostu
i cookie to dla nas będzie taki oto string czyli znowu rozbijemy go np. na znaku równa się nadpiszmy tę lokalną
zmienną która tutaj jest więc napiszemy cookie równa się cookie split na znaku równa się chcę to rozdzielić
i teraz w cookie będę miał tablicę która pod zerowym indeksem będzie mieć first name a po pierwszym Jan i chcę
to przypisać do tego obiektu czyli teraz napiszemy.
Cookies czyli ten obiekt u góry cookie zero czyli np. first name równa się cookie 1.
W ten oto sposób natomiast pokazywałem ci w tej funkcji wcześniej że korzystaliśmy tutaj z encode uri component.
Więc teraz kiedy będziemy to z powrotem rozdzielać to musimy również z tego skorzystać.
Tutaj akurat tego nie widać ale decydując to z powrotem tutaj musimy skorzystać właśnie z decode uri
component czyli z odwrotnej funkcji aby po co tam było zamienić np. na średniki czy te znaki specjalne.
Zrobimy to w ten sposób i na końcu będziemy chcieli zwrócić to co ktoś tutaj przekazał czyli jeżeli
ktoś zapytał o first name to my będziemy mieli teraz obiekt w zasadzie to może ja ci go pokażę.
Cookies napiszmy jeszcze raz.
Mamy taki obiekt który mamy first name Jan session.
I tu jest ta wartość.
Czyli chcemy zwrócić cały obiekt ale tylko first name.
Czyli teraz możemy napisać return cookies i tutaj podamy to co ktoś przekazał czyli first name mamy tutaj pod zmienną name.
Jeżeli tam nic nie będzie czyli or czyli null jeżeli ktoś przekaże na przykład last name a tam tego nie było to po to
cookies last name tego nie ma to tutaj będzie wartość fałszywa więc zwrócimy null.
Czy to działa.
I teraz jeżeli napisze get cookie first name to nam to bez problemu działa jeżeli napiszę session to również działa.
Jak wspomniałem jeżeli w produkcji będziesz chciał z tego korzystać te funkcje wypadałoby jeszcze lepiej
dostosować pod specyfikację ciasteczek i w internecie znajdziesz już gotowe dobre biblioteki.
Bardzo minimalistyczne ale takie które są bardzo dobrze przetestowane i pod każdym względem będą dobrze
działać.
Raz jeszcze skorzystajmy sobie może z set cookie.
Postawmy sobie jakieś ciasteczko na przykład last name postawmy na Kowalska Nowak na przykład i teraz
odczytajemy sobie get cookie last name czy to zadziała.
Jak widzisz dokładnie tak się stało natomiast to ciasteczko ta stacja która tutaj była przez encode uri component
jest zakodowane.
A po spowrotem ją dekodujemy i teraz zapamiętaj że ważne jest tylko to iż jeżeli z javascript takie ciasteczka
ustaliliśmy i ono się tutaj znajduje.
Jak widzisz last name tu jest zakodowane to teraz jeżeli otworzymy stronę to ono będzie wysyłane do serwera
np. wtedy kiedy będzie chciała przeglądarka pobrać script js to również w request headers.
Jak widzisz wszystkie te ciasteczka tam załącza i po stronie serwera można je odczytywać.
Dlatego właśnie jeżeli wpadłeś na pomysł że możesz swojej aplikacji kiedy ktoś zaznaczył jakąś opcję
na Twojej stronie np. zapamiętać to w ciasteczku i ponownie jak wejdzie na twoją stronę to możesz to odczytać.
To owszem.
Tak to działa ale nie jest to najlepszy pomysł bo przypiszesz sobie tutaj jakieś ciasteczko które będzie
przesyłane za każdym razem do serwera jeżeli na serwerze go nie potrzebujesz to nie ma to sensu.
I dużo lepiej skorzystać z local storage który jest dostępny w ramach HTML5 w przeglądarkach.
I wtedy zapisujemy sobie dane tekstowe po stronie klienta ale one nie są wysyłane do serwera dlatego
że ciasteczka były przez długi czas właśnie w ten sposób używane aby zapisać sobie jakieś informacje
które nie są potrzebne na serwerze ale są nam właśnie w skrócie potrzebne przy kolejnych wizytach.
Jeżeli chcesz się dowiedzieć jak działa Local Storage to omawiam to w kursie HTML5 i JavaScript.
Techniki zaawansowane.