JavaScript: Strict Mode
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.
Jeżeli przerabiałeś mój kurs javascript od podstaw i teraz przerobiłeś ten kurs czyli JavaScript w praktyce to na tym
etapie już naprawdę dobrze rozumiesz.
Mam nadzieję że język Javascript.
Teraz ważne jest dla mnie aby wytłumaczyć Ci jeszcze jedną rzecz mianowicie czym jest tzw. strickt mode
bo również warto o takim mechanizmie w języku JavaScript wiedzieć.
Przejdźmy od razu do kodu do scripts bo będę chciał tutaj pokazać Ci jak włączyć strict mode a dopiero za moment
powiem ci czym on jest.
Otóż wiesz że możemy pisać takie dowolne stringi w javascript więc jeżeli sobie tutaj napisze Piotr i nic
z tym nie zrobię.
Nigdzie tego nie przepisze nie ma błędu ale też się do tego nie będzie można odwołać jeżeli tego do zmiennej
nie przypiszę.
I właśnie strict mode ma w javascript ma włączony wpisując use strict zostało to zrobione w ten sposób że jeżeli
przeglądarki które nie wspierają strict mode szczególnie te stare przeglądarki które tego nie wspierały
zobaczyły taki zapis to jest to zwykły string zignorował ten zapis ale przeglądarka która wspiera strict
mode wie co ma z tym zrobić więc wpiszemy use strict.
I teraz jeszcze zanim ci powiem o co chodzi to powiem ci jak się włącza ten strict mode.
Otóż właśnie takim zapisem natomiast teraz cały nasz skrypt który będzie będzie wczytywany w trybie
strict mode a więc w ten sposób uruchamiamy to na całym skrypcie.
Natomiast możemy to również zrobić dla poszczególnych funkcji dlatego stworzę sobie funkcję anonimową
i napisze tutaj use strict w każdej funkcji nawet jeśli ją nazwiesz.
Jakkolwiek możesz w środku napisać use strict i tylko to co jest wewnątrz tej funkcji będzie traktowane
właśnie przez takie reguły strict mode.
OK i teraz czym jest strict mode.
Otóż jest to uruchomienie jakby innych reguł interpretera języka JavaScript które pozwalają napisać
bardziej bezpieczny kod JavaScript bo wiele z zapisów akceptowanych wcześniej które do tej pory widzieliśmy
które widziałeś w tym kursie będzie zgłaszało błędy czyli były takie zapisy które mogliśmy zrobić w najgorszym
wypadku zwracały nam np. undefined.
Teraz będą nam zwracać błędy no i będę chciał pokazać o co chodzi.
Jeżeli wykomentuję to a więc nie włączamy strict i napiszę tutaj x równa się 10 to na tym etapie już wiesz
że kiedy pomijane słowo kluczowe var to piszemy taką zmienną do obiektu globalnego czyli do window jest
to wewnątrz funkcji mamy tutaj własny zakres ale jeżeli odświeżę i wpiszę x to zostało to tutaj przypisane.
Natomiast jeżeli użyje strict mode czyli to odkomentuje to zobaczmy jak widzisz mamy błąd.
X is not defined czyli mamy taki błąd jak wtedy kiedy próbujemy użyć x a go nie ma.
Gdybym chciał użyć X w ten sposób zobacz również mielibyśmy błąd że X nie jest zdefiniowany.
Ale kiedy próbowałem do X coś przypisać to stworzono dla nas zmienną globalną czyli strict nam to uniemożliwia.
Jest to dobre rozwiązanie kolejna niesłychanie ciekawa rzecz kiedy wyłączę strict to wiesz że w funkcjach
this często kieruje na window już to w tym kursie widziałeś chyba że jesteśmy w jakiejś specyficznej
funkcji np. obsługi zdarzenia kliknięcia albo gdzieś w naszym obiekcie kiedy tworzyliśmy kod obiektowy.
Natomiast tutaj możesz się domyślić że this to jest window natomiast jeżeli włączymy strict mode to niespodzianka
to sobie wykomentuje żeby nam nie zgłaszało błędu zobaczmy this to jest undefined więc kolejna ciekawa rzecz this
będzie undefined i teraz pokażę ci jakie z tego są korzyści przy programowaniu obiektowym.
Stworzymy sobie to tutaj to wykomentuje pewną klasę pewien konstruktor również w tym kursie już to robiliśmy i
pamiętasz że mieliśmy taki problem jeżeli stworzyliśmy nowy person napiszę person i podam tutaj Jan
Kowalski to pamiętasz że mieliśmy problem bo jeżeli ktoś tutaj napisał new to wszystkie te zmienne które
są tutaj czyli this skierowały na obiekt globalny i przy takim wywołaniu Jan zostały przypisane do obiektu
globalnego czyli window first name i Kowalski window last name.
W zasadzie możemy sobie to potwierdzić odświeżając tutaj mamy strict mode włączony więc to się nie udało
jeżeli jest wyłączony to tutaj będziemy mieli np. zmienną na przykład first name obchodziliśmy jak pamiętasz poprzez
sprawdzenie czy this instance of person.
Wtedy mogliśmy sprawdzić czy new zostało użyte czy nie.
Natomiast co jest fajne jeżeli używamy strict mode który tak jak wspominałem może być użyty tylko dla
jakiejś jednej funkcji naszej nie dla całego np. skryptu.
To this to jest undefined czyli kiedy próbujemy napisać undefined kropka first name to nam się nie udaje.
Undefined jest wartością prymitywną czyli teraz będziemy widzieć błędy i od razu możemy zauważyć oho powinniśmy
użyć new.
Kolejna rzecz która jest w strict mode ja go wykomentuje to możemy również sobie wykomentować to jest fakt
że jeżeli korzystamy z funkcji eval które jeżeli nie musisz to nie korzystaj ona nam tekst zamienia
na kod i wykonuje jeżeli napiszę tutaj var x równa się 10 np. w ten sposób to poniżej będę mógł się
odwołać do x mogę napisać console log x i x ma wartość 10 natomiast jeżeli włączymy strict mode to funkcja eval
działa ale nie pozwala deklarować zmiennych zobaczmy i jak widzisz mamy błąd reference error x is not
defined czyli również chodzi tutaj o takie bezpieczeństwo.
Komentuje sobie to wyłącza strict mode i pokaże Ci kolejną ciekawą rzecz mianowicie moglibyśmy napisać if i tutaj
np. true albo if pięć jest większa od 2 generalnie aby ten warunek się wykonał.
Mogę napisać function say hello powiedzmy i napiszemy na tej konsoli cześć w ten sposób i teraz spróbujemy
wywołać taką funkcję Say Hello.
Nie ma problemu.
Cześć zostało zwrócone ale strict mode np. nie pozwala nam w takich blokach definiować funkcji.
Zobaczmy jak widzisz say hello is not defined czyli wewnątrz takiego bloku.
Podobnie będzie w pętli nie pozwoli nam zadeklarować takiej oto funkcji.
Kolejna rzecz strict mode na razie go wyłącze.
Jest taka że nie pozwala nam on używać w żadnym wypadku nazw zmiennych czy parametrów takich jak eval
oraz arguments.
Może sobie to wykomentuje czyli teraz jeżeli przejdziemy tutaj chce utworzyć zmienną którą nazwę eval
równa się np. 1 to nadpisze funkcję eval która jest dostępna.
Say hello is not defined oczywiście tę funkcję wrzucimy tutaj i wykomentuje zobaczmy eval jest równe funkcja
eval no rzeczywiście tutaj mamy to wewnątrz funkcji czyli nie na zewnątrz gdzie bym tutaj zrobił console log
eval. No to teraz by nam to zadziałało byłoby to 1.
Natomiast strict mode mamy błąd undexpected eval or arguments czyli nie możemy ani eval ani arguments nigdzie
użyć.
Co ciekawe gdyby stworzył sobie jakąś funkcję chciałbym żeby jej parametr nazwał się eval tak bym sobie
go nazwał.
Również nam na to nie pozwoli i podobnie będzie z arguments nie możemy nigdzie z tego korzystać ani
zmiennych tak nazywać ani funkcji ani jakichś parametrów które one przyjmują.
Oczywiście nadal możemy w funkcjach do tej specjalnej zmiennej się odwoływać ale jest jeszcze jedna
ciekawa rzecz którą ci teraz będę chciał pokazać.
Jeżeli będziemy mieli funkcję nazwiemy ją say hello przyjmuje first name last name.
Tutaj wyświetlimy console log arguments nie ma znaczenia.
Wywołajmy sobie say hello no i przekażmy te parametry.
Jan Kowalski.
Ok strict mode jest włączony.
Zadziała nam to mamy taki element tablicopodobny ale być może pamiętasz że mogliśmy się szczególnie w pierwszej
części tego kursu to pokazywałem odwoływać do arguments z koleicallee i to nam zwracało referencje do tej funkcji
czyli arguments z kolei oznaczało tą funkcję i możemy sobie zrobić console log w ten sposób zobaczmy mamy
teraz błąd caller oraz callee.
Na arguments strict mode są zakazane czyli jeżeli tutaj chce się odwołać do tej funkcji to muszę napisać
po prostu say hello.
Nie możemy tego zrobić a poza strict mode moglibyśmy zerknijmy.
Jak widzisz mamy referencje do tej właśnie funkcji.
No i na koniec jeszcze jedna ciekawostka.
Mamy wyłączony strict mode mamy w obiekcie window coś takiego jak na przykład location prawda i operatorem delete
z obiektów możemy usuwać ich właściwości czy metody więc mógłbym napisać window location.
Tego się nie da usunąć więc zostanie zwrócone false ten operator jeżeli coś usunie zwraca true jeżeli się
mu nie uda to zwraca false natomiast w przypadku strict mode jeżeli będziemy chcieli zrobić to samo
to będziemy mieli błąd.
Nie ma tutaj tego błędu zauważ dlaczego strict mode włączyłem tylko dla tej funkcji więc spróbujmy tutaj
napisać delete window location.
I teraz już mamy błąd.
No i to jest wszystko co chciałem powiedzieć na temat strict mode.
Natomiast jest jeszcze troszkę więcej rzeczy kiedy będziesz się uczył obiektowego modelu dokumentu
np. jakiejś różnych API które już są które się w przyszłości pojawią.
To czasami właśnie w dokumentacji takiego API masz napisane jak dane metody działają i np. jest taki
dopisek ale w strict mode działa to troszeczkę inaczej więc już teraz albo w przyszłości do nowych metod
które się pojawiają do nowych API w przeglądarkach mogą być również inne zachowania implementowane
jeżeli będziemy używać strict mode.