O Javascript

Ostatnia aktualizacja: 25 stycznia 2020

JavaScript (JS) to dynamiczny język programowania, którego głównym celem początkowo było wprowadzenie interaktywności do stron HTML.

Dzięki dynamicznemu rozwojowi już od kilkunastu lat wyszedł ponad swój pierwotny cel pozwalając nam tworzyć całe aplikacje nie tylko na stronach internetowych, ale i poza przeglądarką.

Tak naprawdę Javascript sam w sobie nie jest jakimś rozbudowanym językiem. Ot kilka pętli, kilka funkcji, obiekt Math, window, null itp rzeczy, o których będziemy się tutaj uczyć. Wielu zaawansowanych paradygmatów znanych z bardziej "poważnych" języków tutaj nie znajdziesz. I bardzo dobrze, bo dzięki temu Javascript jest bardziej przystępny dla przeciętnego zjadacza chleba.

W dzisiejszych czasach możemy jednak za jego pomocą napisać nie jedno wielkie dzieło. Zresztą daleko nie ma co szukać - każdy z nas na co dzień używa wielu dynamicznych stron takich jak Facebooka, Youtuba, Figma, które są stworzone właśnie za pomocą Javascript.

Wszystko to jest możliwe dzięki tak zwanym API (Application Programming Interface), czyli interfejsom, które dają nam dostęp do wielu dodatkowych funkcjonalności.

browser api

Interfejsy takie dzielą się na dwie główne kategorie:

  • interfejsy udostępniane przez przeglądarkę
    Dzięki nim mamy dostęp do różnych funkcjonalności przeglądarek. Przykładowo możemy zarządzać elementami na stronie, zarządzać dźwiękiem, rysować po planszy, obsługiwać geolokalizację i wiele, wiele innych rzeczy.
    Do każdej takiej funkcjonalności mamy stworzony osobny interfejs. Takich interfejsów ani nie ściągamy, ani dodatkowo nie instalujemy. Po prostu jeżeli dana przeglądarka udostępnia nam dane funkcjonalności, możemy z nich korzystać.
  • zewnętrzne interfejsy API
    Czyli udostępniane przez zewnętrzne serwisy takie jak Twitter, Facebook, Google Maps, Youtube czy podobne. Dzięki nim możemy wyświetlać kolekcje filmów, wyznaczać drogę do danego miejsca itp. Aby z nich korzystać musimy wykonać odpowiednie połączenia, o czym będziemy uczyć się w dalszych rozdziałach kursu.

Wersje Javascript

Javascript jest implementacją standardu ECMAScript. Nie jedyną - inną był np. JScript, czy stosowany we Flashu Action Script (i to bardzo dobrą implementacją!). No, ale, że oficjalnie Flash jest już wycofany z przeglądarek, skupmy się na Javascript.

Na stronach https://en.wikipedia.org/wiki/ECMAScript i https://www.w3schools.com/js/js_versions.asp możesz przejrzeć historię kolejnych wersji tego standardu.

Od roku 2012, wszystkie nowoczesne przeglądarki całkowicie obsługują ECMAScript 5.1.

W 2015 roku, ECMA International opublikował szóstą wersję ECMAScript, która oficjalnie nazywa się ECMAScript 2015, ale też w wielu miejscach nazywana jest skrótowo ES6.

Była to charakterystyczna wersja, ponieważ nie tylko wprowadziła do języka dość sporo nowych funkcjonalności (takich jak let/const, class, moduły, symbole itp.), ale też była ostatnią w której zastosowano stare wersjonowanie.

Właśnie od tego roku wprowadzono nowy proces wersjonowania, co spowodowało, że kolejne wersje zaczęły pojawiać się częściej i bardziej regularnie. Od tamtej pory co roku dostajemy nowe - mniejsze wersje tego języka, które swoją nazwę biorą od roku wydania. I tak mamy już ES2017, ES2018, i kolejne. Dodatkowo wszystkie zapowiedziane zmiany, które jeszcze nie są wprowadzone do konkretnych wersji nazwane są pod wspólną nazwą ES.Next.

Powyższa zmiana wersjonowania zresztą nie dziwi. Popatrz np. na przeglądarki. Kiedyś na każdą kolejną wersję przeglądarki musieliśmy czekać kilkanaście miesięcy lub nawet lat. Podobnie było z Firefoxem czy Chromem. Kilka lat temu wprowadzono inne wersjonowanie, dzięki czemu nowe wersje przeglądarek pojawiają się jak grzyby po deszczu (przy okazji sprawiając, że ciężko śledzić kolejność zmian).

Podobnie zresztą z CSS. Mieliśmy CSS2, CSS3 a 4 jak nie widać, tak nie widać. I nie za szybko zobaczymy kolejną wersję, ponieważ... zmieniono podejście do rozwoju. CSS podzielono na oddzielne moduły i każdy z nich aktualizują oddzielnie. Mamy więc oddzielną część dotyczącą Flexboxa, oddzielną CSS Grid czy zupełnie inną dotyczącą CSS Colors.

Poniższy film dobitnie to wyjaśnia:

Przy czym jak to w naszym fronendowym świecie bywa - wciąż trwają dyskusje (1, 2).

A co to oznacza dla nas Frontendowców? W zasadzie to, że w dzisiejszych czasach niekoniecznie musimy skupiać się na konkretnych wersjach Javascriptu, CSS i HTML (chyba, że projekt który właśnie robimy ma konkretne wytyczne). "A bo ja używam CSS3 i ES6". E tam, nie marudź. Używasz po prostu CSS i Javascript.

...

Nie zawsze to jednak jest takie proste. Na świecie są różne przeglądarki, i nie każda z nich wspiera każdą nowość jaką wprowadzono do Javascript. Dodatkowo - nie oszukujmy się - niektóre rzeczy działają różnie w danych przeglądarkach. Działa jako tako...

Pan Wiesio

A do tego niektórzy użytkownicy mogą umyślnie blokować pewne funkcjonalności (np. blokując geolokalizację). Taki to już ten nasz Frontend (w tym Javascript) jest.

W kolejnych rozdziałach spróbujemy odpalić sobie kilka narzędzi, które ułatwią nam pracę z tymi niuansami (1, 2, 3, 4). Przy czym jeżeli dopiero co rozpoczynasz swoją przygodę to daj sobie czas. Nie skupiaj się na rzeczach, które na samym początku tylko będą ci przeszkadzać. Do wszystkiego dojdziemy.

Nieocenione tutaj będą też strony:

na których sprawdzisz wsparcie danych funkcjonalności.

Oczywiście także https://developer.mozilla.org/pl/, która przy większości opisów na dole strony pokazuje wsparcie na różnych przeglądarkach.

A poza tym praktyka, praktyka i jeszcze raz praktyka. Jak z jazdą samochodem...

Wszelkie prawa zastrzeżone. Jeżeli chcesz używać jakiejś części tego kursu, skontaktuj się z autorem. Aha - i ta strona korzysta z ciasteczek.

Menu