od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperJeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
Ostatni obiekt i konstruktor, który chciałem Ci pokazać w JavaScript'cie,
jest to RegExp i teraz jest to temat dosyć zaawansowany i skomplikowany, przynajmniej na pierwszy rzut
oka.
Ja dlatego bardzo dokładnie omawiam go w drugiej części tego kursu.
Są to po prostu wyrażenia regularne w języku JavaScript.
Bardzo serdecznie zachęcam cie do przerobienia również drugiego kursu, w którym tak jak wspomniałem bardzo
dokładnie to tłumaczę. Natomiast chciałbym tutaj tylko wspomnieć, abyś wiedział, że taki obiekt w języku
JavaScript istnieje.
Dlatego przejdziemy od razu do skryptu i podobnie jak w przypadku tablic pokazywałem ci, że możemy utworzyć
tablicę w taki prosty sposób, czy nazwiemy to array literal, ale możemy ją również utworzyć poprzez new
Array.
Podobnie jest w przypadku RegExp, czyli wyrażeń regularnych.
Mogę sobie tutaj napisać regex,
taka po prostu zmienna i mogę zapisać coś, co wygląda jak komentarz, ale jeżeli wewnątrz coś piszemy, to
już to nie jest komentarz,
jest to zapis wyrażenia regularnego i będę tutaj chciał napisać
a plus gi
i wydaje się skomplikowane, ale jest to wyrażenie regularne, które mówi, że będziemy dopasowywać się do
wzorca, gdzie będzie minimum jedna literka, a jedna lub więcej, co oznacza ten plus i chcemy szukać globalnie
i znaczy case insensitive,
czyli nie zwracam uwagi na duże czy małe litery.
Na razie wiem, że tego nie zrozumiesz, ale chcę Ci pokazać jak taki obiekt działa i teraz tworzymy string
n.
Będziemy tutaj mieli Ania i pod spodem będę chciał wykonać consloe.log i n.replace. Pamiętasz jak
pokazywałem ci niedawno metodę replace, czyli taką dzięki której, na string'u możemy coś zamieniać.
Mówiłem ci, że tutaj możemy wpisać np. nia i zamienić na nna, czyli Ania możemy zamienić na Anna.
Natomiast możemy również podać tutaj wyrażenie regularne.
Skoro zapisałem go w zmiennej regex, to teraz sobie go tutaj podam i będę chciał, to co zostanie tam
znalezione zamienić na p.
Ja w tym wyrażeniu regularnym. tak jak ci mówiłem, powiedziałem jedna literka a lub więcej.
Więc tutaj mówimy wszystkie literki a, mamy g, czyli global zamień na p.
Dodamy tutaj i, czyli case insensitive, a więc taka literka również będzie się liczyć.
No i teraz zobaczmy, co nam zwróci console log.
Jak widzisz wszystkie literki, a zostały zamienione na p.
Zaraz pokażę ci jeszcze konstruktor.
Natomiast zanim tutaj jesteśmy, to pokażę ci jeszcze odwrotną metodę, czyli odwołamy się do regex,
bo skoro jest to obiekt, to również ma swoje metody.
Następnie test, zrobmy może trochę miejsca i mogę tutaj wpisać powiedzmy, kolejka.
I teraz zobaczmy, co zostanie nam zwrócone.
True, dlatego że właśnie w tym wyrażeniu regularnym pytałem o jedną literkę a lub więcej.
Kolejka, mamy literkę a, więc zostało nam zwrócone true.
Jeżeli jej nie będzie to zostanie zwrócone false.
Tak jak wspomniałem, teraz dokładnie tego nie będę tłumaczył.
Jest cały rozdział w drugim kursie poświęcony właśnie wydarzeniom regularnym, gdzie omawiam to bardzo,
bardzo dokładnie.
Natomiast co jest istotne w tej lekcji, to fakt, że właśnie tutaj znowu użyliśmy takiego zapisu literal.
A chciałem Ci pokazać, że mamy również dostępny obiekt, dzięki któremu możemy tworzyć właśnie wyrażenia
regularne.
Więc teraz możemy napisać regex.
Może to u góry,
sobie wykomentuje i odwołamy się do new.
I wygląda to następujący sposób regex i tutaj możemy podać sobie string.
Jeżeli chcemy z wyrażeniem regularnym mogę napisać a+, czyli to co było wyżej, a gdybym chciał podać flagi,
czyli g i oraz jeszcze m.
Są takie flagi, to mogę podać jako drugi parametr np. tag albo ig,
nie ma to znaczenia.
Będzie to działać dokładnie tak, jak tutaj.
Czyli to co zostanie z tego zwrócone do regex.
Działa dokładnie tak samo, jak taki oto zapis. Zapiszę to i efekt będzie dokładnie taki sam.
Tutaj jeszcze warto zapamiętać, że jeśli nie użyjemy new, przy niektórych konstruktorach new albo bez new ma
znaczenie.
Tutaj ma takie znaczenie, że jeżeli przekażemy tutaj gotowe wyrażenie regularne, powiedzmy, że to byśmy
nazwali regex2, a tutaj chciałbym przekazać regex,
czyli jest to już utworzony obiekt,
to jeżeli nie korzystamy z new, to ten obiekt po prostu zostanie zwrócony i zostanie to zignorowane.
Natomiast jeżeli bym użył new, to ten obiekt jakby od nowa zostanie zamieniony na obiekt.
To jest tylko taki mały niuans, nie jest to jakoś specjalnie istotne.
Ja może zostawię to w takim oto zapisie. Warto abyś wiedział, że wyrażenia regularne istnieją w języku
JavaScript.
W drugiej części kursu tłumaczę czym one są i możemy je zapisywać na taki sposób oraz używając konstruktora.
W ten oto sposób dopiszę jeszcze new.
Obiekt RegExp · 1 min
// var regex = /a+/gi;
var regex = new RegExp("a+", "ig");
var n = "Ania";
console.log( n.replace(regex, "p") );
console.log( regex.test("kolejk") );