Rozdział 1. Witamy

04 września 2012
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek
W rozdziale:

Szybki rozwój biblioteki jQuery sprawia, że wkrótce jej znajomość będzie niezbędna dla każdego projektanta stron internetowych. Niniejsza książka ma na celu omówić bibliotekę jQuery językaJavaScript. Po przestudiowaniu podręcznika powinieneś potrafić wykonać proste zadania z użyciem jQuery i uzyskasz solidne podstawy do dalszej nauki. Książka została opracowana jako uzupełnienie lekcji z nauczycielem, lecz może się także okazać pomocna jako samouczek.

Jest to praktyczny kurs. Poświęcimy trochę czasu na omówienie danego zagadnienia, a następnie będziesz mógł rozwiązać zadanie napisane w oparciu o omawiany materiał. Niektóre ćwiczenia mogą się wydawać banalnie proste, inne zaś okażą się przerażająco trudne. W obydwu przypadkach ćwiczenia nie podlegają ocenie; ich celem jest oswojenie cię z rozwiązywaniem problemów, do których często będziesz wykorzystywać jQuery. Przykładowe rozwiązania wszystkich ćwiczeń zostały zamieszczone w przykładowym kodzie.

Skąd wziąć kod

Wykorzystywany w książce kod jest przechowywany w repozytorium Github. Można go pobrać w pliku .zip lub .tar, a następnie rozpakować i wykorzystać na własnym serwerze. Jeśli sprawnie posługujesz się narzędziami serwisu Github, możesz sklonować to repozytorium lub utworzyć jego rozwidlenie.

Oprogramowanie

Aby w pełni wykorzystać kurs, zalecane są poniższe programy:

  • Przeglądarka Firefox
  • Rozszerzenie Firebug do przeglądarki Firefox
  • Edytor tekstu
  • Do sekcji o Ajaksie: serwer lokalny (np. MAMP lub WAMP), bądź klient FTP lub SSH pozwalający na dostęp do zdalnego serwera.

Jak umieścić skrypt JavaScript na stronie

Skrypt JavaScript można wstawić śródliniowo lub poprzez umieszczenie pliku zewnętrznego w elemencie script. Ważna jest kolejność, w jakiej dodajesz skrypty: elementy, od których zależy skrypt, muszą być wstawione przed tym skryptem.

Ze względu na wydajność strony, JavaScript powinien być umieszczany jak najbliżej końca kodu HTML. Przed utworzeniem wersji produkcyjnej, wszystkie pliki JavaScript należy ze sobą połączyć.

Przykład 1.1. Przykład kodu śródliniowego JavaScript

<script>
console.log('witaj');
</script>

Example 1.2. Przykład zewnętrznego skryptu JavaScript

<script src='/js/jquery.js?x86153'></script>

Debugowanie kodu JavaScript

Aby programować w JavaScripcie niezbędne jest narzędzie do debugowania. W przeglądarce Firefox dostępne jest ono w postaci rozszerzenia Firebug, zaś Safari i Chrome mają wbudowane konsole.

W każdej konsoli znajdziemy:

  • jedno- i wieloliniowe edytory do eksperymentowania z JavaScriptem
  • inspektor pozwalający sprawdzić wygenerowany kod źródłowy strony
  • widok sieci lub zasobów — do kontroli żądań sieciowych

Podczas pisania kodu JavaScript do wysyłania komunikatów do konsoli możesz wykorzystać poniższe metody:

  • console.log() do wysyłania ogólnych komunikatów
  • console.dir() do rejestrowania obiektów w formacie umożliwiającym przeszukiwanie
  • console.warn() do rejestrowania ostrzeżeń
  • console.error() do rejestrowania błędów

Dostępne są także inne metody, lecz mogą się one różnić w zależności od przeglądarki. Konsole pozwalają również ustawiać punkty wstrzymania i obserwować wykonywanie wyrażeń w kodzie w celu znajdowania usterek.

Ćwiczenia

Większość rozdziałów podręcznika kończy się jednym lub kilkoma ćwiczeniami. Niektóre z nich będziesz mógł rozwiązać bezpośrednio w Firebugu; w przypadku innych, po elemencie script jQuery będziesz musiał umieścić także inne skrypty — zgodnie z instrukcjami podanymi w poleceniu.

Aby rozwiązać niektóre ćwiczenia będziesz musiał odwołać się do dokumentacji biblioteki jQuery, ponieważ całość materiału nie została omówiona w książce. Jest to zrobione celowo. jQuery jest obszerną biblioteką, a wyszukiwanie odpowiedzi w dokumentacji to ważna część procesu nauki.

Oto kilka sugestii jak radzić sobie z takimi problemami:

  • Po pierwsze upewnij się, że dokładnie rozumiesz problem, który masz rozwiązać.
  • Następnie ustal, jakich elementów będziesz potrzebować do rozwiązania problemu i jak je dostać. Skorzystaj z Firebuga, by sprawdzić, czy operujesz na odpowiednich elementach.
  • Na koniec ustal, w jaki sposób powinieneś wykorzystać wybrane elementy do rozwiązania problemu. Przed podjęciem próby napisania właściwego kodu warto dodać komentarze, które wyjaśniają, co chcesz zrobić.

Nie bój się błędów! Nie staraj się napisać perfekcyjnego kodu za pierwszym podejściem! Pomyłki i eksperymenty z rozwiązaniami to część nauki biblioteki i dzięki temu staniesz się lepszym programistą. Przykładowe rozwiązania tych ćwiczeń znajdują się w katalogu /solutions w przykładowym kodzie.

Konwencje stosowane w książce

Metody, które można wywołać na obiektach jQuery będą oznaczane jako $.fn.nazwaMetody. Metody, które istnieją w przestrzeni nazw jQuery, lecz których nie można wywoływać na obiektach jQuery, będą oznaczane jako $.nazwaMetody. Jeśli teraz nie mówi ci to za wiele, nie martw się — wszystko stanie się jasne w trakcie pracy z książką.

Przykład 1.3. Oto przykład przykładu

// tak będą wyglądać przykłady kodu

Pomoce naukowe

Istnieją liczne artykuły i wpisy na blogach po części omawiające jQuery. Niektóre z nich są fenomenalne, inne zawierają ewidentne błędy. Jeśli czytasz jakiś artykuł na temat jQuery, upewnij się, że dotyczy on tej samej wersji biblioteki, której używasz. Postaraj się też nie kopiować od razu wszystkiego — poświęć trochę czasu na zrozumienie opisywanego w artykule kodu.

Oto kilka świetnych źródeł, które mogą pomóc ci w nauce jQuery. Najważniejszy jest kod źródłowy biblioteki jQuery — zawiera bowiem, w formie kodu, kompletną dokumentację biblioteki. To nie jest czarna skrzynka — jeśli będziesz regularnie do niego zaglądać, zaczniesz znacznie lepiej rozumieć tę bibliotekę. Gorąco polecam dodać bibliotekę do zakładek i często z niej korzystać.

Autor: Rebecca Murphey

Źródło: http://github.com/rmurphey/jqfundamentals

Tłumaczenie: Joanna Liana

Treść tej strony dostępna jest na zasadach licencji CC BY-SA 3.0 US

1 komentarz

  1. Dobry opis,nie to co na innych stronach. Wszystko w każdym dziale dokładnie i w miarę krótko opisane. Do tego podane dodatkowe źródła będą przydatne dla każdego :)

    Odpowiedz

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *