TablicaPro / karta pracy ucznia / JS

textContent i innerHTML — bezpieczne wyświetlanie danych na stronie

Klasa: __________ Numer: __________ Data: __________

Pracuj w przygotowanym pliku. Po każdej zmianie zapisz go i sprawdź rezultat.

Kod do rozpoczęcia pracy

wynik.textContent = "<b>Ola</b>";   // tekst
wynik.innerHTML = "<b>Ola</b>";     // element b

Zadanie 1

Napisz przezTextContent(tekst) i wstaw do #wynik wpis Ola. Sprawdź, czy powstał element b (wynik.children.length).

Zadanie 2

Napisz przezInnerHTML(tekst) i wstaw ten sam wpis. Porównaj liczbę elementów. Wstaw nieszkodliwy ładunek oboma sposobami i sprawdź window.zdarzenie.

Zadanie 3

Napisz dodajDoListy(tekst) (createElement, textContent, append) i dodaj ten ładunek do listy. Napisz zabezpiecz(tekst) i sprawdź wynik dla "O'Reilly" & Co.

Sprawdź przed oddaniem

Zadanie 1: przezTextContent 1 pkt, pomiar liczby elementów 1 pkt; zadanie 2: przezInnerHTML 1 pkt, test ładunku w obu przypadkach 2 pkt; zadanie 3: dodajDoListy 2 pkt, zabezpiecz 2 pkt; wyjaśnienie XSS 1 pkt. Razem 10 pkt.

Jaką zmianę w kodzie potrafisz samodzielnie wyjaśnić?

Drukuj kartę pracy