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.
Zanim zaczniemy się uczyć wyrażeń regularnych to chciałbym Ci coś pokazać i zobaczymy czy to ci się
spodoba.
Mam tutaj jedno pole.
Kiedy zacząłem coś pisać to jest to przypisywane do drugiego pola.
Możesz zobaczyć na razie nic specjalnego no więc napisze tutaj jakąś wiadomość.
Ciekawe prawda.
Piszę to wszystko z przypisywane do drugiego pola z pominięciem samogłosek.
Co takiego się stało.
Otóż skorzystałem z wyrażeń regularnych.
Przejdźmy do przykładu i na szybko tylko ci go pokażę.
Do pola input przypisałem zdarzenie on input czyli podcina wpisywanie i chce za każdym razem kiedy coś wpisujemy
przypisać do output czyli do tego drugiego pola ale chce to zamienić czyli chce wszystkie samogłoski które
tutaj są zamienić na pusty ciąg znaków.
Metoda replace może już znasz.
Szczególnie jeśli przerabiałeś javascript od podstaw.
Natomiast tutaj oprócz ciągu znaków można jeszcze przekazać wyrażenie regularne.
I o tym będę mówił jeszcze w jednej z kolejnych lekcji.
Co jest jednak ciekawe i co chciałbym abyś zapamiętał z tej lekcji to fakt że tak wygląda wyrażenie regularne w
JavaScript czyli taki zapis.
Jest to komentarz ale jeżeli pomiędzy coś wpiszemy to jest to już wyrażenie regularne.
Podobnie jak w przypadku tablic mogliśmy je tworzyć w ten sposób a także z new array.
Tak samo możemy tworzyć wyrażenia regularne w ten sposób albo poprzez new reg exp czyli na jego prototypie
znajdują się wszystkie potrzebne metody które będą dla nas potem dostępne.
Tak możemy tworzyć wyrażenia regularne i tutaj możemy napisać np. ig albo samo igm.
To są flagi o których też będę mówił czyli usuwając to taki zapis to jest poprawne wyrażenie regularne
w JavaScript tak jak zapisałem je tutaj możemy je na kilka sposobów tworzyć i o tym jeszcze w tym kursie
będę mówił.
Natomiast chciałabym Ci teraz pokazać bardzo ciekawe narzędzie w którym spędzimy trochę czasu w kolejnych
lekcjach gdzie będą uczucie wyrażeń regularnych w zasadzie zobaczysz że sam będziesz mógł się ich uczyć
bo to narzędzie jest dobre.
Przejdźmy pod adres regexr kropka com.
I teraz jeżeli oglądając ten kurs przeszedłeś pod ten adres i on nie działa albo wyświetliła ci się strona
która drastycznie inaczej wygląda niż to co widzisz teraz tutaj to zajrzyj do plików źródłowych bo tam
umieściłem kopię tego narzędzia.
Licencja na to pozwala więc to zrobiłem.
Na wypadek gdyby ono zniknęło wtedy kiedy ten kurs oglądasz albo było drastycznie inne to możesz go
uruchomić i będzie on również u ciebie działać.
Natomiast jeżeli jest podobne lub jest identyczne jak u mnie to korzystaj z tego narzędzia i będziemy
w kolejnych lekcjach właśnie na nim się uczyć.
Jest ono po prostu genialne.
Jeżeli tutaj coś zaznaczyła i usunę to zauważ że mamy tutaj wyrażenie regularne takie jak ci przed
momentem pokazałem możemy coś wpisać nie możemy edytować tych które tutaj widać te flagi będziemy mogli
później ale co jest świetne to po najechaniu wszystko jest tutaj dokładnie tłumaczone.
Po tej stronie mamy help czyli pomoc referencje do której się będziemy odwoływać.
Mamy cheatsheet wszystko co jest nam potrzebne ja dla ciebie w języku polskim również w PDFie do tego kursu przygotowałem
cheatsheet więc możesz sobie do niego zajrzeć.
Mamy tutaj również przykłady.
Generalnie jest to bardzo dobre narzędzie z którego od przyszłej lekcji już będziemy korzystać.
Zauważ tutaj możemy wpisać dowolny tekst np. Kowalski i wyrażenie regularne wpisałem a zostało to tutaj
podświetlane bo a zostało znalezione a tutaj widzimy jeden match.
Na razie możesz jeszcze nie rozumieć o co chodzi ale już widzisz że w tym narzędziu genialnie będziemy
się mogli uczyć wyrażeń regularnych i zaczniemy już od kolejnej lekcji.