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.
W tej lekcji pokażę ci jak działa grupowanie i do czego może być przydatne.
Możemy tutaj przejść do Groups and Lookaround.
I nas będzie w tej lekcji interesować tylko taka grupa.
O reszcie powiem jeszcze później w tym kursie.
Wyobraź sobie że chcemy zaznaczyć wszystkie pliki które mają określone rozszerzenia więc zaczniemy to
robić kropka będzie oznaczać dowolny znak więc napiszemy że chcemy kropkę plus.
A to oznacza że kropka raz lub więcej razy czyli dowolny znak.
Jak widzisz wszystko zostało zaznaczone ale chcemy aby później na końcu była kropka.
Czyli możemy zrobić Escape kropka.
Jak widzisz teraz to zostało zaznaczone.
Natomiast chcę zaznaczyć tylko te które mają rozszerzenie na przykład doc lub docx czyli mogę napisać
do doc.
Jak widzisz w tym miejscu lub mogę dodać tutaj x i zrobimy sobie znak zapytania przy okazji mam tutaj
włączone wszystkie flagi łącznie z multiline.
To będzie działać tak czy siak ale gdybyśmy korzystali z tego co w poprzedniej lekcji pokazywałem czyli
np. z dolara że coś się musi zaczynać i kończyć w ten sposób to wtedy bez flagi multi liczby nam to
nie działało więc możemy ją w zasadzie tutaj zostawić i może na razie tego nie będziemy zapisywać albo
niech będzie OK niech będzie czyli doc albo docx.
Natomiast co gdybyśmy chcieli podać więcej różnych rozszerzeń moglibyśmy po tej kropce napisać doc lub
np. PDF.
Natomiast problem jest taki że mówimy tutaj całość lub to co jest po tej stronie.
Z tego powodu możemy skorzystać z grupy czyli z pary nawiasów takich okrągłych.
To przy okazji oznacza mam nadzieję że dobrze to rozumiesz że takie nawiasy gdybyśmy
chcieli w tekście wyszukać to musielibyśmy tutaj przed ich wyszukiwaniem zrobić sobie escape żeby
nie były specjalnym znakiem.
Niemniej jednak teraz stworzyliśmy sobie taką grupę i nie mówimy już ta całość albo ta całość ale to co tutaj
było czyli do tej kropki następnie doc lub pdf przy x tutaj oczywiście możemy postawić znak zapytania
czyli X jest opcjonalny w tym momencie i teraz mówimy do doc lub docx lub pdf.
I nam to zaczyna w ładny sposób działać.
Możemy sobie tutaj postawić kolejny pipe i powiedzieć że np. chcemy wyszukać dla tego xhr s i np. x.
Znowu może być opcjonalny.
Powiedzmy że to są wszystkie dokumenty i teraz takie rozszerzenia zostały nam znalezione.
Więc jeżeli dodamy tutaj do listy plików jakieś np. zdjęcie png to ono nie zostało znalezione zauważ
że jeżeli kasuje ono pasuje do tego co tutaj napisaliśmy.
Ale jeżeli tutaj napiszę png to już nie.
Dlaczego jednak pasuje kiedy napiszę tak bo pojawił się tutaj znak zapytania który być może jak pamiętasz
w quantifiers oznacza zero lub więcej więc próbuje go usunąć.
I wtedy nam to już nie pasuje.
I teraz co jest bardzo istotne.
Pokazywałem Ci że taki znak zapytania tak jak tutaj odwołuje się tylko do poprzedzającego znaku czyli
tutaj mówimy xls a x może być 0 lub 1 raz tak jak tutaj mamy to napisane.
Jeżeli coś sobie zgrupujemy i damy tam znak zapytania czy plus czy gwiazdkę to to już nie odwołuje się
do poprzedzającego znaku czyli nie do tego jakby znaku nawiasu ale do całej tej grupy co jest tak ładnie
podświetlone.
Czyli teraz mówimy cała taka grupa musi być 0 lub więcej razy w tym przypadku.
Dlatego właśnie zdjęcie PNG nam pasowało bo ta grupa po kropce może być ale nie musi.
Jeżeli tutaj to skasuje to już nie pasuje i mogę napisać plus.
A to oznacza raz lub więcej w tym przypadku możesz to zobaczyć raz lub więcej taka grupa może się znaleźć
jeżeli tutaj bym napisał xls i następnie np. PDF to również będzie działać bo taka grupa która tutaj
się znalazła może być raz lub więcej razy tutaj przypisana niedokładnie w ten sposób to zadziałało teraz
zadziałało to podobnie bo mówimy że tam może być xls np. prawda a później może być PDF jeżeli tu postawi
kropkę to tak naprawdę już nie ten warunek jest spełniony ale całość bo jedziemy sobie tutaj.
I pamiętaj że ten operator o którym mówiłem jest łakomy czyli greedy.
Więc on sobie będzie jechał dowolne znaki kropkę potraktuje jako dowolne znaki i dopiero tutaj tę kropkę
potraktuje jako tę.
Więc tutaj troszkę ci powiedziałem ale jeżeli zrobimy to w ten sposób to rzeczywiście tutaj ten plus
mówi raz lub więcej jeżeli to skasuje to to już nie będzie pasować.
Jeżeli go dodam to właśnie mówimy że może tam być np. xls czyli dowolna rzecz z tej grupy i raz lub
więcej czyli znowu może wystąpić.
Jak widzisz grupowanie przydaje się po to że jeżeli mamy takie kwantyfikatory jak plus gwiazdka i
inne one odnosiły się do jednego znaku poprzedzającego.
Teraz mogą odwoływać się do całej grupy a przy okazji w takiej grupie również or działa poprawnie bo odwołuje
się tylko do tego co w takiej grupie jest.
Może na koniec jeszcze jeden szybki przykład zróbmy sobie tutaj http www pl i np. https eduweb pl
bez WWW chcemy obydwa te adresy sobie złapać to jak możemy to zrobić.
Powiedzmy że chcemy zaczynać i kończyć i już to robiliśmy.
Więc nie jest to aż takie skomplikowane https może być opcjonalnie.
Tak sobie to zrobimy tutaj nic nie zostało podświetlone jak widzisz bo nie kończy się to na właśnie
takie s.
Jeżeli to skasuje to zacznie nam to działać więc możemy tutaj napisać https jest opcjonalne i teraz chcę
mieć średnik dwa razy taki slash pamiętaj że w javascript będziemy musieli mu zrobić escape i teraz chciałbym
złapać adres www i bez www.
Więc znowu mogę zrobić grupę w której napisze WWW.
Kropka.
Ale żeby kropka oznaczała prawdziwą kropkę to zrobimy Escape.
I tutaj napiszemy znak zapytania czyli 0 lub 1 raz może coś takiego wystąpić i następnie powiedzmy że
chcemy dowolny znak alfanumeryczny w ten sposób plus czyli chcemy aby on występował raz lub więcej
razy.
Następnie chcemy kropkę i znowu znak alfanumerycznych od dwóch do czterech razy to już robiliśmy.
Jak widzisz dzięki takiemu ugrupowaniu powiedzieliśmy że www z kropką może być ale być nie musi.