Technologie internetowe w programowaniu Tomasz Xięski Roman Simiński DOM Document Object Model Audio i Video w HTML5
Co to takiego DOM? DOM Document Object Model to specyfikacja określająca anatomię dokumentu wizualizowanego przez przeglądarkę oraz metody dostępu i modyfikowania elementów takiego dokumentu. DOM jest niezależny od języka JavaScript, dostęp i manipulowanie elementami strony (dokumentu) wizualizowanej w przeglądarce może być realizowany z wykorzystaniem innych języków programowania (np. VBScript firmy Microsoft). O ile Microsoft oraz twórcy innych przeglądarek zwykle dbają o zgodność własnych implementacji ECMAScript (czyli własnych JavaScriptów) ze standardem, o tyle DOM nie w każdej przeglądarce jest taki sam. Standard DOM został określony i jest wspierany przez konsorcjum W3C: The W3C Document Object Model (DOM) is a platform and languageneutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document 2
Co DOM standaryzuje? DOM jest podzielony na 3 poziomy: Core DOM standard dla każdego dokumentu z określoną strukturą, XML DOM - standard dla dokumentów XML, HTML DOM standard dla dokumentów HTML. HTML DOM definiuje obiekty występujące w dokumencie HTML, ich właściwości oraz metody dostępu do tych obiektów i właściwości. HTML DOM to standard określający jak pobierać, zmieniać, dodawać i usuwać elementy dokumentu HTML. 3
DOM dzieli elementy dokumentu na cztery klasy Obiekty (ang. objects) pojemniki reprezentujące określone elementy strony, zawierające właściwości oraz metody. Właściwości (ang. properties) za ich pośrednictwem których można odczytywać i (choć nie zawsze) modyfikować określone cechy obiektów. Modyfikacja właściwości zwykle prowadzi do natychmiastowej zmiany zawartości ekranu przeglądarki. Metody (ang. methods) przeznaczone są do wykonywania akcji dla obiektów te metody posiadających. Metody oga mieć charakter funkcyjny i udostępniać rezultat. Zdarzenia (ang. events) wiążą akcję wykonywaną na danym obiekcie przez użytkownika lub samą przeglądarkę, z wykonaniem określonego fragmentu kodu programu. 4
Elementy DOM przyjmują postać drzewa Dokument HTML jest reprezentowany w postaci drzewa. Elementy dokumentu HTML stanowią węzły (ang. nodes) tego drzewa, zależności pomiędzy elementami są reprezentowane poprzez połączenia pomiędzy węzłami drzewa. Elementy dokumentu HTML są reprezentowane w postaci drzewa. Drzewo dokumentu HTML posiada swój korzeń, oraz liście, czyli elementy na najniższym poziomie hierarchii, nie posiadające podelementów. 5
Drzewo przykładowego dokumentu struktura HTML <html> <head> <title>dom i JavaScript</title> </head> <body> <h1>dom</h1> <p>document Object Model</p> </body> </html> html head body title h1 p 6
Drzewo przykładowego dokumentu struktura HTML, zależności <html> <head> <title>dom i JavaScript</title> </head> <body> <h1>dom</h1> <p>document Object Model</p> </body> </html> html Korzeń dokumentu head body title h1 p Liście 7
Drzewo przykładowego dokumentu struktura HTML, zależności <html> <head> <title>dom i JavaScript</title> </head> <body> <h1>dom</h1> <p>document Object Model</p> </body> </html> Pierwszy potomek html html Drugi potomek html head body title h1 p 8
Drzewo przykładowego dokumentu struktura HTML, zależności <html> <head> <title>dom i JavaScript</title> </head> <body> <h1>dom</h1> <p>document Object Model</p> </body> </html> Rodzic head html Rodzic body head body title h1 p 9
Drzewo przykładowego dokumentu struktura HTML, zależności <html> <head> <title>dom i JavaScript</title> </head> <body> <h1>dom</h1> <p>document Object Model</p> </body> </html> html head Rodzeństwo body title h1 p 10
Elementy drzewa hierarchii dokumentu Dziecko (ang. child) element będący o jeden szczebel niżej w drzewie w stosunku do danego elementu. Potomek (ang. descendant) element będący o jeden lub więcej szczebli niżej w drzewie w stosunku do danego elementu. Rodzic (ang. parent) element o jeden szczebel wyżej w drzewie w stosunku do danego elementu. Przodek (ang. ancestor) element będący o jeden lub więcej szczebli wyżej w drzewie w stosunku do danego elementu. Brat (ang. sibling) element mający tego samego rodzica, co inny element; jeśli znajduje się obok niego, to jest to brat przylegający (ang. adjacent sibling). 11
Elementy dokumentu HTML <p>document Object Model</p> p Element Document Object Model Zawartość elementu 12
Elementy dokumentu HTML a obiekty DOM <p>document Object Model</p> p Węzeł elementu (element node) Document Object Model Węzeł tekstu (text node) 13
Struktura dokumentu HTML a DOM <html> <head> <title>dom i JavaScript</title> </head> <body> <h1>dom</h1> <p>document Object Model</p> </body> </html> html węzeł elementu węzeł tekstu head body title h1 p DOM i JavaScript DOM Document Object Model 14
Struktura dokumentu HTML a obiekty i właściwości DOM <a href= Adres URL title= Tytuł >Odsyłacz <strong>hipertekstowy</strong></a> węzeł elementu element: a węzeł tekstu węzeł atrubutu attribute: href attribute: title text: Adres URL text: Tytuł text: Odsyłacz element: strong text: hipertekstowy 15
Obiekty window i document Obiekt window bazowy obiekt w DOM, reprezentuje okno przeglądarki, posiada właściwości i metody. Funkcje alert(), setinterval(), confirm(), open() totak naprawę metody obiektuwindow. clearinterval(), Formalnie np. wywołanie funkcji alert()powinno wyglądać tak: window.alert( "alert to metod obiektu window" ); Obiekt window posiada właściwość document jest to obiekt reprezentujący dokument HTML wyświetlany przez przeglądarkę. Obiekt document zawiera informacje o aktualnym dokumencie HTML i pozwala na dostęp do wszystkich elementów strony. Formalnie, odwołanie do obiektu document powinno wyglądać tak: window.document.write( "document to właściwość obiektu window" ); 16
Obiekt window i document właściwości i metody Obiekt window dokładny opis właściwości i metod dostępny np.: http://www.w3schools.com/htmldom/dom_obj_window.asp Obiekt document dokładny opis właściwości i metod dostępny np.: http://www.w3schools.com/htmldom/dom_obj_document.asp 17
Obiekt document kolekcje obiektów na stronie Kolekcja anchors[] referencja do tablicy obiektów reprezentujących elementy ze znacznikiem a name i a id występujące na stronie. Kolekcja forms[] referencja do tablicy obiektów reprezentujących formularze występujące na stronie. Kolekcja images[] referencja do tablicy obiektów reprezentujących obrazy występujące na stronie (img). Kolekcja links[] referencja do tablicy obiektów reprezentujących łączniki i hiperłącza występujące na stronie (a href). Każda z kolekcji posiada właściwość lengthpozwalającą na określenia liczby elementów danego typu w bieżącym dokumencie. 18
Obiekt document kolekcje obiektów na stronie Ile jest obiektów poszczególnych typów w bieżącym dokumencie: window.document.write( "Kotwice: " window.document.write( "Obrazki: " window.document.write( "Formularze: window.document.write( "Łącza: " + window.document.anchors.length + " " ); + window.document.images.length + " " ); " + window.document.forms.length + "" ); + window.document.links.length + "" ); Ponieważ obiekt windowjest domyślny, można używać wersji skróconej: document.write( "Kotwice: " document.write( "Obrazki: " document.write( "Formularze: document.write( "Łącza: " + document.anchors.length + " " ); + document.images.length + " " ); " + document.forms.length + "" ); + document.links.length + "" ); 19
Jak odwoływać się do elementów drzewa getelementsbytagname Odwołanie wg nazwy znacznika getelementsbytagname <body> <p>paragraf pierwszy</p> <p>paragraf drugi</p> <p>paragraf trzeci</p> </body> document.getelementsbytagname( 'p' )[ 0 ] document.getelementsbytagname( 'p' )[ 1 ] document.getelementsbytagname( 'p' )[ 2 ] liczba elementów danego znacznika w dokumencie length document.getelementsbytagname( 'p' ).length 20
Jak odwoływać się do elementów drzewa getelementbyid Odwołanie wg nazwy znacznika getelementbyid <body> <p id="pierwszy">paragraf pierwszy</p> <p id="drugi">paragraf drugi</p> <p id="trzeci">paragraf trzeci</p> </body> document.getelementbyid( "pierwszy" ) document.getelementbyid( "drugi" ) document.getelementbyid( "trzeci" ) 21
Jak odwołać się do tekstu znacznika innerhtml Właściwość innerhtml ta właściwość nie występuje w standardzie W3C ale działa. <body> <p id="pierwszy">paragraf pierwszy</p> <p id="drugi">paragraf drugi</p> <p id="trzeci">paragraf trzeci</p> </body> var tekst = document.getelementbyid( "pierwszy" ).innerhtml; alert( "Paragraf 1: " + tekst ); tekst = document.getelementbyid( "drugi" ).innerhtml; alert( "Paragraf 2: " + tekst ); tekst = document.getelementbyid( "trzeci" ).innerhtml; alert( "Paragraf 3: " + tekst ); 22
Jak odwołać się do tekstu znacznika nodevalue Właściwość nodevalue ta właściwość określa wartość wierzchołka. <body> <p id="pierwszy">paragraf pierwszy</p> <p id="drugi">paragraf drugi</p> <p id="trzeci">paragraf trzeci</p> </body> element: p text: Paragraf pierwszy var tekst = document.getelementbyid( "pierwszy" ).firstchild.nodevalue; alert( "Paragraf 1: " + tekst ); tekst = document.getelementbyid( "drugi" ).firstchild.nodevalue; alert( "Paragraf 2: " + tekst ); tekst = document.getelementbyid( "trzeci" ).firstchild.nodevalue; alert( "Paragraf 3: " + tekst ); 23
Po elementach danego typu można iterować <body> <p id="pierwszy">paragraf pierwszy</p> <p id="drugi">paragraf drugi</p> <p id="trzeci">paragraf trzeci</p> </body> Niespecjalnie optymalna iteracja: for( var i = 0; i < document.getelementsbytagname( 'p' ).length; i++ ) var tekst = window.document.getelementsbytagname( 'p' )[ i ].innerhtml; window.alert( "Paragraf " + ( i + 1 ) + ": " + tekst ); Lepsza wersja iteracji: var nodes = window.document.getelementsbytagname( 'p' ); for( var i = 0; i < nodes.length; i++ ) var tekst = nodes[ i ].innerhtml; window.alert( "Paragraf " + ( i + 1 ) + ": " + tekst ); 24
Iteracja po hiperłączach dokumentu <body> <h2>moje ulubione strony</h2> <a href="http://www.cplusplus.com/">o języku C++</a><br /> <a href="http://gcc.gnu.org/">o kompilatorze GCC</a><br /> <a href="http://www.codeblocks.org/">o środowisku Code::Blocks</a><br /> <input type="button" value="pokaż ich adresy" onclick="pokazurl()"> <p id="w"></p> </body> function pokazurl() var w = document.getelementbyid( "w" ); w.innerhtml = ""; for( i = 0; i < document.links.length; ++i ) w.innerhtml += document.links[ i ].innerhtml + ": "; w.innerhtml += document.links[ i ].href + "<br \/>"; 25
Pobieranie informacji z elementów typu input <body> <input type="text" id="t1" value="wartość pola" /> <input type="button" id="b1" value="wartość przycisku" /> <p id="p1"></p> <script type="text/javascript"> var s1 = "Pole tekstowe: " + document.getelementbyid( "t1" ).value; var s2 = "Przycisk: " + document.getelementbyid( "b1" ).value; document.getelementbyid( "p1" ).innerhtml = s1 + "<br\/>" + s2; </script> </body> 26
Pobieranie informacji z elementów typu input przykład Zadaniem skryptu na stronie WWW jest obliczanie, ile średnio litrów paliwa spala pojazd na trasie 100 km. Wartość ta zwana dalej średnim spalaniem obliczana jest na podstawie ilości zużytego przez pojazd paliwa oraz liczby przejechanych kilometrów. przejechany dystans [km] 100 [km] ilość paliwa [litry] x [litry] spalanie = ( 100 * ilość paliwa ) / przejechany dystans 27
Pobieranie informacji z elementów typu input przykład Komunikacja: <html> <head> </head> Elementy typu input, z których będą pobrane dane <body> <h2>obliczanie średniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> </body> </html> 28
Pobieranie informacji z elementów typu input przykład Komunikacja: <html> <head> </head> Paragraf przewidziany dla wyniku, na starcie pusty <body> <h2>obliczanie średniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> </body> </html> 29
Pobieranie informacji z elementów typu input przykład Komunikacja: <html> <head> </head> Funkcja obliczająca średnie spalanie, aktywowana naciśnięciem przycisku Oblicz <body> <h2>obliczanie średniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> </body> </html> 30
Pobieranie informacji z elementów typu input przykład Akcja: Pobranie Pobranie wartości wartości z pól wejściowych pola <html> <head> próba (!) tekstowego zamiany na liczby <script type="text/javascript"> function spalanie() var p = Number( document.getelementbyid( "p" ).value ); var d = Number( document.getelementbyid( "d" ).value ); var out = document.getelementbyid( "w" ); if( d!= 0 ) out.innerhtml = "Spalanie: " + ( p * 100 ) / d + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatnią!"; </script> </head> <body> <h2>obliczanie średniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> </body> </html> 31
Pobieranie informacji z elementów typu input przykład Akcja: <html> <head> <script type="text/javascript"> function spalanie() var p = Number( document.getelementbyid( var d = Number( document.getelementbyid( var out = document.getelementbyid( "w" ); "p" ).value ); "d" ).value ); if( d!= 0 ) out.innerhtml = "Spalanie: " + ( p * 100 ) / d + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatnią!"; </script> </head> <body> <h2>obliczanie średniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> </body> </html> Pobranie referencji do paragrafu prezentacji wyników 32
Pobieranie informacji z elementów typu input przykład Akcja: <html> <head> <script type="text/javascript"> function spalanie() var p = Number( document.getelementbyid( var d = Number( document.getelementbyid( var out = document.getelementbyid( "w" ); "p" ).value ); "d" ).value ); if( d!= 0 ) out.innerhtml = "Spalanie: " + ( p * 100 ) / d + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatnią!"; </script> </head> <body> <h2>obliczanie średniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> </body> </html> Zabezpieczenie przed dzieleniem przez zero, obliczenia, wstawienie wyniku do par. wyjściowego 33
Pobieranie informacji z elementów typu input przykład Weryfikacja danych: <script type="text/javascript"> function spalanie() var p = document.getelementbyid( "p" ).value; var d = document.getelementbyid( "d" ).value; var out = document.getelementbyid( "w" ); Pobierz dane jako łańcuchy znaków if( isnan( p ) out.innerhtml = else if( d!= 0 ) out.innerhtml else out.innerhtml </script> isnan( d ) ) "Dystans i ilość paliwa muszą być liczbami!"; = "Spalanie: " + ( p * 100 ) / d + " l/100km"; = "Dystans musi być liczba dodatnią!"; 34
Pobieranie informacji z elementów typu input przykład Weryfikacja danych: <script type="text/javascript"> function spalanie() var p = document.getelementbyid( "p" ).value; var d = document.getelementbyid( "d" ).value; var out = document.getelementbyid( "w" ); Sprawdź czy dane są liczbami if( isnan( p ) isnan( d ) ) out.innerhtml = "Dystans i ilość paliwa muszą być liczbami!"; else if( d!= 0 ) out.innerhtml = "Spalanie: " + ( p * 100 ) / d + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatnią!"; </script> 35
Pobieranie informacji z elementów typu input przykład Wynik z wieloma miejscami po przecinku: <script type="text/javascript"> function spalanie() var p = document.getelementbyid( "p" ).value; var d = document.getelementbyid( "d" ).value; var out = document.getelementbyid( "w" ); if( isnan( p ) isnan( d ) ) out.innerhtml = "Dystans i ilość paliwa muszą być liczbami!"; else if( d!= 0 ) out.innerhtml = "Spalanie: " + ( p * 100 ) / d + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatnią!"; </script> 36
Pobieranie informacji z elementów typu input przykład Ustalenie liczby miejsc po przecinku: <script type="text/javascript"> function spalanie() var p = document.getelementbyid( "p" ).value; var d = document.getelementbyid( "d" ).value; var out = document.getelementbyid( "w" ); if( isnan( p ) isnan( d ) ) out.innerhtml = "Dystans i ilość paliwa muszą być liczbami!"; else if( d!= 0 ) var wynik = ( out.innerhtml else out.innerhtml </script> p * 100 ) / d; = "Spalanie: " + wynik.tofixed( 2 ) + " l/100km"; = "Dystans musi być liczba dodatnią!"; 37
Pobieranie informacji z elementów typu input przykład Ustalenie liczby miejsc po przecinku: <script type="text/javascript"> function spalanie() var p = document.getelementbyid( "p" ).value; var d = document.getelementbyid( "d" ).value; var out = document.getelementbyid( "w" ); if( isnan( p ) isnan( d ) ) out.innerhtml = "Dystans i ilość paliwa else if( d!= 0 ) muszą być liczbami!"; var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d ); out.innerhtml = "Spalanie: " + wynik.tofixed( 2 ) + " l/100km"; else out.innerhtml </script> = "Dystans nie może być zerowy!"; 38
Manipulowanie zawartością elementów Czyszczenie elementów dokumentu dodatkowy przycisk: <body> <h2>obliczanie średniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()"/> <input type="button" value="wyczyść" onclick="czyszczenie()"/> <p id="w"></p> </body> 39
Manipulowanie zawartością elementów Czyszczenie elementów dokumentu funkcja obsługi zdarzenia: <script type="text/javascript"> function czyszczenie() document.getelementbyid( document.getelementbyid( document.getelementbyid( "p" ).value = ""; "d" ).value = ""; "w" ).innerhtml = ""; </script> 40
Manipulowanie zawartością elementów Czyszczenie z ustawieniem focusa i zaznaczenia na edytorze paliwa: function czyszczenie() document.getelementbyid( "p" ).value = ""; document.getelementbyid( document.getelementbyid( "d" ).value = ""; "w" ).innerhtml = ""; function czyszczenie() var pedit = document.getelementbyid( "p" ); pedit.value = ""; pedit.focus(); document.getelementbyid( "d" ).value = ""; document.getelementbyid( "w" ).innerhtml = ""; Metody focus() i blur() odpowiednio ustawiają i usuwają zogniskowanie na elemencie. Metod select() pozwala na ustawienie zaznaczenia tekstu w polu edycyjnym, jednocześnie ustawiane jest zogniskowanie. 41
Manipulowanie zawartością elementów Ustawianie zogniskowania na po załadowaniu treści strony: <body onload='document.getelementbyid( "p" ).focus()'> <h2>obliczanie średniego spalania na 100 km</h2> lub <body onload="document.getelementbyid( 'p' ).focus()"> <h2>obliczanie średniego spalania na 100 km</h2> 42
Rozwojowy Manipulowanie element zawartością koszt elementów przejechania jednego kilometra Tymczasowo najprostsza wersja szacowanie w oparciu o stałą cenę paliwa :-/ if( isnan( p ) out.innerhtml = else if( d!= 0 ) Żeby to miało sens, ta cena powinna dotyczyć odpowiedniego paliwa i być aktualna isnan( d ) ) "Dystans i ilość pal iwa muszą być liczbami!"; var wynik = ( Math.abs( p ) * 100 var kilometr = ( wynik / 100 ) * 5.03 ; wynik = wynik.tofixed( 2 ); kilometr = kilometr.tofixed( 2 ); out.innerhtml = "Spalanie: " out.innerhtml += "Szacunkowy ) / Math.abs( d ); + wynik + " l/100km<\/br>"; koszt przejazdu 1km to: " + kilometr + "zł"; else out.innerhtml = "Dystans nie moze byc zerowy!"; 43
Rozwojowy element koszt przejechania jednego kilometra Wprowadzamy wybór rodzaju paliwa (olej napędowy, benzyna, gaz) <body> <h2>obliczanie średniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <p> <input <input <input </p> type="radio" type="radio" type="radio" id="r_on" id="r_et" id="r_lpg" name="paliwo" name="paliwo" name="paliwo" value="on" />olej napędowy value="et" checked="checked" value="lpg" />gaz />benzyna <input type="button" value="oblicz" onclick="spalanie()"/> <input type="button" value="wyczyść" onclick="czyszczenie()"/> <p id="w"></p> </body Ten przycisk będzie domyślnie zaznaczony. Uwaga, są kontrowersje związane z wartością przypisywaną do atrybutu checked, przedstawione rozwiązanie jest zgodne z W3C. W ramach grupy przycisków o tej samej wartości atrybutu name tylko jeden przycisk może być zaznaczony. Pozwala to na stosowanie wielu różnych grup przycisków radiowych. 44
Rozwojowy element koszt przejechania jednego kilometra Poprawka funkcji czyszczenia pól wprowadzania danych function czyszczenie() document.getelementbyid( "p" ).value = ""; document.getelementbyid( "d" ).value = ""; document.getelementbyid( "w" ).innerhtml = ""; document.getelementbyid( document.getelementbyid( document.getelementbyid( "r_on" ).checked "r_et" ).checked "r_lpg" ).checked = false; = true; = false; Dla elementów wejściowych typu radio i checkbox DOM przewiduje możliwość manipulowania właściwością checked, traktowaną jako wartość bool. Inne właściwości obiektu typu przycisk radiowy (wg W3C): 45
Rozwojowy element koszt przejechania jednego kilometra Poprawka funkcji obliczania średniego spalania: if( isnan( p ) out.innerhtml = else if( d!= 0 ) isnan( d ) ) "Dystans i ilość p aliwa muszą być liczbami!"; var wynik = ( Math.abs( p ) * 100) / Math.abs(d) var kilometr = ( wynik / 100 ) * ustalcene() ; wynik = wynik.tofixed( 2 ); kilometr = kilometr.tofixed( out.innerhtml = "Spalanie: " out.innerhtml += "Szacunkowy 2 ); + wynik + " l/100km<\/br>"; koszt przejazdu 1km to: " + kilometr + "zł"; else out.innerhtml = "Dystans nie moze byc zerowy!"; 46
Rozwojowy element koszt przejechania jednego kilometra Funkcja wyznaczania ceny, badziewiarskie wersje w amatorskiej odsłonie: function ustalcene() if( document.getelementbyid( return 4.50; if( document.getelementbyid( return 4.60; if( document.getelementbyid( return 2.50; "r_on" ).checked ) "r_et" ).checked ) "r_lpg" ).checked ) function ustalcene() var on = document.getelementbyid( "r_on" ); var et = document.getelementbyid( "r_et" ); var lpg = document.getelementbyid( "r_lpg" ); if( on.checked ) return 4.50; if( et.checked ) return 4.60; if( lpg.checked ) return 2.50; 47
Rozwojowy element koszt przejechania jednego kilometra Poprawiamy interfejs i przypisujemy ceny do przycisków radiowych: <h2>obliczanie średniego spalania na 100 km</h2> Formularz o nazwie wybieraczpaliwa <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <form name="wybieraczpaliwa"> <input type="radio" id="r_on" name="paliwo" value="4.50" />olej napędowy <input type="radio" id="r_et" name="paliwo" value="4.60" checked = "checked" />benzyna <input </form> type="radio" id="r_lpg" name="paliwo" value="2.50" />gaz <input type="button" value="oblicz" onclick="spalanie()"/> <input type="button" value="wyczyść" onclick="czyszczenie()"/> <p id="w"></p> Cena jako wartość zapisane w obiekcie przycisku radiowego 48
Rozwojowy element koszt przejechania jednego kilometra Funkcja wyznaczania ceny, dalej badziew, ale w nieamatorskiej odsłonie: function ustalcene() for( i = 0; i < document.wybieraczpaliwa.paliwo.length; ++i ) if( document.wybieraczpaliwa.paliwo[ i ].checked ) return Number( document.wybieraczpaliwa.paliwo[ i ].value ); Dla elementów formularza o tych samych nazwa tworzona jest tablica odpowiadających im obiektów: document.wybieraczpaliwa.paliwo // Dla formularza o nazwie wybieraczpaliwa Liczba elementów w takiej tablicy: document.wybieraczpaliwa.paliwo.length Dostęp do i-tego elementu tablicy: document.wybieraczpaliwa.paliwo[ i ] 49
Rozwojowy element koszt przejechania jednego kilometra Czasem inikatowa identyfikacja elementów nie jest konieczna: function czyszczenie() document.getelementbyid( "p" ).value = ""; document.getelementbyid( "d" ).value = ""; document.getelementbyid( "w" ).innerhtml = ""; document.getelementbyid( document.getelementbyid( document.getelementbyid( "r_on" "r_et" "r_lpg" ).checked ).checked ).checked = false; = true; = false; function czyszczenie() document.getelementbyid( "p" ).value = ""; document.getelementbyid( "d" ).value = ""; document.getelementbyid( "w" ).innerhtml = ""; for( i = 0; i < document.wybieraczpaliwa.paliwo.length; document.wybieraczpaliwa.paliwo[ i ].checked = false; document.wybieraczpaliwa.paliwo[ 1 ].checked = true; ++i ) 50
Rozwojowy element koszt przejechania jednego kilometra Wtedy można zrezygnować z stosowania id: <form name="wybieraczpaliwa"> <input type="radio" id="r_on" name="paliwo" value="4.50" />olej napędowy <input type="radio" id="r_et" name="paliwo" value="4.60" checked = "checked" />benzyna <input </form> type="radio" id="r_lpg" name="paliwo" value="2.50" />gaz <form name="wybieraczpaliwa"> <input <input <input </form> type="radio" type="radio" type="radio" name="paliwo" value="4.50" />olej napędowy name="paliwo" value="4.60" checked = "checked" />benzyna name="paliwo" value="2.50" />gaz 51
Rozwojowy element koszt przejechania jednego kilometra Dlaczego ta funkcja jest dalej badziewiasta? function ustalcene() for( i = 0; i < document.wybieraczpaliwa.paliwo.length; ++i ) if( document.wybieraczpaliwa.paliwo[ i ].checked ) return Number( document.wybieraczpaliwa.paliwo[ i ].value ); Dlatego, że ceny paliw są i tak na stałe wpisane w kod: <form name="wybieraczpaliwa"> <input <input <input type="radio" type="radio" type="radio" name="paliwo" value="4.50" />olej napędowy name="paliwo" value="4.60" checked = "checked" />benzyna name="paliwo" value="2.50" />gaz </form> Ceny paliw powinny być uzyskiwane samoczynnie od odpowiedniej usługi sieciowej, oferującej aktualne ceny paliw. 52
Odwołania tablicowe działają nie tylko dla przycisków radiowych Załóżmy obsługę wyboru nierozłącznych preferencji przed wysłaniem: Być może całkiem sporo pół znacznikowych <body> <h2>zaznacz swoje hobby</h2> <form name="wybieraczhobby"> <input <input <input <input type="checkbox" type="checkbox" type="checkbox" type="checkbox" name="hobby" name="hobby" name="hobby" name="hobby" value="narty" value="rower" value="rolki" value="tenis" />Narty />Rower<br /> />Rolki />Tenis<br /> <input type="button" <input type="button" <input type="button" </form> <p id="wybor"></p> </body> value="wyczyść" value="wszystko" value="potwierdź" onclick="wyczysc()"/> onclick="wszystko()"/> onclick="potwierdzenie()"/> Obsługa przed wysłaniem 53
Odwołania tablicowe działają nie tylko dla przycisków radiowych Taka sobie prymitywna wersja: function potwierdzenie() var napis = "Zazaczone hobby: "; for( i = 0; i < document.wybieraczhobby.hobby.length; if( document.wybieraczhobby.hobby[ i ].checked ) napis += document.wybieraczhobby.hobby[ i ].value ++i ) + ' '; document.getelementbyid( "wybor" ).innerhtml = napis; function wyczysc() for( i = 0; i < document.wybieraczhobby.hobby.length; document.wybieraczhobby.hobby[ i ].checked = false; document.getelementbyid( "wybor" ).innerhtml = ""; function wszystko() for( i = 0; i < document.wybieraczhobby.hobby.length; document.wybieraczhobby.hobby[ i ].checked = true; document.getelementbyid( "wybor" ).innerhtml = ""; ++i ) ++i ) 54
Odwołania tablicowe działają nie tylko dla przycisków radiowych Wersja reagująca na zaznaczenie każdego pola znacznikowego: <body> <h2>zaznacz swoje hobby</h2> <form name="wybieraczhobby"> <input <input <input <input <input <input <input </form> <p id="wybor"></p> </body> type="checkbox" type="checkbox" type="checkbox" type="checkbox" type="button" type="button" type="button" name="hobby" name="hobby" name="hobby" name="hobby" value="wyczyść" value="wszystko" value="potwierdź" value="narty" value="rower" value="rolki" value="tenis" onclick="ustawwybor()" />Narty onclick="ustawwybor()"/>rower<br /> onclick="ustawwybor()"/>rolki onclick="ustawwybor()"/>tenis<br /> onclick="ustaw( false )"/> onclick="ustaw( true )"/> onclick="potwierdzenie()"/> 55
Odwołania tablicowe działają nie tylko dla przycisków radiowych Wersja reagująca na zaznaczenie każdego pola znacznikowego: function potwierdzenie() var komunikat = document.getelementbyid( "wybor" ).innerhtml; if( komunikat == "" ) komunikat = "Nie lubisz żadnych z tych rzeczy..."; alert( komunikat ); function ustawwybor() var napis = ""; for( i = 0; i < document.wybieraczhobby.hobby.length; if( document.wybieraczhobby.hobby[ i ].checked ) ++i ) napis += document.wybieraczhobby.hobby[ i ].value + ' '; if( napis!= "" ) napis = "Zazaczone hobby: " + napis; document.getelementbyid( "wybor" ).innerhtml = napis; function ustaw( natak ) for( i = 0; i < document.wybieraczhobby.hobby.length; document.wybieraczhobby.hobby[ i ].checked = natak; ustawwybor(); ++i ) 56
Nowe znaczniki semantyczne meter i progress <meter value="3" min="1" max="10">3 w skali od 1 do 10</meter><br /> <meter value="0.4">40%</meter> Gdy brak implementacji Opera, Chrome Znacznik <meter> definiuje wskaźnik, np. zużycie przestrzeni dyskowej, page rank, wynik ankiety. Uwaga nie używa się jako paska postępu, do tego jest <progress>. <progress value="11" max="100">ładowanie: 11%</progress> Gdy brak implementacji Opera, Chrom, Firefox 57
Nowe znaczniki semantyczne meter i progress var timeoutobject; var sek = 0; function display() document.getelementbyid( "pb" ).value = sek++; if( sek > 100 ) zeruj(); function start() display(); window.timeoutobject = setinterval( "display()", 100 ) function stop() window.clearinterval( timeoutobject ); function zeruj() document.getelementbyid( "pb" ).value = sek = 0; <body> <h1>progress bar</h1> <progress id="pb" value="0" max="100"></progress> Sterowanie elementem progress prosty przykład <input <input <input </body> </html> type="button" type="button" type="button" value="start" value="stop" value="zeruj" onclick="start()" /> onclick="stop()" /> onclick="zeruj()" /> 58
Nowe znaczniki semantyczne audio <audio src="traktor.mp3" controls autoplay loop preload="none"> Ta przeglądarka nie odtwarza dźwięku. </audio> controls wyświetlanie panelu sterowania odtwarzaniem, autoplay automatyczne odtwarzanie od razy, gdy to możliwe, MSIE Opera Chrome loop powtarzanie odtwarzania. preload wskazówka dla przeglądarki: jak postępować z dźwiękiem w trakcie ładowania strony: auto ładowanie pliku w trakcie ładowania strony; metadata ładowanie metadanych w trakcie ładowania strony; none plik nie powinien być ładowany w trakcie ładowania strony. Dla autoplay = true atrybut preload jest ignorowany. 59
Nowe znaczniki semantyczne audio + source <audio controls> <source src="traktor.mp3" type="audio/mpeg" /> <source src="traktor.ogg" type="audio/ogg" /> Ta przeglądarka nie odtwarza dźwięku. </audio> Nieobowiązkowe Zaleca się stosowanie znacznika <source> dla <audio> and <video> pozwala to na określanie alternatywnych plików źródłowych dla multimediów, przeglądarka może wybrać określony typ np. w zależności od wykorzystywanych kodeków. type określa typ MIME dla pliku (dla audio zwykle: audio/ogg, audio/mpeg). Znaczenie atrybutu src jest oczywiste, kolejny atrybut media nie jest aktualnie obsługiwany w żadnej ze znanych przeglądarek. <source src="movie.ogg" type="video/ogg" media="screen and (min-width:320px)"> 60
Znacznik audio + source versus audio scr <audio controls> <source src="cos.mp3" type="audio/mpeg" /> Ta przeglądarka nie odtwarza dźwięku. </audio> <audio src="cos.mp3" controls > Ta przeglądarka nie odtwarza dźwięku. </audio> Dynamiczna modyfikacja elementu source i jego atrybutów po wstawieniu go do elementu audio (video również) nie przynosi oczekiwanych rezultatów. Zaleca się stosowanie atrybutu src lub wykorzystania funkcji load(). 61
Nowe znaczniki semantyczne sterowanie elementem audio function playsound() var audioitem = document.getelementbyid( if( audioitem ) audioitem.play(); function pausesound() var audioitem = document.getelementbyid( if( audioitem ) audioitem.pause(); "player" ); "player" ); <body> <audio id="player"> <source id= "playersrc" src="traktor.mp3" type="audio/mpeg" /> Ta przeglądarka nie odtwarza dźwięku. </audio> <input type="button" value="odtwórz" onclick="playsound()" /> <input type="button" value="zatrzymaj" onclick="pausesound()" /> </body> 62
Na marginesie rożne odwołania do elementów function playsound() var audioitem = document.getelementbyid( "player" ); if( audioitem ) audioitem.play(); function playsound() document.getelementbyid( "player" ).play(); 63
Pokazywanie/ukrywanie panelu sterującego controls function playsound() var audioelement = document.getelementbyid( if( audioelement ) audioelement.controls = true; audioelement.play(); function togglecontrols() var audioelement = document.getelementbyid( if( audioelement ) audioelement.controls =!audioelement.controls; <body> <audio id="player" src="rock.ogg"> Ta przeglądarka nie odtwarza dźwięku. </audio> <p> <input <input <input </p> </body> "player" ); "player" ); type="button" value="odtwórz" onclick="playsound()" /> type="button" value="zatrzymaj" onclick="pausesound()" /> type="button" value="włącz/wyłącz panel" onclick="togglecontrols()" /> 64
Więcej na temat audio, przykład <body> <audio id="player" src="traktor.mp3" > Ta przeglądarka nie odtwarza dźwięku. </audio> <p id="filename"></p> <p id="duration"></p> <p id="volume"></p> <input <input <input <input <input </body> type="button" type="button" type="button" type="button" type="button" value="odtwórz" value="zatrzymaj" value="głośniej" value="ciszej" value="w kóło" onclick="playsound()" /> onclick="pausesound()" /> onclick="changevolume(0.1)" /> onclick="changevolume(-0.1)" /> onclick="setrepeat()" /> 65
Więcej na temat audio, przykład, cd... function playsound() var audioelement = document.getelementbyid( "player" ); var fileinfo = document.getelementbyid( "filename" ); var durationinfo = document.getelementbyid( "duration" ); var volumeinfo = document.getelementbyid( "volume" ); fileinfo.innerhtml = audioelement.src; durationinfo.innerhtml = audioelement.duration.tofixed( 2 ); volumeinfo.innerhtml = audioelement.volume.tofixed( 2 ); audioelement.play(); function pausesound() document.getelementbyid( "player" ).pause(); 66
Więcej na temat audio, przykład, cd... function changevolume( steep ) var audioelement = document.getelementbyid( "player" ); var volumeinfo = document.getelementbyid( "volume" ); audioelement.volume += steep; volumeinfo.innerhtml = audioelement.volume.tofixed( 2 ); function setrepeat() document.getelementbyid( "player" ).loop = true; 67
Pobieranie informacji o aktualnym czasie odtwarzanego dźwięku <body> <audio id="player" src="traktor.mp3" ontimeupdate="showcurrtime()" > Ta przeglądarka nie odtwarza dźwięku. </audio> <p id="filename"></p> <p id="duration"></p> <p id="current"></p> <p id="volume"></p> <input <input <input <input <input </body> type="button" type="button" type="button" type="button" type="button" value="odtwórz" value="zatrzymaj" value="głośniej" value="ciszej" value="w kóło" onclick="playsound()" /> onclick="pausesound()" /> onclick="changevolume(0.1)" /> onclick="changevolume(-0.1)" /> onclick="setrepeat()" /> 68
Pobieranie informacji o aktualnym czasie odtwarzanego dźwięku function showcurrtime() document.getelementbyid( "current" ).innerhtml = document.getelementbyid( "player" ).currenttime.tofixed( 2 ); <body> <audio id="player" src="traktor.mp3" ontimeupdate="showcurrtime()" > Ta przeglądarka nie odtwarza dźwięku. </audio> 69
Wykorzystanie audio i dynamicznie dodanego elementu progress var progressbar = null; function initprogressbar ( duration ) progressbar = document.createelement( 'progress' ); document.body.appendch ild( progressbar ); progressbar.value = 0; progressbar.max = duration; function playsound() volumeinfo.innerhtml = audioelement.volume.tofixed( 2 ); if( progressbar == null ) initprogressbar( audioelement.duration ); audioelement.play(); function showcurrtime() progressbar.value = document.getelementbyid( "player" ).currenttime; 70
Dynamicznie dodawany element audio i progress <body> <p>wybierz:</p> <ul> <li><a <li><a <li><a </ul> href="#" href="#" href="#" onclick="playsong( 'rock_s.ogg' )">Rock</a></li> onclick="playsong( 'jazz_s.ogg' )">Jazz</a></li> onclick="playsong( 'folk_s.ogg' )">Folk</a></li> <input type="button" value="zatrzymaj" onclick="pausesound()" /> </body> 71
Dynamicznie dodawany element audio i progress var progressbar = null; var audioelement = null; * function playsong( if( audioelement audioelement = songname ) == null ) new Audio(); document.body.appendchild( audioelement ); audioelement.addeventlistener( "timeupdate", showprogres, true ); audioelement.src = songname; if( progressbar == null ) progressbar = document.createelement( "progress" ); document.body.appendchild( progressbar ); if( progressbar.hidden ) progressbar.hidden = false; function showprogres() progressbar.max = audioelement.duration; progressbar.value = audioelement.currenttime; audioelement.play(); * function pausesound() audioelement.pause(); progressbar.hidden = true; 72
Różne sposoby tworzenia elementu audio Wykorzystanie konstruktorów: audioelement = new Audio(); audioelement.src = 'rock_s.ogg'; document.body.appendchild( audioelement ); audioelement = new Audio( 'rock_s.ogg' ); document.body.appendchild( audioelement ); Wykorzystanie funkcji createelement(): audioelement = document.createelement( 'audio' ); audioelement.src = 'rock_s.ogg'; document.body.appendchild( audioelement ); 73
Istnieje znacznie więcej możliwości programowej obsługi Do wykrywania czy odtwarzanie trwa czy też zostało wstrzymane służy właściwość paused. function audio_play_pause() var audioelement = document.getelementbyid("player"); if( audioelement.paused ) audioelement.play(); else audioelement.pause(); Jest jeszcze dużo więcej, choć oficjalnie jakby nie ma...: http://www.w3.org/wiki/html/elements/audio https://developer.mozilla.org/en/using_audio_and_video_in_firefox http://dev.opera.com/articles/view/everything-you-need-to-know-about- html5-videoand-audio/ Copyright Roman Simiński 74
Odtwarzanie sekwencji wideo element video <video src="wildlife.ogg" controls autoplay loop> Ta przeglądarka nie odtwarza wideo. </video> Większość atrybutów znanych ze znacznika audio występuje również dla znacznika video. Chrome FireFox Opera Wykorzystanie znacznika source: <video controls> <source src="wildlife.mp4" type="video/mp4" /> <source src="wildlife.ogg" type="video/ogg" /> Ta przeglądarka nie odtwarza wideo. </video> 75
Atrybut poster <video src="wildlife.ogg" controls poster="vid_poster.jpg" > Ta przeglądarka nie odtwarza wideo. </video> Gdy autoplay == false, atrybut poster pozwala określić obraz który będzie pokazywany do czasu wybrania gdy użytkownik nie naciśnie przycisku odtwarzania. Obraz ten jest również wyświetlany podczas ściągania sekwencji wideo. Gdy obraz nie zostanie określony, wykorzystywana jest pierwsza klatka filmu. 76
Atrybuty width i height <video width="200" height="150" autoplay controls poster="vid_poster.jpg"> <source src="wildlife.mp4" type="video/mp4" /> <source src="wildlife.ogg" type="video/ogg" /> Ta przeglądarka nie odtwarza wideo. </video> <video width="320" height="240" autoplay controls poster="vid_poster.jpg"> <source src="wildlife.mp4" type="video/mp4" /> <source src="wildlife.ogg" type="video/ogg" /> Ta przeglądarka nie odtwarza wideo. </video> 77
Atrybuty width i height uwagi Atrybuty height i width określają odpowiednio, liczoną w pikselach, wysokość i szerokość elementu video. Zaleca się określanie wartości opu parametrów, co pozwala przeglądarce na zarezerwowanie odpowiedniego obszaru podczas ładowania strony. Brak tych wartości powoduje często zmiany układu strony przeglądarka określi rozmiar ostateczny rozmiar obczaru dopiero po załadowaniu sekwencji wideo. Atrybuty height i width nie służą do zmiany (a w szczególności zmniejszenia wymiarów) sekwencji wideo. I tak zostanie pobrany plik w jego oryginalnej wersji, nawet jeżeli ma być wyświetlony w polu o małych wymiarach. Przeskalowanie obrazu powinno wyć wykonywane przy użyciu odpowiedniego oprogramowania przed zamieszczeniem sekwencji wideo na serwerze. Przy okazji istnieje atrybut muted, pozwalający na wyciszenie ścieżki audio w sekwencji wideo, ale nie jest aktualnie obsługiwany przez żadną z przeglądarek. 78
300 Atrybuty width i height uwagi, cd.... Jeżeli ustawione wartości atrybutów width i height nie pasują do proporcji obrazu wideo, obraz ten nie jest dopasowywany do ustalonych wymiarow. Obraz wideo zachowuje swoje proporcje i jest maksymalizowany w obszarze elementu video. Wymiary podaje się w pikselach bez podawania jednostki, inne jednostki mogą być używane z wykorzystaniem mechanizmu stylów CSS. 200 <video src="wildlife.ogg" height="300" width="100" controls> Ta przeglądarka nie odtwarza wideo. </video> 79
Ładowanie sekwencji wideo i atrybut preload Przeglądarki bardzo swobodnie podchodzą do sprawy ładowania sekwencji wideo. Opera, Chrome i Safari automatycznie pobierają sekwencję wideo nawet gdy nie jest automatycznie odtwarzana. FireFox pobiera tyle, by określić pierwszą ramkę i czas trwania, być może aktualnie Opera czyni podobnie. Zastosowanie autoplay powoduje, że wideo jest ładowane tak szybko, jak to możliwe. Atrybut preload niekoniecznie jest dobrze interpretowany przez przeglądarki. 80
Pobieranie informacji na temat rozmiarów obrazu wideo Atrybuty videowidth i videoheight pozwalają na pobranie wewnętrznych rozmiarów sekwencji wideo. <script> function showinfo() var player = document.getelementbyid("player"); var info = document.getelementbyid("info"); info.innerhtml = player.videowidth + "x" + player.videoheight; </script> <video id="player" src = 'wildlife.ogg' width="150" height="100" controls> Ta przeglądarka nie odtwarza wideo. </video> <input type="button" value="pokaż info" onclick="showinfo()" /> <p id="info"></p> 81
Wykrywanie informacji o obsłudze formatów Nawet gdy element video jest obsługiwany, może się zdażyć że nie są obslugiwane konkretne kodeki. Dla elementu video istnieje metoda canplaytype() pozwalająca na wykrywanie obsługiwanych formatów. W przypadku gdy dany format nie jest obsługiwany, generowane jest zdarzenie informujące o błędzie można zdefiniować obsługę tego zdarzenia. MSIE FireFox 82
Metod canplaytype() function showsupport() var player = document.getelementbyid("player"); var info = document.getelementbyid("info"); var str; str = "video/ogg: " + player.canplaytype('video/ogg') + "<br \/>"; str += "video/mp4: " + player.canplaytype('video/mp4') + "<br \/>"; info.innerhtml = str; <video id="player" src = 'wildlife.ogg' width="150" height="100" controls> Ta przeglądarka nie odtwarza wideo. </video> <input type="button" value="pokaż info" onclick="showsupport()" /> <p id="info"></p> MSIE Chrome FireFox 83
Metod canplaytype() function showsupport() var player = document.getelementbyid("player"); var info = document.getelementbyid("info"); var str; str = "video/ogg: " + player.canplaytype('video/ogg') + "<br \/>"; str += "video/ogg codecs=theora, vorbis: " + "<br info.innerhtml + player.canplaytype('video/ogg; codecs="theora, vorbis"') \/>"; = str; <video id="player" src = 'wildlife.ogg' width="150" height="100" controls> Ta przeglądarka nie odtwarza wideo. </video> <input type="button" value="pokaż info" onclick="showsupport()" /> <p id="info"></p> 84
Pobieranie informacji o odtwarzanej sekwencji function setduration() var duration = document.getelementbyid("player").duration; document.getelementbyid("durinfo").innerhtml = "Całość: " + duration.tofixed(2); document.getelementbyid("bar").max = duration; function showinfo() var player var info var bar = document.getelementbyid("player"); = document.getelementbyid("currinfo"); = document.getelementbyid("bar"); info.innerhtml = "Aktualnie: " + player.currenttime.tofixed(2); bar.value = player.currenttime; <video id="player" src = "wildlife.ogg" controls ontimeupdate="showinfo()" ondurationchange="setduration()"> Ta przeglądarka nie odtwarza wideo. </video> <p id="durinfo"></p> <p id="currinfo"></p> <input id="bar" type="range" step="any"> 85
Sterowanie odtwarzaną sekwencją ustawianie currenttime function rewindvideo() var player = document.getelementbyid("player"); var bar = document.getelementbyid("bar"); player.currenttime = bar.value; <video id="player" src = "wildlife.ogg" controls ontimeupdate="showinfo()" ondurationchange="setduration()"> Ta przeglądarka nie odtwarza wideo. </video> <p id="durinfo"></p> <p id="currinfo"></p> <input id="bar" type="range" step="any" onchange="rewindvideo()"> 86