Ta strona korzysta z plików cookies. Możesz je zablokować w ustawieniach swojej przeglądarki lub zezwolić na wykorzystanie przez nas plików cookies w celu ułatwienia korzystania z serwisu.
Logowanie Rejestracja
JavaScript [MK, 20/21]
Lekcja 2. Składnia, komentarze...   Atrybuty użytkownika

DOM – Document Object Model

Kiedy strona otwiera się w przeglądarce, to jest tworzony tzw. obiektowy model dokumentu HTML (Document Object Model). Model ten na strukturę drzewiastą, dzięki czemu JavaScript może odszukiwać elementy HTML i je modyfikować, a nawet dodawać nowe. Możliwości języka JavaScript:

  • zmiana elementów HTML lub tylko pojedynczych atrybutów
  • zmiana styli CSS
  • usuwanie z DOM całych elementów lub tylko ich atrybutów
  • dodawanie do DOM całych elementów lub tylko atrybutów
  • reagowanie na zdarzenia występujące na stronie
  • dodawanie nasłuchiwania nowych zdarzeń

Szukanie elementów w dokumencie HTML

Metoda document.querySelector('selektor') zwraca null lub pierwszy znaleziony element, spełniający warunki w parametrze selektor. Selektorem może być każdy, poprawnie zapisany selektor CSS. Przykłady:

document.querySelector("div"); // szukanie elementu po nazwie
document.querySelector("ul li"); // szukanie elementu wewnątrz innego
document.querySelector(".btn-primary"); // szukanie elementu po klasie
document.querySelector("#module"); // szukanie elementu o określonym identyfikatorze

Metoda document.querySelectorAll('selektor') zwraca listę znalezionych elementów, spełniających warunki w parametrze selektor. Znalezione elementy można następnie modyfikować w pętli for:

for (const el of elements) {
    el.style.backgroundColor= "red";
}

Inne metody przydatne przy wyszukiwaniu elementów HTML:

document.getElementById("zip_code"); // zwraca element o danym identyfikatorze (przed nazwą nie trzeba dodawać #) lub null
document.getElementsByName("phone"); // zwraca kolekcję elementów z atrybutem name o wartości phone
document.getElementsByClassName("primary"); // zwraca kolekcję elementów posiadających klasę primary
document.getElementsByTagName("div");  // zwraca kolekcję elementów podanych jako parametr
document.body; // zwraca element body lub null
document.forms;  // zwraca kolekcję elementów form
document.images;  // zwraca kolekcję elementów img
document.links;  // zwraca kolekcję elementów a lub area posiadających jakąkolwiek wartość w atrybucie href

Szukanie elementu i dodawanie obsługi zdarzenia

Często zdarza się, że chcemy szybko odszukać jakiś element HTML i dodać mu obsługę zdarzenia, np. typu click. Przydatny do tego będzie poniższy kod:

document.querySelector("#identyfikator-klikniętego-elementu").addEventListener("click", function () {
/*
    kod, jaki należy
    wykonać po kliknięciu
    szukanego elementu
*/
});

Dodawanie nowych elementów w dokumencie HTML

// stwórz zupełnie nowy element <p> (paragraf)
const newParagraph = document.createElement('p');
// odszukaj element <body>
const myBodyElement = document.querySelector("body");
// dodaj do <body> element <p>
myBodyElement.appendChild(newParagraph );

