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 #13 – VintageJS, Bonsai, Bourbon, ImageMapster, Base, responsive-carousel, Jarallax

Roundup #13 - VintageJS, Bonsai, Bourbon, ImageMapster, Base, responsive-carousel, Jarallax

VintageJS

vintageJS is a tool where you can upload your images and apply a custom retro, vintage look to them for free. Just try it out: upload your photo, apply the vintage effect and share the retro image it with your friends via Facebook or Twitter.

Vintage Effect for Photos with VintageJS jQuery Plugin


Bonsai

Bonsai is a JavaScript graphics library.
Bonsai’s main features include:

  • Architecturally separated runner and renderer
  • iFrame, Worker and Node running contexts
  • Paths
  • Assets (Videos, Images, Fonts, SubMovies)
  • Keyframe and time based animations (easing functions too)
  • Path morphing
  • and much more…
Bonsai – A Powerful JavaScript Graphics Library

Bourbon

Bourbon is a comprehensive library of sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.
The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.

Bourbon – A comprehensive library of sass mixins


ImageMapster

ImageMapster is a jQuery plugin that lets you activate HTML image maps without using Flash. It works just about everywhere that Javascript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids.

ImageMapster – A jQuery plugin that activates HTML imagemaps


Base

A super simple, responsive framework built to work on mobile devices, tablets, netbooks and desktop computers.

A Simple, Responsive CSS Framework – Base


responsive-carousel

A jQuery-based script for responsive carousels that work with mouse, touch, and keyboard.

responsive-carousel – A jQuery-based script for responsive carousels


Jarallax

Jarallax is an open-source JavaScript library which makes adjusting css based on interaction easy. With Jarallax it’s easy to create a parallax scrolling website.

Parallax Scrolling Made Easy – Jarallax


[1], [2], [3]

Roundup #10 – OpenKeyval, Socialist, Reveal, SwipeView, BookBlock, Happy, jsDraw2DX

Roundup #10 - OpenKeyval, Socialist, Reveal, SwipeView, BookBlock, Happy, jsDraw2DX

OpenKeyval

OpenKeyval is a completely open key-value data store, exposed as a drop-dead simple web service. The goal is to make this a very easy way to persist data in web applications.

OpenKeyval – Instant & Web-Based Database For Any Project


Socialist

Socialist is a jQuery social plugin that creates a social stream (or social “wall”) from multiple social media feeds in one place. Use it to pull content from Facebook pages, Twitter, LinkedIn, YouTube and other social. networks..

Socialist – A jQuery social media plugin


Reveal

reveal.js is a framework for easily creating beautiful presentations using HTML. You’ll need a browser with support for CSS 3D transforms to see it in its full glory.

The Beautiful HTML Presentation Framework


SwipeView

SwipeView is the super simple solution to endless seamlessly loopable carousels for the mobile browser. It’s memory conservative as it uses only three elements at any given time, it’s smooth as velvet since it takes advantage of hardware acceleration, it’s bandwidth friendly with its 1.5kb minified/gzipped footprint.

SwipeView – Infinite Carousels For Mobile Web


BookBlock

A jQuery plugin that will create a booklet-like component that let’s you navigate through its items by flipping the pages.

v


Happy

Yes, there a million form validation plugins already – but I like this approach and the good news is, if you don’t, you have other options. In fact, if you want something really full-featured for jQuery. Use this one. Personally I wanted something really lightweight and extendable (because it’s hard to be happy when you’re bloated).

Lightweight jQuery Form Validation Plugin: Happy.js


jsDraw2DX

jsDraw2DX is a standalone JavaScript library for creating any type of interactive graphics with SVG (and VML for old IE browsers).

Besides the ability to generate all basic shapes like line, rectangle, polygon, circle, ellipse, arc, etc., the library can draw curves, beziers (any degree), function plots, images and decorated text.

SVG Graphics Library For JavaScript: jsDraw2DX


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

Roundup #1 – Node 0.8.6, Axon, NextFlow, Autobahn, jQuerin Grid Builder, Best Ampersand, jQuery Zoom, Mousetrap, JustGage

Roundup - mrzepinski.pl - Programin is funJako, że różnego rodzaju narzędzi, pluginów, wtyczek itp. pojawia się w Internecie każdego dnia całe mnóstwo – postanowiłem więc, że będę je zbierał i publikował co jakiś czas w jednym wpisie, oznaczonym kategorią Roundup.


Node.js - JavaScript platform

Node 0.8.6

Wydane zostało kolejne stabilne wydanie platformy JavaScript, jaką jest Node.js. Framework zbudowany na bazie silnika V8, na którym działa także Chrome, oznaczony został numerem 0.8.6.


Axon

Biblioteka dla Node.js, pozwalająca wysyłać i odbierać  wiadomości.


NextFlow

Kolejna biblioteka dla Node.js, która pozwala sterować przepływem danych w aplikacji. Skierowana głównie do deweloperów CoffeScript.


AutobahnJS

AutobahnJS

Bibioteka JavaScript implementująca The WebSocket Application Messaging Protocol (WAMP).

AutobahnJS relies on Promises for asynchronous programming. A promise is an object that represents the eventual value returned from the completion of an operation.


jQuerin Grid Builder

Jak sam nazwa wskazuje – jest to biblioteka jQuery, która pozwala na interaktywne budowanie wyglądu strony w oparciu o tzw grid design. Po skończonej pracy możemy sobie wygenerować kod HTML + CSS i kontynuować pracę nad praktycznie gotowym layoutem.


Best Ampersand

Best Ampersand is a simple jQuery plugin that adds ampersand classes for better ampersand fonts. Inspired by Dan Cederholm.


http://mrzepinski.pl/wp-content/uploads/2012/08/jquery-zoom.jpg

jQuery Zoom

Biblioteka jQuery pozwalająca na powiększanie obrazków na stronie. Wykorzystuje ona zdarzenia mouseover lub mousedown.


Mousetrap – Keyboard shortcuts in Javascript

Mousetrap

Prosta biblioteka JavaScript, która pozwala na przechwytywanie skrótów klawiszowych w przeglądarce i przypisywanie im konkretnych akcji do wykonania.


Animated SVG Gauges With JS: JustGage

JustGage

Biblioteka JavaScript, wykorzystująca SVG do budowania animowanych czujników, mierników itp. na swojej stronie.


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