JavaScript: Prywatność w JavaScript
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 tak naprawdę kończymy sobie już z rozdziałem o obiektowości w języku JavaScript.
Będziemy z niej korzystać jeszcze w tym kursie.
Natomiast chciałbym wrócić do pewnej rzeczy mianowicie do enkapsulacji.
Starałem ci się na początku poprzedniego rozdziału o obiektowości powiedzieć o wszystkich paradygmatach
programowania właśnie o klasach o enkapsulacji o hermetyzacji
To jest to samo o polimorfiźmie tłumaczyłem Ci na czym one polegają.
A potem robiliśmy w JavaScript przykłady szczególnie z naszymi figurami i dziedziczeniem wielokrotnym.
Gdzie Pokazałem Ci jak to odwzorowujemy na klasę czyli jak wygląda klasa w normalnym języku a w JavaScript
co możemy nazwać klasą a właściwościami metodami polimorfizmem.
Natomiast zaznaczyłem ci wtedy że w JavaScript mamy problem z enkapsulacją czyli z ukrywaniem różnych danych które
są w obiektach.
I teraz Przygotowałem taki obiekt.
Nie wystrasz się nie ma tu nic skomplikowanego.
Mamy obiekt Person i pamiętasz że mówiłem Ci iż jeżeli chcemy aby ktoś widział że te właściwości powinny
być prywatne to używamy podkreśnika.
To jest taka konwencja.
Czyli mamy tutaj first name last name age
i następnie metody bez podkreślników a więc chcemy aby ktoś mógł z nich korzystać.
I teraz zauważ co stanie się kiedy w konsoli wpisze person następnie get name
W ten sposób zostanie nam zwrócony Jan Kowalski.
I właśnie w klasycznych językach obiektywnych moglibyśmy od razu tutaj powiedzieć że to ma być prywatne
i wtedy nie byłoby możliwości aby się do tego odwołać.
Ale dodajemy do tego specjalną metodę która pozwoli to zwrócić.
A teraz wiesz że możemy napisać Person.
Możemy przejść tutaj i odwołać się do zobaczmy co tam było first name
W ten sposób i napisać Piotr i zmieniliśmy to rzeczywiście i teraz jak się odwołam do get name to zostało
zmienione.
A ja specjalnie stworzyłem metody takie jak set name czy set age które mają to zmieniać.
Stworzyłem metodę set name która przyjmuje first name i last name i tutaj odwołuje się do this właśnie tego niby ukrytego
first name go ustawia jeżeli zostało podane więc taka konstrukcja sprawdza jeżeli to będzie miało wartość undefined
to sprawdzamy dalej czyli or to zostanie podstawione z powrotem to co tam już było to jest tylko
po to że jeżeli będę chciał ustawić tylko pierwsze imię zerknijmy sobie Person zróbmy set name i wpisze
Piotr to przejdziemy sobie do funkcji set name tutaj będzie Piotr czyli do this first name podstawimy Piotr
bo jest to wartość prawdziwa natomiast last name nie podałem będzie miało wartość undefined czyli this last name
przejdziemy tutaj.
undefined or.
Tak działa ten operator or to co już tam jest czyli nie będzie po prostu zmian a tutaj zrobiłem podobnie
jeżeli będziemy chcieli ustawić wiek to jeżeli będzie większy od zera to można go ustawić w przeciwnym
wypadku nie.
Ale to nie ma większego znaczenia.
I teraz jeśli się odwołam do get name to wszystko działa.
Zapytasz mnie teraz w jaki sposób możemy ukryć te właśnie właściwości w języku JavaScript.
Jest to obejście problemu bo nie możemy ich normalnie ukrywać.
Ale teraz pokażę ci jak możemy to zrobić.
Otóż skorzystamy z domknięcia przerobimy sobie trochę ten obiekt w zasadzie to ja go mogę skopiować i wykomentować
wklejam to poniżej natomiast ten obiekt który tutaj mieliśmy.
Ja będę chciał sobie wyciąć a tutaj wpisze funkcję i teraz zrobimy taką prostą funkcję oplotę ją nawiasami
okrągłymi na tym etapie pewnie już wiesz że mamy coś takiego bo już to pokazywałem jak anonimowa funkcja
która sama się wykonuje czyli ta funkcja tutaj się wykona i to co ona zwróci przypiszemy do Person.
Więc przejdźmy sobie tutaj otwarłem tą funkcję wkleję całą resztę i napisze tutaj return.
Czyli jeżeli zostawię to w ten sposób to do naszego Person zostanie zwrócone dokładnie to samo co było
tam już wcześniej.
Czyli będzie to po prostu zwykły obiekt funkcja się wykona i zwraca obiekt.
Zerknijmy czy tak to działa.
Person get name na przykład.
Działa to dokładnie w ten sam sposób ale teraz jako że jesteśmy w funkcji możemy użyć domknięcia i to
co tutaj mieliśmy wyrzucimy i użyjemy tutaj var aby tworzyć to jako zmienne słowo kluczowe var
Jeżeli tutaj po przecinku podaje to do każdej z tych zmiennych się odwołuje inaczej przypisali byśmy je
do globalnego zakresu czyli var first name ale oczywiście tu musi być równa się a nie dwukropek jak
w obiekcie i to zakończymy w ten sposób i zauważ w funkcji stworzyliśmy sobie zmienne lokalne na zewnątrz
nie są widoczne z funkcji zwracamy obiekt który będzie miał do nich dostęp.
Ale jeszcze nie teraz.
Mianowicie musimy wszędzie this usunąć w ten oto sposób czyli wszędzie gdzie mieliśmy this.
Ok usuwamy i teraz taka funkcja jak widzisz bo to na pierwszy rzut oka widać Get name zwraca sobie first name
łatwo można sprawdzić że ma do tego dostęp bo wcześniej taka zmienna się tutaj pojawiła.
Tak samo np. set name.
Będziemy chcieli aby ustawiało nam to co tutaj zostało podane.
Albo to co już tam było czyli znowu widzisz że jeśli tutaj pisze First name równa się to odwołuje się
do tej zmiennej a obiekt tylko zostanie zwrócony.
Mam nadzieję że to rozumiesz teraz pod person mamy nic innego jak obiekt zauważ który ma get age get name
get set age i set name bo właśnie z tej funkcji zwróciliśmy obiekt taki w ogóle wzorzec jest nazywany
modułem lub też module z języka angielskiego.
W przypadku Java skryptu.
Ale teraz wszystko będzie działać bo jeżeli się odwołam do person get name działa.
A jeśli napiszę set name spróbuję to zmienić.
na Piotr to teraz po get name znowu to będzie działać.
Czyli set name zostało to tutaj przekazane.
set name się wykonało.
A że ono ma dostęp tutaj do domknięcia to wszystko działa jak należy.
Teraz na końcu pokażę ci jak możemy zrobić enkapsulację
W przypadku programowania obiektywnego bo tutaj stworzyłem taki prosty obiekt również tutaj a w tym
kursie zajmowaliśmy się już programowaniem obiektywnym więc teraz taki przykład również będę chciał
ci pokazać.
Ta funkcja jest tutaj.
Ona się w tym miejscu kończy więc przejdźmy sobie niżej.
Przykład wygląda następująco Mamy Person i zamiast przypisywać bo tutaj wywołujemy sobie tak ten nowy obiekt
to już wiesz przekazujemy Anna Nowak zamiast przypisywać to do this to zapisuje to jako zmienne i dzięki
temu później będziemy się do tego mogli odpowiednio odwołać.
Przejdźmy do przeglądarki do persony 2.
Pierwsze normalnie tutaj moglibyśmy się odwołać do podkreślnik first name.
Teraz tego nie możemy zrobić bo ten obiekt nie ma do this czegoś takiego przypisanego.
Przypisaliśmy tutaj w tej funkcji tylko zmienne lokalne natomiast zauważ jaki się pojawił problem.
Jeżeli się teraz odwołamy to Person 2 get name ono zostanie dla nas zwrócone.
Owszem bo ta funkcja ma do tego dostęp.
Ale jeżeli utworzymy więcej obiektów to każdy z nich będzie powtarzał taką funkcję która jak widzisz
jest identyczna i tego nie możemy niestety zapisać na prototypie.
Myślę że domyślasz się dlaczego więc jest to taki minus w języku JavaScript przez który nie możemy
zrobić takiej pełnej enkapsulacji czyli ukrywania danych jak w językach które są zorientowane obiektowo
w stu procentach.
Teraz jeżeli utworzymy nowe obiekty ta funkcja będzie powielana.
Natomiast jeżeli ja ją zapisze na prototypie Person kropka prototyp Get name to będziemy musieli się
odwoływać do this
Pokażę ci to szybko abyś był pewny o czym mówię.
Widzisz jeżeli przypiszemy sobie person prototype do get name i powiemy zwróć first name i last name no to ta funkcja ma
dostęp do zmiennych w miejscu gdzie jest zdefiniowana czyli jeżeli gdzieś tutaj w naszym zakresie będzie
miała first name i last name to je zwróci ale ona nie ma dostępu do first name które są zapisane w danym obiekcie który jest
tutaj utworzony.
Czyli nie ma dostępu do tych zmiennych które są tutaj więc nam to na prototypie nie zadziała zadziałałoby
tylko wtedy gdybyśmy tutaj napisali this first name i this last name
Ale to wówczas również musiałoby zostać przypisane do this albo moglibyśmy zrobić jeszcze jedną rzecz
której już ci pokazywał nie będę ale po prostu przypisać i również first name i last name do prototypu aby tutaj można
było się do tego odwołać.
Minus byłby taki że każdy obiekt z którego byśmy utworzyli miałby te same nazwy miałyby te same właściwości.
Czyli gdybyśmy napisali Person kropka prototype kropka first name to wszystkie obiekty musiałyby mieć first name dokładnie
takie samo czyli jakby jeżeli chodzi o enkapsulację to jedyna opcja w programowaniu obiektowym w JavaScript
na chwilę obecną to jest taka że metoda musi być zapisana na stałe w obiekcie a nie w jego prototypie.