70-480 – Pisanie kodu współdziałającego z formantami interfejsu użytkownika

70-480

Programowe dodawanie i modyfikowanie elementów HTML; wdrażanie sterowania mediami; wdrażanie elementu HTML5 canvas i grafiki SVG.



Po raz kolejny, w krótkim opisie mamy ukrytych kilka tematów. Postaram się je opisać w poniższym wpisie, a tym samym będzie on obejmować zarówno język JavaScript i natywne funkcje pozwalające manipulować strukturą DOM, a także kontrolki multimedialne <video><audio>. Opiszę także pokrótce – służący do tworzenia grafiki w locie – znacznik <canvas> i – służący definiowaniu grafiki wektorowej – znacznik <svg>, które wprowadzone zostały wraz z HTML5.

Manipulowanie strukturą dokumentu HTML (drzewa DOM) za pomocą kodu JavaScript (DOM Document Object & XML DOM – The Element Object)

Poniższe sekcje skupiają się na języku JavaScript i obiekcie Element, dzięki któremu możemy manipulować strukturą HTML. Elementy zawierać mogą w sobie atrybuty, inne elementy lub elementy tekstowe oznaczane jako text-node. Dzięki natywnym metodom JavaScript (Vanilla), możemy sterować zawartością poszczególnych elementów i postaram się to pokrótce pokazać. Pełny wykaz dostępnych metod znajdziecie na stronie w3schools.

Dodawanie nowego elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Powyższy przykład pokazuje, w jaki sposób możemy utworzyć, a następnie dodać nowy element do już istniejącego. W strukturze HTML mamy zdefiniowany kontener #container, do którego dodany zostaje nowy paragraf. Zanim jednak paragraf zostaje dodany do kontenera, to stworzony zostaje text-node, który umieszczony zostaje wewnątrz paragrafu. Tym samym w kontenerze mamy znacznik <p>, który zawiera w sobie tekst “Hello World!“.