Pytania

  • Pytanie 1.
    Jak w konsoli przeglądarki wyświetlimy kolekcję elementów <form>?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 2.
    Jak metodą querySelector wyszukać element z klasą btn-warning?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 3.
    Jak elementowi z identyfikatorem id512 zmienić kolor tła na czerwony? Zapisz całość w jednej linijce kodu.

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 4.
    Wskaż niepoprawny identyfikator elementu HTML.

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 5.
    Jak do pierwszego znalezionego elementu h1 wstawić tekst Młody Informatyk?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 6.
    Co robi metoda appendChild?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 7.
    Jak w JavaScript tworzymy element div?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 8.
    Jak nazywa się metoda dodająca do elementu nasłuchiwanie wystąpienia zdarzenia?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 9.
    Jak z danego elementu myHeader2 pobrać wartość atrybutu title?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 10.
    Wskaż poprawny zapis dodający do elementu myDiv1 atrybut name z wartością login_box.

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 11.
    Jak nazywa się metoda JavaScript, która zmienia litery na małe?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 12.
    Kiedy ma miejsce zdarzenie onblur?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 13.
    Wskaż niepoprawny identyfikator elementu HTML.

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 14.
    Jak nazywa się zdarzenie dwukrotnego kliknięcia w element HTML?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 15.
    Jaka metoda JavaScript pozwala nam stworzyć element HTML?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 16.
    Do czego służy metoda tagName?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 17.
    Jaką metodą JavaScript jednocześnie dodamy atrybut, gdy nie jest ustawiony lub usuniemy go, kiedy jest ustawiony?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 18.
    Kiedy wystąpi zdarzenie onkeyup?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 19.
    Jak nazywa się zdarzenie kliknięcia w element HTML prawym przyciskiem myszy?

  • Aby zobaczyć tą treść musisz być zalogowany

  • Pytanie 20.

  • Aby zobaczyć tą treść musisz być zalogowany

Zadania

Zadanie 1. #
Przygotuj plik kolumny.html ze strukturą jak poniżej i dołącz do niego plik kolumny.js, w którym będzie znajdował się kod realizujący polecenia od 1 do 9. 
<body>
<header>
    <h1>Nagłówek</h1>
</header>
<main class="row">
    <section class="side_column">
        <h1>Kolumna I</h1>
    </section>
    <section class="main_column">
        <h1>Kolumna II</h1>
    </section>
    <section class="side_column">
        <h1>Kolumna III</h1>
    </section>
</main>
<footer>
    <h1>Stopka</h1>
</footer>
</body>
Polecenia:
  1. Znajdź element header i zmień mu kolor tła na żółty
  2. Znajdź element h1 wewnątrz elementu header, wyświetl go w konsoli, zmień mu czcionkę na Arial Black i tekst na Preambuła
  3. Znajdź wszystkie elementy section i nadaj im obramowanie linią ciągłą o szerokości 2 piksele, w kolorze brązowym
  4. Odszukaj element h1 wewnątrz elementu section z klasą main_column. Wyświetl go w konsoli i zmień tekst wewnątrz h1 na Specjalność szefa:
  5. Odszukaj w pliku html element z klasą main_column i dodaj wewnątrz niego element p z tekstem Kebab na frytkach _-_
  6. Odszukaj element footer, dodaj wewnątrz niego element div z tłem w kolorze różowym. Wewnątrz elementu div dodaj element p z wycentrowanym tekstem &copy;
  7. Usuń element h1 zawierający tekst "Kolumna III"
  8. Utwórz dwa elementy p i dodaj do nich tekst <i>Pochylony tekst</i>. Dla pierwszego użyj metody innerHTML, a dla drugiego metody innerText. Następnie oba paragrafy dodaj do elementu header i sprawdź jaka jest różnica w tych metodach.
  9. Stwórz nowy element section, dodaj mu obramowanie linią kropkowaną, szerokości 2 piksele, w kolorze niebieskim oraz margines wewnętrzny: górny i dolny 10 pikseli, a prawy i lewy 20 pikseli. Dodaj do niego również tekst: Zderzak. Następnie dodaj ten element na końcu elementu body.
Wygląd strony po zmianach: task_586.png

