AJAX, Framework, JavaScript, jQuery

jQuery - od czego zacząć

jQuery - od czego zacząć Ostatnie lata przyniosły wiele zmian, jeżeli chodzi o sposób tworzenia serwisów WWW. Zaczęto stosować technikę AJAX, która umożliwia interakcję między użytkownikiem a serwerem bez konieczności przeładowywania całej strony. W dużej mierze odpowiada za to rozbudowany język obiektowy JavaScript, który został wyposażony w liczne biblioteki ułatwiające pisanie w nim skryptów. Jedną z najciekawszych jest biblioteka jQuery.

Tomasz Kapelak

1 2 3 4 »

Pierwsze kroki

Biblioteka jQuery upraszcza wykonanie dotychczas całkiem skomplikowanych rzeczy. Mamy wrażenie, że korzystamy z języka o zupełnie nowej jakości.

Aby zacząć przygodę z jQuery, najpierw musimy pobrać najnowszą jej wersję ze strony: http://jquery.com. Następnie w pliku (X)HTML w sekcji <head> umieszczamy stosowne odwołanie do biblioteki:

JavaScript

<script src="jquery.js" type="text/javascript"></script>

W naszym przypadku jquery.js to nazwa pobranego pliku z jQuery, który umieściliśmy w tym samym katalogu co plik z kodem (X)HTML.

W dalszej części będziemy zakładać, że kod (X)HTML naszej strony ma postać jak na listingu 1.

[-]

Listing 1 (listing1.html)

HTML

 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 4. <head>
 5.   <link rel="stylesheet" type="text/css" href="style.css" />
 6.   <script type="text/javascript" src="jquery.js"></script>
 7.   <script type="text/javascript">
 8.         $(document).ready(function() {
 9.               /* miejsce na kod jQuery */
10.         });
11.   </script>
12.  
13. </head>
14. <body>
15.  
16. <div id="container">   
17.     
18.     <h1>Newsletter</h1>
19.  
20.     <p>
21.     Newsletter to elektroniczny biuletyn - czasopisma rozsyłane przez nas za
    pomocą poczty elektronicznej do prenumeratorów.
22.     </p>
23.   
24.     <p>
25.     Zapisując się na nasz newsletter masz gwarancję, że nie przegapisz żadnej
    ważnej informacji. Obiecujemy, że na podany adres e-mail nie będziemy wysyłać
    żadnych reklam. Oczywiście subskrypcja jest całkowicie bezpłatna i w każdej
    chwili możesz z niej zrezygnować.
26.     </p>
27.     
28.     <form>
29.         <div><label for="cname">Imię:</label><input type="text" id="cname"
    name="name" /></div>
30.         <div><label for="cemail">E-mail:</label><input type="text" id="cemail"
    name="email" /></div>  
31.         <div>
32.             Płeć:
33.             <label><input type="radio" name="sex" value="m" /> mężczyzna</label>
34.             <label><input type="radio" name="sex" value="f" /> kobieta</label>
35.         </div>
36.         <div>
37.             <label><input type="checkbox" name="rules" value="1" /> akceptuję
    regulamin</label><br />
38.             <label><input type="checkbox" name="newsletter" value="1" /> chcę
    otrzymywać newsletter</label>
39.         </div>    
40.  
41.         <div class="buttons">
42.             <input type="submit" name="send" value="Wyślij">
43.         </div>
44.     </form>
45.  
46.     <table>
47.       <tr><th>Imię</th><th>Nazwisko</th></tr>
48.       <tr><td>Jacek</td><td>Nowak</td></tr>
49.       <tr><td>Ania</td><td>Piotrowska</td></tr>  
50.       <tr><td>Wojtek</td><td>Kowalski</td></tr>        
51.     </table>
52.     
53.     <div>
54.         <a href="onas.html">O nas</a> | <a href="http://www.innastrona.pl"
    title="nasz nowy projekt">Zobacz także</a>
55.     </div>
56.     
57. </div>
58.  
59. </body>
60. </html>

Listing zwinięty - 60 linii

