0:00:01.287,0:00:04.471
Mam stronę "Wszystko o psach",

0:00:05.314,0:00:07.577
świetną, tylko że...

0:00:07.677,0:00:12.529
nie każdemu się to spodoba,[br]ale jestem raczej kociarą.

0:00:12.629,0:00:16.210
Przerobiłabym tę stronę[br]na "Wszystko o kotach".

0:00:17.278,0:00:19.446
Użyję JavaScript,

0:00:20.405,0:00:23.009
zamiast tylko modyfikować to HTML.

0:00:23.109,0:00:27.758
W końcu zrobię z tego[br]rozszerzenie przeglądarki

0:00:27.858,0:00:31.941
i każdą stronę przekształcę tak,[br]by dotyczyła kotów.

0:00:32.040,0:00:36.296
Byłoby wspaniale:[br]cały Internet o kotach!

0:00:38.131,0:00:40.863
Ta strona zawiera nagłówek,

0:00:40.963,0:00:43.916
akapit i parę zdjęć.

0:00:45.057,0:00:49.967
Będziemy je zmieniać po kolei,[br]zaczynając od nagłówka,

0:00:50.067,0:00:53.606
w dwóch krokach,[br]o których się uczyliśmy.

0:00:53.706,0:00:58.846
Krok pierwszy - to znaleźć węzeł[br]DOM-u zawierający ten nagłówek.

0:00:58.946,0:01:03.271
Przedtem znaleźliśmy węzeł

0:01:03.371,0:01:06.434
poleceniem "document.body",

0:01:06.534,0:01:11.098
ale teraz interesuje mnie coś[br]konkretnego: nagłówek h1.

0:01:12.005,0:01:14.342
A ten nagłówek h1 ma ID,

0:01:14.442,0:01:19.561
więc powinien być jedynym na stronie[br]tagiem o takim ID.

0:01:19.661,0:01:24.203
Jest łatwy sposób szukania[br]węzłów DOM-u mających ID.

0:01:24.303,0:01:29.379
Metoda nazywa się[br]"getElementById".

0:01:30.606,0:01:32.719
Zastosujmy to tu, w tagu "script".

0:01:32.819,0:01:35.740
Deklarujemy zmienną,[br]która będzie to przechowywać:

0:01:35.840,0:01:38.066
"var headingEl".

0:01:38.166,0:01:41.951
Kończę nazwy zmiennych[br]"El" lub "Node",

0:01:42.051,0:01:44.636
żeby wiedzieć,[br]że przechowują element

0:01:44.736,0:01:47.020
zwany też "node" (węzłem).

0:01:47.120,0:01:52.388
Użyjmy tej metody. Jest powiązana[br]z globalnym dokumentem obiektowym,

0:01:52.488,0:01:55.588
więc dajemy "document", kropkę

0:01:55.688,0:01:58.963
i "getElementById",

0:01:59.064,0:02:01.193
a potem nawiasy, bo to funkcja.

0:02:02.548,0:02:07.564
Niczego nie znajdzie tak po prostu,[br]bo nie wie, którego szukać ID.

0:02:07.664,0:02:12.170
W nawiasie wpisujemy szukane ID,

0:02:12.270,0:02:14.608
jako ciąg znaków w cudzysłowie.

0:02:14.708,0:02:16.731
Tutaj: "heading".

0:02:21.662,0:02:23.998
Jak ustalić, że znaleźliśmy element,

0:02:24.098,0:02:26.437
zanim zaczniemy coś z nim robić?

0:02:26.537,0:02:29.848
Jeden sposób - to funkcja[br]"console.log".

0:02:31.662,0:02:35.675
Zatrzymajcie film i otwórzcie[br]"narzędzia deweloperskie".

0:02:35.775,0:02:40.381
Wypróbujcie skrót [br]Command-Option-I na Macu

0:02:40.481,0:02:44.806
lub Control-Shift-I w Windows.

0:02:44.906,0:02:46.784
Któryś powinien zadziałać.

0:02:48.901,0:02:51.843
Widzicie "h1" na konsoli?

0:02:52.931,0:02:54.266
Tak? Dobrze!

0:02:54.366,0:02:56.417
Krok pierwszy wykonany.

0:02:56.517,0:02:59.826
Znaleźliśmy element,[br]przechowujemy go w zmiennej.

0:02:59.926,0:03:01.689
Krok drugi.

0:03:01.789,0:03:06.154
Zmodyfikujmy element[br]sposobem, który już znamy:

0:03:06.254,0:03:07.979
zmieniając "innerHTML".

0:03:08.833,0:03:10.477
Zobaczmy... Napiszemy:

0:03:10.577,0:03:14.767
"headingEl.innerHTML ="...

0:03:14.867,0:03:17.168
chwila prawdy...

0:03:17.268,0:03:18.375
Koty!

0:03:18.865,0:03:21.640
"Wszystko o kotach". Gotowe!

0:03:22.557,0:03:26.271
Zaczęliśmy. Kotyfikacja ruszyła.

0:03:26.371,0:03:30.508
Teraz spróbujcie zrobić[br]coś podobnego w zadaniu.