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

Kiedy nie używać JavaScriptu?

Opieranie się na JavaScripcie może okazać się błędem. Wbrew pozorom nie wszyscy odwiedzający z niego korzystają. Zadziwiające, jak często twórcy stron zapominają o tym.

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:

Forum
Porady, opinie

Web Toster
Webdesign

Internet Maker
Webmastering

Magazyn Internet
Gadżety, technologia

Magazyny Internetowe
Aktualności, programy

AJAX, Framework, JavaScript, jQuery

jQuery - od czego zacząć

Pierwsze kroki

Autor

Tomasz Kapelak

Pozostałe publikacje

Kiedy nie używać JavaScriptu?

Załączniki

Newsletter

Forum Porady, opinie

Web Toster Webdesign

Internet Maker Webmastering

Magazyn Internet Gadżety, technologia

Magazyny Internetowe Aktualności, programy

AJAX, Framework, JavaScript, jQuery

jQuery - od czego zacząć

Pierwsze kroki

Autor

Tomasz Kapelak

Pozostałe publikacje

Kiedy nie używać JavaScriptu?

Załączniki

Newsletter

Forum
Porady, opinie

Web Toster
Webdesign

Internet Maker
Webmastering

Magazyn Internet
Gadżety, technologia

Magazyny Internetowe
Aktualności, programy