WEBVTT

00:00:01.061 --> 00:00:06.850
Na razie modyfikowaliśmy elementy
istniejące już na stronie.

00:00:07.017 --> 00:00:10.123
A gdybyśmy chcieli dodać tam nowe?

00:00:10.316 --> 00:00:12.849
Moglibyśmy - za pomocą "innerHTML",

00:00:12.949 --> 00:00:17.484
pisząc HTML do tagów w ciągu,
który wprowadzamy.

00:00:17.636 --> 00:00:21.078
Tak jak tutaj.
Tylko że może się zrobić bałagan,

00:00:21.158 --> 00:00:25.827
zwłaszcza gdy chcecie tworzyć tagi
o różnych atrybutach, stylach i klasach.

00:00:25.987 --> 00:00:31.403
Zamiast tego użyjmy
całego wachlarza metod

00:00:31.537 --> 00:00:36.223
tworzenia elementów od zera
i umieszczania ich na stronie.

00:00:36.323 --> 00:00:40.855
Powiedzmy,
że chcemy dodać zdjęcie kota,

00:00:40.955 --> 00:00:44.130
bo na stronie
jest ich jeszcze za mało.

00:00:44.237 --> 00:00:48.622
Pierwszy krok - to stworzyć
nowy element "img", tak?

00:00:48.773 --> 00:00:51.094
To chcemy utworzyć.

00:00:51.194 --> 00:00:55.877
Zaczniemy od zmiennej,
która będzie go przechowywać: "catEl".

00:00:55.977 --> 00:01:00.780
A potem damy:
"document.createElement"

00:01:00.940 --> 00:01:04.667
i wpiszemy nazwę znacznika,
który robimy, czyli "img".

00:01:06.989 --> 00:01:08.429
Można sobie wyobrazić,

00:01:08.544 --> 00:01:11.852
że przeglądarka
zrobiła znacznik zdjęcia, o, taki,

00:01:11.959 --> 00:01:15.302
i unosi się on gdzieś w przestrzeni.

00:01:15.454 --> 00:01:18.896
Następny krok
- to przypisać mu źródło.

00:01:19.056 --> 00:01:23.452
Zatem: "catEl.src =".

00:01:23.565 --> 00:01:26.238
Weźmy źródło stąd...

00:01:29.629 --> 00:01:32.584
...i powinniśmy dodać jeszcze "alt",

00:01:32.717 --> 00:01:34.783
by obraz był łatwiej dostępny.

00:01:34.852 --> 00:01:36.525
Nie robię tego,

00:01:36.625 --> 00:01:41.331
ale powinnam zawsze mieć
"alt" przy zdjęciach.

00:01:42.353 --> 00:01:45.000
Jak widać, ten tag "zdjęcie",

00:01:45.151 --> 00:01:49.393
który zrobiliśmy, ma...

00:01:49.526 --> 00:01:50.700
źródło ("src")...

00:01:50.759 --> 00:01:53.093
i ma też...

00:01:54.035 --> 00:01:58.518
"alt" - "Photo of cute cat"
(zdjęcie ślicznego kota). No dobrze.

00:01:58.618 --> 00:02:03.374
To zrobiliśmy z użyciem JavaScript.

00:02:05.062 --> 00:02:08.789
Nasz tag "img"
nadal unosi się w przestrzeni:

00:02:08.889 --> 00:02:11.527
przeglądarka nie wie,
gdzie go umieścić.

00:02:11.627 --> 00:02:15.906
Nasz DOM ma wiele różnych miejsc,
w których mógłby się znaleźć.

00:02:16.048 --> 00:02:21.409
Zróbmy coś prostego:
niech słowo pojawi się u dołu strony.

00:02:21.624 --> 00:02:25.946
Osiągniemy to,
pisząc na końcu tagu "body":

00:02:26.053 --> 00:02:29.575
"document.body.appendChild(catEl)".

00:02:29.762 --> 00:02:32.563
I jest! Całkiem spory!

00:02:32.670 --> 00:02:35.338
Duży, straszny kot!

00:02:35.445 --> 00:02:41.123
Można przywołać "appendChild" w każdym
istniejącym węźle DOM-u na stronie.

00:02:41.181 --> 00:02:43.663
Sprawi, że wprowadzony element

00:02:43.763 --> 00:02:47.665
zostanie ostatnim dzieckiem
w tym węźle.

00:02:47.798 --> 00:02:52.268
Tutaj pomoże nam wizualizacja:
DOM jako drzewo.

00:02:52.387 --> 00:02:56.030
Tag "body" to węzeł na tym drzewie,

00:02:56.176 --> 00:03:00.140
i ma całą grupę dzieci, np. "h1" i "p".

00:03:00.258 --> 00:03:04.180
Dodajecie
jeszcze jedno dziecko na końcu.

00:03:04.287 --> 00:03:08.104
Znajdzie się za tagiem "script", tutaj.

00:03:09.637 --> 00:03:10.914
Używając metod DOM-u,

00:03:10.984 --> 00:03:15.581
teoretycznie powinniście dokładać
elementy w dowolnym punkcie drzewa.

00:03:15.680 --> 00:03:19.885
My umieściliśmy element
w najbardziej oczywistym miejscu.

00:03:19.985 --> 00:03:22.060
Jeszcze jeden przykład.

00:03:22.244 --> 00:03:25.682
Użyliśmy tutaj "innerHTML",

00:03:25.846 --> 00:03:28.530
by umieścić tagi "strong"
wewnątrz "span".

