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.
Po dosyć skomplikowanym rozdziale o programowaniu obiektoym przejdziemy do czegoś lżejszego i bardziej
przyjemnego ale również niezwykle ważnego w kontekście tworzenia aplikacji internetowych nie tylko w
języku JavaScript.
Odpowiemy sobie na pytanie czym jest json json czyli inaczej mówiąc JavaScript Object Notation
Jest to lekki testowy format wymiany danych i dane w formacie json mogą wyglądać w taki sposób wydaje
ci się to już znajome bo podobnie tworzymy obiekty w języku JavaScript czyli mamy tutaj klucz wartość
klucz wartość itd.
Natomiast to co tutaj widzisz nie ma jakby nic wspólnego z językiem JavaScript jest to format wymiany
danych ma tyle wspólnego z językiem JavaScript że wywodzi się z języka JavaScript i taki format zaproponował
Douglas Crockford
i format ten został nazwany właśnie JavaScript Object Notation natomiast dzisiaj jest to najpopularniejszy
format wymiany danych w internecie a oznacza to że taki zapis jak widzisz tutaj u dołu jest poprawny
zapis json np. w języku PHP czy jeszcze w wielu innych językach dlatego że za pomocą json możemy
tworzyć pliki tekstowe.
I właśnie tak w pliku tekstowym będzie wyglądał format json albo możemy bezpośrednio te dane przesyłać
z serwera np. do przeglądarki czy między serwerami.
Dlatego wygląda to jak obiekt w javascript natomiast nie jest to obiekt javascript
Jest to po prostu format zapisu danych.
Być może spotkałeś się również z takim formatem jak XML który wygląda jak znaczniki w języku HTML bo
zarówno HTML jak i XML mają ze sobą bardzo wiele wspólnego.
Mamy tam znaczniki otwierające zamykające mamy atrybuty itd.
json jest taką lepszą formą dla XML i powoli wydaje mi się że już wyparł XML z rynku i z XML
mało kto przy większości zastosowań korzysta bo json jest bardziej czytelny i jest przede wszystkim
lżejszy.
Zobaczmy teraz jak możemy zapisać poprawny obiekt w json a więc na początek otwierający nawias klamrowy.
Tak jak w przypadku obiektów w JavaScript.
Następnie key czyli klucz.
Natomiast co tutaj jest niesłychanie ważne to w JavaScript tworząc nowe obiekty pokazywałem w pierwszym kursie
w kursie JavaScript podstawy że możemy tutaj stworzyć sobie właściwość czyli taki klucz zarówno w cudzysłowach
jak i w apostrofach jak i zupełnie bez tego natomiast w json musi to być wartość.
Czyli ten klucz w cudzysłowie.
Nie mogą tu być apostrofy ani nic innego.
Następnie dwukropek czyli zupełnie jak w javascript i następnie value czyli wartość.
I teraz zastanówmy się jakie wartości w tym miejscu można wstawiać aby móc zapisać poprawny plik w formacie
json
Otóż jeżeli chodzi o wartości to może to być String czyli po prostu tekst ale w podwójnych cudzysłowach Number
czyli możemy tam wstawić powiedzmy dwa.
Następnie może to być kolejny taki obiekt w którym będą jeszcze inne wartości czyli zagnieżdżamy jeden obiekt
w drugim.
Może to być tablica w której mogą być wszystkie dostępne tutaj wartości czyli obiekty stringi itd.
Następnie może być true zapisane właśnie w taki sposób czyli nie w cudzysłowach ale tak jak w języku JavaScript
może to być również false
Może to być null i to jest wszystko co możemy zapisać jeżeli chcemy sobie podać kolejną wartość to
na samym końcu jak widzisz stawiamy przecinek i znowu mamy key oraz dwukropek i value.
Tak możemy to zapisywać bardzo podobnie jak w języku JavaScript i po ostatniej wartości już nie stawiamy
przecinka ale zamykamy sobie taki obiekt.
Czyli tutaj przesłaliśmy poprawne dane w formacie json
Natomiast gdybyśmy więcej takich obiektów chcieli przesłać to możemy to wszystko wstawić w tablicę Tutaj
postawimy przecinek możemy dodać kolejny obiekt i taką tablicę zamknąć.
A więc to co widzisz po lewej stronie może to być poprawna treść pliku który będzie miał rozszerzenie
json
Natomiast jak wspomniałem nie zawsze mamy do czynienia z plikami czasem po prostu wysyłamy dane z serwera
do przeglądarki i wtedy nigdzie tego nie zapisujemy jako plik.
Natomiast jeżeli mamy plik to ma on rozszerzenie json i może mniej więcej tak wyglądać teraz co jest
bardzo ważne w kontekście języka JavaScript
To są pewne wartości nie wspierane których nie możemy zapisać w takim pliku jsonowym i takie wartości
to undefined
Nie możemy tego tak wpisać musielibyśmy tak wpisać w cudzysłowie ale wtedy jest to już string.
Następnie nan czyli not a number infinity czy minus infinity.
Następnie Function czyli wiesz że w obiektach javascript w dowolnym miejscu możemy sobie wpisać funkcje
ale w json nie możemy w żaden sposób tych funkcji przechowywać.
Następnie regexp czyli wyrażenia regularne o których w konkursie jeszcze będziemy mówić czy np. obiekt
error.
Tak będzie również z innymi wartościami w javascript.
Generalnie większość obiektów nie jest reprezentowana w żaden sposób ale tylko te wartości które na
poprzednim slajdzie ci pokazałem.
Jeszcze jedna ważna kwestia to w przypadku z stringów musimy korzystać z ucieczki czyli Escape.
Gdybyśmy chcieli zapisać tytuł książki w ten sposób Harry Potter to aby po odczytaniu później title
mieć całą wartość czyli cudzysłowy i Harry Potter to musimy przed każdym z takich cudzysłów postawić backslash
Czyli zrobić po prostu Escape co również robimy w javascript w przypadku stringów
Właśnie wtedy kiedy chcemy mieć podwójne cudzysłowy i wewnątrz również podwójne cudzysłowy.
Tutaj jak wspomniałem nie możemy objąć tego stringu w apostrofach i również nie możemy tego zrobić
w przypadku title tutaj muszą być podwójne cudzysłowy.