Technologie internetowe w programowaniu
|
|
|
- Seweryna Olejniczak
- 7 lat temu
- Przeglądów:
Transkrypt
1 Technologie internetowe w programowaniu Tomasz Xięski Roman Simiński DOM Document Object Model Audio i Video w HTML5
2 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
3 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
4 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
5 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
6 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
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> html Korzeń dokumentu head body title h1 p Liście 7
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> Pierwszy potomek html html Drugi potomek html head body title h1 p 8
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> Rodzic head html Rodzic body head body title h1 p 9
10 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
11 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
12 Elementy dokumentu HTML <p>document Object Model</p> p Element Document Object Model Zawartość elementu 12
13 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
14 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
15 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
16 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
17 Obiekt window i document właściwości i metody Obiekt window dokładny opis właściwości i metod dostępny np.: Obiekt document dokładny opis właściwości i metod dostępny np.: 17
18 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
19 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
20 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
21 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
22 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
23 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
24 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
25 Iteracja po hiperłączach dokumentu <body> <h2>moje ulubione strony</h2> <a href=" języku C++</a><br /> <a href=" kompilatorze GCC</a><br /> <a href=" ś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
26 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
27 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
28 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
29 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
30 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
31 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
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> Pobranie referencji do paragrafu prezentacji wyników 32
33 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
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" ); 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
35 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
36 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
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 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
38 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
39 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
40 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
41 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
42 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
43 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
44 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
45 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
46 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
47 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
48 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
49 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
50 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
51 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
52 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
53 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
54 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
55 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
56 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
57 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
58 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
59 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
60 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
61 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
62 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
63 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
64 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
65 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
66 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
67 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
68 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
69 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
70 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
71 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
72 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
73 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
74 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...: html5-videoand-audio/ Copyright Roman Simiński 74
75 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
76 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
77 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
78 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
79 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
80 Ł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
81 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
82 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
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/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
84 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
85 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
86 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
Aplikacje internetowe
Aplikacje internetowe Podstawy programowania w języku JavaScript Roman Simiński roman.siminski@us.edu.pl www.siminskionline.pl Elementy multimedialne Nowe znaczniki semantyczne audio
Podstawy programowania w języku JavaScript
Podstawy programowania w języku JavaScript Część trzecia DOM Document Object Model Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści
Aplikacje internetowe
Aplikacje internetowe HTML 5 Wprowadzenie Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.siminskionline.pl Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi
Aplikacje internetowe
Aplikacje internetowe Podstawy programowania w języku JavaScript Roman Simiński roman.siminski@us.edu.pl www.siminskionline.pl Tworzenie prostych programów w środowisku przeglądarki W jaki sposób umieszczany
Audio i Video w HTML5
Audio i Video w HTML5 http://www.asdala.de/netz/html/video.html Kiedyś
Rys.2.1. Drzewo modelu DOM [1]
![Rys.2.1. Drzewo modelu DOM [1]](/thumbs/39/18108975.jpg "Rys.2.1. Drzewo modelu DOM [1]")
1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA 2.1. DOM model
Wykład 03 JavaScript. Michał Drabik
Wykład 03 JavaScript Michał Drabik Język programowania wykorzystywany na stronach internetowych głównie w celu umożliwienia interakcji z użytkownikiem. Kod JavaScript może być umieszczany w kodzie XHTML
Podstawy programowania w języku JavaScript
Podstawy programowania w języku JavaScript Część trzecia Funkcje i programowanie sterowane zdarzeniami Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie
Multimedia i interfejsy. Ćwiczenie 5 HTML5
Multimedia i interfejsy Ćwiczenie 5 HTML5 Celem ćwiczenia jest poznanie nowych elementów wprowadzonych w HTML 5, do których należą m.in. video oraz canvas. Poniższy opis przedstawia sposób użycia tych
XML extensible Markup Language. część 5
XML extensible Markup Language część 5 JavaScript Co to jest JavaScript? JavaScript był zaprojektowany w celu dodania interaktywności do stron HTML JavaScript jest językiem skryptowym JavaScript jest zwykle
Podstawy JavaScript ćwiczenia Kontekst: Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek.
Obiektowy model przeglądarki (BOM, Browser Object Model) Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek. Plik
Zajęcia 4 - Wprowadzenie do Javascript
Zajęcia 4 - Wprowadzenie do Javascript Co to jest Javascript Javascript jest językiem skryptowym pozwalającym na dołączanie dodatkowej funkcjonalności do stron WWW. Jest ona najczęściej związana z modyfikacją
Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty
Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language
Zdarzenia Zdarzenia onload i onunload
Zdarzenia Zdarzenia onload i onunload Ćwiczenie 1. Rysunek 1. Okno powitalne wykorzystujące zdarzenie onload Na stronie mogą zachodzić różne zdarzenia, np. użytkownik kliknie myszą lub zacznie wprowadzać
Podstawy programowania w języku JavaScript
Podstawy programowania w języku JavaScript Część piąta AJAX Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.siminskionline.pl Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych
JavaScript - wykład 4. Zdarzenia i formularze. Obsługa zdarzeń. Zdarzenia. Mysz. Logiczne. Klawiatura. Beata Pańczyk
Obsługa zdarzeń JavaScript - wykład 4 Zdarzenia i formularze Beata Pańczyk zdarzenia - wszystko co zachodzi w związku z obiektami JavaScript (np. window) i elementami XHTML przeglądarka moŝe wywołać funkcję
Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37
Spis treści Wstęp 13 CZĘŚĆ I JĘZYK SIECI 17 Rozdział 1 Wprowadzenie do HTML5 19 Tworzenie przy pomocy znaczników: przegląd 20.Wprowadzanie nowych elementów HTML5 21 Korzystanie z kontynuowanych znaczników
XML extensible Markup Language. część 5
XML extensible Markup Language część 5 XML ważne zastosowanie Jak często pracujemy z plikami XML? Wróćmy jeszcze do wykładu poprzedniego. A dokładnie do pliku zawierającego ten wykład. xml_2017_wyklad_4.pptx
HTML5 Nowe znaczniki header nav article section aside footer
Specyfikacja HTML5 wprowadza nowe znaczniki pozwalające w łatwy i intuicyjny sposób budować szkielet strony, który przez zmniejszenie ilości kodu jest czytelniejszy i łatwiejszy w utrzymaniu, pozwala poza
FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.
1 FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.
Aplikacje WWW - laboratorium
Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza na stronie WWW z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed
Funkcje i instrukcje języka JavaScript
Funkcje i instrukcje języka JavaScript 1. Cele lekcji a) Wiadomości Uczeń : zna operatory i typy danych języka JavaScript, zna konstrukcję definicji funkcji, zna pętlę If i For, Do i While oraz podaje
DOM (Document Object Model)
DOM (Document Object Model) Czym jest DOM? Platforma, która pozwala skryptom na dynamiczny dostęp do zawartości strony i jej aktualizację. Elementy można dodawać, zmieniać lub usuwać. Specyfikacje Poziomy
Aplikacje WWW - laboratorium
Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza HTML z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed wysłaniem
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 6 JavaScript w przeglądarce Agenda Skrypty na stronie internetowej Model DOM AJAX Skrypty na stronie
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 3 Formularze Agenda Podstawy formularzy HTML Podstawowe kontrolki formularzy HTML Nowe kontrolki z HTML
Zaawansowane aplikacje internetowe
Zaawansowane aplikacje internetowe AJAX 1 Celem tego laboratorium jest pokazanie moŝliwości technologii AJAX. W ramach ćwiczeń zostanie zbudowana prosta aplikacja, przechwytująca kliknięcia uŝytkownika
JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.
IŚ ćw.8 JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt JavaScript
Dokumentacja Skryptu Mapy ver.1.1
Dokumentacja Skryptu Mapy ver.1.1 2 Dokumentacja Skryptu Mapy ver.1.1 Spis treści Dokumentacja skryptu... 3 Dodatkowe informacje i kontakt... 7 3 Dokumentacja Skryptu Mapy ver.1.1 Dokumentacja skryptu
HTML DOM, XHTML cel, charakterystyka
HTML DOM, XHTML cel, charakterystyka Mariusz Kacała Łukasz Przywarty Grzegorz Trawiński HTML DOM XHTML Ramowy plan prezentacji Wstęp HTML DOM - Założenia - Model i struktura - Właściwości - Metody i zastosowania
Formularze HTML. dr Radosław Matusik. radmat
www.math.uni.lodz.pl/ radmat Ramy formularza: Grupowanie pól formularza
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Aplikacje internetowe Koncepcja Architektura Technologie
Aplikacje internetowe Koncepcja Architektura Technologie Roman Simiński roman.siminski@us.edu.pl www.siminskionline.pl HTML5 wprowadzenie Rozwój środowiska WWW Trochę faktów historycznych Copyright Roman
Multimedia w HTML5. Statyczne witryny internetowe 2TI/TOR. Marek Kwiatkowski
Multimedia w HTML5 Statyczne witryny internetowe 2TI/TOR Marek Kwiatkowski Cele lekcji: Poznanie zasady umieszczania plików multimedialnych w HTML5 Zrozumienie istoty stosowania nowych znaczników w HTML5
SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania. Wykład 2. dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania,
SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Wykład 2 1 SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Przekierowania 2 Przekierowanie za pomocą skryptu Przykład
JAVAScript w dokumentach HTML (2)
Informatyka ćw.6 JAVAScript w dokumentach HTML (2) Interakcyjne wprowadzanie danych Jednym ze sposobów jest stosowanie metody prompt dla wbudowanego obiektu window: zmienna= prompt("tekst zachęty, np.
Tworzenie Stron Internetowych. odcinek 10
Tworzenie Stron Internetowych odcinek 10 JavaScript JavaScript (ECMAScript) skryptowy język programowania powszechnie używany w Internecie. Skrypty JS dodają do stron www interaktywność i funkcjonalności,
Wprowadzenie. 1. Terminal WebRTC. LABORATORIUM 5: WebRTC komunikacja między terminalami.
LABORATORIUM 5: WebRTC komunikacja między terminalami. Wprowadzenie Technika WebRTC (złożenie angielskiego słowa Web oraz akronimu RTC, pochodzącego od angielskiego Real-Time Communications, komunikacja
Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript.
Instrukcja laboratoryjna do ćwiczenia: 1. Cel ćwiczenia Strona internetowa w systemach unix-owych Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania
Programowanie Multimediów. Programowanie Multimediów JAVA. wprowadzenie do programowania (3/3) [1]
![Programowanie Multimediów. Programowanie Multimediów JAVA. wprowadzenie do programowania (3/3) [1]](/thumbs/63/50009339.jpg "Programowanie Multimediów. Programowanie Multimediów JAVA. wprowadzenie do programowania (3/3) [1]")
JAVA wprowadzenie do programowania (3/3) [1] Czym jest aplikacja Java Web Start? Aplikacje JAWS są formą pośrednią pomiędzy apletami a aplikacjami Javy. Nie wymagają do pracy przeglądarki WWW, jednak mogą
JAVAScript tablice, przekazanie danych do funkcji, obiekty Date i window
Programowanie obiektowe ćw.2 JAVAScript tablice, przekazanie danych do funkcji, obiekty Date i window Tablice w JavaScript Przykład zastosowania tablicy dla przekazania rezultatów funkcji do miejsca wywołania
Tablica zawierająca odniesienia do znajdujących się w dokumencie obiektów typu Anchor.
Obiekt document służy do reprezentacji wczytanego do przeglądarki dokumentu HTML oraz zawiera szereg właściwości i metod pozwalających na jego modyfikację. Poprzez ten obiekt można otrzymać dostęp praktycznie
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop. 2017 Spis treści O autorach 11 Wprowadzenie 13 CZĘŚĆ I ROZPOCZĘCIE PRACY Lekcja 1. Co oznacza publikowanie treści w sieci
Przetwarzanie dokumentów XML i zaawansowane techniki WWW Zdarzenia w JavaScript (Zajęcia r.)
Przetwarzanie dokumentów XML i zaawansowane techniki WWW Zdarzenia w JavaScript (Zajęcia 08 25.04.2016 r.) 1) Zdarzenia w JavaScript Zdarzenia są sygnałami generowanymi w chwili wykonywania ściśle określonych
Test przykładowy 2 PAI WSB Wrocław /06/2018
Imię i Nazwisko: Student ID: Part 1: (Prawda lub Fałsz (T lub F)) 15. Która z poniższych deklaracji funkcji jest nieprawidłowa: A. function Sum(a, b, c){; B. function Sum(var a, var b); C. function Sum(a){;
Laboratorium Wstawianie skryptu na stroną: 2. Komentarze: 3. Deklaracja zmiennych
1. Wstawianie skryptu na stroną: Laboratorium 1 Do umieszczenia skryptów na stronie służy znacznik: //dla HTML5 ...instrukcje skryptu //dla HTML4 ...instrukcje
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 3 Struktura semantyczna i formularze mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Design stackoverflow.com Design coursesweb.net Design accessibleculture.org
Krótki kurs JavaScript
Krótki kurs JavaScript Java Script jest językiem wbudowanym w przeglądarkę. Gdy ma się podstawy nabyte w innych językach programowania jest dość łatwy do opanowania. JavaScript jest stosowany do powiększania
Czym jest AJAX. AJAX wprowadzenie. Obiekt XMLHttpRequest (XHR) Niezbędne narzędzia. Standardowy XHR. XHR z obsługą baz danych
Czym jest AJAX AJAX wprowadzenie Beata Pańczyk na podstawie: 1. Lis Marcin, Ajax, Helion, 2007 2. Hadlock Kris, Ajax dla twórców aplikacji internetowych, Helion, 2007 AJAX (Asynchronous JavaScript and
Bazy Danych i Usługi Sieciowe
Bazy Danych i Usługi Sieciowe Język PHP Paweł Witkowski Wydział Matematyki, Informatyki i Mechaniki Jesień 2011 P. Witkowski (Wydział Matematyki, Informatyki i Mechaniki) BDiUS w. VIII Jesień 2011 1 /
WYKŁAD 3 XML DOM XML DOCUMENT OBJECT MODEL CZĘŚĆ 1
WYKŁAD 3 XML DOM XML DOCUMENT OBJECT MODEL CZĘŚĆ 1 XML DOM (ang. XML Document Object Model Obiektowy Model Dokumentu XML) Inaczej drzewo DOM to hierarchiczny, obiektowy model dokumentu XML. DOM to platforma
Zaawansowane aplikacje internetowe - laboratorium
Zaawansowane aplikacje internetowe - laboratorium Web Services (część 3). Do wykonania ćwiczeń potrzebne jest zintegrowane środowisko programistyczne Microsoft Visual Studio 2005. Ponadto wymagany jest
FORMULARZE. G. Przęczek
FORMULARZE G. Przęczek Tworzenie formularzy w HTML Podstawowe ramy formularza wyznacza znacznik który ma szereg atrybutów, które określają jego działanie. Pierwszym atrybutem jest action,
Ilość cyfr liczby naturalnej
Ilość cyfr liczby naturalnej Użytkownik wprowadza liczbę naturalną n. Podaj algorytm znajdowania ilości cyfr liczby n. (Np.: po wprowadzeniu liczby 2453, jako wynik powinna zostać podana liczba 4). Specyfikacja
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE 1. TABELE 1.1. Definicja tabeli Definicja tabeli musi być umieszczona między znacznikami. W ich ramach umieszczane są definicje rzędów
LIVE Gra w życie. LIVE w JavaScript krok po kroku. ANIMACJA Rozpoczynamy od podstawowego schematu stosowanego w animacji
LIVE Gra w życie Live jest jednym z pierwszych i najbardziej znanych tzw. automatów komórkowych. Został wymyślony w 1970 roku przez brytyjskiego matematyka Johna Conwaya. Co to takiego automat komórkowy?
WYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1
WYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1 DEFINICJA JAVASCRIPT (oficjalna nazwa ECMA-262, ECMAScript 6 czerwiec 2015r.) Skryptowy język programowania, którego celem jest dodanie dynamiki do możliwości HTML'a.
Osadzenie pliku dźwiękowego na stronie www
Osadzenie pliku dźwiękowego na stronie www gdzie jako "ścieżka dostępu do pliku" należy podać lokalizację
TECHNOLOGIE SIECI WEB
TECHNOLOGIE SIECI WEB Prowadzący: dr inż. Jan Prokop, e-mail: jprokop@prz.edu.pl, Politechnika Rzeszowska, Wydział Elektrotechniki i Informatyki LABORATORIUM ĆWICZENIE nr 8 Temat: Podstawy technologii
CZYM JEST JAVASCRIPT?
JAVASCRIPT JAVASCRIPT - CECHY Język skryptowy stosowany w sieci WWW Stosowany przez autorów witryn WWW głównie w celu: poprawy wyglądu stron walidacji danych z formularzy wykrywania typu przeglądarki tworzenia
SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania. Wykład 3. dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania,
SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Wykład 3 1 SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Przykład Bingo 2 Treść przykładu Jak wygląda karta do
Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.
Prezentacja Danych i Multimedia II r Socjologia Ćwiczenia laboratoryjne nr 8 Podstawy języka XML. Celem ćwiczeń jest poznanie zasad tworzenia dokumentów w oparciu o język XML oraz metod modyfikacji ich
TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty
1. Co to jest funkcja? Funkcja jest oddzielnym blokiem kodu, który może być wielokrotnie wykonywany w danym programie, poprzez jej wielokrotne wywoływanie. Do funkcji przekazujemy przeważnie jakieś argumenty,
Specyfikacja techniczna dot. mailingów HTML
Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej
URL: http://www.ecdl.pl
Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo
JAVAScript w dokumentach HTML - przypomnienie
Programowanie obiektowe ćw.1 JAVAScript w dokumentach HTML - przypomnienie JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w
Rys.2.1. Trzy warstwy stanowiące podstawę popularnego podejścia w zakresie budowy stron internetowych [2]
![Rys.2.1. Trzy warstwy stanowiące podstawę popularnego podejścia w zakresie budowy stron internetowych [2]](/thumbs/39/19385278.jpg "Rys.2.1. Trzy warstwy stanowiące podstawę popularnego podejścia w zakresie budowy stron internetowych [2]")
1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA JavaScript tak
Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl
ootstrap 1/15 Bootstrap Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 11 kwietnia 2015 Bootstrap 2/15
Dodanie nowej formy do projektu polega na:
7 Tworzenie formy Forma jest podstawowym elementem dla tworzenia interfejsu użytkownika aplikacji systemu Windows. Umożliwia uruchomienie aplikacji, oraz komunikację z użytkownikiem aplikacji. W trakcie
Tworzenie stron internetowych RAMKI
Tworzenie stron internetowych RAMKI RAMKI Ramka to zdefiniowana część okna przeglądarki, której to części przypisano właściwości takie jak całemu oknu. ramka może być przewijana niezależnie od pozostałej
Udostępnianie obrazu z kamer Sanyo HD na stronach WWW PORADNIK
PORADNIK Udostępnianie obrazu z kamer Sanyo HD na stronach WWW 1. Informacje wstępne Istnieje kilka sposobów wyświetlenia płynnego obrazu w formacie H.264 z kamer Sanyo z serii HD na dostępnych publicznie
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL III TI 4 godziny tygodniowo (4x30 tygodni =120 godzin ),
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH KL III TI 4 godziny tygodniowo (4x30 tygodni =120 godzin ), Program 351203 Opracowanie: Grzegorz Majda Tematyka zajęć 1. Wprowadzenie do aplikacji internetowych
Umieszczanie kodu. kod skryptu
PHP Definicja PHP jest językiem skryptowym służącym do rozszerzania możliwości stron internetowych. Jego składnia jest bardzo podobna do popularnych języków programowania C/C++, lecz jest bardzo uproszczona
Cw.12 JAVAScript w dokumentach HTML
Cw.12 JAVAScript w dokumentach HTML Wstawienie skryptu do dokumentu HTML JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.skrypty Java- Script mogą być zagnieżdżane
Specyfikacja techniczna formatów reklamowych w serwisach internetowych Wydawnictwa Te-Jot.
Specyfikacja techniczna formatów reklamowych w serwisach internetowych Wydawnictwa Te-Jot. Statystyki. Technologię mierzącą dostarcza Smart AdServer. Dopuszczalna różnica adserwerowa dla statystyk odsłon
Materiały do laboratorium MS ACCESS BASIC
Materiały do laboratorium MS ACCESS BASIC Opracowała: Katarzyna Harężlak Access Basic jest językiem programowania wykorzystywanym w celu powiązania obiektów aplikacji w jeden spójny system. PROCEDURY I
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 7 jquery Agenda Czym jest jquery? Podstawowe zasady jquery Selektory jquery Model DOM i jquery Zdarzenia
Natywne audio WPROWADZENIE
Natywne audio WPROWADZENIE Masz już do czynienia z osadzoną treścią, która jest importowana lub umieszczana na stronie internetowej - prawie codziennie. Pomyśl o elemencie img. Wstawia zawartość, obraz,
Systemy internetowe. Wykład 3 PHP. West Pomeranian University of Technology, Szczecin; Faculty of Computer Science
Systemy internetowe Wykład 3 PHP PHP - cechy PHP (Hypertext Preprocessor) bardzo łatwy do opanowania, prosta składnia, obsługuje wymianę danych z różnymi systemami baz danych pozwala na dynamiczne generowanie
Dokumentacja imapliteapi
Dokumentacja imapliteapi Urząd Marszałkowski Województwa Małopolskiego 30.06.2014 Spis treści: 1. Wprowadzenie... 3 2. Sposób użycia biblioteki imapliteapi... 3 3. Metody API... 5 4. Lista gotowych kompozycji
Formularze w PHP dla początkujących
Instrukcja numer 07 Formularze w PHP dla początkujących Zaawansowane techniki tworzenie stron WWW Bazy danych w PHP dla początkujących Formularze stworzone w HTML mogą służyć jako metoda pobierania informacji
Programowanie obiektowe. Wykład 4
Programowanie obiektowe Wykład 4 Tworzenie własnych obiektów Słowo kluczowe this W JavaScriptmożna tworzyć własne obiekty. Wykorzystuje się tu zapis utworzonej funkcji o nazwie takiej samej jak klasa,
SSK - Techniki Internetowe
SSK - Techniki Internetowe Ćwiczenie 2. Obsługa formularzy. Operatory, instrukcje warunkowe oraz instrukcje pętli w PHP. Obsługa formularzy Skryptu PHP moŝna uŝyć do obsługi formularza HTML. Aby tego dokonać,
Wybrane działy Informatyki Stosowanej
Wybrane działy Informatyki Stosowanej Aplikacje WWW. Statyczne oraz dynamiczne strony WWW. Skrypty po stronie klienta. Dr inż. Andrzej Czerepicki a.czerepicki@wt.pw.edu.pl http://www2.wt.pw.edu.pl/~a.czerepicki
Instrukcja laboratoryjna cz.3
Języki programowania na platformie.net cz.2 2015/16 Instrukcja laboratoryjna cz.3 Język C++/CLI Prowadzący: Tomasz Goluch Wersja: 2.0 I. Utworzenie projektu C++/CLI z interfejsem graficznym WPF 1 Cel:
Ćwiczenie 22 Dynamiczne wczytywanie tekstu z pliku.txt
Dynamiczne wczytywanie tekstu z pliku.txt Wykonamy dwa zadania z wczytywaniem zewnętrznych plików tekstowych. W pierwszym zadaniu wczytamy jeden plik tekstowy. W drugim podejściu za pomocą przycisków będziemy
1. Logowanie się do panelu Adminitracyjnego
Spis treści 1. Logowanie się do panelu Adminitracyjnego...1 2. Tworzenie i zarządzenie kategoriami...4 2.1 Nawigowanie po drzewie kategorii...5 2.2 Tworzenie kategorii...6 2.3 Usuwanie kategorii...9 3.
Przykład integracji kalkulatora mbank RATY na platformie IAI
Przykład integracji kalkulatora mbank RATY na platformie IAI 1. Moderacja - > Dodatki HTML i JavaScript 1.1 Klikamy na przycisk nowy dodatek Wpisujemy w pole Tytuł dodatku nazwę CSS_mRaty. Następnie ustawiamy
Komponent Formularz. Rys. 1. Strona programu Joomla - http://joomla.pl. Rys. 2. Instalacja komponentu
Komponent Formularz Instalacja Aby wykorzystać gotowy komponent do tworzenia formularzy w systemie CMS (Joomla), naleŝy uprzednio zaimplementować go, postępując według poniŝszego schematu: 1. Wejść na
Podstawowe kontrolki graficzne. Obsługa plików poprzez kontrolki
Podstawowe kontrolki graficzne Obsługa plików poprzez kontrolki Komponent OpenFileDialog Komponent służący do otwierania dowolnych plików. Użytkownik programu wybiera jaki plik, chce odczytać Można nałożyć
Część II Wyświetlanie obrazów
Tło fragmentu ABA-X Display jest wyposażony w mechanizm automatycznego tworzenia tła fragmentu. Najprościej można to wykonać za pomocą skryptu tlo.sh: Składnia: tlo.sh numer oznacza numer
Ćwiczenie 8. Kontrolki serwerowe
Ćwiczenie 8 Temat: Kontrolki serwerowe ASP.NET cz.2 Cel ćwiczenia: W ramach tego ćwiczenie student zapozna się z kolejnymi kontrolkami serwerowymi oraz z metodami ich walidacji, a także z kontrolkami umożliwiającymi
Obiektowe bazy danych
Obiektowe bazy danych Wykład 7 Paweł Gmys Interfejs uŝytkownika C++ JAVA PERL PHP 2006-05-14 Paweł Gmys wykład 8 2 Czym są skrypty PHP? Programy umieszczane w treści stron WWW. Wykonywane przez serwer
Tworzenie Stron Internetowych. odcinek 5
Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja
Programowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ
APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ PLAN PREZENTACJI Wprowadzenie do HTML Struktura dokumentu HTML Komentarze Znaczniki Nagłówki (tytuły) Akapit Znacznik końca wiersza Linia pozioma
JAVASCRIPT (cz. IV) ĆWICZENIA DO SAMODZIELNEGO WYKONANIA materiały dydaktyczne dla słuchaczy opracowanie: 2004-2007 by Arkadiusz Gawełek, Łódź
JAVASCRIPT (cz. IV) ĆWICZENIA DO SAMODZIELNEGO WYKONANIA Ćwiczenie 1 obliczanie daty Wielkanocy Napisz skrypt, który: poprosi użytkownika o podanie roku z przedziału 1900..2099 sprawdzi, czy podana wartość
E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści
E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, 2014 Spis treści Przewodnik po podręczniku 8 Wstęp 10 1. Hipertekstowe języki znaczników 1.1. Elementy i znaczniki