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 zainstalować serwer lokalny dla systemu Windows.
W tym kursie kilkukrotnie taki serwer będzie nam potrzebny i wtedy kiedy będę mówił abyś jakieś pliki
przekopiował na localhost albo na serwer lokalny to właśnie to będę miał na myśli.
Bierzemy sobie XAMPPa więc na takiej stronie możesz znaleźć program XAMPP.
Jest on dostępny na Windows Linux oraz Mac OS.
Bierzemy teraz XAMPPa dla Windows klikając tutaj XAMPP się pobiera i za moment się go zainstaluje.
Ok.
Paczka już się pobrała możemy teraz kliknąć i zainstalować to okno.
Możemy zminimalizować i mamy tutaj prostą instalację wybierzemy Next i teraz zależy czy chcesz zainstalować
wszystkie komponenty czy też nie.
Do tego kursu nie wszystkie będą potrzebne ale być może będziesz kontynuował swoją przygodę np. z językiem
PHP a więc warto.
Większość z nich zainstalować ja na potrzeby tego kursu proponuje oznaczyć PL również możemy oznaczyć
Tomcat Mercury Filezilla zostawmy sobie mySQL chociaż nie będzie nam potrzebne i tutaj na samym dole te
dwa ostatnie również możemy spokojnie odznaczyć klikamy Next i teraz wybierzemy również Next.
Będziemy mieli pod C XAMPP nasz folder o którym za moment jeszcze powiem tutaj możemy odznaczyć wybieramy
Next Next no i teraz będziemy musieli chwilę poczekać aż to wszystko się zainstaluje.
Ja pozwolę sobie przyspieszyć to wideo ok dłuższą chwilę to trwało muszę przyznać i teraz możemy
przejść dalej tutaj.
Odznaczymy sobie że nie chcemy uruchamiać teraz XAMPPa bo chcę Ci pokazać za moment jak go uruchomimy
abyś wiedział jak to robić kiedy będziesz chciał uruchomić serwer wybieramy fnish i teraz aby uruchomić
Samba XAMPPa.
Przejdźmy do menu Start wyszukamy sobie XAMPP.
W ten oto sposób i ważne jest aby prawym przyciskiem kliknąć i wybrać Uruchom jako administrator.
To jest bardzo ważne.
Dzięki temu będziemy mogli uruchomić XAMPPa w naszym kursie.
Wystarczy że będziemy mieli Apache czyli serwer.
Tutaj mamy również mySQL ale z tego nie będziemy korzystać.
Jak widzisz mamy tutaj na zielono więc wszystko gra.
Tutaj jest przycisk stop aby to zatrzymać.
Jeżeli nie będzie uruchomione to tutaj będzie napisane start i będziesz miał taki serwer włączyć a
więc tylko Apache wystarczy uruchomić.
Natomiast jeżeli XAMPPa nie uruchomisz jako administrator to może być tutaj seria błędów i nie uda nam
się serwera uruchomić.
I teraz kiedy ja w kursie będę mówił aby jakiś przykład skopiował do localhosta to będziemy chcieli
go skopiować na dysk C ukośnik XAMPP.
Natomiast zanim to zrobimy pokażę ci jeszcze w przeglądarce że teraz możemy korzystać z naszego
localhosta pod domeną.
Pod domeną localhost więc przejdźmy do przeglądarki i tutaj możemy sobie wpisać localhost
w ten oto sposób i zobaczmy jak widzisz wszystko działa zostaliśmy przekierowanie tutaj do dashboard
i teraz jak wspominałem będę chciał abyś pliki wrzucał pod localhost i do odpowiedniego katalogu i
musisz to zrobić na dysku C.
Będziesz tam miał folder XAMPP więc pokażę ci teraz jak do niego przejść.
Możemy przejść znowu do menu Start wpiszemy XAMPP i tutaj możemy wybrać HAMPP htdocs i zostaniemy
tam przekierowani.
Zobaczmy jak widzisz jesteśmy dokładnie w tym folderze i tak jak wspomniałem będę prosił cię abyś pliki
tutaj jakieś umieszczał jesteśmy na dysku C w folderze htdocs.
Więc wystarczy taki folder jak tutaj tez znajdziesz go w plikach bonusowe.
Przeciągnąć tutaj i teraz jeżeli przejdziemy z powrotem do przeglądarki i wpiszemy localhost ukośnik
test.
Zobacz test serwera lokalnego.
To plik Index HTML który znajduje się w tym katalogu się uruchomił.
Czyli podsumowując musisz uruchomić XAMPPa.
Kiedy będę prosił aby jakieś pliki przerzucił na localhost to wrzuć je na dysk C ukośnik XAMPP ukośnik
htdocs i wtedy będziesz mógł pod localhost się do nich odwoływać.