WEBVTT

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

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

00:00:07.677 --> 00:00:12.529
nie każdemu się to spodoba,
ale jestem raczej kociarą.

00:00:12.629 --> 00:00:16.210
Przerobiłabym tę stronę
na "Wszystko o kotach".

00:00:17.278 --> 00:00:19.446
Użyję JavaScript,

00:00:20.405 --> 00:00:23.009
zamiast tylko modyfikować to HTML.

00:00:23.109 --> 00:00:27.758
W końcu zrobię z tego
rozszerzenie przeglądarki

00:00:27.858 --> 00:00:31.941
i każdą stronę przekształcę tak,
by dotyczyła kotów.

00:00:32.040 --> 00:00:36.296
Byłoby wspaniale:
cały Internet o kotach!

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

00:00:40.963 --> 00:00:43.916
akapit i parę zdjęć.

00:00:45.057 --> 00:00:49.967
Będziemy je zmieniać po kolei,
zaczynając od nagłówka,

00:00:50.067 --> 00:00:53.606
w dwóch krokach,
o których się uczyliśmy.

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

00:00:58.946 --> 00:01:03.271
Przedtem znaleźliśmy węzeł

00:01:03.371 --> 00:01:06.434
poleceniem "document.body",

00:01:06.534 --> 00:01:11.098
ale teraz interesuje mnie coś
konkretnego: nagłówek h1.

00:01:12.005 --> 00:01:14.342
A ten nagłówek h1 ma ID,

00:01:14.442 --> 00:01:19.561
więc powinien być jedynym na stronie
tagiem o takim ID.

00:01:19.661 --> 00:01:24.203
Jest łatwy sposób szukania
węzłów DOM-u mających ID.

00:01:24.303 --> 00:01:29.379
Metoda nazywa się
"getElementById".

00:01:30.606 --> 00:01:32.719
Zastosujmy to tu, w tagu "script".

00:01:32.819 --> 00:01:35.740
Deklarujemy zmienną,
która będzie to przechowywać:

00:01:35.840 --> 00:01:38.066
"var headingEl".

00:01:38.166 --> 00:01:41.951
Kończę nazwy zmiennych
"El" lub "Node",

00:01:42.051 --> 00:01:44.636
żeby wiedzieć,
że przechowują element

00:01:44.736 --> 00:01:47.020
zwany też "node" (węzłem).

00:01:47.120 --> 00:01:52.388
Użyjmy tej metody. Jest powiązana
z globalnym dokumentem obiektowym,

00:01:52.488 --> 00:01:55.588
więc dajemy "document", kropkę

00:01:55.688 --> 00:01:58.963
i "getElementById",

00:01:59.064 --> 00:02:01.193
a potem nawiasy, bo to funkcja.

00:02:02.548 --> 00:02:07.564
Niczego nie znajdzie tak po prostu,
bo nie wie, którego szukać ID.

00:02:07.664 --> 00:02:12.170
W nawiasie wpisujemy szukane ID,

00:02:12.270 --> 00:02:14.608
jako ciąg znaków w cudzysłowie.

00:02:14.708 --> 00:02:16.731
Tutaj: "heading".

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

00:02:24.098 --> 00:02:26.437
zanim zaczniemy coś z nim robić?

00:02:26.537 --> 00:02:29.848
Jeden sposób - to funkcja
"console.log".

00:02:31.662 --> 00:02:35.675
Zatrzymajcie film i otwórzcie
"narzędzia deweloperskie".

00:02:35.775 --> 00:02:40.381
Wypróbujcie skrót 
Command-Option-I na Macu

00:02:40.481 --> 00:02:44.806
lub Control-Shift-I w Windows.

00:02:44.906 --> 00:02:46.784
Któryś powinien zadziałać.

00:02:48.901 --> 00:02:51.843
Widzicie "h1" na konsoli?

00:02:52.931 --> 00:02:54.266
Tak? Dobrze!

00:02:54.366 --> 00:02:56.417
Krok pierwszy wykonany.

00:02:56.517 --> 00:02:59.826
Znaleźliśmy element,
przechowujemy go w zmiennej.

00:02:59.926 --> 00:03:01.689
Krok drugi.

00:03:01.789 --> 00:03:06.154
Zmodyfikujmy element
sposobem, który już znamy:

00:03:06.254 --> 00:03:07.979
zmieniając "innerHTML".

00:03:08.833 --> 00:03:10.477
Zobaczmy... Napiszemy:

00:03:10.577 --> 00:03:14.767
"headingEl.innerHTML ="...

00:03:14.867 --> 00:03:17.168
chwila prawdy...

00:03:17.268 --> 00:03:18.375
Koty!

00:03:18.865 --> 00:03:21.640
"Wszystko o kotach". Gotowe!

00:03:22.557 --> 00:03:26.271
Zaczęliśmy. Kotyfikacja ruszyła.

00:03:26.371 --> 00:03:30.508
Teraz spróbujcie zrobić
coś podobnego w zadaniu.