Zapewne zauważyłeś jak bardzo rozwija się ostatnio znaczenie języka skryptowego JavaScript w tworzeniu stron. Wstępna walidacja danych z formularza, różnego rodzaju alerty, ciekawe animacje czy też tak bardzo popularny ostatnio skrypt do eleganckiego wyświetlania zdjęć „Litebox” – to tylko kilka z naprawdę wielu możliwości języka skryptowego, który przeżył ostatnio swoje „odrodzenie”.
jQuery to chyba najbardziej popularny (obok „MooTools”, czy „Prototype”) framework tegoż języka. Dzięki jego prostej składni i mnogości funkcji, szybko stworzymy skrypty, które uatrakcyjnią naszą stronę.
W tym artykule pragnę przedstawić podstawy jQ, które wprowadzą czytelnika, na nowy poziom kodowania interfejsów stron www, jednocześnie pozwalając zaoszczędzić wiele czasu. Zakładam, że znasz już podstawy języka javascript, chociaż tak naprawdę nie będą one niezbędne.
Instalacja
Instalacja frameworka ogranicza się tylko do trzech prostych kroków.
1.Po pierwsze musimy ściągnąć ze strony najnowszy plik. Do wyboru mamy dwie opcje „production” oraz „development”. Jak słusznie podpowiada nam intuicja – wybieramy pierwszą opcję. Różni się ona od drugiej tym, że została skompresowana do 19KB (w stosunku do 120KB), więc nie nadaje się do zmiany jej zawartości. Na tym poziomie nie będzie nam to jednak przeszkadzać. Przy zapisywaniu pliku proponuję skrócić nazwę z proponowanej do jquery.js i zapisać w jakimś nowym folderze.
2.Kolejny krok to utworzenie nowego pliku index.html, w tym samym folderze co jquery.js (oczywiście jego lokalizacja w bardziej zaawansowanych projektach, zwykle bywa inna, postanowiłem jednak uprościć to w tym przykładzie).
3.Trzeci krok to powiązanie obu plików. Ta czynność jest równie prosta jak podłączenie innych skryptów, czy też po prostu arkuszów css. W pliku index.html napisz następujący kod:
<html><head><title>test</title><script type="text/javascript" src="jquery.js"></script></head><body></body></html>
To wszystko! O ile wykonałeś wszystko zgodnie z powyższymi wskazówkami, jQuery zostało prawidłowo podpięte pod stronę. Jednak, jak pewnie zdążyłeś zauważyć uruchomienie index.html w przeglądarce nie daje żadnych ciekawych efektów. De facto wyświetla się pusta biała strona. I nic dziwnego – wszak to dopiero instalacja. Zróbmy, więc, coś z tym!
Pierwszy przykład – hello world
Nie wyłamując się z konwencji kursów programowanie stwórzmy swój pierwszy „Hello World” w jQuery! Będziemy musieli dodać prosty kod, póki co, wciąż niewiele się różniący od „standardowego” kodu javascipt. W sekcji head, na przykład pod znacznikiem odwołującym się do pliku js, dodajmy coś takiego:
<script>$(document).ready(function(){ alert("Hello world!");});</script>
Po uruchomieniu index.html powinno nas powitać okienko z komunikatem „Hello world!”. Teraz kilka słów wyjaśnienia. Funkcja alert(), to funkcja JavaSriptowa wyświetlająca komunikat podany jako parametr – tutaj nie ma żadnej filozofii.
Zagadką natomiast może się wydawać kod okalający powyższą funkcję. Otóż jest to bardzo proste. Konstrukcja $(document) oznacza, że będziemy odwoływać się do całego dokumentu, natomiast zdarzenie ready(function() { }); wykonuje zawartość nawiasów klamrowych „{ }” zaraz po tym, jak otrzyma informacje o gotowości. Mówiąc prościej: alert zostaje wyświetlony w momencie załadowania się dokumentu html.
Powyższa konstrukcja jest podstawą wielu skryptów. Wystarczy pomyśleć logicznie: po co wykonywać skrypt na stronie, która jeszcze do końca się nie załadowała?
Drugi przykład – chowanie elementu
Powyższy przykład, ni to imponujący, ni to przydatny w codziennej pracy, z pewnością jednak pomógł zrozumieć działanie jQuery. Dodajmy teraz trochę życia!
Kod jest na tyle krótki, że postanowiłem dodać od razu cały:
<html><head><title>test</title><script type="text/javascript" src="jquery.js"></script><script>$(document).ready(function(){ $('a').click(function(){ $('p').hide(); });});</script></head><body> <a href="#">chowaj!</a> <p>Przykładowy tekst</p></body></html>
Zapisz plik i sprawdź jego działanie.
Po pierwsze dodaliśmy link (odwołujący się do obecnego dokumentu – href=”#”) oraz prosty paragraf zawierający „Przykładowy tekst”.
Druga modyfikacja do kod jQuery. W miejscu alerta z poprzedniego przykładu umieściliśmy kod, który po kliknięciu na link (<a>), chowa paragraf z tekstem (<p>). Struktura jest dokładnie taka sama jak w opisywanym przykładzie pierwszym:
$(‘wybrany obiekt’).zdarzenie(function(){ akcja… });
Nowa funkcja – hide() – chowa wskazany element. Analogiczną do niej jest funkcja show() – jednak aby dobrze zadziałała, element pokazywany musi być wcześniej albo schowany przez hide(), albo musi mieć nadany „na sztywno” przez css atrybut display: none;
Przykład trzeci – zwiń / rozwiń:
Przykład nr 2 z pewnością poszerzył naszą wiedzę o jQuery, ale nadal jest taki… mało przydatny. W ostatnim przykładzie, tego krótkiego wprowadzenia do jQuery, dodamy funkcjonalność, która przydaje się na wielu stronach: zwijanie / rozwijanie wskazanego elementu. Ciekawą implementacją tego efektu jest rozwijanie okienka „zaloguj” na wielu stronach po kliknięciu odpowiedniego linku. My posłużymy się przykładem nr 2, aby zbytnio nie komplikować rzeczy prostych.
Kod znajduje się poniżej:
<html><head><title>test</title><script type="text/javascript" src="jquery.js"></script><script>$(document).ready(function(){ $('#link').click(function(){ $('#text').toggle(); })});</script></head><body> <a href="#" id=”link”>zwiń / rozwiń</a> <p id=”text”>Przykładowy tekst</p></body></html>
W zasadzie kod taki sam, jak w poprzednim przykładzie, ale pojawiła się tajemnicza funkcja toggle() oraz nasze selektory ($()) odwołują się trochę inaczej.
Funkcja toggle() to jedno z wielu błogosławieństw jQuery – pozwala na połączenie (w pewnym sensie) funkcji show() i hide() w jednej. Jeśli element jest ukryty to toggle() działa jak show(), natomiast w odwrotnej sytuacji toggle() oznacza mniej więcej tyle co hide().
Natomiast zmodyfikowane selektory odwołują się do elementów, tych co poprzednio, z tym, że po identyfikatorach. Jest to nic innego jak składnia css. Możemy używać wszystkich dobrodziejstw selektorów znanych z kaskadowych stylów.
Wszystko pięknie działa, ale dlaczego to jest takie statyczne? Obiecywałem zwijanie, natomiast paragraf po prostu znika. Proponuję zamienić funkcję toggle() na slideToggle() jak poniżej:
<html><head><title>test</title><script type="text/javascript" src="jquery.js"></script><script>$(document).ready(function(){ $('a').click(function(){ $('p').slideToggle(); })});</script></head><body> <a href="#">zwiń / rozwiń</a> <p>Przykładowy tekst</p></body></html>
Funkcja slideToggle() to „połączenie” funkcji slideUp() oraz slideDown(). Czyż nie jest to proste?
To tylko całkowite podstawy frameworka jQuery. Jak to bywa z frameworkami – jeśli chcemy po prostu wyświetlić komunikat – warto zrobić to w czystym kodzie, jednak jeśli chcemy wykonać coś bardziej zaawansowanego, jak choćby animacja (jak w ostatnim przykładzie) to opisany framework okaże się bardzo przydatny.
Pełną dokumentację oraz wiele przykładów znajdziesz na stronie . Mam nadzieję, że udało mi się przekonać Ciebie do jQuery, sam nie wyobrażam sobie dzisiaj codziennej pracy bez jego udogodnień.
