jQuery - poznaj najpopularniejszą bibliotekę JavaScript

jQuery to biblioteka wykorzystywana powszechnie na całym świecie - stanowi więc naturalny krok na ścieżce kariery każdego twórcy stron internetowych.

Przed Tobą ośmiogodzinna przygoda z najpopularniejszą biblioteką JavaScriptową na świecie.

Jeżeli tworzysz strony internetowe i zdążyłeś już poznać takie technologie jak HTML i CSS, a także masz już podstawy języka JavaScript, to kolejnym naturalnym krokiem na Twojej drodze będzie nauka korzystania z biblioteki jQuery.

CZYM JEST JQUERY? 

Biblioteką nazywamy zbiór funkcji napisanych w danym języku, które mogą być dołączone do dowolnego projektu i w łatwy sposób wykorzystywane.

Tak właśnie jest z biblioteką jQuery, która powstała w 2006 roku i odpowiedziała wówczas na ogromną potrzebę - pisanie spójnego i działającego w wielu przeglądarkach internetowych kodu.

Nawet dzisiaj pewne przeglądarki internetowe implementują nowe funkcje Obiektowego Modelu Dokumentu w różny sposób. A zatem aby mieć pewność, że pisany przez nas kod będzie działał dokładnie tak samo niezależnie od tego czy strona zostanie wyświetlona w najnowszej wersji przeglądarki Firefox czy może w leciwym Internet Explorerze 9, musimy stosować wiele trików.

Przez to pisanie kodu nie jest już tak proste i przyjemne, a także znacząco wzrasta jego ilość.

W trakcie kursu dowiesz się:

• dlaczego jQuery pozwala za pomocą niewielkiej ilości kodu otrzymywać taki sam rezultat we wszystkich wspieranych przeglądarkach internetowych

• zaczniemy od prostych zadań, jak dodawanie czy usuwanie klas CSS

• przejdziemy potem do wysyłania żądań AJAX

Z użyciem jQuery zawsze napiszesz taki sam kod, a ta biblioteka zadba już o wszystkie niezbędne triki, które musi wykonać “pod spodem”, aby rezultat był w każdej przeglądarce taki sam.

NIEOGRANICZONE MOŻLIWOŚCI BIBLIOTEKI 

Biblioteka jQuery, oprócz upraszczania możliwych do wykonania również bez niej zadań, udostępnia nam także wiele zupełnie nowych funkcji i możliwości.

A do nich zaliczyć możemy np. animacje elementów HTML.

Zaczniemy od:

• wyboru wersji biblioteki i jej podpięcia do strony internetowej

• poznasz potężne możliwości selektorów CSS, które pozwolą znaleźć w drzewie DOM każdy element

• zobaczysz jak tworzyć nowe elementy dynamicznie

• przekonasz się jak na wiele sposobów wstawiać je na stronę

• jak przypisywać funkcje obsługi zdarzeń do poszczególnych elementów, np. na kliknięcie lub najechanie kursorem myszy…

• … oraz jak działa i czym jest delegacja zdarzeń

ANIMACJE, WYGLĄD I KLASY CSS 

W kolejnym kroku zajmiemy się pracą z właściwościami CSS elementów, które można w prosty sposób odczytywać, a także przypisywać.

Dowiesz się:

• jak pracować z klasami CSS

• stworzymy praktyczny projekt “Gwiazdkowej oceny” artykułu

• poznasz również metody pozwalające odczytywać charakterystyki związane z geometrią elementów, a więc ich szerokość, wysokość czy położenie w dokumencie

• posłużą nam one do stworzenia projektu menu kontekstowego, dostępnego pod prawym przyciskiem myszy

• poruszymy temat animacji

• dowiesz się jak pokazywać oraz ukrywać wybrane elementy, a także jak robić to w płynny sposób, np. rozwijając dany element lub animując jego dowolne właściwości CSS

• nie zabraknie również informacji na temat super- płynnych animacji z użyciem CSS3…

• …a także praktycznego projektu “Accordion”, który połączy całą zdobytą do tej pory wiedzę.
  

AJAX-OWA REWOLUCJA!

Cały oddzielny rozdział poświęcimy również technologii AJAX, która niegdyś zrewolucjonizowała internet.

Zobaczysz jak z użyciem jQuery wysyłać zapytania do serwera bez przeładowywania witryny, a także jak wyświetlać na stronie otrzymane dane. Z pomocą jQuery będzie to możliwe za pomocą nawet trzech linijek kodu. Oprócz zwykłych zapytań AJAX, poznasz również:

