JavaScript: Czym są ciasteczka?
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 odpowiemy sobie na pytanie czym są i jak działają.
Cookies cookies to inaczej mówiąc ciasteczka i możesz zauważyć że od jakiegoś czasu na wielu stronach internetowych
pojawiają się właśnie takie informacje że zapisujemy po stronie klienta pliki cookies czy wyrażasz na to
zgodę więc teraz dowiesz się czy takie pliki Cookies są i w jaki sposób są zapisywane oraz odczytywane.
Ciasteczka są to małe pliki tekstowe które są przechowywane po stronie klienta i one są wysyłane do
serwera z każdym żądaniem http.
Teraz już wiesz czym są żądania HTTP i jak ten protokół działa bo to w tym kursie starałem się przedstawić
i mówiłem również że protokół HTTP jest bezstanowy.
Dzięki temu właśnie że powstały ciasteczka to możemy wprowadzić pewien stan.
To oznacza tylko tyle że jeżeli wyślemy żądanie do serwera i otrzymamy odpowiedź to serwer jakby o przeglądarce
zapomina.
Natomiast jeżeli wyślemy żądanie do serwera z odpowiedzią otrzymamy ciasteczka o czym będzie za moment
to przy kolejnym żądaniu to ciasteczka wyślemy do serwera i serwer może sobie je odczytać i wie że skoro
zostało ustawione to znaczy że już wcześniej się z nami komunikował i w tym ciasteczku różne dane może
sobie zapisać wyobraź sobie że mamy przeglądarkę internetową po drugiej stronie mamy serwer i wiesz
już jak działa komunikacja http a więc wysyłamy z przeglądarki do serwera jakieś żądanie np. pod adres
eduweb pl ukośnik form w tym celu aby się zalogować czyli uzupełniliśmy formularz logowania i przesuwamy takie
żądanie np. post do serwera i przesyłamy tam dane logowania.
Powiedzmy że login i hasło jest to raz dwa trzy i serwer sprawdzi czy te dane są poprawne.
Jeżeli tak będzie to może nam odesłać odpowiedź o czym już wiesz i w nagłówkach odpowiedzi również wiesz
już czym są nagłówki HTTP umieści jeden bardzo ważny nagłówek który nazywa się set Cookie tutaj go zaznaczyłem
na czerwono czyli będzie taki nagłówek jak set cookie.
I zauważ że tutaj napisał session równa się jakiś taki długi ciąg potem path i HTTP only o tym będziemy mówić
za chwilę natomiast ciasteczka są zazwyczaj ustawiane właśnie przez serwer chociaż również możemy to
robić z poziomu skryptujavascriptu i są ustawione przez to że z odpowiedzią serwera otrzymujemy specjalny nagłówek
wśród innych nagłówków i wtedy przeglądarka wie że musi ustawić sobie takie ciasteczko teraz przyjrzyjmy
się składni tego nagłówka set cookie który z serwera do nas odsyłany.
Na początek będziemy mieli wartość takiego ciasteczka przed momentem widziałeś że było to np. session
równa się jakiś ciąg znaków to może być równa się Piotr.
Itd.
Za chwilkę jeszcze o tym powiemy później średnik to jest bardzo ważne że te poszczególne parametry będą
tutaj oddzielone średnikiem.
Pamiętaj cały czas to jest treść nagłówka który został do nas przesłany jest to po prostu tekst następnie
będzie parametr max age.
Aha i dlaczego jest tutaj w nawiasach kwadratowych.
Dlatego że jest on opcjonalny.
Tak go oznaczyłem czy nie on wcale być nie musi.
Jeżeli jest to nie mamy już tutaj tych nawiasów kwadratowych.
Max Age i w sekundach.
Jak długo to ciasteczko.
Po stronie klienta ma być przechowywane następnie może być domain.
I tutaj będzie domena o tym powiemy jeszcze za moment.
Następnie może być path, czyli ścieżka.
Następnie czy ciasteczko ma być bezpieczne i czy ma to być http only
O tym również powiem za moment.
Teraz przyjrzymy się poszczególnym wartościom value to może być na przykład first name równa się Jan jeśli chodzi
o max age to będzie to czas w sekundach jak długo przeglądarka ma takie ciasteczko przechowywać i wysyłać
z każdym żądaniem do serwera oprócz Max Age może być ustawiony expires równa się.
I tutaj podajemy datę w takim właśnie formacie.
Potem pokaże ci jak możemy ją zapisać czyli może to być Max Age w sekundach albo jest expires i tam będzie data.
Następnie domain tutaj domena to może być kropka eduweb pl dla różnych subdomen i wtedy będzie pasować na przykład
blog kropka eduweb pl czyli mówimy dla jakiej domeny to ciasteczko ma być wysyłane.
Chodzi tutaj o to że jeżeli z domeny eduweb pl ustawimy ciasteczko kropka pl to kiedy przeglądarka będzie
pobierać jakieś zasoby.
Blog kropka eduweb pl to to ustawione ciasteczko również tam będzie przesyłać.
Następnie ścieżka to może być ukośnik powiedzmy strefa klienta albo po prostu ukośnik dla całej domeny
i również kiedy przeglądarka będzie pobierać np. style CSS gdyby one były pod ukośnik strefa klienta
to jeżeli tak to zapiszemy to po ciasteczko będzie tam wysyłane.
Możemy to również zdefiniować jako ciasteczka dla całej domeny teraz co jest ważne.
Wspomniałem że to co widziałeś wcześniej to jest nagłówek który serwer przysłał do przeglądarki aby
takie ciasteczka ustawiła.
Natomiast teraz z każdym żądaniem przeglądarka będzie wysyłać taki nagłówek do serwera i nie mam tutaj
na myśli z każdym żądaniem jakby o stronę główną czyli eduweb pl.
Ale kiedy będzie pobierać każdy obrazek każdy skrypt wszystko co potrzebuje żądania HTTP to z każdym
takim żądaniem ciasteczka będą przesyłane kiedy ciasteczka wysyła to w nim nie ma już wszystkich tych informacji
które widziałeś przed momentem ale może ono wyglądać następująco czyli first name Jan.
Później dalej może tam być po średniku session równa się itd czyli kilka różnych ciasteczek w jednym
nagłówku prześle oddzielając je średnikami.
Tak jak wspomniałem tutaj brak jest dodatkowych informacji które były w nagłówku set cookie który ustawiał
takie ciasteczko.
I ciekawa informacja.
Limit ciasteczka jest o 4 kilo bajty czyli tyle tekstu może zostać zapisane w jednym ciasteczku po stronie
klienta.
Na koniec przyjrzyjmy się jak możemy w javascript również przypisywać i odczytywać ciasteczka.
Kiedy odwiedzamy się do obiektu document kropka cookie to będziemy mogli odczytać ciasteczka i będzie
ono wyglądało w taki sam sposób jak przed momentem Ci pokazałem czyli dokładnie tak samo jak nagłówek
który jest z każdym żądaniem wysyłany do serwera.
Nie ma tutaj tych dodatkowych informacji jak data i tak dalej.
Natomiast kiedy będziemy chcieli przypisać ciasteczko w javascript również odwołujemy się do document
kropka cookie ale musimy użyć pełnego zapisu takiego jak w przypadku nagłówka który z serwera był do
przeglądarki wysłany i na koniec ważna informacja otóż ciasteczka można odczytywać i przypisywać z poziomu
kodu JavaScript jedynie wtedy gdy są spełnione kryteria bezpieczeństwa.
To jest podobne do Same Origin Policy o której w tym kursie już mówiliśmy.
Jednak z pewnymi wyjątkami.
To oznacza że z domeny eduweb pl można przypisać ciasteczko które będzie również wysyłane do pliki eduweb pl.
A pamiętasz że przy same origin policy np. pliki eduweb pl to jest zupełnie inny host i tam nie byłoby
to już spełnione.
A więc ciasteczkami to wygląda troszkę inaczej niemniej jednak nie ma takiej możliwości aby nasz skrypt
który się wczytuje mógł odczytać po stronie klienta u kogoś ciasteczka przypisane np. przez domenę Facebook
kropka com.