od Podstaw
9 godz. 20 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperJavaScript to język programowania, który napędza niemal wszystkie strony internetowe. Dopełnia on technologie HTML i CSS, za pomocą których tworzymy strukturę i wygląd dokumentu. Co jednak w sytuacji, gdy chcemy po kliknięciu w wybrany przycisk wyświetlić powiększone zdjęcie lub wczytać dodatkowe dane z serwera? To właśnie w takich sytuacjach przydaje się język JavaScript i tzw. DOM API, dostępne w przeglądarce. Jak się przekonasz, możliwości nowoczesnych przeglądarek w połączeniu z tym językiem są naprawdę ogromne.
Język JavaScript może być używany nie tylko na stronach internetowych. Z tego powodu, w kursie omówimy najpierw najważniejsze konstrukcje tego języka, które są niezależne od platformy uruchomieniowej. Dzięki temu zbudujesz fundamenty niezbędne do tego, by wykorzystać ten język np. w środowisku Node.js. Krok po kroku omówimy sposoby tworzenia zmiennych, dostępne typy danych i operatory. Następnie zobaczysz jak tworzyć tablice i obiekty, z jakich instrukcji warunkowych i pętli możesz korzystać, a także jak tworzyć własne funkcje. Przekazywana wiedza uwzględniać będzie nowości, które pojawiły się w języku wraz z rewolucyjnym standardem EcmaScript 6 (ES6).
Sam język JavaScript to nie wszystko, by tchnąć ducha w strony internetowe. Z tego powodu, przeglądarki internetowe udostępniają tzw. DOM API. To interfejs, który z użyciem języka JavaScript pozwala na manipulację treścią i wyglądem strony. W kursie bardzo dokładnie omówimy czym jest Obiektowy Model Dokumentu, a także jak z nim pracować. Zobaczysz jak tworzyć nowe elementy HTML i wstawiać je na stronę, jak modyfikować ich treść, atrybuty, style czy klasy CSS. Poznasz sposoby na odczytywanie położenia elementu na stronie i jego wymiarów, które będą niezbędne w wielu sytuacjach. Dowiesz się także, jak przypisywać obsługę zdarzeń w przeglądarce, by np. wywołać własną funkcję, gdy ktoś kliknie w wybrany przez Ciebie przycisk.
JSON to popularny format wymiany danych, a Ajax to potoczna nazwa dla asynchronicznych zapytań HTTP, które wysyłać możemy z poziomu kodu JavaScript. Dziś niemal każda strona internetowa wykorzystuje te technologie. W niektórych przypadkach jako dopełnienie podstawowej funkcjonalności witryny, a w innych jako główny motor napędzający stronę. Jeśli kiedykolwiek widziałeś, jak na stronie internetowej jakaś treść "doczytuje" się np. podczas przewijania - widziałeś w praktyce Ajax. W jednym z rozdziałów kursu zobaczysz, jak pracować z tym formatem, a także jak wysyłać wspomniane zapytania do serwera.
Choć kurs który masz przed sobą, jest kursem dla początkujących, to aby zrozumieć jak działa język JavaScript i jak z nim się współcześnie pracuje, omówimy dwa ważne tematy - zarządzanie zależnościami i bundlowanie kodu. Dowiesz się czym jest npm i jak z jego pomocą pobierać paczki gotowego kodu z internetu, a także jak sprawić, by bez trudnu dołączać je do własnego kodu. W tym celu skorzystamy z narzędzia snowpack, które pozwoli nam także na optymalizację kodu przed jego wypuszczeniem w świat. Na tym etapie omówimy również jak działają moduły ESM, pozwalające dzielić kod na mniejsze części.
Kurs podzielony został na możliwie krótkie lekcje, do których w każdej chwili możesz wrócić. Jeśli zatem zapomnisz jak odczytywać wymiary elementu na stronie, szybko odnajdziesz odpowiednią lekcję. Czym jednak była by sama teoria i proste przykłady, bez pokazania, jak połączyć je w całość i wykorzystać w praktyce? Dobra wiadomość jest taka, że w kursie stworzymy aż 5 praktycznych projektów, wykorzystujących zdobytą wcześniej wiedzę. Najpierw napiszemy program losujący Dużego Lotka, następnie dynamiczny pasek postępu przeczytania artykułu, dymek pojawiający się nad elementem po najechaniu na niego myszą, wygenerujemy tabelkę w użytkownikami na podstawie danych JSON, a na koniec tworzymy prosty odtwarzacz wideo, z możliwością pauzowania i przewijania filmu.
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 nie jest wymagana, ale zalecana jest podstawowa wiedza z zakresu samego programowania (czym są zmienne, pętle, funkcje itd.). 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 i zacząć korzystać z nowoczesnych frameworków.
W tej lekcji powiem Ci, że JavaScript ma
również pewne globalne wbudowane funkcje i znajdziesz je na takiej stronie.
Dokładnie są to te funkcje, czyli nie ma ich zbyt wiele
w przeciwieństwie do takich języków jak np.
PHP, gdzie są setki, być może nawet tysiące
różnych funkcji globalnych, tutaj jest ich dosłownie kilka i mamy np.
taką funkcję jak isFinite, która pozwoli nam określić, czy jakaś liczba jest liczbą
skończoną w języku JavaScript, czy możemy ją reprezentować.
Więc na przykład w konsoli możemy się odwołać globalnie do takiej funkcji.
A skoro globalnie, to równie dobrze
mógłbyś poprzez obiekt window się do niej odwołać,
ale zazwyczaj robimy to tak po prostu isFinite i tutaj podamy sobie np.
tysiąc razy tysiąc
pomnożymy to zostanie przekazane do tej funkcji, no i dowiemy się true lub false
czy jest to liczba, którą da się reprezentować w języku JavaScript.
Jak widzisz, mamy tutaj true. Mamy również np.
taką funkcję jak isNaN.
Powiedzmy, że pomnożył bym sobie Piotr razy 1000
i to nam zwróci NaN, o którym Ci już mówiłem
w tym kursie. Ale okazuje się, że nie da się w języku JavaScript porównać czy NaN czy np.
result równa się NaN, bo to zawsze zwróci nam false,
ale mamy specjalną globalną funkcję isNaN
i ona jeżeli jej przekażemy, taki result to nam powie, czy to nie jest liczba bo not a number
to nie jest liczba. I zobaczmy.
Również zostanie zwrócone
true. Mamy np.
inną funkcję, z której ja często korzystam
nazywa się ona parseInt i ona nam pozwoli wyciągnąć liczbę całkowitą ze stringa.
Jeżeli przekażemy 20 jako string zamieni nam to na number 20.
Natomiast co ciekawe, jeśli tutaj byśmy podali np.
20 zł, ta funkcja również będzie potrafiła
to 20 z tego wyciągnąć i mamy już number, na którym da się wykonywać pewne operacje.
Mamy również funkcję globalną parseFloat, gdzie jak byśmy przekazali np.
20. 50 zł to ona nam to zamieni na liczbę zmiennoprzecinkową w ten sposób.
Jak widzisz tutaj jest kilka tych funkcji,
z części z nich pewnie kiedyś będziesz korzystał,
natomiast pozostałe funkcje w języku
JavaScript, które są dostępne to są dostępne przez różne obiekty.
Te obiekty można sobie tutaj znaleźć i jest ich troszkę.
To nie znaczy, że Ty musisz je wszystkie znać i że one będą szczególnie przydatne.
Ale jednym z ciekawszych obiektów, które
chcę Ci pokazać jest na przykład Math podany tutaj.
Jeżeli klikniemy to możesz sobie dokładnie
o tym poczytać i to jest obiekt dostępny globalnie, który zawiera w sobie również i
różne metody i różne właściwości. Np. tu mogliśmy zauważyć, że jest coś takiego
jak Math.PI, gdybyśmy sobie to wyświetlili to jest to po prostu odwołanie do liczby PI.
Zobacz ona wygląda w ten sposób i jest zwracana jako number, ale możemy na Math na
przykład wywołać sobie metodę taką jak max albo min.
Czyli możemy przekazać różne liczby i zostanie nam zwrócona najmniejsza np.
powiem Math.min.
Tu można przekazać dowolną liczbę parametrów np.
100, 10, 5 i 300 i chciałbym żeby została zwrócona mi najmniejsza liczba.
W tym przypadku będzie to 5.
Zobacz dokładnie piątka została zwrócona.
Odwrotnością tej metody jest z kolei Math.max.
O tych metodach jeżeli byś potrzebował jakoś pracować z
takimi matematycznymi operacjami możesz sobie tutaj więcej poczytać.
Jak widzisz troszkę ich jest, ale nie są
to funkcje dostępne globalnie, tylko właśnie przez taki specjalny obiekt Math.
No i podobnie jest z innymi obiektami tutaj
gdybyśmy dali wstecz mamy również taki obiekt jak Number
i na tym obiekcie również są dostępne jakieś stałe, a także jakieś metody np.
ta isNaN, którą Ci pokazałem od jakiegoś czasu
jest dostępna również poprzez obiekt Number.
Podobnie isFinite czy isInteger.
Jak widzisz troszeczkę tutaj jest kilka
takich metod i można z nich korzystać. Na początku swojej drogi z JavaScript
nie przejmuj się tym, że musisz jakoś
specjalnie się ich uczyć, ale pamiętaj, że możesz sobie tutaj zerknąć i że oprócz
kilku globalnych funkcji w języku JavaScript mamy również pewne globalne
obiekty, które zawierają odpowiednie metody.
Natomiast jeżeli byśmy przeszli do
przeglądarki, to mamy też takie globalne funkcje jak powiedzmy alert
i jeśli bym zrobił tutaj witaj, to wyświetli nam to takie oto okienko.
Natomiast nie możemy powiedzieć, że to język JavaScript posiada wbudowaną funkcję
alert, bo w specyfikacji JavaScriptu jej nie ma.
Ona po prostu jest dostępna w
przeglądarkach internetowych na obiekcie Window, a co za tym idzie również jest
globalna. I w innych środowiskach uruchomieniowych takich jak np.
Node.js, też mogą być dostępne jakieś funkcje globalne, które nie są stricte
związane z samym standardem języka JavaScript, ale są udostępniane jako
globalne funkcje właśnie przez to środowisko.