Redakcja portalu webroad.pl podjęła się nie lada trudu. Postanowiliśmy, iż po sukcesie kursu WordPress i Joomla! weźmiemy na tapetę kolejną popularną technologię internetową i spiszemy swój własny kurs jQuery, najpopularniejszej biblioteki JavaScript. Zadanie to nie jest łatwe, więc kolejne cześci kursu będziemy publikować sukcesywnie, a na końcu całość opublikujemy w jednym miejscu na naszym wortalu webmasterskim. Kurs planujemy stworzyć na zasadzie „od A do Z” co w skrócie oznacza, iż dzisiejszy wpis poświęcimy na krótki wstęp teoretyczny. Jeśli wolisz praktykę to poczekaj na kolejną publikację ;) Jeśli zaś chcesz dowiedzieć się czegoś więcej o bibilotece jQuery (na razie od strony teoretycznej) to zapraszam do lektury.
Wstęp
jQuery to biblioteka języka JavaScript. Język JavaScript swego czasu stworzyła firma Netscape, a jego nazwa specjalnie została skojarzona z językiem programowania Java, choć JavaScript i Java nie są tym samym (do dzisiaj budzi to zamieszanie). Dzisiaj JavaScript jest właściwie jednym z głównych fundamentów sieci. Banalne slidery jak i całe skomplikowane aplikacje internetowe powstają dzięki językowi stworzonemu przez Netscape. Obecnie z JavaScript korzystają serwisy takie jak Google czy Flickr i mało kto kojarzy go ze strasznymi czasami tańczących i skacząych stron www.
JavaScript jest jednak językiem programowania, więc w porównaniu z HTML i CSS jest relatywnie trudny do nauczenia. Ponad to również w przypadku JavaScriptu występują różnice w działaniu skryptów w różnych przeglądarkach. Tak więc używanie tego języka nie jest łatwe, szczególnie jeśli nie jest się osobą „techniczną”. Te wady JavaScript’u stanęły u podstaw sukcesu biblioteki jQuery. W gruncie rzeczy jQuery to 'program’ napisany w JavaScripcie, który ułatwia to wszystko co w JS najtrudniejsze. Żartobliwie można powiedzieć, że jest on stworzony dla laików, którzy jakimś sposobem zmuszeni zostali do tworzenia strony www ;) Ale to tylko pół prawdy. W rzeczywistości jQuery to potężne narzędzie, które ułatwia życie i pozwala na szybszy proces deweloperski.
O tym, że operacje przeprowadzane po stronie klienta są teraźniejszością i przyszłością sieci chyba nie trzeba nikogo przekonywać. Przeładowywanie się strony po każdym kliknięciu z pewnością nie koresponduje z formułą Web 2.0…
Jak to działa?
HTML + CSS + JavaScript = nowoczesna strona internetowa.
O tym czym jest HTML i CSS pisać nie będziemy. Jeśli dwa pierwsze elementy powyższego równania są Ci obce to musisz sięgnąć do podstaw.
To co dla nas ważne to żeby uzmysłowić sobie jak działa JavaScript. Otóż w dużej mierze manipuluje on elementami HTML i klasami/stylami CSS. To właśnie ta warstwa stron internetowych odpowiada za dynamiczne i płynne zachowania po stronie przeglądarki (bez konieczności przeładowania strony). Jeśl nie jest Ci obce pojęcie DOM to szybko zrozumiesz jakie możliwości daje sposobność kreowania go i modyfikacji dokonywanych np. na żądanie użytkownika.
Żeby sobie to zwizualizować możemy podać jakikolwiek, prosty kod HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript" > $(document).ready(function(){ $('.slide-wrap') .after('<div class="menu">') //tworzymy nawigacje .cycle({ fx: 'scrollHorz', //rodzaj animacji speed: 'fast', //szybkość przejścia timeout: 10000, //czas między slajdami next: '.slide-wrap',//określamy element, który przenosi nas do następnego slidu pager: '.menu' //określamy nawigację }); }); </script> |
Obecnie ten kod jest „sztywny”. Mamy przed sobą znaczniki HTML’a, które wyznaczają treść dokumentu. Jeśli dołączymy do nich style CSS uzyskamy możliwość wpływania na warstwę prezentacji. Już same arkusze stylów modyfikują i (w pewnym sensie) manipulują językiem HTML, ale nadal nie dzieje się to dynamicznie i na zawołanie… A co gdyby po kliknięciu linka z przykładu przeglądarka nie przenosiła by nas na strone webroad.pl, ale np. na stronie pojawiłby się kolejny artykuł? Mniejsza o to czy ma to w tym konkretnym przypadku sens ;) chodzi o fakt tego czego doświadczamy – użytkownik może wpłynąć na treść strony www, którą przegląda.
Nauka jQuery vs. nauka JavaScript
Wydaje się to mało istotne, ale wcale nie jest i istnieje pewien problem w podejściu do tematu. Jest wiele osób, które argumentują, iż po prostu łatwiej jest uczyć się jQuery. Przyjmując bardziej praktyczne stanowisko, w którym najważniejszy jest efekt, czyli możliwość prowadzenia manipulacji na DOM, lepszym wyjściem wydaje się nauka jQuery. Z drugiej strony jest wiele słusznych argumentów na temat pierwszeństwa nauki JavaScript przed nauką jQuery.
Naszym celem nie jest rozwiązywanie tego sporu i każdy będzie musiał sam podjąć decyzję. Poniżej zamieszczamy klika linków, które mogą Wam pomóc (pisownia oryginalna):
- Is it a good idea to learn JavaScript before learning jQuery?
- JavaScript vs JQuery
- Nauka jQuery
- Java script vs jQuery ?
Warto też wspomnieć, że znajomość JavaScriptu się po prostu przydaje i czasami jQuery może stać się „złem”.
Dodatkowe źródła
Nasz kurs ma być kursem „od A do Z” i docelowo chcemy żeby był jak najwyższej jakości i abyście mogli jak najwięcej na nim skorzystać. Stąd poniżej zamieszczamy listę kliku ciekawych pozycji książkowych i linków, które mogą się przydać:
- JavaScript i jQuery. Nieoficjalny podręcznik
- jQuery. Od nowicjusza do wojownika ninja
- jQuery. Kod doskonały
- Dokumentacja jQuery
- jqfundamentals
Oprócz tego zachęcamy do komentarzy. Kurs możecie też współtworzyć Wy, drodzy czytelnicy! Wasze uwagi są mile widziane i będą brane pod uwagę (te które mają sens, oczywiście:).
C.D.N.
Edit: zapraszamy na kolejną część kursu! Link
Kurs zapowiada się na prawdę dobrze. Czekam na następną część :)
Postaramy się sprostać Waszym wymaganiom, dlatego wszelkie wskazówki zawsze są mile widziane. Pozdrawiam!
mam nadzieję, że tak będzie – trochę przeraża mnie objętość materiału, ale z drugiej strony… :)
Powoli do wszystkiego dojdziemy. Ja zastanawiam się nad nowym kursem wideo. Prawdopodobnie będzie dotyczył od Joomla! 3.0 (chyba, że zaczekam na Joomla! 3.5). Tak czy inaczej, coś wykombinuję :-)
Jak dobrze że są tacy ludzie, którzy sie chętnie dzielą wiedzą. Czekam na następną część ;] Good JOB
Co jaki czas będzie wrzucana kolejna część ?
Będziemy się starać publikować nowe artykułu z tego cyklu minimum raz na tydzień. Jeśli się tylko da to częściej. Proszę o wyrozumiałość – materiał jest obszerny a kurs jest „w realizacji” :)
rozumiem, wiem, że obszerny :) szukam od kilku dni jakiegoś kursu javascriptu/jquery który byłby na czasie. Niestety same kursy z 2008-2010 roku, gdzie np. css3 uznawany jest za jeszcze czarną magię :)
W takim razie czekam ze zniecierpliwieniem na kolejną część :)
Powodzenia i Pozdrawiam :)
Doszukalem sie drobnychj literowek:
„Jeśl nie jest Ci obcje pojęcie DOM to(…)”
Dziękuję, poprawiam :-)
drobna wpadka :)
Co tam Kubuś ?
Nie da się ukryć. Ba bym postawił 1 za tak niezorganizowaną stronę
Nie da się ukryć. Ja bym postawił 1 za tak niezorganizowaną stronę