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.
Jeżeli to Twoje pierwsze spotkanie z językiem JavaScript, to krótko odpowiedzmy
sobie na pytanie czym ten język jest i co go cechuje?
Przede wszystkim język JavaScript jest językiem interpretowanym
a oznacza to mniej więcej tyle, że piszemy
jakiś kod źródłowy, który jest bezpośrednio uruchamiany.
Czyli możemy podłączyć skrypt do
przeglądarki albo uruchomić go w innym środowisku, takim jak np.
Node.js
i jest ten program, który napisaliśmy od razu wykonywany.
A więc to środowisko dba o to, aby ten kod skompilować i uruchomić.
W przeciwieństwie do innych języków
programowania, gdzie trzeba napisać program, a następnie go skompilować i
dopiero w takiej skomplikowanej, można powiedzieć spakowanej formie uruchomić.
Język JavaScript jest używany najczęściej jako dopełnienie języków HTML i CSS, a
więc za pomocą HTML tworzymy strukturę strony internetowej i jakiś podstawowy
wygląd, natomiast pozostały wygląd dopełniamy z użyciem styli CSS.
Ale gdybyśmy chcieli na stronie np.
kliknąć przycisk i wczytać jakieś
dodatkowe dane, albo powiedzmy wykonać jakąś bardziej zaawansowaną walidację
formularza, do tego będzie już potrzebny język JavaScript, który z użyciem
odpowiednich API przeglądarek pozwoli nam właśnie takie czynności wykonać.
Wspomniałem o przeglądarkach, ale język JavaScript jest możliwy do uruchomienia
również poza przeglądarką internetową w takich środowiskach jak np.
Node.js.
Dzięki temu jest wiele aplikacji
działających po stronie serwera, które są również napisane w języku JavaScript.
I to, co jest bardzo ważne w przypadku
języka JavaScript, to fakt, że ten język jest cały czas aktywnie rozwijany i mamy w
zasadzie co roku nowe wydanie specyfikacji
a za tą specyfikacją podążają twórcy i
silników, które są w przeglądarkach internetowych i na innych platformach.
A zatem jeżeli w specyfikacji pojawi się
coś nowego, to już niedługo będziemy mogli również z tego korzystać np.
w przeglądarkach internetowych.
Język ten zatem jest przyszłościowy, cały
czas rozwijany, no i przede wszystkim bardzo popularny.
Następnym pytaniem, na które chciałbym odpowiedzieć jest czym jest tzw.
ES6?
Jest to wersja standardu EcmaScript 2015, na której bazuje język JavaScript.
Czyli jest pewne konsorcjum, które ustala
standardy jak będzie rozwijany język i one teraz co roku są już wydawane i na
podstawie tych standardów jest tworzony język JavaScript i jego implementacje np.
w przeglądarce internetowej.
ES6 jest również rewolucją w języku JavaScript
bo to wydanie wprowadziło naprawdę wiele nowości.
Mianem tym określa się również tak
potocznie wszystkie nowości od standardu EcmaScript 5
czyli można powiedzieć, że jeżeli mamy
wydanie 2016, 17, 18, często one są nazywane jako ES7 czy ES8, ale również często
potocznie można powiedzieć, że coś jest dostępne w ES6
mając na myśli nie tylko ten standard
2015, ale wszystkie, które od tego momentu zostały wydane.
Więc ja w tym kursie wielokrotnie będę
mówił, że coś jest dostępne od standardu ES6.
Natomiast czasem może być tak, że to nie było dostępne od roku 2015, ale np. rok
później, czyli często w środowisku właśnie programistów określa się standardem ES6
te wszystkie nowe zmiany, które nastąpiły po ES5.
Wspomniałem wcześniej, że język JavaScript
może być uruchamiany poza przeglądarką internetową.
Odpowiedzmy sobie na pytanie gdzie. Np.
na serwerze z użyciem środowiska Node.js.
Język ten może być również wykorzystywany w budowaniu aplikacji hybrydowych
np. mamy taki framework Electron,
za pomocą którego zbudowany jest cały popularny edytor kodu VS Code.
Czyli można powiedzieć, że edytor VS Code
jest stworzony z użyciem HTML, CSS i właśnie JavaScriptu.
Język ten może być również wykorzystywany np.
przy tworzeniu pluginów do wielu
popularnych programów, w tym do programu graficznego Sketch.
To zatem tyle, jeżeli chodzi o krótkie wprowadzenie do języka JavaScript.
W kolejnych lekcjach zaczniemy już konkretnie poznawanie tego języka.