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:

<p id="hello">
  Witaj świecie!!
</p>

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

var hello = document.getElementById('hello');
hello.firstChild.nodeValue = 'Do widzenia swiecie';

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:

<div id="container">Tekst</div>

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

var container = document.getElementById('container');
var newDiv = document.createElement('div');
container.appendChild(newDiv);

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:

var container = document.getElementById('container');
var newDiv = document.createElement('div');
var paragraph = container.firstChild;
container.insertBefore(newDiv, paragraph);

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:

var container = document.getElementById('container');
var paragraph = container.firstChild;
container.removeChild(paragraph);

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:

var container = document.getElementById('container');
var paragraph = welcome.firstChild;
var newParagraph = document.createElement('p');
newParagrap.appendChild( document.createTextNode('Nowy paragraf'));
container.replaceChild(newParagraph, paragraph);

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ę:

<ul>
  <li id="idexItem"><a href="index.html">Strona startowa</a></li>
  <li id="aboutItem"><a href="about.html">O mnie</a></li>
  <li id="contactItem"><a href="contact.html">Kontakt</a></li>
</ul>

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

var indexItem = document.getElementById('indexItem');
var ul = indexItem.parentNode;
ul.appendChild(indexItem);

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:

<div id="container"></div>

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

var anchor = document.getElementById('anchor');
var title = anchor.getAttributeNode('title');
title.value = 'inny tytuł';

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’:

var anchor = document.getElementById('anchor');
var classAttribute = document.createAttribute('class');
classAttribute.value = 'link';
anchor.setAttributeNode(classAttribute);

var titleAttribute = anchor.getAttributeNode('title');
anchor.removeAttributeNode(titleAttribute);

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 ;)