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 chcę ci powiedzieć jeszcze o jednej dobrej praktyce pracy z kodem JavaScript mianowicie
o korzystaniu z tzw. linterów.
Teraz jesteśmy na stronie js lint.
Tak nazywa się to narzędzie js lint kropka com.
Jest to narzędzie stworzone przez Douglasa Crockforda czyli osobę bardzo znaną środowisku JavaScriptowym
i pozwala nam ono testować nasz kod JavaScript czy jest on zgodny z różnymi dobrymi przyjętymi
praktykami.
Więc mogę sobie tutaj wkleić mój kod zanim kliknę dalej czyli tutaj js lint powiem ci który to jest kod.
Otóż skopiowałem naszą bibliotekę ajaxową którą do tej pory napisaliśmy starałem się tutaj pokazać dobre
praktyki i zobaczmy co na to js lint.
Jeszcze taka uwaga że tutaj na dole mamy różne opcje.
Możemy wybrać np. co to narzędzie ma tolerować w naszym kodzie np. this i value czyli użycie tej funkcji
a czego ma nie tolerować.
Zostawmy to na takiej domyślnej konfiguracji i kliknę teraz tutaj na js lint.
Jak widzisz seria ostrzeżeń bo to nie są błędy ale ostrzeżenia się nam pojawiła i m.in. mamy coś takiego
że js lint oczekiwał iż użyjemy strict czyli use strict o którym Ci już mówiłem przed użyciem
właśnie takiego czegoś jak this instance of ajax.
Nie jest to błąd ale byłoby dobrą praktyką w naszym kodzie korzystać właśnie ze strict mode jeśli chodzi
o inne ostrzeżenia to np. js lint uważa że niepoprawnie nazwaliśmy tę właściwość obiektu czyli xhr.
Prawdopodobnie chodzi mu tutaj o ten podkreślnik.
Kiedy pisaliśmy tę bibliotekę to mówiłem ci dlaczego nazywamy tak tą właściwość.
I nie ma problemu że tak ją nazwaliśmy to nie jest żaden składniowy błąd ale według praktyk przyjętych
tutaj przez js lint nie powinniśmy tego robić.
No i teraz możesz zapytać czy powinieneś eliminować wszystkie te błędy które tutaj się pojawiają.
Otóż nie.
Natomiast jeżeli byś to robił jeszcze skorzystaj z tych opcji które tutaj były o których ci mówiłem
to po jakimś czasie wyrobisz sobie dobre praktyki pisania kodu JavaScript i będą one zbliżone do tego
co założył twórca właśnie tego narzędzia js lint czyli warto tutaj czasami zaglądać.
Natomiast teraz chciałem pokazać drugie narzędzie mniej restrykcyjne i według mnie lepsze do testowania
swego kodu które nazywa się js hint.
Tym razem i tutaj możemy wklej swój kod więc wkleję naszą bibliotekę od razu wszystko zostało przeanalizowane
i zobaczmy co tutaj mamy.
Po pierwsze w metrics mamy różne informacje o tym że np. mamy jedenaście funkcji w tym pliku czy np.
funkcję z największą ilością argumentów przyjmują jeden argument i średnia u nas to jest również 1 dokładnie
mediana.
Jak widzisz największa funkcja ma 7 w środku różnych konstrukcji takich jak np. if gdzie mediana jest
to 4 czyli fajne przydatne informacje.
Natomiast co jest tutaj ciekawe to na przykład mamy ostrzeżenia.
I one są bardzo trafne.
Zauważ po najechaniu tutaj mamy napisane the body of a for should itd Nie chcę teraz tego czytać chodzi generalnie
o to zauważ co jest podświetlane po lewej stronie że powinniśmy to wszystko opleść.
Tutaj jest napisane wrapped w if czyli w taką instrukcję if po to aby przefiltrować niechciane właściwości
które będą z prototypu dziedziczone pokazywałęm ci tej lekcji że przy pętli for in i w ogóle przy użyciu
operatora in jest o tym osobna lekcja w tym kursie powinniśmy używać na obiekcie has on property.
I tutaj właśnie js hint to wyłapał.
Czyli aby z naszego default config w tym przypadku nie były pobierane różne właściwości z prototypu
powinniśmy użyć has on property.
Tutaj nie mieliśmy tego problemu bo nic do prototypu tego obiektu nie dodawaliśmy ale już widzimy że możemy
z tego skorzystać.
I tutaj w kilku innych miejscach chodzi o dokładnie to samo i na samym dole ciekawa informacja.
Dwie nieużywane zmienne e w której linijce tutaj mamy po najechaniu
powinno to być podświetlone linijka 93.
Zerknijmy tam sobie to jest tutaj najedźmy sobie na e widzę u góry linijka 93 mam nadzieję jak widzisz podświetloną linię.
Mamy tam funkcję w której przyjęliśmy parametr e.
Ale nigdzie go w tej funkcji nie używamy.
Czyli jest on nam niepotrzebny i możemy go teoretycznie usunąć tutaj.
Podobnie jak widzisz to narzędzie jest bardzo bardzo przydatne i teraz jeszcze jedna bardzo ważna sprawa.
Mój edytor kodu to sublime text i zauważ że jeżeli wpisze coś co będzie błędem zostaje to dla mnie tutaj
w odpowiedni sposób podświetlone na żółte ostrzeżenie.
A jeżeli tutaj pisze coś innego to na czerwono czyli błąd JavaScriptowy.
I teraz co się dzieje.
Otóż ja mam również w systemie zainstalowany node js czyli platformę JavaScriptową a do edytora sublime text
zainstalowałem sobie lintery i jednym z tych linterów jest js hint.
Dzięki temu właśnie js hint analizuje mój kod który tutaj mam i pokazuje mi od razu błędy kiedy piszę
swój kod JavaScript.
Zauważ że jeżeli napiszę sobie np. instrukcję if i będę chciał porównać powiedzmy this do czegokolwiek
do jakiegoś stringu to będę miał tutaj ostrzeżenie i po najechaniu na te linie w lewym dolnym rogu możesz zobaczyć
że proponowane jest użycie potrójnego operatora równa się zamiast podwójnego więc jest to również taka
podpowiedź że warto tutaj zrobić coś innego i ja do tych podpowiedzi staną się również stosować jak
używać edytora tekstu sublime text i jak sobie zainstalować właśnie taki linter js hint pokazuje w jednym z warsztatów
na eduweb pl który jest poświęcony w całości temu edytorowi który nazywa się kodowanie w sublime text
więc jeżeli jesteś ciekaw to zapraszam do tego warsztatu.