WEBVTT

00:00:00.692 --> 00:00:05.537
Podam wam podstawowe zasady
korzystania z jQuery na stronie www.

00:00:05.637 --> 00:00:08.870
Pierwszy krok
– to wprowadzić bibliotekę jQuery

00:00:08.951 --> 00:00:12.004
przy użyciu znacznika "script".

00:00:12.104 --> 00:00:15.967
Zanim jednak umieścimy JavaScript
w naszym znaczniku "script",

00:00:16.030 --> 00:00:20.215
dodam atrybut "src".

00:00:20.294 --> 00:00:23.127
I muszę to połączyć z jakimś URL-em.

00:00:24.242 --> 00:00:26.331
Ale z jakim?

00:00:26.413 --> 00:00:28.839
Gdybym pracowała na własnym komputerze

00:00:28.915 --> 00:00:32.461
i załadowała jQuery do katalogu,
w którym jest moja strona,

00:00:32.549 --> 00:00:35.596
mogłabym napisać po prostu "jquery.js".

00:00:36.385 --> 00:00:39.387
Ale w Khan Academy to nie zadziała.

00:00:39.487 --> 00:00:45.024
Tu jest mi potrzebny URL jQuery
na jakimś serwerze online.

00:00:45.859 --> 00:00:49.272
Lista tych URL-ów
znajduje się na stronie jquery.com.

00:00:50.573 --> 00:00:53.498
Wkleję tu jeden z nich. Gotowe.

00:00:54.329 --> 00:00:57.972
Chcę zwrócić waszą uwagę
na parę spraw związanych z tym URL-em.

00:00:58.066 --> 00:01:01.788
Po pierwsze, zaczyna się od "https".

00:01:01.842 --> 00:01:05.131
To oznacza, że jest bezpieczny.

00:01:05.231 --> 00:01:10.635
Khan Academy pozwala wam
sprowadzać tylko bezpieczne zasoby.

00:01:11.133 --> 00:01:14.164
To dobry zwyczaj
w projektowaniu stron!

00:01:15.657 --> 00:01:21.556
Po drugie, ten URL znajduje się
na serwerze Google: googleapis.com.

00:01:22.755 --> 00:01:27.701
To serwer systemu CDN
(sieci dystrybucji treści)

00:01:27.753 --> 00:01:32.461
przystosowany do obsługi plików
statycznych, jak biblioteki JavaScript.

00:01:32.507 --> 00:01:34.729
Obsługuje te pliki bardzo szybko.

00:01:35.268 --> 00:01:38.011
Ufam temu serwerowi Google.

00:01:38.051 --> 00:01:42.900
Zawsze powinniście ufać serwerom,
z których sprowadzacie skrypty,

00:01:43.000 --> 00:01:47.318
bo ta operacja niesie potencjalne
zagrożenie dla waszej strony.

00:01:47.364 --> 00:01:52.770
Po trzecie, w tym URL-u
zawiera się numer wersji: 2.1.4.

00:01:53.731 --> 00:01:56.233
Biblioteka jQuery aktywnie się rozwija.

00:01:56.333 --> 00:01:58.982
Często powstają nowe wersje.

00:01:59.082 --> 00:02:03.125
Cyfry po lewej stronie oznaczają
znaczące zmiany wersji,

00:02:03.225 --> 00:02:07.477
a te po stronie prawej
odnoszą się do wersji mniej istotnych.

00:02:08.120 --> 00:02:10.227
Ja używam tu biblioteki jQuery2,

00:02:10.327 --> 00:02:14.397
która współpracuje z nowoczesnymi
przeglądarkami oprócz IE 8.

00:02:14.497 --> 00:02:19.551
Sami zdecydujcie, której wersji użyjecie
na swojej stronie – zależnie od potrzeb.

00:02:19.651 --> 00:02:22.593
Dobrze. Mamy już jQuery.

00:02:22.656 --> 00:02:27.051
Teraz użyjmy tej biblioteki
w innym znaczniku "script".

00:02:30.204 --> 00:02:35.267
Każda biblioteka JavaScript
wystawia funkcje i nadaje im nazwy.

00:02:35.367 --> 00:02:40.364
Te nazwy i opis funkcji
znajdziemy w dokumentacji.

00:02:41.657 --> 00:02:45.349
Biblioteka jQuery daje nam
ważną funkcję

00:02:45.449 --> 00:02:47.446
o bardzo krótkiej nazwie.

00:02:47.546 --> 00:02:50.504
To po prostu znaczek dolara.

00:02:50.570 --> 00:02:53.429
Najpierw piszemy ten znaczek,

00:02:53.491 --> 00:02:56.493
potem dwa nawiasy
(bo mamy do czynienia z funkcją)

00:02:56.593 --> 00:02:58.677
i, oczywiście, średnik.

00:02:59.425 --> 00:03:01.928
Miło, że nazwa funkcji jest krótka,

00:03:01.974 --> 00:03:04.691
bo będziemy ją przywoływać
bardzo często!

00:03:06.160 --> 00:03:09.103
Do funkcji możemy wprowadzić
mnóstwo argumentów,

00:03:09.161 --> 00:03:14.351
ale w moim przykładzie
będzie to po prostu ciąg znaków "h1".

00:03:16.309 --> 00:03:18.886
Gdy skończę, program każe jQuery

00:03:18.932 --> 00:03:22.919
znaleźć wszystkie elementy
"h1" na stronie

00:03:23.035 --> 00:03:26.721
i zwrócić je jako obiekt
z kolekcji jQuery.

00:03:28.142 --> 00:03:33.021
I teraz mogę przywołać
do obiektu jQuery inne metody,

00:03:33.089 --> 00:03:37.129
żeby zmieniać wszystkie
znalezione elementy "h1".

00:03:37.179 --> 00:03:40.009
Chcąc zmienić tekst
wewnętrzny w każdym elemencie,

00:03:40.043 --> 00:03:44.885
przywołam funkcję "text"
i wprowadzę ciąg znaków.

00:03:46.905 --> 00:03:50.736
Już się robi! Tak! Gotowe.

00:03:50.787 --> 00:03:53.033
To nasz pierwszy kontakt z jQuery.

00:03:53.078 --> 00:03:56.866
Wprowadziliśmy bibliotekę do programu
za pomocą znacznika "script"

00:03:56.966 --> 00:03:59.815
i kazaliśmy jej znaleźć
wszystkie "h1" na stronie,

00:03:59.871 --> 00:04:02.880
a potem – zmienić w nich tekst.

00:04:03.577 --> 00:04:07.547
Oglądajcie kolejne odcinki.
Zagłębimy się w szczegóły,

00:04:07.603 --> 00:04:10.799
poznamy sposoby wybierania
i modyfikacji elementów,

00:04:10.899 --> 00:04:14.831
dowiemy się, jak używać jQuery
w reakcji na zdarzenia użytkownika…

00:04:14.931 --> 00:04:17.557
Będzie też zabawa
przy animacji i efektach.