Wykorzystane metody:

  • document.getElementById – pobranie elementu po ID (#)
  • document.createElement – stworzenie nowego elementu
  • document.createTextNode – stworzenie nowego elementu typu text-node
  • appendChild – dodanie dziecka do elementu
[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Powyższy przykład ilustruje dodanie nowego elementu przed innym. Posłużyłem się metodą insertBefore, przyjmującą w pierwszej kolejności element, który dodany zostanie przed obiektem podanym jako drugi argument.

Usuwanie elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Powyższy przykład zawiera ponownie #container, który posiada dwa elementy typu p. Użycie metody removeChild powoduje, że pierwszy paragraf zostaje usunięty ze struktury HTML i tym samym wynikiem jest tylko zawartość pochodząca z drugiego paragrafu.

Zmiana zawartości elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Tym razem mamy tylko paragraf (#paragraph), którego referencja zostaje pobrana i przypisana do zmiennej paragraph. Pamiętamy, że wartość tekstowa jest typu text-node, co przekłada się na kolejną linijkę w kodzie JavaScript: paragraph.firstChild. Odwołujemy się tutaj do pierwszego dziecka elementu paragraph, a tym samym do obiektu, który odpowiada za wartość tekstową “Hello World!”. Dalej odwołujemy się do pola nodeValue i przypisujemy mu nową wartość.

Podmiana elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Podobnie jak metoda insertBefore, metoda replaceChild wywołana na kontenerze powoduje, że paragraf (#paragraph) zostaje zamieniony na nowo utworzony paragraf o innej wartości text-node.

Przemieszczenie elementu

W zasadzie wszystkie podstawowe metody do manipulowania elementami HTML zostały przedstawione wyżej. Tym samym bardzo łatwo jesteśmy w stanie przemieszczać wszystkie elementy, które zdefiniowane zostały w HTML, odwołując się do ich referencji w języku JavaScript.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/5/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Mamy listę pięciu elementów div z różnymi wartościami. Pobieramy dwie referencje: #container oraz #id3. Poprzez wywołanie metody, appendChild na kontenerze i podaniu jako atrybutu referencji do kontenera #id3, dodajemy go na sam koniec naszej listy. Nic prostszego.

Powyższy przykład możemy także zrealizować bez konieczności pobierania referencji do głównego kontenera. Wykorzystana w tym wypadku zostanie referencja (parentNode) do rodzica elementu #id3.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dodanie, usunięcie oraz zmiana zawartości atrybutu

Kolejnym przystankiem w manipulacji strukturą HTML są atrybuty elementów. Pokażę Wam jak można dodawać nowe oraz usuwać już istniejące atrybuty.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/9/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Wykorzystane metody:

  • document.createAttribute – stworzenie nowego atrybutu
  • getAttributeNode – pobranie referencji do atrybutu
  • setAttributeNode – ustawienie atrybutu dla elementu
  • removeAttributeNode – usunięcie atrybutu z elementu
  • value – nadpisanie wartości atrybutu

W powyższym przykładzie zdefiniowany został kontener #container oraz link #link, gdzie w przypadku kontenera nie posiadał on atrybutu class, a link posiadał nałożoną klasę, która zmieniała kolor linka na czarny. Poprzez użycie opisanych wyżej metod w JavaScript, dodany został atrybut class do kontenera, a zarazem klasa zmieniająca wygląd kontenera. Natomiast z linka usunięta została klasa nakładająca czarny kolor na tekst i tym samym powrócił on do swojego natywnego stanu.

Znacznik <video> – osadzanie filmów w strukturze HTML

Czas na elementy multimedialne. Na pierwszy ogień idzie znacznik <video>, pozwalający dodawać do HTML elementy wideo. Zapominamy o tym, że kiedyś by zrobić podobną rzecz musieliśmy korzystać z wielu różnych technik, gdzie z pewnością pamiętacie znacznik <object> oraz zabawy z Flash Playerem. HTML5 przyniósł nam nowy standard, który jest już w zasadzie w pełni wspierany przez wszystkie nowe wersje przeglądarek. Dzięki temu nie musimy już korzystać z dodatkowych rozwiązań, a w pełni możemy wykorzystać natywny odtwarzacz wideo.

<video src="movie.mp4" height="400" width="600" controls></video>

Tym prostym sposobem możemy umieścić film na naszej stronie.

Dostępne atrybuty:

  • src – ścieżka / adres do pliku wideo
  • height – wysokość (w px) obszaru, który zajmie odtwarzacz
  • width – szerokość (w px) obszaru, który zajmie odtwarzacz
  • controls – flaga decydująca o tym, czy pokazywać panel kontrolny odtwarzacza
  • autoplay – flaga pozwalająca włączyć autoodtwarzanie filmu
  • muted – flaga ustawiająca początkową wartość głośności na wartość: 0
  • preload – flaga ustawiająca ładowanie części materiału wcześniej
  • loop – flaga ustawiająca zapętlenie odtwarzania materiału wideo
  • poster – pozwala zdefiniować obrazek (okładkę) dla materiału wideo, zanim ten zostanie odtworzony

Istnieje także możliwość dodania wielu źródeł w ramach jednego tagu <video>. W ten sposób możemy zapewnić pełną kompatybilność dla różnych przeglądarek.

<video height="400" width="600" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

Dodatkowe atrybuty dostępne w ramach rozszerzonej definicji:

  • type – rodzaj ładowanego wideo (MP4, WebM, Ogg)
  • media – oczekiwany rodzaj urządzenia, na którym materiał wideo powinien zostać wyświetlony

Obsługiwane formaty oraz wsparcie poszczególnych przeglądarek prezentują się następująco:

  • MP4 (video/mp4) – IE, Chrome, Firefox, Safari
  • WebM (video/webm) – Chrome, Firefox, Opera
  • Ogg (video/ogg) – Chrome, Firefox, Opera

Sterowanie elementami <video>

Dzięki językowi JavaScript jesteśmy w stanie przejąć kontrolę nad odtwarzaczem i sterować jego zachowaniem z poziomu kodu. Poniżej przykład, dzięki któremu odwołuję się do elementu <video>, ukrywam standardowy panel kontrolny, zmieniam rozmiar załadowanego filmu oraz zaczynam odtwarzanie.

<video id="video" src="movie.mp4" height="200" width="300" controls></video>
<button id="play" onclick="play();">Play</button>

<script>
  var video = document.getElementById('video'); 
  
  video.controls = false;
  
  function play() {
    if (video.paused || video.ended) {
      video.width = 600;
      video.play();
    }
  };
</script>

Pełna lista dostępnych metod i ustawień dla tagów <video> oraz <audio>

Znacznik <audio> – osadzanie plików dźwiękowych w strukturze HTML

Znacznik <audio> ma w zasadzie identyczne API jak znacznik <video>. Sposób tworzenia, metody oraz atrybuty są w zasadzie jednakowe. Tym samym dodanie odtwarzacza plików audio na naszej stronie sprowadza się do kawałka HTML:

<audio src="music.mp3" controls></audio>

Obsługiwane formaty oraz wsparcie poszczególnych przeglądarek:

  • MP3 (audio/mpeg) – IE, Chrome, Firefox, Safari
  • Ogg (audio/ogg) – Chrome, Firefox, Safari, Opera
  • Wav (audio/wav) – Chrome, Firefox, Opera

Sterowanie elementami <audio>

Podobnie jak dla znacznika <video>, możemy sterować dotwarzaniem muzyki z poziomu kodu JavaScript. Posłużę się kawałkiem kodu, gdzie dodany zostanie przycisk, który po kliknięciu ustawi głośność odtwarzanego elementu na 50%, a następnie zacznie odtwarzanie. Drugi z przycisków zatrzyma odtwarzanie.

<audio id="audio" src="music.mp3" controls></audio>
<button id="play" onclick="play();">Play</button>
<button id="mute" onclick="mute();">Mute</button>

<script type="text/javascript">
  var audio = document.getElementById('audio'); 
  
  function play() {
    if (audio.paused) {
      audio.volume = 0.5;
      audio.play();
    }
  };

  function mute() {
    audio.mute = !audio.mute;
  };
</script>

Znacznik <canvas> – osadzanie grafiki w strukturze HTML

Ostatnie dwa tematy stanowią wstęp do tworzenia i przetwarzania grafiki po stronie przeglądarki. Pierwszy z nich opisuje element <canvas> pozwalający tworzyć dynamicznie grafikę z poziomu kodu JavaScript. Sam element canvas stanowi w zasadzie obszar roboczy (wyobraź sobie białe płótno Paint), który posiada API pozwalające rysować wszelkiego rodzaju prostokąty, koła, linie, gradienty itd. Przewagą canvas jest przetwarzanie wszystkich zdefiniowanych elementów bezpośrednio przez kartę graficzną, co znacząco wpływa na wydajność.

Czas na przykład wykorzystania (poszerzona wersja ze strony w3schools):

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/11/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Widzimy tutaj trzy kwadraty narysowane przez naszą kartę graficzną. Nakładanie się ich na siebie reprezentuje kolejność z jaką były rysowane. W części HTML mamy zdefiniowany obiekt canvas z atrybutami id, width i height. Część JavaScript odpowiedzialna jest bezpośrednio za pobranie referencji do obiektu canvas poprzez #ID, a następnie pobranie kontekstu 2d i zdefiniowanie trzech instrukcji, pozwalających karcie graficznej narysować trzy kwadraty w obszarze roboczym. Metoda fillStyle pozwala zdefiniować kolor jakim zostanie wypełniona rysowana figura, a metoda fillRect określa współrzędne lewego – górnego rogu (dwa pierwsze parametry) oraz wielkość rysowanej figury (w px – kolejne dwa parametry).

Przejdźmy zatem do rysowania linii:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/12/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Jest to tak samo proste jak narysowanie figur i początek nie różni się w zasadzie niczym. Dalej definiujemy punkt startowy (moveTo), a następnie punkt końcowy rysowanej linii (lineTo). Na końcu wywołujemy metodę stroke, która dokonuje dzieła i tym samym na ekranie widzimy narysowaną linię.

Element <canvas> posiada szereg możliwości i pewnie musiałbym mu poświęcić kilka wpisów, by dokładnie wszystko opisać i pokazać. Zachęcam jednak do własnych eksperymentów i odsyłam do listy wszystkich dostępnych metod.

Pełna lista dostępnych metod dla elementu <canvas>

Znacznik <svg> – osadzanie grafiki wektorowej w strukturze HTML

Ostatnim już elementem wpisu jest osadzanie grafiki wektorowej za pomocą znacznika <svg>. SVG (Scalable Vector Graphics) pozwala na opis grafiki 2D w formacie XML. Dzięki temu możemy tworzyć grafikę wektorową, a więc w pełni skalowalną.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/j4h9t7uq/13/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Przykład pokazuje nam, że podobnie jak dla elementu <canvas> możemy w bardzo prosty sposób korzystać z dostępnych metod i atrybutów znacznika SVG. Narysowanie koła z obramowaniem nie zajęło więcej niż trzy linijki HTML! Wyjaśnijmy sobie, co oznaczają poszczególne atrybuty:

  • svg – width / height – odpowiednio: szerokość i wysokość okna roboczego
  • circle – cx, cy, r – współrzędne środka koła oraz długość promienia
  • circle – stroke – kolor obramowania
  • circle – stroke-width – grubość obramowania
  • circle – fill – kolor wypełnienia koła

SVG to również dużo więcej: linii, figur, gradientów, a nawet animacji! Zapraszam również do zapoznania się z pełną listą dostępnych metod oraz możliwościami osadzania grafiki wektorowej i eksperymentowania we własnym zakresie.

Pełna lista dostępnych metod dla elementu <svg>

Sekcja opisująca podstawową manipulację interfejsem użytkownika dobiegła tym samym końca. Kolejny wpis dotyczyć będzie arkuszy stylów oraz ich stosowaniem do elementów HTML.

Roundup #6 – Screenqueri, JZoopraxiscope, Meny, BigVideo, Really Simple Slideshow, jQuery Picture, Infinity, lorem, oriDomi

Roundup #6 - Screenqueri, JZoopraxiscope, Meny, BigVideo, Really Simple Slideshow, jQuery Picture, Infinity, lorem, oriDomi

Screenqueri

Screenqueri.es is a Pixel Perfect Tool to test your Responsive Design / Media Queries. Select from Pre-defined Screen Resolutions OR Drag Screen Handles To Go With Your Custom Screen Resolutions.

Screenqueri.es – A responsive design testing tool


JZoopraxiscope

JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope.

JZoopraxiscope – A jQuery plugin for making animations from static images


Meny

A three dimensional and space efficient menu concept created with JavaScript and CSS3.

Meny – A CSS 3D fold-in menu concept


BigVideo

BigVideo.js – The jQuery Plugin for Big Background Video.

Showing Big Background Video with BigVideo.js


Really Simple Slideshow

Really Simple Slideshow is a jQuery plugin for creating image slideshows. Images are loaded dynamically as each one is required, allowing for larger slideshows without having to pre-load lots of images.

Really Simple Slideshow: A Flexible Slider Plugin


jQuery Picture

jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.

jQuery Picture – A Plugin For Responsive Images


Infinity

Infinity is a UITableView for the web: it speeds up scrolling through long lists and keeps your infinite feeds smooth and stable for your users. It is small, battle-tested, and highly performant. The code is hosted on Github, and distributed under the BSD License. The annotated source is available, as are demos both with Infinity turned off and on.

Infinity.js


lorem

Text generator that works with Node and browsers, and it includes optional jQuery plugin support.


oriDomi

Small script with optional jQuery support that creates an effect on images and web fonts that looks like folding paper, by using CSS 3D transforms.


[1], [2], [3], [4]