Polub bloga na fejsie!

Kod wpływający na kontrolki interfejsu użytkownika (UI)

4

Dziś kolejna odsłona moich zapisków z przygotowań do egzaminu MCSD: 70-480, zajmiemy się podstawami JavaScript. Wykorzystamy ten język do prostych manipulacji elementami interfejsu użytkownika.

Na początek jeszcze, celem uściślenia – tytuł dzisiejszego posta, to tłumaczenie kolejnego naukowego celu, jaki należy opanować aby zdać rzeczony egzamin:

„Write code that interacts with UI controls.

  • This objective may include but is not limited to: programmatically add and modify HTML elements; implement media controls; implement HTML5 canvas and SVG graphics”

A więc zaczynamy.

Dodawanie i modyfikacja elementów UI za pomocą JavaScript

W tym paragrafie skupie się na metodach obiektu Element, który reprezentuje w języku JavaScript element dokumentu XML. Pełny opis wszystkich dostępnych atrybutów i funkcji tego obiektu, dostępne są na stronie w3schools.com. Zachęcam do zapoznania się z tym materiałem – można się tam m.in. dowiedzieć, które metody i właściwości obiektu dostępne są w popularnych przeglądarkach a które nie.

Zmiana zawartości znacznika

Przyjmijmy na początek następujący kod HTML5:

Zmiana tekstu w powyższym paragrafie wyglądałaby mniej więcej tak:

Jak widać, wyszukiwanie znaczników, można przeprowadzić za pomocą metody ‚getElementById’ obiektu ‚document’. W drugiej linii mamy przypisanie nowego tekstu do znacznika. Tutaj ważna uwaga – tekst też jest obiektem! Jest to obiekt typu ‚text node’. Każdy obiekt typu element zawiera w sobie także obiekt typu tekstowego, stąd w powyższym przykładzie z obiektu ‚hello’ pobierane jest pierwsze dziecko (właściwość ‚firstChild’) – jest to właśnie obiekt ‚text node’. Dopiero z tego obiektu można pobrać właściwy tekst i go zmienić (za pomocą właściwości ‚nodeValue’).

Dodawanie elementów UI

Zacznijmy od razu od przykładu – załóżmy, że mamy taki oto kontener:

Mając taki przykład, rozważmy poniższy kod JavaScript:

W pierwszej linii mamy pobranie elementu o identyfikatorze ‚container’, tak jak w poprzednim przykładzie. Druga linia to utworzenie nowego elementu DOM. Jest znacznik <div>. W ostatniej linii mamy dodanie do kontenera nowo utworzonego „diva”. Jako, że wykorzystana została metoda ‚appendChild’, element ten dodany zostanie na końcu listy „dzieci”, czyli po paragrafie zawierającym wartość „Tekst”.

Co więc zrobić, jeśli chcielibyśmy dodać nowy element przed paragrafem? Spójrzmy na kolejny przykład:

Przejdźmy od razu do trzeciej linii – pobieramy element, przed którym chcemy wstawić nowy element. Następnie wykorzystujemy metodę ‚insertBefore’, do wstawienia nowego „diva” przed paragrafem.

Usuwanie elementów UI

Przyjmijmy kod HTML, z poprzedniego przykładu. Poniżej sposób na usunięcie paragrafu z kontenera:

Myślę, że sprawa jest prosta, w podobny sposób jak poprzednio pobieramy elementy kontenera i paragrafu, a następnie, w kontekście kontenera wywołuje się metodę ‚removeChild’, jako parametr podając referencję do paragrafu.

Podmienianie elementów UI

Ponownie, rozpatrujemy przykład dla kodu HTML5 z kontenerem i paragrafem. Podmiana elementów wyglądać mogłaby tak:

A więc tak: standardowo, pobieramy referencje do kontenera i paragrafu. Następnie tworzymy dodatkowy objekt ‚newParagraph’ (w trzeciej linii). Czwarta linia jest ciekawa. Tak jak pisałem wcześniej, elementy zawierające tekst to tak na prawdę dwa zwykły element, który wewnątrz posiada jeszcze obiekt typu ‚text node’. Dlatego właśnie, do obiektu ‚newParagraph’ dodajemy „dziecko” – używamy do tego metody ‚createTextNode’ (jak sama nazwa wskazuje, tworzy węzeł tekstowy – jako parametr podajemy tekst ma zawierać „węzeł”).