• możliwości jQuery w zakresie techniki JSONP…

• …czy synchronicznego pobierania skryptów JavaScript

• wykonamy praktyczny projekt, który pozwoli wczytywać kolejne strony portfolio bez przeładowywania witryny

• wyświetlimy animowany preloader

• kiedy dane zostaną zwrócone, wstawimy je na stronę

• poruszymy też nieco bardziej zaawansowane zagadnienia, takie jak obiekt Deferred czy Promise

• zobaczysz jak z użyciem jQuery korzystać z tych rozwiązań, a także do czego mogą być przydatne

• wykonamy praktyczny projekt preloadera obrazów wraz z paskiem ładowania postępu

WŁASNE ROZSZERZENIA I PLUGINY 

Jeden z rozdziałów kursu poświęcimy na omówienie tworzenia własnych rozszerzeń do biblioteki jQuery.

Zobaczysz jak stworzyć swój pierwszy plugin, a także jak umożliwić jego przyszłym użytkownikom prostą konfigurację.

Aby dobrze zrozumieć koncepcję tworzenia rozszerzeń wykonamy kilka praktycznych projektów:

• jednym z nich będzie powiadomienie o plikach cookies wysuwane z góry strony, które po ukryciu, nie będzie już nękać odwiedzającego

• następnie stworzymy praktyczne zakładki, które pozwolą ukryć część treści i pokazywać ją dopiero po kliknięciu w odpowiednią pozycję menu

• ostatnim z projektów będzie lightbox - to największy i najbardziej skomplikowany przykład omówiony w tym kursie, w którym wykorzystamy bardzo wiele technik jQuery.

Lightbox będzie umożliwiał kliknięcie na miniaturkę zdjęcia, pokazanie preloadera w czasie, gdy duży obraz jest wczytywany, a na koniec płynną animację do wielkości wczytanego obrazu oraz jego pokazanie.

Zobaczysz również, jak zamknąć takie okno na kilka sposobów, w tym z użyciem klawisza ESC.

GOTOWE ROZWIĄZANIA OSZCZĘDZAJĄCE CZAS

Choć pisanie własnych rozszerzeń do biblioteki jQuery to świetna zabawa, to wiele z nich możemy znaleźć również w internecie.

Z tego powodu wykorzystamy dwa z nich i osadzimy je na przygotowywanej stronie.

Pierwszy z pluginów, który zaimplementujemy, to slider obrazów, a drugi to bardzo ciekawa możliwość sortowania projektów w portfolio nad podstawie ich kategorii.

Zobaczysz jak w prosty i szybki sposób podpiąć takie rozwiązania do własnej strony, a także jak je skonfigurować dla swoich potrzeb.

Kurs kończy się sekcją dziesięciu lekcji z serii Tips&Tricks, gdzie w maksymalnie krótkim czasie zobaczysz wiele przydatnych technik i trików do wykorzystania w codziennej pracy z biblioteką jQuery.

To jednak nie wszystko, co znajdziesz w kursie. Na przestrzeni ośmiu godzin omówimy również:

• pracę z formularzami

• pętle dostępne w jQuery

• możliwość przypisywania własnych danych do wybranych elementów HTML.

Dla kogo jest ten kurs?

Choć wszystkie zagadnienia związane z jQuery są w tym kursie tłumaczone od podstaw, to fakt, iż biblioteka ta jest napisana w języku JavaScript sprawia, że należy znać podstawy tego języka już wcześniej.

Jeśli zatem rozumiesz jak działa JavaScript, a także Obiektowy Model Dokumentu i potrafisz w drzewie DOM wyszukiwać elementy, tworzyć nowe czy pracować z ich treścią, to możesz bez obaw przystąpić do tego kursu.

W przeciwnym wypadku, zalecamy zapoznanie się najpierw z materiałem JavaScript od Podstaw. Aby jednak wynieść z tego kursu jak najwięcej, dobrze znać również takie zagadnienia jak AJAX, format wymiany danych JSON czy podstawowe koncepcje programowania obiektowego. Taką wiedzę znajdziesz z kolei w kursie JavaScript w Praktyce.

Niezależnie zatem czy chcesz dodać do swojej strony kilka interaktywnych elementów czy masz ambicje tworzyć zaawansowane aplikacje webowe - jQuery na pewno będzie Twoim sojusznikiem, a czas poświęcony na naukę jej wykorzystania, zwróci się wielokrotnie.