JavaScript

Kurs jQuery – cz.1, czyli o czym mowa?

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:

<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):

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ć:

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

komentarzy 14

  • Awatar
    Franky

    18 stycznia 2013 10:13

    Kurs zapowiada się na prawdę dobrze. Czekam na następną część :)

    Odpowiedz
    • Awatar
      Michał Kortas

      18 stycznia 2013 10:15

      Postaramy się sprostać Waszym wymaganiom, dlatego wszelkie wskazówki zawsze są mile widziane. Pozdrawiam!

      Odpowiedz
    • Awatar
      Mr.Mr

      18 stycznia 2013 11:28

      mam nadzieję, że tak będzie – trochę przeraża mnie objętość materiału, ale z drugiej strony… :)

      Odpowiedz
      • Awatar
        Michał Kortas

        18 stycznia 2013 11:51

        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ę :-)

        Odpowiedz
  • Awatar
    ryh

    18 stycznia 2013 11:12

    Jak dobrze że są tacy ludzie, którzy sie chętnie dzielą wiedzą. Czekam na następną część ;] Good JOB

    Odpowiedz
  • Awatar
    Jerzu

    19 stycznia 2013 14:04

    Co jaki czas będzie wrzucana kolejna część ?

    Odpowiedz
    • Awatar
      Mr.Mr

      19 stycznia 2013 15:28

      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” :)

      Odpowiedz
      • Awatar
        Jerzu

        19 stycznia 2013 16:30

        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 :)

        Odpowiedz
  • Awatar
    mrq

    29 stycznia 2013 01:10

    Doszukalem sie drobnychj literowek:
    „Jeśl nie jest Ci obcje pojęcie DOM to(…)”

    Odpowiedz
  • Awatar
    adasieg

    3 listopada 2014 10:58

    Co tam Kubuś ?

    Odpowiedz
  • Awatar
    65u65eu6

    3 listopada 2014 11:00

    Nie da się ukryć. Ba bym postawił 1 za tak niezorganizowaną stronę

    Odpowiedz
  • Awatar
    65u65eu6

    3 listopada 2014 11:01

    Nie da się ukryć. Ja bym postawił 1 za tak niezorganizowaną stronę

    Odpowiedz

Zostaw odpowiedź