Przemieszczanie elementów UI

Znamy już w zasadzie wszystkie metody służące do zarządzania istnieniem elementów UI w dokumencie HTML5. Można z nich skorzystać do przemieszczania elementów w inne miejsce dokumentu. Weźmy na przykład taką listę:

Możemy teraz przesunąć pierwszy element listy na koniec za pomocą poniższego kodu:

Jak widać, prosta sprawa – znajdujemy odpowiedni element UI oraz jego rodzica. Następnie w kontekście rodzica, wywołujemy metodę dodającą nowe „dziecko” na koniec listy „dzieci”. Należy zwrócić uwagę, że nie ma potrzeby uprzednio usuwać przenoszonego elementu z listy „dzieci” elementu <ul> – to dlatego, że w przypadku użycia metody ‚appendChild’, ‚insertBefore’ lub ‚replaceChild’ w celu dodania elementu, który już istnieje w dokumencie, element ten jest automatycznie usuwany z pozycji, w której znajdował się uprzednio.

Zmiana wartości atrybutu

Zmodyfikujmy na początek lekko nasz przykładowy kod HTML5:

Kod, który zmieni wartość atrybutu ‚title’ w powyższym linku wygląda następująco:

To pokazuje, że zmiana wartości atrybutu sprowadza się do wywołania w kontekście odpowiedniego elementu, metody ‚getAttributeNode’. Kolejna czynność to przypisanie nowej wartości atrybutu do właściwości ‚value’ atrybutu.

Dodawanie i usuwanie atrybutów

Tutaj sprawa również jest prosta. Poniżej przykład, w którym dodawany jest atrybut ‚class’ o wartości ‚title’ oraz usuwany jest atrybut ‚title’:

Po pobraniu referencji do elementu ‚anchor’, tworzony jest atrybut ‚class’. Następnie, do jego właściwości – ‚value’ – przypisywana jest odpowiednia wartość. Na koniec nowy atrybut, za pomocą metody ‚setAttributeNode’, przypisywany jest do elementu ‚anchor’.

Jeśli chodzi o usuwanie atrybutu, jak widać sprawa wygląda podonie. Za pomocą metody ‚getAttributeNode’ elementu ‚anchor’, pobierany jest odpowiedni atrybut. Następnie wywoływana jest metoda ‚removeAttributeNode’, która usuwa atrybut.

Należy jeszcze wspomnieć, że isnieją skrócone wersje metod ‚setAttributeNode’ oraz ‚removeAttributeNode’:

  • odpowiednikiem ‚setAttributeNode’ jest ‚setAttribute’ –  wywołuje się ja podając dwa parametry: nazwa atrybutu, oraz nowa wartość
  • odpowiednikiem ‚removeAttributeNode’ jest ‚removeAttribute’ – wywołuje się ja podając nazwę atrybutu do usunięcia

Podsumowanie

Moim założeniem było, opisać w tym poście cały materiał, który pokrywałby wymagania celu opisanego na początku postu. Jednak po przejrzeniu całości materiału, postanowiłem podzielić go na mniejsze części. Dlatego dziś tylko podstawy manipulacji kontrolkami UI za pomocą JavaScript. W następnym poście, zapoznamy się ze znacznikami <audio> oraz <video>, a także poznamy sposoby na kontrolowanie multimediów za pomocą języka JavaScript. Zapraszam 😉

REACT, REDUX, REACT-ROUTER - KURSY ON-LINE

Chcesz od podstaw poznać tajniki React, Redux oraz react-router? Zapraszam do moich szkoleń on-line:

Przejdź do szkoleń
  • Madej

    Niespecjalnie rozumiem dlaczego najpierw zamykasz znaczniki, a potem je otwierasz. Zawsze byłam przekonana, że najpierw otwieramy, a potem zamykamy

    • Burczu

      Hehe, to po prostu mój babol – naprawię go wieczorem… Dzięki za zwrócenie uwagi!

Google Analytics Alternative