00:03:28.630 --> 00:03:31.603
Można też użyć
polecenia "stwórz element".

00:03:31.742 --> 00:03:35.024
"var strongEl = document"...

00:03:35.238 --> 00:03:39.544
".createElement strong".

00:03:39.693 --> 00:03:43.909
Źle zapisałam,
a pisownia jest bardzo ważna.

00:03:44.016 --> 00:03:46.858
Powstaje więc pusty tag "strong",

00:03:47.004 --> 00:03:48.948
unoszący się w przestrzeni.

00:03:49.032 --> 00:03:52.127
Najpierw ustalimy tekst.

00:03:52.234 --> 00:03:56.611
Piszemy zatem:
strongEl.textContent = "cat".

00:03:56.796 --> 00:03:58.074
W porządku?

00:03:58.157 --> 00:04:01.928
Moglibyśmy również zrobić coś innego:

00:04:02.079 --> 00:04:04.784
stworzyć tzw. węzeł tekstowy
(textNode).

00:04:04.881 --> 00:04:07.153
Wiele węzłów w drzewie DOM-u

00:04:07.282 --> 00:04:10.984
może zawierać jako dzieci
specjalny typ węzłów, "textNode".

00:04:11.097 --> 00:04:12.805
To nie są elementy,

00:04:12.938 --> 00:04:15.326
lecz nadal węzły w drzewie DOM-u.

00:04:15.446 --> 00:04:19.853
Tzw. "węzły-liście" to ostatnie rzeczy,
które mogą się znajdować w drzewie.

00:04:19.982 --> 00:04:22.640
"Var strongText"...

00:04:22.810 --> 00:04:26.193
"= document.createTextNode".

00:04:27.506 --> 00:04:30.721
Wpiszemy tekst: "cat".

00:04:32.044 --> 00:04:33.670
Używając tej metody,

00:04:33.803 --> 00:04:39.630
stworzyliśmy dwa węzły w przestrzeni.

00:04:39.730 --> 00:04:41.781
Tag "strong"...

00:04:41.994 --> 00:04:46.139
oraz ten "textNode",
czyli po prostu "cat".

00:04:46.812 --> 00:04:49.738
Musimy je połączyć.

00:04:49.919 --> 00:04:54.893
Chcemy, żeby "strong"
był rodzicem "cata".

00:04:55.041 --> 00:05:01.441
Musimy więc napisać:
"strongEl.appendChild(strongText)".

00:05:03.366 --> 00:05:06.443
Teraz, kiedy już mamy...

00:05:07.037 --> 00:05:10.170
"strong" z kotem wewnątrz,

00:05:12.610 --> 00:05:17.116
musimy go gdzieś umieścić,
bo nadal unosi się w przestrzeni.

00:05:18.112 --> 00:05:22.571
Jesteśmy wewnątrz pętli FOR
dla "nameEls".

00:05:22.683 --> 00:05:26.890
Do każdego "nameEl"
chcemy dodać tag "strong".

00:05:26.979 --> 00:05:29.674
Mamy więc tutaj: "nameEls[i]"...

00:05:29.914 --> 00:05:34.157
".appendChild(strongEl)".

00:05:34.797 --> 00:05:38.709
Aha, teraz widzimy to dwa razy,

00:05:38.809 --> 00:05:42.401
bo zostawiłam stary sposób.

00:05:42.508 --> 00:05:46.999
Przytwierdził się do tagu "span",
który ma już w sobie "strong".

00:05:47.138 --> 00:05:49.098
Moglibyśmy zmienić ten wiersz

00:05:49.198 --> 00:05:52.406
na "innerHTML = empty string"
(pusty ciąg).

00:05:52.506 --> 00:05:56.355
Wtedy wyczyściłby się "span",
zanim do niego dojdziemy.

00:05:57.796 --> 00:06:03.438
Widzieliście: wymagało to więcej
wierszy kodu niż wersja "innerHTML".

00:06:05.482 --> 00:06:07.293
Dlaczego to zrobiliśmy?

00:06:07.401 --> 00:06:11.263
Projektanci stron nie lubią
modyfikować dokumentów w ten sposób,

00:06:11.377 --> 00:06:13.283
bo wymaga to więcej programu.

00:06:13.431 --> 00:06:16.836
Większość projektantów
używa bibliotek, np. jQuery,

00:06:17.006 --> 00:06:19.414
by za nich robiły modyfikacje DOM-u.

00:06:19.595 --> 00:06:22.883
Biblioteki mają funkcje,
które robią ten sam program,

00:06:22.983 --> 00:06:26.825
a wy musicie wpisać
znacznie mniej wierszy.

00:06:26.925 --> 00:06:29.700
Wyręczają was funkcje biblioteki.

00:06:29.813 --> 00:06:32.347
Lubię w ten sposób pisać program,

00:06:32.482 --> 00:06:34.576
ponieważ doskonale widzę,

00:06:34.696 --> 00:06:38.405
jak modyfikuję drzewo DOM-u,
wiersz po wierszu.

00:06:38.565 --> 00:06:43.075
To wygląda porządniej niż wpisywanie
wszystkiego w ciąg "inner HTML".

00:06:43.181 --> 00:06:47.163
Wam może się nie podoba.
Ale już wiecie, że jest taka metoda.

00:06:47.263 --> 00:06:49.530
Używajcie jej w razie potrzeby,

00:06:49.664 --> 00:06:54.127
a zorientujecie się, co biblioteki
takie jak jQuery robią za kulisami.