Natomiast zawartość pliku ze stylami (style.css), które będziemy wykorzystywać w artykule, przedstawia się tak jak na listingu 2.

[+]

Listing 2 (style.css)

CSS

 1. .important {
 2.     color: red;
 3. }
 4.               
 5. .odd {
 6.     background-color: grey;
 7. }
 8.         
 9. .even {
10.     background-color: yellow;
11. }

Listing zwinięty - 11 linii

Strona jest zatem bardzo prosta, zawiera dwa akapity tekstu, formularz, tabelkę i kilka linków. Wizualnie nie wygląda to zbyt dobrze (rys. 1), treść także jest dość przypadkowa. Jednak w tym przypadku jest to tylko przykładowy plik, na którym będziemy testować różne funkcje udostępniane przez bibliotekę jQuery.

Szczególną uwagę należy zwrócić na umieszczony w sekcji <head> kod:

[+]

JavaScript

1. <script type="text/javascript">
2.     $(document).ready(function() {
3.         /* miejsce na kod jQuery */
4.     });
5. </script>

Listing zwinięty - 5 linii

Rys. 1 Wszystko, co znajduje się wewnątrz konstrukcji $(document).ready(), wykonywane jest zaraz po wczytaniu DOM danej strony. Przekładając to na prostszy język - kod JavaScript wykonywany jest bez zbędnego opóźnienia, jeszcze przed załadowaniem całej grafiki. Zatem $(document).ready() to w jQuery korzystniejsza wersja tradycyjnego <body onload=""> (chociaż można korzystać z jej wiernego odpowiednika: $(document).load()). Natomiast samo słowo kluczowe function służy do tworzenia tzw. funkcji anonimowej. Jest to właściwość dostępna w samym języku JavaScript i intensywnie wykorzystywana w jQuery.

Następnie nasz kod umieszczamy w miejscu wskazywanym przez komentarz /* miejsce na kod jQuery */.

17 września 2008

1 2 3 4 »

Powiązane publikacje

jQuery dla zaawansowanych

Framework jQuery - JavaScript nie boli

JavaScript nas kręci

AJAX Kurs od podstaw - jQuery

Skomentuj
ten artykuł

Komentarzy: 3

Monday, 19.10.2009 11:43fesseme

Witam jest błąd w tekście jest:
$('label[@for]').css({'font-weight': 'bold'});
powinno być:
$('label@[for]').css({'font-weight': 'bold'});
małpa jest nie w tym miejscu
przynajmniej w wersji jq 1.3.2

Wednesday, 4.03.2009 20:47Cardrone

Bardzo ciekawy artykuł, takich chętnie więcej poczytam

Saturday, 28.02.2009 10:11webfascynat

bardzo ciekawy artykul, mam tylko jedno pytanie: nie dziala funkcja odpowiedzialna za sprawdzanie w tle wpisanego emailu, gdy jednak dac if (data == 'error' || 1==1) wtedy wszystko dziala wporzadku przy przechodzeniu z pola email do innego, blad musi tkwic w funkcji $.get albo w przekazywaniu zwracanej wartosci przez skrypt php,bardzo mnie to ciekawi, prosze o pomoc

Zobacz wszystkie komentarze »

Autor

Tomasz Kapelak

Artykuły tego autora:

» Euro2008.pl
[INTERNET Maker]
» Inspiracje - filmweb.pl
[INTERNET Maker]
» Google Analytics
[INTERNET Maker]
» Dbam o zdrowie - www.doz.pl
[INTERNET Maker]
» Inspiracje - ceneo.pl
[INTERNET Maker]

Pozostałe publikacje

Jak działa AJAX?

Strony dynamicznie wymieniające dane z serwerem od kilku lat zdobywają coraz większą popularność. Przyjrzyjmy się jak działają teraz i co będą potrafiły po wejściu HTML-a 5.

Załączniki

» calosc.html (3,72 kB)
» email.php (141 B)
» jquery.js (45,35 kB)
» listing1.html (2,13 kB)
» style.css (144 B)

Polecamy:

Na skróty:

Nasze serwisy: