1
00:00:01,061 --> 00:00:06,850
Na razie modyfikowaliśmy elementy
istniejące już na stronie.

2
00:00:07,017 --> 00:00:10,123
A gdybyśmy chcieli dodać tam nowe?

3
00:00:10,316 --> 00:00:12,849
Moglibyśmy - za pomocą "innerHTML",

4
00:00:12,949 --> 00:00:17,484
pisząc HTML do tagów w ciągu,
który wprowadzamy.

5
00:00:17,636 --> 00:00:21,078
Tak jak tutaj.
Tylko że może się zrobić bałagan,

6
00:00:21,158 --> 00:00:25,827
zwłaszcza gdy chcecie tworzyć tagi
o różnych atrybutach, stylach i klasach.

7
00:00:25,987 --> 00:00:31,403
Zamiast tego użyjmy
całego wachlarza metod

8
00:00:31,537 --> 00:00:36,223
tworzenia elementów od zera
i umieszczania ich na stronie.

9
00:00:36,323 --> 00:00:40,855
Powiedzmy,
że chcemy dodać zdjęcie kota,

10
00:00:40,955 --> 00:00:44,130
bo na stronie
jest ich jeszcze za mało.

11
00:00:44,237 --> 00:00:48,622
Pierwszy krok - to stworzyć
nowy element "img", tak?

12
00:00:48,773 --> 00:00:51,094
To chcemy utworzyć.

13
00:00:51,194 --> 00:00:55,877
Zaczniemy od zmiennej,
która będzie go przechowywać: "catEl".

14
00:00:55,977 --> 00:01:00,780
A potem damy:
"document.createElement"

15
00:01:00,940 --> 00:01:04,667
i wpiszemy nazwę znacznika,
który robimy, czyli "img".

16
00:01:06,989 --> 00:01:08,429
Można sobie wyobrazić,

17
00:01:08,544 --> 00:01:11,852
że przeglądarka
zrobiła znacznik zdjęcia, o, taki,

18
00:01:11,959 --> 00:01:15,302
i unosi się on gdzieś w przestrzeni.

19
00:01:15,454 --> 00:01:18,896
Następny krok
- to przypisać mu źródło.

20
00:01:19,056 --> 00:01:23,452
Zatem: "catEl.src =".

21
00:01:23,565 --> 00:01:26,238
Weźmy źródło stąd...

22
00:01:29,629 --> 00:01:32,584
...i powinniśmy dodać jeszcze "alt",

23
00:01:32,717 --> 00:01:34,783
by obraz był łatwiej dostępny.

24
00:01:34,852 --> 00:01:36,525
Nie robię tego,

25
00:01:36,625 --> 00:01:41,331
ale powinnam zawsze mieć
"alt" przy zdjęciach.

26
00:01:42,353 --> 00:01:45,000
Jak widać, ten tag "zdjęcie",

27
00:01:45,151 --> 00:01:49,393
który zrobiliśmy, ma...

28
00:01:49,526 --> 00:01:50,700
źródło ("src")...

29
00:01:50,759 --> 00:01:53,093
i ma też...

30
00:01:54,035 --> 00:01:58,518
"alt" - "Photo of cute cat"
(zdjęcie ślicznego kota). No dobrze.

31
00:01:58,618 --> 00:02:03,374
To zrobiliśmy z użyciem JavaScript.

32
00:02:05,062 --> 00:02:08,789
Nasz tag "img"
nadal unosi się w przestrzeni:

33
00:02:08,889 --> 00:02:11,527
przeglądarka nie wie,
gdzie go umieścić.

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

35
00:02:16,048 --> 00:02:21,409
Zróbmy coś prostego:
niech słowo pojawi się u dołu strony.

36
00:02:21,624 --> 00:02:25,946
Osiągniemy to,
pisząc na końcu tagu "body":

37
00:02:26,053 --> 00:02:29,575
"document.body.appendChild(catEl)".

38
00:02:29,762 --> 00:02:32,563
I jest! Całkiem spory!

39
00:02:32,670 --> 00:02:35,338
Duży, straszny kot!

40
00:02:35,445 --> 00:02:41,123
Można przywołać "appendChild" w każdym
istniejącym węźle DOM-u na stronie.

41
00:02:41,181 --> 00:02:43,663
Sprawi, że wprowadzony element

42
00:02:43,763 --> 00:02:47,665
zostanie ostatnim dzieckiem
w tym węźle.

43
00:02:47,798 --> 00:02:52,268
Tutaj pomoże nam wizualizacja:
DOM jako drzewo.

44
00:02:52,387 --> 00:02:56,030
Tag "body" to węzeł na tym drzewie,

45
00:02:56,176 --> 00:03:00,140
i ma całą grupę dzieci, np. "h1" i "p".

46
00:03:00,258 --> 00:03:04,180
Dodajecie
jeszcze jedno dziecko na końcu.

47
00:03:04,287 --> 00:03:08,104
Znajdzie się za tagiem "script", tutaj.

48
00:03:09,637 --> 00:03:10,914
Używając metod DOM-u,

49
00:03:10,984 --> 00:03:15,581
teoretycznie powinniście dokładać
elementy w dowolnym punkcie drzewa.

50
00:03:15,680 --> 00:03:19,885
My umieściliśmy element
w najbardziej oczywistym miejscu.

51
00:03:19,985 --> 00:03:22,060
Jeszcze jeden przykład.

52
00:03:22,244 --> 00:03:25,682
Użyliśmy tutaj "innerHTML",

53
00:03:25,846 --> 00:03:28,530
by umieścić tagi "strong"
wewnątrz "span".

54
00:03:28,630 --> 00:03:31,603
Można też użyć
polecenia "stwórz element".

55
00:03:31,742 --> 00:03:35,024
"var strongEl = document"...

56
00:03:35,238 --> 00:03:39,544
".createElement strong".

57
00:03:39,693 --> 00:03:43,909
Źle zapisałam,
a pisownia jest bardzo ważna.

58
00:03:44,016 --> 00:03:46,858
Powstaje więc pusty tag "strong",

59
00:03:47,004 --> 00:03:48,948
unoszący się w przestrzeni.

60
00:03:49,032 --> 00:03:52,127
Najpierw ustalimy tekst.

61
00:03:52,234 --> 00:03:56,611
Piszemy zatem:
strongEl.textContent = "cat".

62
00:03:56,796 --> 00:03:58,074
W porządku?

63
00:03:58,157 --> 00:04:01,928
Moglibyśmy również zrobić coś innego:

64
00:04:02,079 --> 00:04:04,784
stworzyć tzw. węzeł tekstowy
(textNode).

65
00:04:04,881 --> 00:04:07,153
Wiele węzłów w drzewie DOM-u

66
00:04:07,282 --> 00:04:10,984
może zawierać jako dzieci
specjalny typ węzłów, "textNode".

67
00:04:11,097 --> 00:04:12,805
To nie są elementy,

68
00:04:12,938 --> 00:04:15,326
lecz nadal węzły w drzewie DOM-u.

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

70
00:04:19,982 --> 00:04:22,640
"Var strongText"...

71
00:04:22,810 --> 00:04:26,193
"= document.createTextNode".

72
00:04:27,506 --> 00:04:30,721
Wpiszemy tekst: "cat".

73
00:04:32,044 --> 00:04:33,670
Używając tej metody,

74
00:04:33,803 --> 00:04:39,630
stworzyliśmy dwa węzły w przestrzeni.

75
00:04:39,730 --> 00:04:41,781
Tag "strong"...

76
00:04:41,994 --> 00:04:46,139
oraz ten "textNode",
czyli po prostu "cat".

77
00:04:46,812 --> 00:04:49,738
Musimy je połączyć.

78
00:04:49,919 --> 00:04:54,893
Chcemy, żeby "strong"
był rodzicem "cata".

79
00:04:55,041 --> 00:05:01,441
Musimy więc napisać:
"strongEl.appendChild(strongText)".

80
00:05:03,366 --> 00:05:06,443
Teraz, kiedy już mamy...

81
00:05:07,037 --> 00:05:10,170
"strong" z kotem wewnątrz,

82
00:05:12,610 --> 00:05:17,116
musimy go gdzieś umieścić,
bo nadal unosi się w przestrzeni.

83
00:05:18,112 --> 00:05:22,571
Jesteśmy wewnątrz pętli FOR
dla "nameEls".

84
00:05:22,683 --> 00:05:26,890
Do każdego "nameEl"
chcemy dodać tag "strong".

85
00:05:26,979 --> 00:05:29,674
Mamy więc tutaj: "nameEls[i]"...

86
00:05:29,914 --> 00:05:34,157
".appendChild(strongEl)".

87
00:05:34,797 --> 00:05:38,709
Aha, teraz widzimy to dwa razy,

88
00:05:38,809 --> 00:05:42,401
bo zostawiłam stary sposób.

89
00:05:42,508 --> 00:05:46,999
Przytwierdził się do tagu "span",
który ma już w sobie "strong".

90
00:05:47,138 --> 00:05:49,098
Moglibyśmy zmienić ten wiersz

91
00:05:49,198 --> 00:05:52,406
na "innerHTML = empty string"
(pusty ciąg).

92
00:05:52,506 --> 00:05:56,355
Wtedy wyczyściłby się "span",
zanim do niego dojdziemy.

93
00:05:57,796 --> 00:06:03,438
Widzieliście: wymagało to więcej
wierszy kodu niż wersja "innerHTML".

94
00:06:05,482 --> 00:06:07,293
Dlaczego to zrobiliśmy?

95
00:06:07,401 --> 00:06:11,263
Projektanci stron nie lubią
modyfikować dokumentów w ten sposób,

96
00:06:11,377 --> 00:06:13,283
bo wymaga to więcej programu.

97
00:06:13,431 --> 00:06:16,836
Większość projektantów
używa bibliotek, np. jQuery,

98
00:06:17,006 --> 00:06:19,414
by za nich robiły modyfikacje DOM-u.

99
00:06:19,595 --> 00:06:22,883
Biblioteki mają funkcje,
które robią ten sam program,

100
00:06:22,983 --> 00:06:26,825
a wy musicie wpisać
znacznie mniej wierszy.

101
00:06:26,925 --> 00:06:29,700
Wyręczają was funkcje biblioteki.

102
00:06:29,813 --> 00:06:32,347
Lubię w ten sposób pisać program,

103
00:06:32,482 --> 00:06:34,576
ponieważ doskonale widzę,

104
00:06:34,696 --> 00:06:38,405
jak modyfikuję drzewo DOM-u,
wiersz po wierszu.

105
00:06:38,565 --> 00:06:43,075
To wygląda porządniej niż wpisywanie
wszystkiego w ciąg "inner HTML".

106
00:06:43,181 --> 00:06:47,163
Wam może się nie podoba.
Ale już wiecie, że jest taka metoda.

107
00:06:47,263 --> 00:06:49,530
Używajcie jej w razie potrzeby,

108
00:06:49,664 --> 00:06:54,127
a zorientujecie się, co biblioteki
takie jak jQuery robią za kulisami.