Zadanie 2. #
Utwórz dwa pliki: HTML i JavaScript. Dołącz do HTML plik JS. Wpisz do pliku HTML fragment kodu HTML z polecenia i dodaj przycisk (button) z odpowiednim identyfikatorem. W pliku JS nasłuchuj zdarzenia typu click pochodzącego z danego przycisku i po jego wystąpieniu wykonaj kod realizujący odpowiednie polecenie, np. zmiana zawartości innego elementu HTML.
  1. Utwórz element h6 z dowolnym tekstem. Po naciśnięciu przycisku, odszukaj h6 i zmień, za pomocą metody innerHTML, tekst wewnątrz na: <i>Świetnie!<i>
  2. Utwórz element h5 z dowolnym tekstem. Po naciśnięciu przycisku, odszukaj h5 i zmień, za pomocą metody innerText, tekst wewnątrz na: <i>Świetnie!<i>
  3. Utwórz element p z przykładowym tekstem. Dodaj do niego atrybut title również z przykładową wartością. Po kliknięciu przycisku, odszukaj element p, potem za pomocą metody getAttribute pobierz wartość atrybutu title i wyświetl go w oknie alert.
  4. Utwórz element p z przykładowym tekstem. Po kliknięciu przycisku odszukaj ten akapit, a potem za pomocą metody setAttribute ustaw mu wartość atrybutu dir na rtl.
  5. Skup się. Dodaj element p z atrybutem style z wartością font-family ustawioną na Arial Black. W elemencie p dodaj tekst Usuń atrybut style w tym elemencie. Poniżej dodaj drugi element p, wewnątrz niego dodaj a z atrybutem href z wartością #. W linku ustaw tekst Usuń atrybut href w tym elemencie. Po kliknięciu przycisku, odszukaj oba elementy i usuń im atrybuty style i href metodą removeAttribute.
  6. Utwórz pusty element textarea. Po naciśnięciu przycisku losuj 6 liczb szesnastkowych z przedziału od 0 do F i twórz z nich kod koloru, np.: #CCEE4C. Zapisuj ten kod w konsoli oraz przypisuj jako tło elementu textarea.

Zadanie 3. #
Przy robieniu poniższych przykładów utwórz tylko plik HTML i postaraj się zapisać rozwiązanie za pomocą jednej linijki kodu JavaScript wewnątrz danego atrybutu.
  1. Utwórz element div a w nim textarea z atrybutem onfocus. Kiedy pole tekstowe otrzyma fokus, to zmieniaj mu tło na żółty kolor.
  2. Do elementu p wstaw puste pole tekstowe input. Po wpisaniu do niego tekstu i utracie fokusu, zmieniaj wpisane litery na wielką czcionkę. Użyj atrybutu onblur (HTML) i metody toUpperCase (JS)
  3. Do elementu p wstaw rozwijaną listę jednokrotnego wyboru z wartościami: black, brown, blue, blueviolet, burlywood, bisque. Za pomocą atrybutu onchange, uchwyć zmianę wartości na liście wyboru i zmień kolor tekstu na liście na ten wybrany.
  4. Utwórz element p z dowolnym tekstem i dodaj do niego dwa atrybuty: onclick i ondblclick. Po pojedynczym kliknięciu na tekst w akapicie, zmieniaj jego czcionkę na xx-large, natomiast po dwukrotnym kliknięciu zmieniaj czcionkę na medium.
  5. Utwórz element div a w nim dodaj dowolny obraz o wymiarach nie większych niż 500x500 px. Dodaj do obrazka atrybut oncontextmenu i kiedy pojawi się menu kontekstowe, to w oknie typu alert wyświetl wartość atrybutu src z obrazka.
  6. Utwórz element div a w nim dwa elementy: input typu tekstowego i p. Do pola tekstowego dodaj atrybut onkeyup a w nim obsługę zdarzenia polegającego na tym, że tekst wprowadzony do pola input będzie kopiowany do akapitu pod nim.
  7. Dodaj element h1 z dowolnym tekstem w kolorze zielonym oraz dwoma atrybutami: onmouseout i onmouseover. Po najechaniu kursorem na tekst dodaj mu cień przesunięty na osiach X i Y o 2 piksele, z rozmyciem o długości 5 px, w kolorze zielonym. Usuń cień po przesunięciu kursora poza tekst.

Zadanie 4. #

