Podstawy programowania w języku JavaScript
|
|
|
- Błażej Wróblewski
- 8 lat temu
- Przeglądów:
Transkrypt
1 Podstawy programowania w języku JavaScript Część trzecia DOM Document Object Model Autor Roman Simiński Kontakt roman.siminski@us.edu.pl Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi uważnego w nim uczestnictwa. Opracowanie to jest chronione prawem autorskim. Wykorzystywanie jakiegokolwiek fragmentu w celach innych niż nauka własna jest nielegalne. Dystrybuowanie tego opracowania lub jakiejkolwiek jego części oraz wykorzystywanie zarobkowe bez zgody autora jest zabronione.
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 Copyright Roman Simiński Strona : 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. Copyright Roman Simiński Strona : 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. Copyright Roman Simiński Strona : 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. Copyright Roman Simiński Strona : 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 Copyright Roman Simiński Strona : 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 Copyright Roman Simiński Strona : 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 Copyright Roman Simiński Strona : 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 Copyright Roman Simiński Strona : 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 Copyright Roman Simiński Strona : 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). Copyright Roman Simiński Strona : 11
12 Elementy dokumentu HTML <p>document Object Model</p> p Element Document Object Model Zawartość elementu Copyright Roman Simiński Strona : 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) Copyright Roman Simiński Strona : 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 Copyright Roman Simiński Strona : 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 Copyright Roman Simiński Strona : 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(), clearinterval(), confirm(), open() to tak naprawę metody obiektu window. 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 wszystkicj elementów strony. Formalnie, odwołanie do obiektu document powinno wyglądać tak: window.document.write( "document to wła ś ciwo ś ć obiektu window" ); Copyright Roman Simiński Strona : 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.: Copyright Roman Simiński Strona : 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ść length pozwalającą na określenia liczby elementów danego typu w bieżącym dokumencie. Copyright Roman Simiński Strona : 18
![Kolekcja images[] referencja do tablicy obiektów reprezentujących obrazy występujące na stronie (img).](/docs-images/41/6336041/images/page_18.jpg "Kolekcja links[] referencja do tablicy obiektów reprezentujących łączniki i hiperłącza występujące na stronie (a href).")
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.anchors.length + " " ); window.document.write( "Obrazki: " + window.document.images.length + " " ); window.document.write( "Formularze: " + window.document.forms.length + "" ); window.document.write( "Ł ą cza: " + window.document.links.length + "" ); Ponieważ obiekt window jest domyślny, można używać wersji skróconej: document.write( "Kotwice: " + document.anchors.length + " " ); document.write( "Obrazki: " + document.images.length + " " ); document.write( "Formularze: " + document.forms.length + "" ); document.write( "Ł ą cza: " + document.links.length + "" ); Copyright Roman Simiński Strona : 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 Copyright Roman Simiński Strona : 20
![getelementsbytagname( 'p' )[ 0 ] document.getelementsbytagname( 'p' )[ 1 ] document.](/docs-images/41/6336041/images/page_20.jpg "getelementsbytagname( 'p' )[ 2 ] liczba elementów danego znacznika w dokumencie length document.")
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" ) Copyright Roman Simiński Strona : 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 ); Copyright Roman Simiński Strona : 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 ); Copyright Roman Simiński Strona : 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 ); Copyright Roman Simiński Strona : 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 \/>"; Copyright Roman Simiński Strona : 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> Copyright Roman Simiński Strona : 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] ilość paliwa [litry] 100 [km] x [litry] spalanie = ( 100 * ilość paliwa ) / przejechany dystans Copyright Roman Simiński Strona : 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> Copyright Roman Simiński Strona : 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> Copyright Roman Simiński Strona : 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> Copyright Roman Simiński Strona : 30
31 Pobieranie informacji z elementów typu input przykład Akcja: Pobranie <html> wartości z pól wejściowych <head> próba (!) 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> Copyright Roman Simiński Strona : 31
32 Pobieranie informacji z elementów typu input przykład Akcja: Pobranie <html> referencji do paragrafu <head> prezentacji wyników <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> Copyright Roman Simiński Strona : 32
33 Pobieranie informacji z elementów typu input przykład Akcja: Zabezpieczenie przed dzieleniem <html> przez zero, obliczenia, wstawienie <head> wyniku do par. wyjściowego <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> Copyright Roman Simiński Strona : 33
34 Pobieranie informacji z elementów typu input przykład Weryfikacja danych: Pobierz dane jako łańcuchy znaków <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> Copyright Roman Simiński Strona : 34
35 Pobieranie informacji z elementów typu input przykład Weryfikacja danych: Sprawdź czy dane są liczbami <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> Copyright Roman Simiński Strona : 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> Copyright Roman Simiński Strona : 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 = ( p * 100 ) / d; out.innerhtml = "Spalanie: " + wynik.tofixed( 2 ) + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatni ą!"; </script> Copyright Roman Simiński Strona : 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 musz ą być liczbami!"; else if( d!= 0 ) var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d ); out.innerhtml = "Spalanie: " + wynik.tofixed( 2 ) + " l/100km"; else out.innerhtml = "Dystans nie mo ż e być zerowy!"; </script> Copyright Roman Simiński Strona : 38
39 Manipulowanie zawartością elementów <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> Czyszczenie elementów dokumentu dodatkowy przycisk: Copyright Roman Simiński Strona : 39
40 Manipulowanie zawartością elementów <script type="text/javascript">... function czyszczenie() document.getelementbyid( "p" ).value = ""; document.getelementbyid( "d" ).value = ""; document.getelementbyid( "w" ).innerhtml = ""; </script> Czyszczenie elementów dokumentu funkcja obsługi zdarzenia: Copyright Roman Simiński Strona : 40
41 Manipulowanie zawartością elementów function czyszczenie() document.getelementbyid( "p" ).value = ""; Czyszczenie z ustawieniem focusa i zaznaczenia na edytorze paliwa: document.getelementbyid( "d" ).value = ""; document.getelementbyid( "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. Copyright Roman Simiński Strona : 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>... Copyright Roman Simiński Strona : 42
43 Rozwojowy element koszt przejechania jednego kilometra Na razie totalny badziew szacowanie w oparciu o stałą cenę paliwa :-/... Żeby to miało sens, ta cena powinna if( isnan( p ) isnan( d ) ) dotyczyć odpowiedniego paliwa i być aktualna out.innerhtml = "Dystans i ilo ś ć paliwa musz ą być liczbami!"; else if( d!= 0 ) var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d ); var kilometr = ( wynik / 100 ) * 5.03 ; wynik = wynik.tofixed( 2 ); kilometr = kilometr.tofixed( 2 ); out.innerhtml = "Spalanie: " + wynik + " l/100km<\/br>"; out.innerhtml += "Szacunkowy koszt przejazdu 1km to: " + kilometr + "zł"; else out.innerhtml = "Dystans nie moze byc zerowy!";... Copyright Roman Simiński Strona : 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 type="radio" id="r_on" name="paliwo" value="on" />olej nap ę dowy <input type="radio" id="r_et" name="paliwo" value="et" checked="checked" />benzyna <input type="radio" id="r_lpg" name="paliwo" value="lpg" />gaz </p> <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. Copyright Roman Simiński Strona : 44
45 Rozwojowy element koszt przejechania jednego kilometra function czyszczenie() document.getelementbyid( "p" ).value = ""; document.getelementbyid( "d" ).value = ""; document.getelementbyid( "w" ).innerhtml = ""; Poprawka funkcji czyszczenia pól wprowadzania danych document.getelementbyid( "r_on" ).checked = false; document.getelementbyid( "r_et" ).checked = true; document.getelementbyid( "r_lpg" ).checked = 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): Copyright Roman Simiński Strona : 45
46 Rozwojowy element koszt przejechania jednego kilometra Poprawka funkcji obliczania średniego spalania:... Wywołanie funkcji odpowiedzialnej za if( isnan( p ) isnan( d ) ) wyznaczenie ceny właściwej dla danego paliwa out.innerhtml = "Dystans i ilo ś ć paliwa musz ą być liczbami!"; else if( d!= 0 ) var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d ); var kilometr = ( wynik / 100 ) * ustalcene() ; wynik = wynik.tofixed( 2 ); kilometr = kilometr.tofixed( 2 ); out.innerhtml = "Spalanie: " + wynik + " l/100km<\/br>"; out.innerhtml += "Szacunkowy koszt przejazdu 1km to: " + kilometr + "zł"; else out.innerhtml = "Dystans nie moze byc zerowy!";... Copyright Roman Simiński Strona : 46
47 Rozwojowy element koszt przejechania jednego kilometra Funkcja wyznaczania ceny, badziewiarskie wersje w amatorskiej odsłonie: function ustalcene() if( document.getelementbyid( "r_on" ).checked ) return 4.50; if( document.getelementbyid( "r_et" ).checked ) return 4.60; if( document.getelementbyid( "r_lpg" ).checked ) return 2.50; 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; Copyright Roman Simiński Strona : 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 type="radio" id="r_lpg" name="paliwo" value="2.50" />gaz </form> <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 Copyright Roman Simiński Strona : 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 ] Copyright Roman Simiński Strona : 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( "r_on" ).checked = false; document.getelementbyid( "r_et" ).checked = true; document.getelementbyid( "r_lpg" ).checked = false; function czyszczenie() document.getelementbyid( "p" ).value = ""; document.getelementbyid( "d" ).value = ""; document.getelementbyid( "w" ).innerhtml = ""; for( i = 0; i < document.wybieraczpaliwa.paliwo.length; ++i ) document.wybieraczpaliwa.paliwo[ i ].checked = false; document.wybieraczpaliwa.paliwo[ 1 ].checked = true; Copyright Roman Simiński Strona : 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 type="radio" id="r_lpg" name="paliwo" value="2.50" />gaz </form> <form name="wybieraczpaliwa"> <input type="radio" name="paliwo" value="4.50" />olej nap ę dowy <input type="radio" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" name="paliwo" value="2.50" />gaz </form>... Copyright Roman Simiński Strona : 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 type="radio" name="paliwo" value="4.50" />olej nap ę dowy <input type="radio" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" name="paliwo" value="2.50" />gaz </form>... Ceny paliw powinny być uzyskiwane samoczynnie od odpowiedniej usługi sieciowej, oferującej aktualne ceny paliw. Copyright Roman Simiński Strona : 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 type="checkbox" name="hobby" value="narty" />Narty <input type="checkbox" name="hobby" value="rower" />Rower<br /> <input type="checkbox" name="hobby" value="rolki" />Rolki <input type="checkbox" name="hobby" value="tenis" />Tenis<br /> <input type="button" value="wyczy ś ć" onclick=" wyczysc()"/> <input type="button" value="wszystko" onclick="wszystko()"/> <input type="button" value="potwierd ź " onclick=" potwierdzenie()"/> </form> <p id="wybor"></p> </body> Obsługa przed wysłaniem Copyright Roman Simiński Strona : 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; ++i ) if( document.wybieraczhobby.hobby[ i ].checked ) napis += document.wybieraczhobby.hobby[ i ].value + ' '; document.getelementbyid( "wybor" ).innerhtml = napis; function wyczysc() for( i = 0; i < document.wybieraczhobby.hobby.length; ++i ) document.wybieraczhobby.hobby[ i ].checked = false; document.getelementbyid( "wybor" ).innerhtml = ""; function wszystko() for( i = 0; i < document.wybieraczhobby.hobby.length; ++i ) document.wybieraczhobby.hobby[ i ].checked = true; document.getelementbyid( "wybor" ).innerhtml = ""; Copyright Roman Simiński Strona : 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 type="checkbox" name="hobby" value="narty" onclick="ustawwybor()" />Narty <input type="checkbox" name="hobby" value="rower" onclick="ustawwybor()"/>rower<br /> <input type="checkbox" name="hobby" value="rolki" onclick="ustawwybor()"/>rolki <input type="checkbox" name="hobby" value="tenis" onclick="ustawwybor()"/>tenis<br /> <input type="button" value="wyczy ś ć" onclick=" ustaw( false )"/> <input type="button" value="wszystko" onclick="ustaw( true )"/> <input type="button" value="potwierd ź " onclick=" potwierdzenie()"/> </form> <p id="wybor"></p> </body> Copyright Roman Simiński Strona : 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; ++i ) if( document.wybieraczhobby.hobby[ i ].checked ) 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; ++i ) document.wybieraczhobby.hobby[ i ].checked = natak; ustawwybor(); Copyright Roman Simiński Strona : 56
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
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
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 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
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 JavaScript ćwiczenia Kontekst: 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ą
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ę
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
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
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
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
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
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
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
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
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
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
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
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.
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.
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
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
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
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
Podstawy programowania w języku C i C++
Podstawy programowania w języku C i C++ Część czwarta Operatory i wyrażenia Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści wykładu,
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
Podstawy programowania w języku C++
Podstawy programowania w języku C++ Część siódma Przetwarzanie tablic znaków Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści wykładu,
Formularze HTML. dr Radosław Matusik. radmat
www.math.uni.lodz.pl/ radmat Ramy formularza: Grupowanie pól formularza
Podstawy programowania w języku C++
Podstawy programowania w języku C++ Część dziewiąta Tablice a zmienne wskaźnikowe Wersja skrócona, tylko C++ Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie
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
Wprowadzenie do programowanie obiektowego w języku C++
Wprowadzenie do programowanie obiektowego w języku C++ Część czwarta Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści wykładu, lektura
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
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
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
Podstawy programowania w języku C++
Podstawy programowania w języku C++ Część dziesiąta Rekordy w C/C++ struktury Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.programowanie.siminskionline.pl Niniejsze opracowanie zawiera skrót
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
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
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.
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
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
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
Programowanie w języku C++
Programowanie w języku C++ Część dziewiąta Autor Roman Simiński Kontakt siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi
Podstawy programowania
Podstawy programowania Część siódma Przetwarzanie tablic znaków Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.programowanie.siminskionline.pl Niniejsze opracowanie zawiera skrót treści wykładu,
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ść
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){;
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
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
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 /
Podstawy programowania
Podstawy programowania Część ósma Tablice znaków i przetwarzanie napisów Autor Roman Simiński Kontakt siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści wykładu, lektura
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
Języki programowania. Przetwarzanie tablic znaków. Część druga. Autorzy Tomasz Xięski Roman Simiński
Języki programowania Część druga Przetwarzanie tablic znaków Autorzy Tomasz Xięski Roman Simiński Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi uważnego w nim
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,
Wyszukiwanie największej spośród czterech liczb. Przykładowe rozwiązanie
Wyszukiwanie największej spośród czterech liczb Użytkownik podaje cztery liczby rzeczywiste. Podaj algorytm znajdowania największej spośród nich. (Np.: po wprowadzeniu liczb: 12 7 18.5 9 program powinien
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,
Technologie internetowe w programowaniu
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
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ć,
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
Programowanie w języku C++
Programowanie w języku C++ Część siódma Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi
Podstawy programowania w języku C++
Podstawy programowania w języku C++ Część trzynasta Tablice struktur, pliki struktur Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści
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
Systemy ekspertowe Część siódma Realizacja dziedzinowego systemu ekspertowego Roman Simiński
Część siódma Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Realizacja dziedzinowego systemu ekspertowego Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych
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
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,
Podstawy programowania w języku C++
Podstawy programowania w języku C++ Część dziesiąta Rekordy w C/C++ struktury Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści wykładu,
Systemy ekspertowe Część siódma Realizacja dziedzinowego systemu ekspertowego Roman Simiński
Część siódma Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Realizacja dziedzinowego systemu ekspertowego Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych
Zaawansowane bazy danych i hurtownie danych studia zaoczne II stopnia, sem. I
Wydział Informatyki Politechnika Białostocka Zaawansowane bazy danych i hurtownie danych MySQL studia zaoczne II stopnia, sem. I Plan wykładu 1. MySQL: funkcje, procedury, wyzwalacze 2. HTML : tworzenie
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?
JavaScript obiektowość
JavaScript obiektowość WWW 27 kwietnia 2017 Od funkcyjności do obiektowości Wyrażenie regularne DOM Zdarzenia Obiekty w JS Intuicja Obiekty nie maja przypisanych klas, natomiast maja przypisane konstruktory.
JAVAScript w dokumentach HTML (1)
JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript mogą być zagnieżdżane w dokumentach HTML. Instrukcje JavaScript
Laboratorium 7 Blog: dodawanie i edycja wpisów
Laboratorium 7 Blog: dodawanie i edycja wpisów Dodawanie nowych wpisów Tworzenie formularza Za obsługę formularzy odpowiada klasa Zend_Form. Dla każdego formularza w projekcie tworzymy klasę dziedziczącą
JavaScript funkcyjność
JavaScript funkcyjność WWW 9 kwietnia 2014 Możliwości tworzenia dynamicznych stron WWW HTML i CSS. Skrypty CGI (Perl, PHP). Serwery (django, java). Plug-iny. Ksiażka Większość przykładów pochodzi z ksiażki:
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
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
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
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
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,
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
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
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ć
XHTML, CSS i JavaScript. Pierwsza pomoc
. Pierwsza pomoc Autorzy: Maria Sokó³, Rados³aw Sokó³ ISBN: 978-83-246-1071-6 Format: A5, stron: 100 Pocz¹tki tworzenie szkieletu strony WWW i struktury dokumentu HTML Wygl¹d strony kodowanie znaków, krój
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
Ogólny schemat prostego formularza: A może lepiej zamiast przycisku opartego o input tak:
Ogólny schemat prostego formularza: A może lepiej zamiast przycisku opartego o input tak: accept - typy zawartości MIME akceptowane przez serwer (opcjonalny) accept-charset - zestaw znaków akceptowanych
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
Kurs HTML 4.01 TI 312[01]
![Kurs HTML 4.01 TI 312[01]](/thumbs/24/2176096.jpg "Kurs HTML 4.01 TI 312[01]")
TI 312[01] Spis treści 1. Wiadomości ogólne... 3 2. Wersje języka HTML... 3 3. Minimalna struktura dokumentu... 3 4. Deklaracje DOCTYPE... 3 5. Lista znaczników, atrybutów i zdarzeń... 4 5.1 Lista atrybutów
Laboratorium z przedmiotu Programowanie obiektowe - zestaw 04
Laboratorium z przedmiotu Programowanie obiektowe - zestaw 04 Cel zajęć. Celem zajęć jest zapoznanie się ze sposobem działania popularnych kolekcji. Wprowadzenie teoretyczne. Rozważana w ramach niniejszych
Palindromy. Przykładowe rozwiązanie
Palindromy Palindromem (z greckiego) nazywamy wyraz, który tak samo brzmi, gdy jest czytany wspak. Palindromami są na przykład takie wyrazy, jak kajak, zaraz, oko, zakaz, mam itp. Użytkownik wprowadza
Programowanie internetowe
Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML
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ą
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
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
Aplikacje internetowe laboratorium JavaScript
Celem ćwiczenia jest przygotowanie formularza HTML z wykorzystaniem języka. Formularz ten będzie sprawdzany pod względem zawartości przed wysłaniem do serwera. Formularz będzie miał charakter dynamiczny,
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
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
JavaScript. Podrêcznik tworzenia interaktywnych stron internetowych. Wydanie II
JavaScript. Podrêcznik tworzenia interaktywnych stron internetowych. Wydanie II Autor: Dave Thau T³umaczenie: Marcin Karbowski, Tomasz Walczak ISBN: 978-83-246-1079-2 Tytu³ orygina³u: The Book of JavaScript,
Instrukcja użytkownika Porównywarki cen Liquid
Instrukcja użytkownika Porównywarki cen Liquid Wersja Spis treści 1 Wstęp... 3 2 Opis obszaru... 4 Towary... 5 Relacje... 6 Edytuj... 7 2.3.1 Konfiguracja... 7 2.3.2 Kategorie... 7 2.3.3 Ustawienia...
Ć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
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