Mam stronę "Wszystko o psach",
świetną, tylko że...
nie każdemu się to spodoba, ale jestem raczej kociarą.
Przerobiłabym tę stronę na "Wszystko o kotach".
Użyję JavaScript,
zamiast tylko modyfikować to HTML.
W końcu zrobię z tego rozszerzenie przeglądarki
i każdą stronę przekształcę tak, by dotyczyła kotów.
Byłoby wspaniale: cały Internet o kotach!
Ta strona zawiera nagłówek,
akapit i parę zdjęć.
Będziemy je zmieniać po kolei, zaczynając od nagłówka,
w dwóch krokach, o których się uczyliśmy.
Krok pierwszy - to znaleźć węzeł DOM-u zawierający ten nagłówek.
Przedtem znaleźliśmy węzeł
poleceniem "document.body",
ale teraz interesuje mnie coś konkretnego: nagłówek h1.
A ten nagłówek h1 ma ID,
więc powinien być jedynym na stronie tagiem o takim ID.
Jest łatwy sposób szukania węzłów DOM-u mających ID.
Metoda nazywa się "getElementById".
Zastosujmy to tu, w tagu "script".
Deklarujemy zmienną, która będzie to przechowywać:
"var headingEl".
Kończę nazwy zmiennych "El" lub "Node",
żeby wiedzieć, że przechowują element
zwany też "node" (węzłem).
Użyjmy tej metody. Jest powiązana z globalnym dokumentem obiektowym,
więc dajemy "document", kropkę
i "getElementById",
a potem nawiasy, bo to funkcja.
Niczego nie znajdzie tak po prostu, bo nie wie, którego szukać ID.
W nawiasie wpisujemy szukane ID,
jako ciąg znaków w cudzysłowie.
Tutaj: "heading".
Jak ustalić, że znaleźliśmy element,
zanim zaczniemy coś z nim robić?
Jeden sposób - to funkcja "console.log".
Zatrzymajcie film i otwórzcie "narzędzia deweloperskie".
Wypróbujcie skrót Command-Option-I na Macu
lub Control-Shift-I w Windows.
Któryś powinien zadziałać.
Widzicie "h1" na konsoli?
Tak? Dobrze!
Krok pierwszy wykonany.
Znaleźliśmy element, przechowujemy go w zmiennej.
Krok drugi.
Zmodyfikujmy element sposobem, który już znamy:
zmieniając "innerHTML".
Zobaczmy... Napiszemy:
"headingEl.innerHTML ="...
chwila prawdy...
Koty!
"Wszystko o kotach". Gotowe!
Zaczęliśmy. Kotyfikacja ruszyła.
Teraz spróbujcie zrobić coś podobnego w zadaniu.