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.
Kolejnym typem danych w języku JavaScript
jest typ liczbowy, czyli z angielskiego number.
Utworzymy sobie stałą, którą nazwę number, ale pamiętaj, że te nazwy cały czas one są
dowolne, bo to tylko nazwa zmiennej i przypiszę do niej wartość 20.
I teraz nie tak jak wcześniej,
kiedy przypisywaliśmy to w ten sposób, tylko właśnie literalnie 20
I to informuje interpreter języka JavaScript, że jest to wartość liczbowa,
więc później, jeżeli będziemy dokonywać
jakichś operacji np. arytmetycznych, to będą te liczby poprawnie dodawane czy np.
mnożone, bo nie jest to już wartość tekstowa.
Teraz być może widzisz również, dlaczego
nie możemy nazywać zmiennych zaczynając od liczb.
Bo gdybyśmy tutaj napisali np.
20 albo po prostu chcielibyśmy nazwać
zmienną 20, to interpreter nie byłby w stanie wiedzieć, kiedy my korzystamy
później z liczby, a kiedy korzystamy z odwołania do zmiennej.
Bo jeżeli tutaj piszę 20
i wiemy, że zmienne nie mogą się zaczynać od cyfr, to wiadomo, że jest to liczba, a
w innym przypadku może byłaby to zmienna, którą ktoś nazwał 20. Nie wiadomo.
Dlatego właśnie nie możemy zaczynać nazw zmiennych i stałych od liczb.
Mamy również kolejny typ liczbowy,
w zasadzie to jest jakby ten sam,
nazywamy go typem number,
ale potrafi on reprezentować liczby po przecinku, więc możemy sobie napisać np.
price, czyli cena jakiegoś produktu i zrobić coś takiego.
Tu oczywiście może być więcej miejsc po przecinku.
Im więcej ich będzie, tym później mniej dokładne mogą być wyliczenia.
Natomiast możemy w ten sposób po kropce jak widzisz zapisywać sobie takie liczby
zmiennoprzecinkowe i na nich potem dokonywać również różnorakich operacji.
Teraz, jeżeli chodzi o to, jak wielkie liczby możemy reprezentować w języku
JavaScript, bo mogą to być liczby dodatnie, ale także liczby ujemne
jeżeli bym tutaj zrobił sobie np.
minus, to wstawię je w takim komentarzu.
Otóż mamy taką globalną, jakby stałą
Infinity, gdybym sobie to skopiował i w przeglądarce tutaj w konsoli się do tego odwołał
zostanie zwrócone po prostu Infinity.
Ale to jest tak jakby taka globalna stała,
którą nie my utworzyliśmy, ale jest ona dostępna w środowisku i ona w zasadzie
reprezentuje największą możliwą liczbę, jaką możemy tutaj zaprezentować.
Wygląda ona w ten sposób.
Jest również minus Infinity
i jest to właśnie taka liczba, a także mamy
jeszcze taką specjalną wartość jak NaN dokładnie tak zapisywaną jest to Not a Number
i ona nam się może pojawiać w różnych
sytuacjach, kiedy wykonamy jakąś operację, która powinna być przeznaczona dla liczb,
na przykład mnożenie, ale będziemy tam podstawiać powiedzmy dwa ciągi znaków.
Czyli gdybym np. tutaj w konsoli, gdzie możemy
bezpośrednio wykonywać kod, chciał pomnożyć Jan razy Kowalski,
później jeszcze powiemy sobie o tych operatorach, zobacz
zwróciło nam to NaN. Więc
w tej lekcji chciałem wspomnieć o tym, że
jest taka wartość w języku JavaScript, która nazywa się NaN i oznacza Not a Number.
Ona się pojawia właśnie jako wynik działania, które było przeznaczone dla
liczb, ale z jakiegoś powodu podstawiliśmy tam coś innego
i nie mamy tutaj błędu, ale właśnie mamy zwrócone Not a Number.
Swoją drogą nie wspominałem o tym jeszcze wcześniej,
w języku JavaScript możemy tworzyć w taki
sposób komentarze, a komentarz pozwala nam po prostu zapisać sobie
cokolwiek i jest to ignorowane przez interpreter.
Czyli tak jak tutaj utworzyłem stałą price,
to jest poprawny kod, ale jakbym sobie ją wykomentował, czyli zapisał w komentarzu,
w tym momencie interpreter kompletnie już tej linijki nie bierze pod uwagę.
Komentarz możemy sobie np.
napisać również tutaj, żeby dla siebie coś skomentować, cokolwiek możemy tutaj
wpisać, wtedy również będzie to zignorowane.
Więc to jest jeden typ komentarza, taki
liniowy, a także mamy komentarze blokowe, które można zapisywać w taki sposób.
Wtedy on może być rozdzielony na wiele linii.
Tutaj możemy sobie wpisać jakąś treść, coś dla siebie albo dla innych programistów,
żeby było wiadome co w jakimś pliku się dzieje.
Więc komentowanie również jest dobrą
praktyką, szczególnie tam, gdzie korzystamy z jakiegoś zapisu albo
stworzyliśmy jakąś logikę, która nie jest na pierwszy rzut oka jasna
to warto w jakiś sposób sobie to skomentować.
Jeżeli zatem chodzi o typ liczbowy,
zapisujemy go literalnie po prostu jako liczbę.
Może to być liczba po przecinku, a ten przecinek tzw.
reprezentujemy po prostu kropką, a nie przecinkiem.
No i pamiętaj, że mamy również taką stałą jak Infinity czy minus Infinity
i one w zasadzie są po to, jeżeli chcielibyśmy sprawdzić, czy wynik jakiejś
operacji nie zwróci nam liczby większej niż Infinity.