BLOG

Kurs jQuery – od podstaw cz.1 [instalacja, pierwszy skrypt]

22.03.2013 r.
09:34
Kurs jQuery – od podstaw cz.1 [instalacja, pierwszy skrypt]

Oto seria dziesięciu lekcji kursu biblioteki jQuery, od podstaw. Dzisiejsze strony WWW nie mogą być już statyczne, potrzeba im dynamiki, interaktywności (komunikacji z użytkownikiem) oraz szybkiego działania. Wszystkie te cechy możemy zaimplementować dołączając do naszej statycznej strony bibliotekę jQuery.

1.Kurs jQuery – od podstaw cz.1 [instalacja, pierwszy skrypt]
2.Kurs jQuery – od podstaw cz.2 [selektory, metody]
3.Kurs jQuery – od podstaw cz.3 [czytanie i modyfikacja]
4.Kurs jQuery – od podstaw cz.4 [piszemy formularz]
5.Kurs jQuery – od podstaw cz.5 [POST, GET, AJAX]
6.Kurs jQuery – od podstaw cz.6 [funkcje]
7.Kurs jQuery – od podstaw cz.7 [wtyczki]
8.Kurs jQuery – od podstaw cz.8 [najlepsze gotowe rozwiązania]
9.Kurs jQuery – od podstaw cz.9 [najlepsze gotowe rozwiązania cz.2]
10.Kurs jQuery – od podstaw cz.10 [najlepsze gotowe rozwiązania cz.3]

Witam wszystkich zainteresowanych poznaniem biblioteki jQuery. Od razu zaznaczam, że aby programować z użyciem biblioteki należy znać:

  • Język HTML + CSS [na poziomie bardzo dobrym]
  • JavaScript [na poziomie podstawowym – bardzo wiele elementów tego języka poznasz podczas pisania skryptów z użyciem jQuery]
  • PHP [opcjonalnie – przydaje się podczas modyfikacji bazy danych i innych zaawansowanych operacji na stronach WWW]

Jeżeli spełniasz powyższe wymagania, czujesz się mocno w HTML’u i czujesz, że chcesz przejść na następny poziom to ten kurs jest właśnie dla Ciebie. Pierwsze trzy lekcje zawierają informacje niezbędne do pisania podstawowych skryptów z użyciem biblioteki jQuery. Gdy już przejdziesz przesz przez trzy kursy – w czwartym zostaniesz sprawdzony. Napiszemy w pełni funkcjonalny formularz i udowodnię Ci, że tylko trzy lekcje wystarczą do tego, aby poruszać się w bibliotece jQuery.

Kolejne lekcje (od 5 do 7) to zaawansowane aspekty wykorzystania biblioteki, takie jak przesyłanie danych między dokumentami HTML a PHP, implementacja wtyczek, stosowanie i pisanie funkcji .

Ostatnie trzy lekcje (od 8 do 10) prezentują najlepsze gotowe już rozwiązania, część z nich do wykorzystania, część do skrupulatnej analizy kodu. Pamiętaj, że są tylko dwie zasady, aby nauczyć się programować:

  • Pisz kod, nie kopiuj,
  • Czytaj gotowy kod i analizuj każdą linijkę.

Dzięki tym dwóm zasadom szybciej zapamiętasz składnię używaną w bibliotece, która jest niezbędna, aby pisać porządne skrypty.

Instalacja

Zaczynamy oczywiście od instalacji (a w zasadzie podłączenia biblioteki pod nasz szkielet dokumentu HTML). Najnowszą bibliotekę w wersji skompresowanej oraz deweloperskiej znajdziesz na stronie http://www.jQuery.com. W dniu pisania tej lekcji aktualna wersja to 1.9.1. Poniżej linki do pobrania biblioteki:

W zasadzie to od Ciebie zależy, którą wersję chcesz pobrać – do naszych celów polecam wersję deweloperską, ale nie ma to żadnego znaczenia.

Jedyne co nam pozostaje, to wrzucić pobraną bibliotekę np. do katalogu js oraz podłączyć skrypt do dokumentu HTML:

    <script src="js/jquery-1.9.1.js">

lub korzystamy z biblioteki umieszczonej na serwerach producenta:

    <script src="http://code.jquery.com/jquery-1.9.1.js">

I to w zasadzie tyle!

Pierwszy skrypt

 Od teraz możemy korzystać ze wszystkich możliwości biblioteki. Napiszmy więc szybko pierwszy skrypt, a następnie przejdę do jego omówienia:

    <script type="text/javascript">
        $(document).ready(function(){
           alert ('Tekst wyświetlony za pomocą biblioteki jQuery');
        });
    </script>

Podstawowy sposób w jaki działa jQuery – wybiera i modyfikuje część dokumentu. Interesującą nas część dokumentu zawsze wskazujemy za pomocą konstrukcji $(). Najczęściej są to znaczniki HTML lub identyfikatory i klasy CSS. Na powyższym przykładzie uruchamiamy bibliotekę jQuery (wskazujemy, że akcje będą się działy po załadowaniu całej strony), a następnie za pomocą funkcji znanej z języka JavaScript wyświetlamy użytkownikowi komunikat.

Szkielet większości aplikacji napisanych za pomocą biblioteki jQuery będzie więc wyglądał w następujący sposób:

    <script type="text/javascript">
        $(document).ready(function(){
           
        });
    </script>

Można to tłumaczyć w następujący sposób: dokument został załadowany więc wykonaj funkcję. A o wykonywanych funkcjach w następnym rozdziale.

Podsumowanie

Po przeczytaniu tej lekcji powinieneś sobie przyswoić:

  • jak pobrać i zainstalować bibliotekę jQuery,
  • szkielet aplikacji napisanej w bibliotece jQuery.

Tagi: kurs,jquery,wstęp,instalacja,biblioteka,pierwszy skrypt,javascript,java,php,html.css
Czytane: 141494 razy

comments powered by Disqus