Przygotuj nową stronę HTML z kolorem tła #fcf6d5, kolorem czcionki #6cbb7a i krojem czcionki Monotype Corsiva. Dodaj na tej stronie 5 nagłówków stopnia pierwszego z tekstem i linkiem składającym się z jednego znaku. Tym znakiem może być mały obrazek ze strzałką lub encja HTML, np. &#8615;. Pod nagłówkami dodaj 5 krótkich, kilkuwierszowych tekstów w znaczniku pre, czyli zachowujących przełamanie linii.

Dodaj również nowy plik z kodem JavaScript, który będzie realizował następującą funkcjonalność. Po kliknięciu na pojedynczy znak (lub mały obrazek) w tytule, ma się zwijać lub rozwijać tekst pod tym tytułem. Skoro mamy 5 nagłówków i pod każdym z nich 5 tekstów, to każdy link w tytule ma działać dla "swojego" tekstu. Dodatkowo znak/obrazek po kliknięciu mają się zmieniać: przed kliknięciem powinna to być strzałka skierowana w dół, po kliknięciu – strzałka skierowana do góry.

task_483.png

Zadanie 5. #
Utwórz element input, ustaw mu atrybut disabled, dodaj przykładowy tekst i odpowiedni styl, aby tekst był duży i dobrze widoczny. Po kliknięciu przycisku, odszukaj element input i za pomocą metody toggleAttribute zmień wartość atrybutu disabled. Odszukaj również naciśnięty przycisk i zapisz go pod stałą o dowolnej nazwie. Następnie w instrukcji if, za pomocą metody hasAttribute, sprawdzaj wartość atrybutu disabled. Jeśli jest ustawiony, to na przycisku pokazuj napis Edycja jest teraz niemożliwa, w przeciwnym razie, wyświetl na przycisku napis Można edytować.

Zadanie 6. #
W elemencie div umieść elementy p, a w nich po jednym elemencie del, code, strong i em, wszystkie z dowolnym tekstem wewnątrz. Po kliknięciu przycisku, najpierw wyszukaj element div, a następnie wszystkie elementy wewnątrz niego (np. metodą querySelectorAll('*')) i wyświetl je w konsoli. Jeśli to się uda, to sprawdzaj każdy znaleziony element w pętli for i wybierz jeden z nich, np. strong, za pomocą metody tagName. Następnie dodaj mu kropkowane obramowanie o szerokości 10px w kolorze zielonym.

Zadanie 7. #

W pliku HTML dodaj nagłówek stopnia pierwszego z tekstem Zmień kolor tekstu. Poniżej nagłówka dodaj tabelę składającą się z jednego wiersza i czterech kolumn. Każda komórka tabeli ma mieć margines wewnętrzny ustawiony na 30 pikseli i zawierać nazwy czterech kolorów: gold, khaki, silver i peru. Ustaw również kolor tła tej komórki na taki, jaka jest w niej nazwa koloru. Po najechaniu kursorem na daną komórkę, zmieniaj kolor tekstu w nagłówku. Kolor ma być taki jaka jest nazwa w komórce tabeli. Po opuszczeniu kursora znad danej komórki, tekst ma się zmieniać na początkowy kolor, czyli czarny. Użyj do tego atrybutów onmouseover i onmouseout umieszczonych w komórkach tabeli (td). Nie musisz tworzyć dodatkowego pliku z kodem JavaScript.

task_663.png

Zadanie 8. #

W pliku HTML dodaj nagłówek stopnia pierwszego z tekstem Numer telefonu: 123–456–789. Poniżej dodaj element input typu checkbox i powiązany z nim element label z tekstem Pokaż cały numer telefonu. Za pomocą kaskadowych arkuszy styli ukryj siedem ostatnich cyfr numeru telefonu poprzez ich rozmycie. Usuń (również za pomocą CSS) możliwość zaznaczenia tych cyfr kursorem.

Po zaznaczeniu elementu input ma się pojawić cały numer telefon.

task_664.png

2020-03-03 19:04:31 2023-10-16 21:08:44


20 przedmiotów
284 lekcji
660 definicji
357 pytań
763 zadań
  
 
 
 
© 2024 Młody Informatyk v. 0.1.7717